/* ==========================================
   CSS/ANIMATIONS.CSS
   Keyframes & Reveal Logic
   ========================================== */

/* Glitch Effect */
.glitch { position: relative; }
.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}
.glitch::before { left: 2px; text-shadow: -2px 0 var(--bmw-m-red); clip: rect(24px, 550px, 90px, 0); animation: glitch-anim 3s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -2px 0 var(--bmw-cyan); clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; }

@keyframes glitch-anim {
    0% { clip: rect(39px, 9999px, 71px, 0); }
    20% { clip: rect(3px, 9999px, 5px, 0); }
    40% { clip: rect(81px, 9999px, 86px, 0); }
    60% { clip: rect(12px, 9999px, 98px, 0); }
    80% { clip: rect(62px, 9999px, 14px, 0); }
    100% { clip: rect(34px, 9999px, 60px, 0); }
}

/* Pulse / Blink */
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; text-shadow: 0 0 20px currentColor; } 100% { opacity: 0.6; } }

.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Scroll Reveals */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.reveal.right { transform: translateX(60px); }
.reveal.left { transform: translateX(-60px); }

.reveal.active {
    opacity: 1;
    transform: translate(0, 0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* Radar Scanner */
@keyframes scan-radar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Rain / Lines */
@keyframes laser-scan {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.laser-scan-line {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 2px;
    background: var(--bmw-cyan);
    box-shadow: 0 0 15px var(--bmw-cyan);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
}
.laser-scan-line.active {
    animation: laser-scan 3s ease-in-out infinite;
}