/* =========================================
   ANIMATIONS & KEYFRAMES
   ========================================= */

/* --- Scroll Reveal Classes --- */
.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(10px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease-out;
}

.reveal-up.in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
}

.reveal-stagger.in-view > * {
    animation: staggerUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-stagger.in-view > *:nth-child(1) { animation-delay: 0.1s; }
.reveal-stagger.in-view > *:nth-child(2) { animation-delay: 0.2s; }
.reveal-stagger.in-view > *:nth-child(3) { animation-delay: 0.3s; }
.reveal-stagger.in-view > *:nth-child(4) { animation-delay: 0.4s; }

/* --- About Section Scroll-Linked --- */
.about-step {
    opacity: 0.2;
    transition: all 0.5s ease;
    padding-left: var(--space-md);
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.about-step.active {
    opacity: 1;
    border-left-color: var(--color-accent);
}

.about-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(0.95) translateY(40px) rotateX(-10deg);
    transform-origin: center bottom;
}

.about-image.active {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0deg);
}

/* --- Keyframe Definitions --- */
@keyframes staggerUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes rotateBeam {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dsReveal {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(40px);
        filter: blur(20px);
    }
    30%, 70% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: scale(1.05) translateY(-40px);
        filter: blur(20px);
    }
}

@keyframes dashAnim {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes faq1-fade-up {
    0% {
        transform: translate3d(0, 20px, 0);
        opacity: 0;
        filter: blur(6px);
    }
    60% { filter: blur(0); }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes faq1-beam-spin {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes faq1-pulse {
    0% { transform: scale(0.7); opacity: 0.55; }
    60% { opacity: 0.1; }
    100% { transform: scale(1.25); opacity: 0; }
}

@keyframes faq1-meter {
    0%, 20% { transform: scaleX(0); transform-origin: left; }
    45%, 60% { transform: scaleX(1); transform-origin: left; }
    80%, 100% { transform: scaleX(0); transform-origin: right; }
}

@keyframes faq1-tick {
    0%, 30% { transform: translateX(-6px); opacity: 0.4; }
    50% { transform: translateX(2px); opacity: 1; }
    100% { transform: translateX(20px); opacity: 0; }
}