/* =============================================================================
   Equity.us Redesign — animation system (per designer notes, Vivian Pellegrino)
   Reusable hooks applied via classes / data-attributes. All effects are
   progressive-enhancement: with no JS (or prefers-reduced-motion) everything is
   shown in its final state. animations.js adds .is-in when elements enter view.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {

    /* ---- Scroll reveal: fade + rise (sections, cards) ---- */
    [data-anim="fade-up"] {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
        will-change: opacity, transform;
    }
    [data-anim="fade-up"].is-in { opacity: 1; transform: none; }

    /* ---- Fade in (body/eyebrow text after H1) ---- */
    [data-anim="fade-in"] {
        opacity: 0;
        transition: opacity .8s ease;
    }
    [data-anim="fade-in"].is-in { opacity: 1; }

    /* ---- Image grow-in: start slightly scaled down, grow to full ---- */
    [data-anim="grow"] {
        opacity: 0;
        transform: scale(.92);
        transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
    }
    [data-anim="grow"].is-in { opacity: 1; transform: none; }

    /* ---- Staggered children (bullet lists, card rows) ---- */
    [data-anim="stagger"] > * {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
    }
    [data-anim="stagger"].is-in > * { opacity: 1; transform: none; }
    /* delay each child progressively (set --i in markup or JS) */
    [data-anim="stagger"].is-in > *:nth-child(1){transition-delay:.05s}
    [data-anim="stagger"].is-in > *:nth-child(2){transition-delay:.13s}
    [data-anim="stagger"].is-in > *:nth-child(3){transition-delay:.21s}
    [data-anim="stagger"].is-in > *:nth-child(4){transition-delay:.29s}
    [data-anim="stagger"].is-in > *:nth-child(5){transition-delay:.37s}
    [data-anim="stagger"].is-in > *:nth-child(6){transition-delay:.45s}
}

/* ---- Image hover scale (works regardless of reduced-motion pref for hover) ---- */
.anim-hover-zoom { overflow: hidden; }
.anim-hover-zoom img,
img.anim-hover-zoom { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: no-preference) {
    .anim-hover-zoom:hover img,
    img.anim-hover-zoom:hover { transform: scale(1.05); }
}

/* ---- Marquee rows (agent face grid: top scrolls left, bottom scrolls right) ---- */
.anim-marquee { overflow: hidden; position: relative; width: 100%; }
.anim-marquee__track { display: flex; width: max-content; gap: 0; }
@media (prefers-reduced-motion: no-preference) {
    .anim-marquee--left  .anim-marquee__track { animation: fxMarqueeLeft  40s linear infinite; }
    .anim-marquee--right .anim-marquee__track { animation: fxMarqueeRight 40s linear infinite; }
    .anim-marquee:hover .anim-marquee__track { animation-play-state: paused; }
}
@keyframes fxMarqueeLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes fxMarqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---- Count-up numbers: no visual style needed; JS swaps the text. Reserve width
   so the layout doesn't jump while counting. ---- */
[data-countup] { font-variant-numeric: tabular-nums; }