/* ==========================================================================
   ANIMATIONS — keyframes + scroll/entrance utility classes
   ========================================================================== */

@keyframes spin{ to{ transform:rotate(360deg); } }

@keyframes fadeInUp{
    from{ opacity:0; transform:translateY(28px); }
    to{ opacity:1; transform:translateY(0); }
}

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

@keyframes slideInLeft{
    from{ opacity:0; transform:translateX(-40px); }
    to{ opacity:1; transform:translateX(0); }
}

@keyframes slideInRight{
    from{ opacity:0; transform:translateX(40px); }
    to{ opacity:1; transform:translateX(0); }
}

@keyframes scaleIn{
    from{ opacity:0; transform:scale(.92); }
    to{ opacity:1; transform:scale(1); }
}

@keyframes floatY{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
}

@keyframes pulseRing{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
    100%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
}

@keyframes shimmer{
    0%{ background-position:-200% 0; }
    100%{ background-position:200% 0; }
}

/* Hero staggered entrance — orchestrated on page load, not scroll */
.hero-anim > *{
    opacity:0;
    animation:fadeInUp .8s var(--ease) forwards;
}
.hero-anim > *:nth-child(1){ animation-delay:.1s; }
.hero-anim > *:nth-child(2){ animation-delay:.22s; }
.hero-anim > *:nth-child(3){ animation-delay:.34s; }
.hero-anim > *:nth-child(4){ animation-delay:.46s; }
.hero-anim > *:nth-child(5){ animation-delay:.58s; }

/* Scroll-triggered reveal — toggled via IntersectionObserver in main.js */
.reveal{
    opacity:0;
    transform:translateY(32px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

.reveal-stagger > *{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.55s; }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }

.float{ animation:floatY 5s ease-in-out infinite; }

.pulse-ring{ animation:pulseRing 2.2s infinite; }

.skeleton{
    background:linear-gradient(90deg, var(--light) 25%, var(--border) 37%, var(--light) 63%);
    background-size:400% 100%;
    animation:shimmer 1.6s ease infinite;
}

@media (prefers-reduced-motion: reduce){
    .hero-anim > *,
    .reveal,
    .reveal-stagger > *{
        opacity:1 !important;
        transform:none !important;
        animation:none !important;
        transition:none !important;
    }
    .float, .pulse-ring, .skeleton{ animation:none !important; }
}