/* ==========================================================================
   kd6-auth-motion.css — the motion of the account pages (SPEC §4). Loaded
   after kd6-auth.css. Every state is complete without this file; this file
   only animates the way between states.

   WHO ADDS THE CLASSES
     html.au-js      auth-boot.js, in <head>. Entrance animations run only under it: with no JS, nothing
                     animates and everything is visible.
     html.au-calm    auth-boot.js, when prefers-reduced-motion: reduce matches (and follows changes).
     html.au-enter   KDAuthMotion.enter() on first paint; removed after 1200ms whatever happens.
     .is-leaving .au-to-l / .au-to-r      a panel or scene painting its exit (KDAuthMotion.swap)
     .is-entering .au-from-r / .au-from-l a panel or scene coming in, its children staggered
     .is-fade        the calm cross-fade (120ms) that replaces a slide under reduced motion
     .is-lean / .is-draw / .is-fade       title lean-in, rule redraw, lede fade (swap, mark)
     .is-in          .au-fld__err and .au-msg entrance (KDAuth.fieldBad, KDAuth.msg)
     .is-pop .is-pasted .is-wrong .is-right   code cells (KDAuth.code)
     .is-out / .is-in on .au-head__l      headline swap (KDAuthMotion.headline)
     .au-nudge       one wrong-answer nudge (KDAuthMotion.nudge)
     .is-exit        the card leaving on success (KDAuthMotion.land)
     .is-drawing     the success mark (KDAuthMotion.mark); .is-rise on its primary pill
     .is-relabel     a button's label rising in after a morph (KDAuth.relabel)
     .is-away        the card dimmed while the browser leaves for Google

   RULES: transform and opacity only (plus the stage height and the choice result line). The only
   repeating animation is .au-load while a request is out. No ambient loop, no glow, no blur.
   The blue panel's drawing (S252) moves in kd6-auth-panel.css, only on a step change or typing into the
   letter's field, by the same rules; its strokes rise at first paint with au-poster-rise below.
   Entrance and swap classes always have a JS timer fallback (duration + 80ms), so nothing is left
   at opacity 0 if an animationend never comes.
   ========================================================================== */
:root {
  --au-ease: cubic-bezier(.2,.8,.2,1);
  --au-ease-io: cubic-bezier(.65,0,.35,1);
  --au-ease-slam: cubic-bezier(.3,1.45,.45,1);
  --au-t-hover: 140ms;
  --au-t-out: 180ms;
  --au-t-in: 260ms;
  --au-t-height: 280ms;
  --au-t-title: 320ms;
  --au-t-rail: 420ms;
  --au-t-rail-c: 300ms;
  --au-t-poster: 520ms;
  --au-t-enter: 560ms;
  --au-stagger: 50ms;
}

/* ---- cross-document: auth page to the shell and back (Chrome 126+, Safari 18.2+) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: au-vt-out 180ms var(--au-ease-io) both; }
::view-transition-new(root) { animation: au-vt-in 260ms var(--au-ease) both; }
@keyframes au-vt-out { to { opacity: 0; } }
@keyframes au-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- keyframes ----------------------------------------------------------- */
@keyframes au-fade-in { from { opacity: 0; } }
@keyframes au-lean-in { from { opacity: 0; transform: translateY(14px) skewX(-6deg); } to { opacity: 1; transform: none; } }
@keyframes au-ttl-in { from { opacity: 0; transform: translateY(10px) skewX(-6deg); } to { opacity: 1; transform: none; } }
@keyframes au-rise-8 { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes au-card-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes au-poster-rise { from { opacity: 0; translate: 0 40px; } to { translate: 0 0; } }
@keyframes au-grow { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes au-draw { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes au-in-r { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes au-in-l { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes au-out-l { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: -24px 0; } }
@keyframes au-out-r { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 24px 0; } }
@keyframes au-chip-in { from { opacity: 0; translate: -4px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes au-err-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes au-msg-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes au-pop { from { scale: .9; } to { scale: 1; } }
@keyframes au-fill { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes au-nudge {
  0% { translate: 0 0; } 20% { translate: -6px 0; } 45% { translate: 5px 0; } 70% { translate: -3px 0; } 100% { translate: 0 0; }
}
@keyframes au-load-step { 0%, 100% { scale: 1 .55; } 50% { scale: 1 1; } }
@keyframes au-tick-draw { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes au-lift { from { translate: 0 4px; } to { translate: 0 0; } }
@keyframes au-head-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -10px; } }
@keyframes au-card-out { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: 0; translate: 0 -8px; scale: .985; } }
@keyframes au-label-rise { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes au-mark-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---- first paint (html.au-js.au-enter; done by about 900ms, nothing blocks typing) ---- */
.au-js.au-enter .au-brand { animation: au-fade-in 300ms var(--au-ease) both; }
.au-js.au-enter .au-head__l { animation: au-lean-in var(--au-t-enter) var(--au-ease) 60ms both; }
.au-js.au-enter .au-head__l:nth-child(2) { animation-delay: 140ms; }
.au-js.au-enter .au-head__l:nth-child(3) { animation-delay: 220ms; }
.au-js.au-enter .au-poster__s { animation: au-poster-rise var(--au-t-poster) var(--au-ease) 120ms both; }
.au-js.au-enter .au-poster__s:nth-child(2) { animation-delay: 190ms; }
.au-js.au-enter .au-poster__s:nth-child(3) { animation-delay: 260ms; }
.au-js.au-enter .au-poster__s:nth-child(4) { animation-delay: 330ms; }
.au-js.au-enter .au-card { animation: au-card-in 420ms var(--au-ease) 100ms both; }
.au-js.au-enter .au-rail__s > i { animation: au-grow var(--au-t-rail) var(--au-ease) 200ms both; }
.au-js.au-enter .au-rail__s:nth-child(2) > i { animation-delay: 240ms; }
.au-js.au-enter .au-rail__s:nth-child(3) > i { animation-delay: 280ms; }
.au-js.au-enter .au-rail__s:nth-child(4) > i { animation-delay: 320ms; }
.au-js.au-enter .au-ttl { animation: au-ttl-in var(--au-t-title) var(--au-ease) 180ms both; }
.au-js.au-enter .au-rule { animation: au-draw 360ms var(--au-ease) 260ms both; }
.au-js.au-enter .au-card .au-panel:not([hidden]) > *,
.au-js.au-enter .au-card .au-scene:not([hidden]) > :not(.au-stage) {
  animation: au-rise-8 var(--au-t-in) var(--au-ease) 350ms both;
}
.au-js.au-enter .au-card .au-panel:not([hidden]) > :nth-child(1) { animation-delay: 200ms; }
.au-js.au-enter .au-card .au-panel:not([hidden]) > :nth-child(2) { animation-delay: 250ms; }
.au-js.au-enter .au-card .au-panel:not([hidden]) > :nth-child(3) { animation-delay: 300ms; }

/* ---- a step forward and back (KDAuthMotion.swap) --------------------------- */
.au-panel.is-leaving.au-to-l, .au-scene.is-leaving.au-to-l { animation: au-out-l var(--au-t-out) var(--au-ease-io) both; }
.au-panel.is-leaving.au-to-r, .au-scene.is-leaving.au-to-r { animation: au-out-r var(--au-t-out) var(--au-ease-io) both; }
.au-panel.is-entering.au-from-r, .au-scene.is-entering.au-from-r { animation: au-in-r var(--au-t-in) var(--au-ease) 60ms both; }
.au-panel.is-entering.au-from-l, .au-scene.is-entering.au-from-l { animation: au-in-l var(--au-t-in) var(--au-ease) 60ms both; }
.au-panel.is-entering > * { animation: au-rise-8 var(--au-t-in) var(--au-ease) 210ms both; }
.au-panel.is-entering > :nth-child(1) { animation-delay: 60ms; }
.au-panel.is-entering > :nth-child(2) { animation-delay: 110ms; }
.au-panel.is-entering > :nth-child(3) { animation-delay: 160ms; }
.au-panel.is-fade, .au-scene.is-fade { animation: au-fade-in 120ms linear both; }
.is-leaving, .is-entering { will-change: transform, opacity; }

/* the title leans in, the rule redraws, the lede fades */
.au-ttl.is-lean { animation: au-ttl-in var(--au-t-title) var(--au-ease) both; }
.au-rule.is-draw { animation: au-draw 360ms var(--au-ease) 80ms both; }
.au-lede.is-fade { animation: au-fade-in 200ms var(--au-ease) both; }

/* ---- the rail ------------------------------------------------------------- */
.au-rail__s.is-now .au-rail__lab { animation: au-chip-in 160ms var(--au-ease) both; }

/* ---- the poster ------------------------------------------------------------ */
@media (min-width: 960px) {
  .au-poster {
    transition: left var(--au-t-poster) var(--au-ease), top var(--au-t-poster) var(--au-ease),
      width var(--au-t-poster) var(--au-ease), transform var(--au-t-poster) var(--au-ease);
  }
}
.au-poster__s {
  transition: transform var(--au-t-poster) var(--au-ease), opacity var(--au-t-poster) var(--au-ease),
    background-color 300ms var(--au-ease);
}
.au-poster[data-lit="1"] .au-poster__s:nth-child(2) { animation: au-lift var(--au-t-poster) var(--au-ease-slam) both; }

/* ---- buttons ---------------------------------------------------------------- */
.au-load > i { animation: au-load-step 900ms var(--au-ease-io) infinite; }
.au-load > i:nth-child(2) { animation-delay: 150ms; }
.au-load > i:nth-child(3) { animation-delay: 300ms; }
.au-tick > i { animation: au-tick-draw 110ms var(--au-ease) both; }
.au-tick > i:nth-child(2) { animation-delay: 110ms; }
.au-btn__lab.is-relabel { animation: au-label-rise 180ms var(--au-ease) both; }
.au-btn.is-rise { animation: au-rise-8 260ms var(--au-ease) 240ms both; }
.au-card.is-away > * { opacity: .5; transition: opacity 150ms var(--au-ease); }
.au-card.is-away > .is-keep, .au-card.is-away > :has(.is-busy) { opacity: 1; }

/* ---- errors and messages ---------------------------------------------------- */
.au-fld__err.is-in { animation: au-err-in 160ms var(--au-ease) both; }
.au-msg.is-in { animation: au-msg-in 200ms var(--au-ease) both; }
.au-nudge { animation: au-nudge 280ms var(--au-ease) both; }

/* ---- the code cells ---------------------------------------------------------- */
.au-code__caret { transition: transform var(--au-t-hover) var(--au-ease), opacity var(--au-t-hover) var(--au-ease); }
.au-code__cell.is-pop { animation: au-pop 100ms var(--au-ease) both; }
.au-code.is-pasted .au-code__cell.is-filled { animation: au-fill 140ms var(--au-ease) both; }

/* ---- the side headline swap ---------------------------------------------------- */
.au-head__l.is-out { animation: au-head-out 200ms var(--au-ease) both; }
.au-head__l.is-in { animation: au-lean-in 420ms var(--au-ease) both; }

/* ---- leaving on success ---------------------------------------------------------- */
.au-card.is-exit { animation: au-card-out 220ms var(--au-ease-io) both; }

/* ---- the success mark: strokes draw one after another, the orange one lands last ---- */
.au-mark.is-drawing path { animation: au-mark-draw 300ms var(--au-ease) both; }
.au-mark.is-drawing .au-mark__s3 { animation-delay: 60ms; }
.au-mark.is-drawing .au-mark__s4 { animation-delay: 120ms; }
.au-mark.is-drawing .au-mark__s2 { animation: au-mark-draw 420ms var(--au-ease-slam) 200ms both; }

/* ---- calm: reduced motion. Every state is already complete; nothing moves. The only
   motion left is a 120ms cross-fade on a step change, a message and a field error. ---- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .au-wait { display: none; }
  .au-load > i { scale: 1 .8; }
}
html.au-calm *, html.au-calm *::before, html.au-calm *::after { animation: none !important; transition: none !important; }
html.au-calm .au-wait { display: none; }
html.au-calm .au-panel.is-fade, html.au-calm .au-scene.is-fade,
html.au-calm .au-msg.is-in, html.au-calm .au-fld__err.is-in {
  animation: au-fade-in 120ms linear both !important;
}