/* Field Ops v2 motion layer (decision P4-5). Purposeful movement only: it shows where you came from and where you are, never decoration.
   Everything is inside prefers-reduced-motion: no-preference (base.css already switches the rest off), nothing loops, nothing runs
   longer than --fld-dur-count. Behaviour that CSS cannot do (the direction of a screen change, the count-up) is in js/motion.js. Tokens only. */

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

  /* ── Arrival: a screen's blocks rise 8 px and fade in; the first six are staggered 30 ms ─────────────────────────────────────────────
     fill-mode backwards: the from-state holds only while an item waits for its delay, and nothing is left applied afterwards (so a
     sticky action bar or a fixed overlay inside a block is never trapped in a transform). */
  @keyframes fld-rise { from { opacity: 0; transform: translateY(8px); } }
  .fld-content > * { animation: fld-rise var(--fld-dur-rise) var(--fld-ease) backwards; }
  .fld-content > :nth-child(2) { animation-delay: 30ms; }
  .fld-content > :nth-child(3) { animation-delay: 60ms; }
  .fld-content > :nth-child(4) { animation-delay: 90ms; }
  .fld-content > :nth-child(5) { animation-delay: 120ms; }
  .fld-content > :nth-child(6) { animation-delay: 150ms; }
  .fld-content > :nth-child(n+7) { animation-delay: 180ms; }

  /* ── Between screens (cross-document view transitions; the app opts in with @view-transition in base.css) ───────────────────────────
     tab to tab: a short cross-fade; into a pushed screen: the new one slides in about 30 percent and fades, the old one eases away;
     back: the reverse. The tab bar has its own view-transition-name, so it stays put. The type is set in js/motion.js (pagereveal). */
  @keyframes fld-vt-in-right { from { transform: translateX(30%); opacity: 0; } }
  @keyframes fld-vt-out-left { to { transform: translateX(-12%); opacity: 0; } }
  @keyframes fld-vt-in-left { from { transform: translateX(-12%); opacity: 0; } }
  @keyframes fld-vt-out-right { to { transform: translateX(30%); opacity: 0; } }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: var(--fld-ease); }
  html:active-view-transition-type(push)::view-transition-new(root) { animation: fld-vt-in-right var(--fld-dur-page) var(--fld-ease) both; }
  html:active-view-transition-type(push)::view-transition-old(root) { animation: fld-vt-out-left var(--fld-dur-page) var(--fld-ease) both; }
  html:active-view-transition-type(pop)::view-transition-new(root) { animation: fld-vt-in-left var(--fld-dur-page) var(--fld-ease) both; }
  html:active-view-transition-type(pop)::view-transition-old(root) { animation: fld-vt-out-right var(--fld-dur-page) var(--fld-ease) both; }

  /* ── The sign-in family and the state pages arrive the same way (decision P6-9: every screen, one feel): the first blocks rise 8 px and fade. ── */
  .fld-screen--auth > *, .fld-screen--center > *, .fld-statebody > * { animation: fld-rise var(--fld-dur-rise) var(--fld-ease) backwards; }
  .fld-screen--auth > :nth-child(2), .fld-screen--center > :nth-child(2) { animation-delay: 30ms; }
  .fld-screen--auth > :nth-child(3), .fld-screen--center > :nth-child(3) { animation-delay: 60ms; }
  .fld-screen--auth > :nth-child(n+4), .fld-screen--center > :nth-child(n+4) { animation-delay: 90ms; }

  /* ── The three spring moments (decision P6-9): the Done check (handout.css), the hold to confirm completing, and the Admit success. Everything else is calm. ──────────────
     The hold to confirm completes with one soft spring pulse (js/motion.js adds .is-held for 380 ms). */
  /* A hold to confirm let go too early shakes once, calm (no spring), with the hint toast (components.js holdHint). */
  @keyframes fld-nudge { 20% { transform: translateX(-4px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
  .fld-btn.is-nudge { animation: fld-nudge var(--fld-dur-rise) var(--fld-ease); }
  @keyframes fld-pulse-once { 40% { transform: scale(1.04); } }
  .fld-btn.is-held { animation: fld-pulse-once var(--fld-dur-spring) var(--fld-ease-spring); }
  /* The Admit toast's check pops in with the same spring (scanner-ui.js asks for it with the spring option). */
  @keyframes fld-toast-pop { from { transform: scale(.5); opacity: 0; } }
  .fld-toast--spring .fld-toast__icon { animation: fld-toast-pop var(--fld-dur-spring) var(--fld-ease-spring) backwards; }
  /* v3: the same Admit success moment on the full-screen green flash (feedback.css .fld-admitflash): its tick lands with the spring. */
  .fld-admitflash.is-on .fld-admitflash__tick { transition: transform var(--fld-dur-spring) var(--fld-ease-spring) 60ms; }
}