/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS
   Driven by Intersection Observer in main.js
   ============================================================ */

/* Base state: hidden */
.anim-fade-up,
.anim-fade-in,
.anim-fade-left,
.anim-fade-right {
    opacity: 0;
    transition:
        opacity 0.7s var(--ease-out),
        transform 0.7s var(--ease-out);
}

.anim-fade-up    { transform: translateY(32px); }
.anim-fade-in    { transform: none; }
.anim-fade-left  { transform: translateX(-32px); }
.anim-fade-right { transform: translateX(32px); }

/* Visible state */
.anim-fade-up.is-visible,
.anim-fade-in.is-visible,
.anim-fade-left.is-visible,
.anim-fade-right.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger children: parent gets .anim-stagger, children animate sequentially */
.anim-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s var(--ease-out),
        transform 0.6s var(--ease-out);
}

.anim-stagger.is-visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0ms; }
.anim-stagger.is-visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 80ms; }
.anim-stagger.is-visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 160ms; }
.anim-stagger.is-visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 240ms; }
.anim-stagger.is-visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 320ms; }
.anim-stagger.is-visible > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 400ms; }
.anim-stagger.is-visible > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 480ms; }
.anim-stagger.is-visible > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 560ms; }
.anim-stagger.is-visible > *:nth-child(9)  { opacity: 1; transform: none; transition-delay: 640ms; }
.anim-stagger.is-visible > *:nth-child(10) { opacity: 1; transform: none; transition-delay: 720ms; }
.anim-stagger.is-visible > *:nth-child(11) { opacity: 1; transform: none; transition-delay: 800ms; }
.anim-stagger.is-visible > *:nth-child(12) { opacity: 1; transform: none; transition-delay: 880ms; }

/* Hero specific: slightly faster, runs on load not scroll */
.hero-eyebrow  { opacity: 0; transform: translateY(12px); animation: hero-entry 0.7s var(--ease-out) 0.15s forwards; }
.hero-name     { opacity: 1; } /* word-reveal JS handles per-word animation */
.hero-tagline  { opacity: 0; transform: translateY(16px); animation: hero-entry 0.7s var(--ease-out) 0.5s forwards; }
.hero-actions  { opacity: 0; transform: translateY(16px); animation: hero-entry 0.7s var(--ease-out) 0.65s forwards; }
.hero-support  { opacity: 0; transform: translateY(16px); animation: hero-entry 0.7s var(--ease-out) 0.8s forwards; }

body::after {
    animation: ambient-grey-drift 28s ease-in-out infinite alternate;
}

main > section {
    animation: section-surface-drift 38s ease-in-out infinite alternate;
}

main > section:nth-of-type(even) {
    animation-duration: 44s;
}

.hero-orb {
    animation: hero-grey-float 18s ease-in-out infinite alternate;
}

.hero-orb--right {
    animation-duration: 24s;
}

@keyframes hero-entry {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ambient-grey-drift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.85;
    }
    100% {
        transform: translate3d(1.5%, -1.25%, 0) scale(1.03);
        opacity: 1;
    }
}

@keyframes hero-grey-float {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(0, -14px, 0) scale(1.04);
    }
}

@keyframes section-surface-drift {
    0% {
        background-position: 0% 0%, 100% 100%;
    }
    100% {
        background-position: 1.4% -1%, 98.8% 101.2%;
    }
}

@keyframes projects-marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-50% - 0.5rem), 0, 0);
    }
}

/* Line reveal for the hero decorative lines */
.line-reveal {
    width: 0;
    overflow: hidden;
    transition: width 1s var(--ease-out);
}

.line-reveal.is-visible {
    width: 100%;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .anim-fade-up,
    .anim-fade-in,
    .anim-fade-left,
    .anim-fade-right,
    .anim-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-eyebrow,
    .hero-name,
    .hero-tagline,
    .hero-actions,
    .hero-support,
    main > section,
    .hero-orb,
    body::after,
    .projects-carousel__track,
    .stat-value {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }

    .line-reveal {
        width: 100%;
        transition: none;
    }
}