/* ============================================================
   AM Design System — MOTION
   ------------------------------------------------------------
   A deliberately small set. Six behaviours, all reusable, all
   driven by the duration and easing tokens, all switched off by
   the single prefers-reduced-motion block at the bottom.

     .anim-fade      opacity in
     .anim-rise      opacity in + 8px up
     .anim-stagger   delays direct children of a container
     .progress__fill width transition (declared in components.css,
                     timed here)
     .stepper slide  panel enter from left/right
     button press    transform on :active (in components.css)

   Rules of the house:
   - Motion carries meaning (something arrived, something
     advanced) or it does not ship. No decorative loops.
   - Nothing moves more than 8px. Our audience is on small
     screens in webviews; large movement reads as a glitch.
   - Nothing animates for longer than --dur-slow (400ms).
   - Everything is opacity/transform only, so it stays on the
     compositor and does not cause layout work.
   ============================================================ */


/* ------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------ */
@keyframes am-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes am-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Stepper panels. Forward = the next question slides in from
   the right; back = the previous slides in from the left. */
@keyframes am-slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes am-slide-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}

/* The inline spinner inside a loading button. */
@keyframes am-spin {
  to { transform: rotate(360deg); }
}


/* ------------------------------------------------------------
   ENTRANCE UTILITIES
   Add to any element. `backwards` fill keeps it hidden during
   the delay so a staggered group does not flash in first.
   ------------------------------------------------------------ */
.anim-fade {
  animation: am-fade var(--dur-base) var(--ease) both;
}

.anim-rise {
  animation: am-rise var(--dur-slow) var(--ease) both;
}

/* Delay utilities, for a one-off out of sequence. */
.anim-delay-1 { animation-delay: calc(var(--stagger) * 1); }
.anim-delay-2 { animation-delay: calc(var(--stagger) * 2); }
.anim-delay-3 { animation-delay: calc(var(--stagger) * 3); }
.anim-delay-4 { animation-delay: calc(var(--stagger) * 4); }


/* ------------------------------------------------------------
   STAGGER
   Put .anim-stagger on a PARENT. Its direct children that carry
   .anim-fade or .anim-rise are delayed in sequence. Capped at
   six; beyond that the wait is longer than the payoff.
   ------------------------------------------------------------ */
.anim-stagger > :nth-child(1) { animation-delay: calc(var(--stagger) * 0); }
.anim-stagger > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.anim-stagger > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.anim-stagger > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.anim-stagger > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.anim-stagger > :nth-child(6) { animation-delay: calc(var(--stagger) * 5); }


/* ------------------------------------------------------------
   PROGRESS FILL
   The bar itself lives in components.css; this is the timing.
   stepper.js only writes a width, so the transition does the work.
   ------------------------------------------------------------ */
.progress__fill {
  transition: width var(--dur-base) var(--ease-out);
}


/* ------------------------------------------------------------
   STEPPER PANELS
   stepper.js sets data-dir="next" | "prev" on .stepper before
   revealing a panel, which picks the direction.
   ------------------------------------------------------------ */
.stepper[data-dir="next"] .stepper__panel[data-active] {
  animation: am-slide-in-right var(--dur-slow) var(--ease) both;
}
.stepper[data-dir="prev"] .stepper__panel[data-active] {
  animation: am-slide-in-left var(--dur-slow) var(--ease) both;
}


/* ------------------------------------------------------------
   BUTTON PRESS
   The scale lives on .btn:active in components.css so the
   button works without this file; this only sets the timing.
   ------------------------------------------------------------ */
.btn {
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color     var(--dur-fast) var(--ease),
    color            var(--dur-fast) var(--ease),
    transform        var(--dur-fast) var(--ease);
}

.choice {
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color     var(--dur-fast) var(--ease),
    transform        var(--dur-fast) var(--ease);
}

.spinner {
  animation: am-spin 700ms linear infinite;
}


/* ============================================================
   REDUCED MOTION
   One block, disables everything above. Elements still reach
   their final state; they simply arrive there immediately.
   `animation: none` on the entrance utilities is what removes
   the `both` fill, so nothing is left invisible.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  .anim-fade,
  .anim-rise,
  .anim-stagger > *,
  .stepper[data-dir="next"] .stepper__panel[data-active],
  .stepper[data-dir="prev"] .stepper__panel[data-active] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .progress__fill,
  .btn,
  .choice {
    transition: none !important;
  }

  /* Press feedback becomes a colour change only. */
  .btn:active,
  .choice:active {
    transform: none !important;
  }

  /* The spinner still needs to signal work in progress, so it
     keeps turning but slowly and without the strobing effect of
     a fast spin. */
  .spinner {
    animation-duration: 1.6s;
  }
}