/* ================================================================
   SYNTHETIC LAB AI — animations.css
   Keyframes · AOS overrides · Hero entrance · Layer diagram
   ================================================================ */

/* ----------------------------------------------------------------
   1. PAGE BODY FADE-IN
---------------------------------------------------------------- */
@keyframes bodyFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body {
    animation: bodyFadeIn 0.5s ease forwards;
}

/* ----------------------------------------------------------------
   2. HERO ENTRANCE — staggered fadeUp
   Elements animate in sequence on page load
---------------------------------------------------------------- */
@keyframes heroFadeUp {
    from {
        opacity:   0;
        transform: translateY(28px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

@keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero h1 {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

.hero-payoff {
    animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both;
}

.hero-desc {
    animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
}

.hero-actions {
    animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.64s both;
}

.hero-right {
    animation: heroFadeIn 1.0s ease 0.30s both;
}

.hero-logo-mark {
    animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* ----------------------------------------------------------------
   3. NEURAL CANVAS — hero is now dark, bump particle opacity
   (overrides inline rgba values by boosting canvas globalAlpha
   is not possible via CSS, but we ensure the canvas blends well)
   Nothing to override here — the JS already adapts to dark bg.
   Canvas z-index stays at 0 (below hero::after vignette at z:1,
   below hero-left at z:2).
---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   3b. LAYER DIAGRAM — animated connector arrows
---------------------------------------------------------------- */
@keyframes arrowDown {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.75;
    }
    50% {
        transform: translateY(5px);
        opacity: 1;
    }
}

@keyframes arrowUp {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.75;
    }
    50% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* ----------------------------------------------------------------
   4. TRUST STRIP — number scale-in on AOS trigger
   Uses trust-item (not trust-stat) to match HTML class names
---------------------------------------------------------------- */
@keyframes numPop {
    0%   { transform: scale(0.88); opacity: 0; }
    65%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

.trust-item.aos-animate .trust-num {
    animation: numPop 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

/* ----------------------------------------------------------------
   5. FAQ ACCORDION — icon rotation
---------------------------------------------------------------- */
@keyframes rotateOpen {
    from { transform: rotate(0deg); }
    to   { transform: rotate(45deg); }
}

@keyframes rotateClose {
    from { transform: rotate(45deg); }
    to   { transform: rotate(0deg); }
}

/* ----------------------------------------------------------------
   6. AOS OVERRIDES
   Align AOS easing with Synthetic Lab's custom cubic-bezier
---------------------------------------------------------------- */
[data-aos] {
    pointer-events: none;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

[data-aos="fade-up"] {
    transform: translateY(32px);
    opacity: 0;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
    opacity: 1;
}

[data-aos="fade-in"] {
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-aos="fade-in"].aos-animate {
    opacity: 1;
}

[data-aos="fade-right"] {
    transform: translateX(-28px);
    opacity: 0;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
    opacity: 1;
}

[data-aos="fade-left"] {
    transform: translateX(28px);
    opacity: 0;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
    opacity: 1;
}

/* ----------------------------------------------------------------
   7. SECTION RED ACCENT LINE — slide in left to right
---------------------------------------------------------------- */
@keyframes labelLineGrow {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}

.section-label::before {
    animation: labelLineGrow 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* ----------------------------------------------------------------
   8. CTA BUTTON — subtle pulse to draw attention
---------------------------------------------------------------- */
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(190, 24, 24, 0); }
    50%      { box-shadow: 0 0 0 8px rgba(190, 24, 24, 0.18); }
}

.cta-final .btn-primary {
    animation: ctaPulse 2.8s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* ----------------------------------------------------------------
   9. NAV SCROLLED STATE — smooth border appear
---------------------------------------------------------------- */
@keyframes navBorderSlideIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.site-nav.scrolled {
    animation: navBorderSlideIn 0.3s ease forwards;
}

/* ----------------------------------------------------------------
   10. LAYER BLOCK — stagger within AOS-animated parent
   Only fires after .layer-diagram receives .aos-animate
---------------------------------------------------------------- */
@keyframes layerBlockIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.layer-diagram.aos-animate .layer-block {
    animation: layerBlockIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.layer-diagram.aos-animate .layer-block:nth-child(1) { animation-delay: 0.05s; }
/* connectors are nth-child 2 and 4 — skip */
.layer-diagram.aos-animate .layer-block:nth-child(3) { animation-delay: 0.18s; }
.layer-diagram.aos-animate .layer-block:nth-child(5) { animation-delay: 0.31s; }

/* ----------------------------------------------------------------
   11. REDUCE MOTION — respect accessibility preference
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .c-arrow-down,
    .c-arrow-up {
        animation: none !important;
        opacity: 0.8;
    }
}