/* ═══════════════════════════════════════════════════════════════════════════
   OVERDRIVE HORIZON — Animations
   Kinetic, high-energy keyframes for cyberpunk aesthetic
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   GLOW EFFECTS
   ───────────────────────────────────────────────────────────────────────── */

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 1;
        filter: brightness(1);
    }

    50% {
        opacity: 0.8;
        filter: brightness(1.3);
    }
}

@keyframes neon-flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 1;
        text-shadow:
            0 0 10px var(--color-neon-red),
            0 0 20px var(--color-neon-red),
            0 0 40px var(--color-neon-red);
    }

    20%,
    24%,
    55% {
        opacity: 0.8;
        text-shadow: none;
    }
}

@keyframes glow-breathe {

    0%,
    100% {
        box-shadow: var(--glow-red);
    }

    50% {
        box-shadow:
            0 0 30px var(--color-neon-red-glow),
            0 0 60px var(--color-neon-red-glow),
            0 0 90px rgba(255, 0, 51, 0.4);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   TEXT ANIMATIONS
   ───────────────────────────────────────────────────────────────────────── */

@keyframes text-reveal {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

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

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

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

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

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

    100% {
        transform: translate(0);
    }
}

@keyframes letter-spacing-expand {
    from {
        letter-spacing: -0.05em;
        opacity: 0;
    }

    to {
        letter-spacing: 0.1em;
        opacity: 1;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   MOTION EFFECTS
   ───────────────────────────────────────────────────────────────────────── */

@keyframes streak-left {
    0% {
        transform: translateX(100vw);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

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

@keyframes streak-right {
    0% {
        transform: translateX(-100vw);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

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

@keyframes drift-up {
    from {
        transform: translateY(100%) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    to {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   BACKGROUND EFFECTS
   ───────────────────────────────────────────────────────────────────────── */

@keyframes horizon-burn {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

@keyframes bg-pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   PARTICLE EFFECTS
   ───────────────────────────────────────────────────────────────────────── */

@keyframes particle-float {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--dx, 100px), var(--dy, -200px)) scale(0);
        opacity: 0;
    }
}

@keyframes spark {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    50% {
        transform: scale(1);
        opacity: 0.8;
    }

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

/* ─────────────────────────────────────────────────────────────────────────
   UI ELEMENT ANIMATIONS
   ───────────────────────────────────────────────────────────────────────── */

@keyframes button-pulse {

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

    50% {
        transform: scale(1.02);
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   PROGRESS BAR
   ───────────────────────────────────────────────────────────────────────── */

@keyframes progress-glow {

    0%,
    100% {
        box-shadow: 0 0 5px var(--color-neon-red);
    }

    50% {
        box-shadow: 0 0 15px var(--color-neon-red), 0 0 25px var(--color-neon-red);
    }
}

@keyframes waveform-pulse {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.5);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   LYRIC ANIMATIONS
   ───────────────────────────────────────────────────────────────────────── */

@keyframes lyric-highlight {
    0% {
        color: var(--color-text-muted);
        transform: scale(1);
    }

    50% {
        color: var(--color-neon-red);
        transform: scale(1.05);
        text-shadow: var(--glow-red);
    }

    100% {
        color: var(--color-electric-cyan);
        transform: scale(1);
        text-shadow: none;
    }
}

@keyframes lyric-enter {
    from {
        opacity: 0.3;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   BEAT SYNC ANIMATIONS (80 BPM = 750ms)
   ───────────────────────────────────────────────────────────────────────── */

@keyframes beat-pulse {

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

    10% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.beat-sync {
    animation: beat-pulse var(--beat-duration) ease-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────────
   ANIMATION UTILITIES
   ───────────────────────────────────────────────────────────────────────── */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
        transform var(--duration-slow) var(--ease-out-expo);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.hover-glow {
    transition: box-shadow var(--duration-fast) var(--ease-out-expo);
}

.hover-glow:hover {
    box-shadow: var(--glow-red);
}

.hover-lift {
    transition: transform var(--duration-fast) var(--ease-out-expo);
}

.hover-lift:hover {
    transform: translateY(-4px);
}