/* AMALAB - motion.css (V20)
   Site-wide entrance choreography. One grammar:
   staggered fade-up for groups, line cascade for lists,
   hairline draw on num-items, h2 -> p hand-off in section heads,
   load entrance for interior page heroes.
   All hidden states gate on html.js so no-JS never loses content.
   One-shot, no loops. Reduced motion resolves instantly (block at end). */

/* ---------- 1 - Staggered groups (grids of cards / num-items / metrics) ---------- */
html.js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
  transition-delay: min(calc(var(--ri, 0) * 70ms), 560ms);
}
html.js [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }

/* ---------- 2 - Line cascade (rule-list / check-list / faq) ---------- */
html.js [data-reveal-lines] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 440ms var(--ease-out), transform 440ms var(--ease-out);
  transition-delay: min(calc(var(--ri, 0) * 80ms), 640ms);
}
html.js [data-reveal-lines].is-visible > * { opacity: 1; transform: none; }

/* After the entrance has played, drop the stagger delays so later
   interactive transitions (card hover lift) respond immediately. */
html.js [data-reveal-stagger].is-settled > *,
html.js [data-reveal-lines].is-settled > * { transition-delay: 0ms; }

/* ---------- 3 - num-item hairline draws with its reveal ---------- */
html.js [data-reveal-stagger] > .num-item::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease-out);
  transition-delay: inherit;
}
html.js [data-reveal-stagger].is-visible > .num-item::before { transform: scaleX(1); }

/* ---------- 4 - Section head choreography: h2 first, then p ---------- */
html.js .section-head.reveal { opacity: 1; transform: none; transition: none; }
html.js .section-head.reveal > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
html.js .section-head.reveal.is-visible > * { opacity: 1; transform: none; }
html.js .section-head.reveal.is-visible > :nth-child(2) { transition-delay: 140ms; }
html.js .section-head.reveal.is-visible > :nth-child(n+3) { transition-delay: 260ms; }

/* ---------- 5 - Interior page hero: load entrance for the copy ---------- */
html.js .page-hero .container > * {
  animation: amal-hero-in 640ms var(--ease-out) both;
}
html.js .page-hero .container > :nth-child(2) { animation-delay: 120ms; }
html.js .page-hero .container > :nth-child(3) { animation-delay: 220ms; }
html.js .page-hero .container > :nth-child(n+4) { animation-delay: 300ms; }
@keyframes amal-hero-in {
  from { opacity: 0; transform: translateY(18px); }
}

/* ---------- 5b - Home hero copy: load entrance ----------
   .hero-copy (css/sections.css) is unique to the home hero - no interior
   page reuses this class (verified across *.html) - and no existing
   entrance animation targets it anywhere in css/*.css: vp-reveal.css only
   fades the whole .reveal-hero > .container by scroll progress (--p), it
   never animates individual children on load. Mirrors section 5 above with
   the same keyframe and delays, scoped to this container instead. */
html.js .hero-copy > * {
  animation: amal-hero-in 640ms var(--ease-out) both;
}
html.js .hero-copy > :nth-child(2) { animation-delay: 120ms; }
html.js .hero-copy > :nth-child(3) { animation-delay: 220ms; }
html.js .hero-copy > :nth-child(n+4) { animation-delay: 300ms; }

/* ---------- 6 - Card hover lift must still win after reveal ---------- */
/* MIRROR: css/components.css .card:hover / .card.reveal.is-visible:hover
   - translateY(-2px) + var(--shadow-card-hover). Same fix, reproduced for the
   stagger system so the hover lift still wins once the card has settled into
   its revealed state. The lift is gated to fine pointers there too (touch
   leaves :hover stuck after a tap); the shadow stays ungated. */
html.js [data-reveal-stagger].is-visible > .card:hover {
  box-shadow: var(--shadow-card-hover);
}
@media (hover: hover) and (pointer: fine) {
  html.js [data-reveal-stagger].is-visible > .card:hover {
    transform: translateY(-2px);
  }
}

/* ---------- 7 - Reduced motion: instant final states ----------
   The global kill in base.css zeroes durations but NOT transition-delay,
   so delayed elements would sit invisible then pop. Force final states. */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal-stagger] > *,
  html.js [data-reveal-lines] > *,
  html.js .section-head.reveal > *,
  html.js .page-hero .container > *,
  html.js .hero-copy > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  html.js [data-reveal-stagger] > .num-item::before {
    transform: none !important;
    transition: none !important;
  }
  /* §6's hover lift is a position change: drop it, keep the shadow.
     MIRROR of the same override in css/components.css. */
  html.js [data-reveal-stagger].is-visible > .card:hover {
    transform: none !important;
  }
}