/* ==========================================================================
   Yiertek v6 · motion.css — version B only (v5-contract §6, v5.1-changes §2–§8,
   v6 hero stage)
   ==========================================================================
   The entrances (blur-in, spring pills, press) are site.css, for both versions.
   This file carries what motion.js drives, plus the v6 hero's B-only layer:
   · html.m-js  — motion.js is running (added at once, even under reduce);
   · html.m-on  — motion is welcome; the scrubbed and looping layer is live.
   Every moving rule sits inside `prefers-reduced-motion: no-preference`; the
   one thing hidden before motion.js arrives ([data-m-icon]) has a 3 s CSS
   failsafe; the hero's one-shot entrances are CSS alone and end visible
   without any script. Colours come from tokens only.
   ========================================================================== */

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

  /* -- §1 hero show (v6.2) ------------------------------------------------
     Each photo settles and drifts (14 s, alternate) — declared paused, running
     only while the show runs: site.js sets [data-running] on [data-show] and
     clears it on pause, on a hidden tab and under reduce, so the show's pause
     button freezes it (WCAG 2.2.2); motion.js adds .m-away while the stage is
     off screen. */
  html[data-motion="on"]:not(.no-js) .hero__frame .show__img {
    animation: m-settle 14s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate both;
    animation-play-state: paused;
  }
  html[data-motion="on"].m-on [data-show][data-running]:not(.m-away) .hero__frame .show__img { animation-play-state: running; }

  /* -- navigation: the card image becomes the product photo ---------------- */
  @view-transition { navigation: auto; }

  html[data-motion="on"] :is(.pp__photo, .product__photo):first-of-type img { view-transition-name: m-photo; }
  ::view-transition-group(m-photo) { animation-duration: 560ms; animation-timing-function: var(--e-out, cubic-bezier(0.16, 1, 0.3, 1)); }
  ::view-transition-image-pair(m-photo) { overflow: clip; }
  ::view-transition-old(m-photo),
  ::view-transition-new(m-photo) { height: 100%; object-fit: cover; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 280ms; }

  /* -- §2 models: the rows move by `translate`; the band clips them -------- */
  html[data-motion="on"].m-on [data-models] { overflow: clip; }
  html[data-motion="on"].m-on [data-models-row] { min-width: 0; overflow: visible; scroll-snap-type: none; will-change: translate; }

  /* -- §4 timeline: the fill grows from Day 0; unlit steps wait, dimmed ---- */
  html[data-motion="on"].m-on [data-tl-fill] { transform-origin: 0 50%; }
  html[data-motion="on"].m-on [data-tl-step] { transition: opacity var(--d-ui-slow, 300ms) ease; }
  html[data-motion="on"].m-on [data-tl-step]:not(.is-lit) { opacity: 0.45; }

  /* -- §6 record: nothing to pause until motion runs ----------------------- */
  html[data-motion="on"].m-on [data-record] svg { will-change: rotate; }

  /* -- carton and product cards: tilt needs a perspective on the parent ---- */
  html[data-motion="on"].m-on [data-tile="carton"] { perspective: 900px; }
  html[data-motion="on"].m-on .pcard__link { perspective: 800px; }
  .m-spec {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120%;
    aspect-ratio: 1;
    margin: -60% 0 0 -60%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(var(--canvas-rgb) / 0.42), transparent);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
    transition: opacity var(--d-ui-slow, 300ms) ease;
  }

  /* -- capabilities story: room for the photo to settle -------------------- */
  html[data-motion="on"].m-on [data-story-step] .story__media { overflow: clip; }

  /* -- icons draw their stroke on arrival (lengths from motion.js, in px) --- */
  html[data-motion="on"]:not(.no-js) [data-m-icon] { opacity: 0; animation: m-failsafe 1ms 3s forwards; }
  html[data-motion="on"].m-js [data-m-icon] { animation: none; }
  html[data-motion="on"] [data-m-icon].m-in { opacity: 1; }
  html[data-motion="on"] [data-m-icon].m-in > * {
    stroke-dasharray: var(--m-len) calc(var(--m-len) + 2px);
    animation: m-draw 900ms var(--e-move, cubic-bezier(0.65, 0, 0.35, 1)) calc(80ms + var(--m-i, 0) * 80ms) both;
  }

  /* -- §8 buttons: the bloom stays inside the pill, under the label -------- */
  html[data-motion="on"].m-on .btn { position: relative; isolation: isolate; overflow: clip; }
  .m-bloom { position: absolute; z-index: -1; border-radius: 50%; background: var(--copper); pointer-events: none; }
  .btn--primary > .m-bloom { z-index: 0; background: rgb(var(--canvas-rgb) / 0.32); mix-blend-mode: soft-light; }

  /* -- §8 the copper ring that slides between options ---------------------- */
  html[data-motion="on"].m-on :is([role="radiogroup"], [role="tablist"], .finder__chips, .filters__chips) { position: relative; }
  .m-ind {
    position: absolute;
    border: 1.5px solid var(--copper-line);
    border-radius: var(--r-pill, 999px);
    transform-origin: 0 0;
    pointer-events: none;
    transition: opacity var(--d-ui, 200ms) ease;
  }

  /* -- §8 sparks of the + → ✓ burst, the odometer, the words, the progress - */
  .m-spark {
    position: fixed;
    z-index: 1000;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--copper-line);
    pointer-events: none;
  }
  html[data-motion="on"].m-on [data-tray-count] { overflow: clip; }
  .m-odo { display: inline-block; position: relative; }
  .m-odo > span { display: block; }
  .m-odo > span + span { position: absolute; inset-inline: 0; top: 100%; }
  .m-odo.m-down > span + span { top: -100%; }
  .m-w { display: inline-block; }
  .m-progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--copper);
    transform-origin: 0 50%;
    scale: 0 1;
    pointer-events: none;
  }

  /* -- §7 success: a record drops onto the platter, then the check draws --- */
  .m-done__record { transform-box: fill-box; transform-origin: center; animation: m-drop 700ms cubic-bezier(0.34, 1.3, 0.64, 1) both; }
  .m-done__check { stroke-dasharray: 1 2; animation: m-check 420ms var(--e-move, cubic-bezier(0.65, 0, 0.35, 1)) 640ms both; }
}

/* The record's pause button has nothing to pause unless motion runs. */
html[data-motion="on"]:not(.m-on) [data-record-pause] { display: none; }

/* -- counters: tabular figures, and the real figure for screen readers ------ */
html[data-motion="on"] [data-m="counter"] { font-variant-numeric: tabular-nums; }
.m-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -- the success mark motion.js puts in [data-form-status]: a record on a platter
   seen from above, and a check. Block, so it reads the same in any status layout. */
.m-done { display: block; width: 88px; height: 40px; margin: 0 0 var(--s-2, 8px); overflow: visible; }
.m-done__platter { fill: var(--card-2); stroke: var(--rule); stroke-width: 1; }
.m-done__record circle { fill: var(--ink); }
.m-done__record .m-done__groove { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.m-done__record .m-done__label { fill: var(--copper); }
.m-done__mark { stroke: var(--on-copper); stroke-width: 1.2; stroke-linecap: round; }
.m-done__check { fill: none; stroke: var(--ok); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

@keyframes m-draw { from { stroke-dashoffset: calc(var(--m-len) + 1px); } to { stroke-dashoffset: 0px; } }
@keyframes m-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-drop { from { opacity: 0; transform: scale(1.45) rotate(-140deg); } }
@keyframes m-failsafe { to { opacity: 1; } }
@keyframes m-settle { from { scale: 1.08; translate: -8px 5px; } to { scale: 1; translate: 0 0; } }