/* Motion v1 — production implementation of zaiphr-brand
   expression/MOTION-SPEC.md. Amplify hierarchy, never manufacture
   interest. EVERY rule gates on html.zm (added by js/motion-v1.js only
   when motion is allowed) — so no-JS, ?still and prefers-reduced-motion
   render the approved static page exactly. Compositor-only: opacity +
   transform (the Assess entrance shadow is a pseudo-element fade, per
   the carried a11y/perf gate item). */

/* ═══ hero — cinematic depth (tier 2) ═══ */
html.zm .hv1-kick { opacity:0; animation:zmFade .6s .15s ease-out forwards; }
html.zm .hv1-copy h1 { opacity:0; transform:translateY(14px);
  animation:zmRise .7s .28s cubic-bezier(.2,.7,.2,1) forwards; }
html.zm .hv1-lede, html.zm .hv1-cta, html.zm .hv1-trust { opacity:0;
  animation:zmFade .7s .5s ease-out forwards; }
html.zm:not(.cast) .hv1-subj { opacity:0; animation:zmFade .9s .18s ease-out forwards; }
/* with the cast active, hero-cast.js owns subject entrances — a forwards
   fill here would pin opacity and break the exit fades */
html.zm .hv1-bg { animation:zmBgDrift 26s ease-in-out infinite alternate; }
@keyframes zmFade { to { opacity:1; } }
@keyframes zmRise { to { opacity:1; transform:none; } }
@keyframes zmBgDrift { to { transform:translateX(6px); } }
html.zm .hv1-subj img { animation:zmSubjBreathe 13s 1.2s ease-in-out
  infinite alternate; }
@keyframes zmSubjBreathe { from { transform:translateY(0) scale(1); }
  to { transform:translateY(4px) scale(1.012); } }

/* ═══ check — paper fade only; the product surface does not perform ═══ */
html.zm .check-v1 .cv1-in { opacity:0; transition:opacity .5s ease-out; }
html.zm .check-v1.iv .cv1-in { opacity:1; }

/* ═══ assess — controlled report entrance; shadow settles via pseudo ═══ */
html.zm .assess-v1 .av1-rail, html.zm .assess-v1 .av1-grid > div:first-child {
  opacity:0; transform:translateY(12px);
  transition:opacity .6s ease-out, transform .6s cubic-bezier(.2,.7,.2,1); }
html.zm .assess-v1 .av1-artifact { opacity:0; transform:translateY(26px);
  transition:opacity .7s ease-out .15s, transform .8s cubic-bezier(.2,.7,.2,1) .15s; }
.assess-v1 .av1-doc { position:relative; }
html.zm .assess-v1 .av1-doc::after { content:""; position:absolute; inset:0;
  border-radius:6px; box-shadow:0 40px 90px rgba(0,0,0,.6);
  opacity:0; transition:opacity 1.1s ease-out .2s; pointer-events:none; }
html.zm .assess-v1.iv .av1-rail,
html.zm .assess-v1.iv .av1-grid > div:first-child { opacity:1; transform:none; }
html.zm .assess-v1.iv .av1-artifact { opacity:1;
  transform:translateY(calc((0.5 - var(--p, 0.5)) * 14px)); }
html.zm .assess-v1.iv .av1-doc::after { opacity:1; }

/* ═══ proof — the number is the event; qualifiers land after it ═══ */
html.zm .proof-v1 .bs-kick, html.zm .proof-v1 .pv1-page { opacity:0;
  transition:opacity .5s ease-out; }
html.zm .proof-v1 .pv1-k, html.zm .proof-v1 .pv1-rec,
html.zm .proof-v1 .bs-prov { opacity:0; transition:opacity .5s ease-out .9s; }
html.zm .proof-v1.iv .bs-kick, html.zm .proof-v1.iv .pv1-page,
html.zm .proof-v1.iv .pv1-k, html.zm .proof-v1.iv .pv1-rec,
html.zm .proof-v1.iv .bs-prov { opacity:1; }

/* ═══ train — almost imperceptible photographic push ═══ */
html.zm .train-v1 .tv1-photo { transform:scale(calc(1 + var(--p, 0) * 0.02));
  transform-origin:60% 40%; will-change:transform; }
html.zm .train-v1 .tv1-copy { opacity:0; transform:translateY(12px);
  transition:opacity .6s ease-out, transform .6s cubic-bezier(.2,.7,.2,1); }
html.zm .train-v1.iv .tv1-copy { opacity:1; transform:none; }

/* ═══ build — the interface is alive ═══ */
html.zm .build-v1 .bv1-grid > div:first-child { opacity:0;
  transition:opacity .5s ease-out; }
html.zm .build-v1 .bv1-app { opacity:0; transform:scale(1.18) translateX(28px);
  transition:opacity .6s ease-out, transform .8s cubic-bezier(.2,.7,.2,1); }
html.zm .build-v1 .bv1-card { opacity:0; transform:translateY(10px);
  transition:opacity .5s ease-out .35s, transform .5s cubic-bezier(.2,.7,.2,1) .35s; }
html.zm .build-v1 .bv1-queue .row { opacity:0; transition:opacity .4s ease-out; }
html.zm .build-v1.iv .bv1-grid > div:first-child { opacity:1; }
html.zm .build-v1.iv .bv1-app { opacity:1; transform:scale(1.18) translateX(0); }
html.zm .build-v1.iv .bv1-card { opacity:1; transform:none; }
html.zm .build-v1.iv .bv1-queue .row { opacity:1; }
html.zm .build-v1.iv .bv1-queue .row:nth-child(1) { transition-delay:.55s; }
html.zm .build-v1.iv .bv1-queue .row:nth-child(2) { transition-delay:.7s; }
html.zm .build-v1.iv .bv1-queue .row:nth-child(3) { transition-delay:.85s; }
html.zm .build-v1.iv .bv1-queue .row:nth-child(4) { transition-delay:1s; }
html.zm .build-v1.iv .bv1-queue .row:nth-child(5) { transition-delay:1.15s; }
html.zm .build-v1.iv .bv1-queue .row:nth-child(6) { transition-delay:1.3s; }
html.zm .build-v1.iv .bv1-queue .row:nth-child(7) { transition-delay:1.45s; }
@keyframes zmLivePulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
html.zm .build-v1 .bv1-live { animation:zmLivePulse 2.6s ease-in-out infinite; }
/* phone tier drops the scale transform — keep its entrance consistent */
@media (max-width:700px) {
  html.zm .build-v1 .bv1-app { transform:translateX(28px); }
  html.zm .build-v1.iv .bv1-app { transform:translateX(0); }
}

/* ═══ run — portal drifts slower than copy; the ONE cyan breathes ═══ */
html.zm .run-v1 .rv1-grid > div:first-child { opacity:0;
  transition:opacity .5s ease-out; }
html.zm .run-v1 .rv1-livebar { opacity:0; transform:translateY(-10px);
  transition:opacity .55s ease-out .2s, transform .55s cubic-bezier(.2,.7,.2,1) .2s; }
html.zm .run-v1 .rv1-portal {
  transform:translateY(calc((0.5 - var(--p, 0.5)) * 44px));
  will-change:transform; }
html.zm .run-v1.iv .rv1-grid > div:first-child { opacity:1; }
html.zm .run-v1.iv .rv1-livebar { opacity:1; transform:none; }
html.zm .run-v1 .rv1-on::before { animation:zmLivePulse 2.6s ease-in-out
  infinite; }

/* ═══ close — one quiet fade, then it sits still ═══ */
html.zm .close-v1 .bs-in, html.zm .close-v1 .cv2-band { opacity:0;
  transition:opacity .6s ease-out; }
html.zm .close-v1.iv .bs-in, html.zm .close-v1.iv .cv2-band { opacity:1; }