/* ============================================
   KEYFRAME ANIMATIONS - OPTIMIZED
   ============================================ */
@import "mobile-fixes.css";

:root {
    --animation-speed: 1;
}

@media (max-width: 768px) {
    :root {
        --animation-speed: 0.7; /* 70% of normal speed */
    }
}


@keyframes matrix-scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(50px);
    }
}

/* When you apply it */
.matrix-character {
    animation: matrix-scroll calc(20s * var(--animation-speed)) linear infinite;
}

.ash-particle {
    animation: fall-down calc(15s * var(--animation-speed)) linear infinite;
}


/* Page transition animations */
@keyframes scan-sweep {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes cursor-blink {
    50% {
        border-color: transparent;
    }
}

@keyframes loading-fill {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes scan-transition {
    0% {
        left: -100%;
        top: 0;
    }

    50% {
        left: 100%;
        top: 50%;
    }

    100% {
        left: 100%;
        top: 100%;
    }
}

@keyframes scan {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

/* Pulsing glow effects - OPTIMIZED */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px currentColor;
        opacity: 0.8;
    }

    50% {
        box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
        opacity: 1;
    }
}

@keyframes pulse-glow-intense {
    0%, 100% {
        box-shadow: 0 0 10px currentColor;
        text-shadow: 0 0 10px currentColor;
    }

    50% {
        box-shadow: 0 0 30px currentColor, 0 0 40px currentColor;
        text-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

@keyframes pulse-border {
    0%, 100% {
        box-shadow: 0 0 10px var(--accent-red);
    }

    50% {
        box-shadow: 0 0 25px var(--accent-red);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 20px var(--accent-red);
    }
}

@keyframes progress-glow {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes glitch-text {
    0%, 90%, 100% {
        transform: translate(0);
    }

    92% {
        transform: translate(-2px, 2px);
    }

    94% {
        transform: translate(2px, -2px);
    }

    96% {
        transform: translate(-2px, -2px);
    }

    98% {
        transform: translate(2px, 2px);
    }
}

/* Hamburger particle animations */
@keyframes particle-explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

@keyframes particle-implode {
    0% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}

@keyframes hamburger-glitch {
    0%, 100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }

    25% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
    }

    50% {
        transform: translate(2px, -2px);
        filter: hue-rotate(180deg);
    }

    75% {
        transform: translate(-2px, -2px);
        filter: hue-rotate(270deg);
    }
}

/* Breadcrumb animations */
@keyframes breadcrumb-appear {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes breadcrumb-typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* PERFORMANCE OPTIMIZATION: Reduce animation for scrolling elements */
@media (prefers-reduced-motion: no-preference) {
    .parallax-layer,
    section,
    .hero-content {
        will-change: transform;
    }
}

/* Disable heavy animations on mobile for performance */
@media (max-width: 768px) {
    /* Remove the problematic rule completely */
    /* Ash particles are handled by JavaScript with their own optimized animations */

    @keyframes pulse-glow-intense {
        0%, 100% {
            box-shadow: 0 0 5px currentColor;
            text-shadow: 0 0 5px currentColor;
        }

        50% {
            box-shadow: 0 0 15px currentColor;
            text-shadow: 0 0 10px currentColor;
        }
    }
}