/* =====================================================================
   Motion prototypes M01 · M02 · M03 — CSS keyframes only, no framework.
   The static state IS the final frame; playback is opt-in via controls.
   prefers-reduced-motion: the player never autoplays and the static
   composition is shown; Play still works if the viewer chooses it.
   ===================================================================== */

/* shared primitives */
@keyframes io-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes io-fade-up{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes io-draw{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
@keyframes io-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.55}}
@keyframes io-ring{0%{transform:scale(.4);opacity:0}60%{opacity:.9}100%{transform:scale(1);opacity:1}}
@keyframes io-dim{0%{opacity:.25}100%{opacity:1}}

/* ---------- M01 · Equipment gains a voice (8 s) ---------- */
[data-motion="m01"] .sensor-pt,[data-motion="m01"] .story>g{transform-box:fill-box;transform-origin:center}
[data-motion="m01"] .lead{stroke-dasharray:100;stroke-dashoffset:0}
[data-motion="m01"] .trend-path{stroke-dasharray:100;stroke-dashoffset:0}
[data-motion="m01"] .attn-dot,[data-motion="m01"] .hist-new{transform-box:fill-box;transform-origin:center}

[data-motion="m01"][data-state="playing"] .sensor-pt{opacity:0;animation:io-pop .5s var(--ease) forwards}
[data-motion="m01"][data-state="playing"] .s1{animation-delay:.6s}
[data-motion="m01"][data-state="playing"] .s2{animation-delay:1.0s}
[data-motion="m01"][data-state="playing"] .s3{animation-delay:1.4s}
[data-motion="m01"][data-state="playing"] .lead{stroke-dashoffset:100;animation:io-draw 1.2s linear forwards}
[data-motion="m01"][data-state="playing"] .l1{animation-delay:2.0s}
[data-motion="m01"][data-state="playing"] .l2{animation-delay:2.2s}
[data-motion="m01"][data-state="playing"] .l3{animation-delay:2.4s}
[data-motion="m01"][data-state="playing"] .card-a{opacity:0;animation:io-fade-up .5s var(--ease) 2.8s forwards}
[data-motion="m01"][data-state="playing"] .trend-path{stroke-dashoffset:100;animation:io-draw 1.1s linear 3.1s forwards}
[data-motion="m01"][data-state="playing"] .attn-dot{opacity:0;animation:io-pop .4s var(--ease) 4.1s forwards,io-pulse 1.2s ease-in-out 4.5s 2}
[data-motion="m01"][data-state="playing"] .card-b{opacity:0;animation:io-fade-up .5s var(--ease) 4.4s forwards}
[data-motion="m01"][data-state="playing"] .card-c{opacity:0;animation:io-fade-up .5s var(--ease) 6.0s forwards}
[data-motion="m01"][data-state="playing"] .card-d{opacity:0;animation:io-fade-up .5s var(--ease) 6.7s forwards}
[data-motion="m01"][data-state="playing"] .hist-new{opacity:0;animation:io-pop .4s var(--ease) 7.4s forwards}

/* ---------- M02 · A change gains context (10 s) ---------- */
.m2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
@media (max-width:640px){.m2{grid-template-columns:1fr}}
.m2 .ui{height:100%}
.m2 .m2-ctx .ui-body{gap:8px}
.m2 .chip{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);font-size:var(--t-sm)}
.m2 .chip b{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.m2 .choice{display:grid;gap:8px}
.m2 .choice>div{padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);display:flex;justify-content:space-between;align-items:center;font-size:var(--t-sm)}
.m2 .choice>div.pick{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-soft-ink);font-weight:600}
.m2 .choice .tick{width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:11px}
.m2 .hist{display:flex;align-items:center;gap:0;padding:6px 4px}
.m2 .hist i{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}
.m2 .hist i.new{background:var(--attention);width:12px;height:12px}
.m2 .hist s{flex:1;height:2px;background:var(--line-strong);display:block;text-decoration:none}
.m2 .hist-note{font-size:var(--t-xs);color:var(--ink-3);font-family:var(--font-mono)}
.m2 .m2-trend .seg-attn{stroke:var(--attention)}
[data-motion="m02"] .m2-trend .seg-base,[data-motion="m02"] .m2-trend .seg-attn{stroke-dasharray:100;stroke-dashoffset:0}
[data-motion="m02"][data-state="playing"] .m2-trend .seg-base{stroke-dashoffset:100;animation:io-draw 1.4s linear .2s forwards}
[data-motion="m02"][data-state="playing"] .m2-trend .seg-attn{stroke-dashoffset:100;animation:io-draw .7s linear 1.6s forwards}
[data-motion="m02"][data-state="playing"] .m2-trend .flag{opacity:0;animation:io-fade-up .4s var(--ease) 2.2s forwards}
[data-motion="m02"][data-state="playing"] .m2-ctx .chip{opacity:0;animation:io-fade-up .45s var(--ease) forwards}
[data-motion="m02"][data-state="playing"] .m2-ctx .chip:nth-child(2){animation-delay:2.6s}
[data-motion="m02"][data-state="playing"] .m2-ctx .chip:nth-child(3){animation-delay:3.1s}
[data-motion="m02"][data-state="playing"] .m2-ctx .chip:nth-child(4){animation-delay:3.6s}
[data-motion="m02"][data-state="playing"] .m2-person .choice>div{opacity:0;animation:io-fade-up .4s var(--ease) forwards}
[data-motion="m02"][data-state="playing"] .m2-person .choice>div:nth-child(1){animation-delay:4.4s}
[data-motion="m02"][data-state="playing"] .m2-person .choice>div:nth-child(2){animation-delay:4.7s}
[data-motion="m02"][data-state="playing"] .m2-person .choice>div:nth-child(3){animation-delay:5.0s}
[data-motion="m02"][data-state="playing"] .m2-person .choice>div.pick{animation:io-fade-up .4s var(--ease) 4.7s forwards,io-dim .3s ease 6.0s both}
[data-motion="m02"][data-state="playing"] .m2-person .tick{opacity:0;animation:io-pop .4s var(--ease) 6.2s forwards}
[data-motion="m02"][data-state="playing"] .m2-hist .hist i,[data-motion="m02"][data-state="playing"] .m2-hist .hist s{opacity:0;animation:io-fade-up .3s var(--ease) 7.2s forwards}
[data-motion="m02"][data-state="playing"] .m2-hist .hist i.new{animation:io-pop .5s var(--ease) 8.4s forwards}
[data-motion="m02"][data-state="playing"] .m2-hist .hist-note{opacity:0;animation:io-fade-up .4s var(--ease) 9.0s forwards}

/* ---------- M03 · Familiar equipment, configured sensing (9 s) ---------- */
.m3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.m3{grid-template-columns:1fr}}
.m3 figure{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:var(--surface);transition:opacity .4s}
.band .m3 figure{background:var(--band-surface);border-color:var(--band-line)}
.m3 figcaption{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
.m3 .art .lead{stroke-dasharray:100;stroke-dashoffset:0}
[data-motion="m03"][data-state="playing"] .m3 figure{opacity:.3;animation:io-dim .6s var(--ease) forwards}
[data-motion="m03"][data-state="playing"] .m3 figure:nth-child(1){animation-delay:.2s}
[data-motion="m03"][data-state="playing"] .m3 figure:nth-child(2){animation-delay:3.2s}
[data-motion="m03"][data-state="playing"] .m3 figure:nth-child(3){animation-delay:6.2s}
[data-motion="m03"][data-state="playing"] .m3 .lead{stroke-dashoffset:100;animation:io-draw 1.2s linear forwards}
[data-motion="m03"][data-state="playing"] .m3 figure:nth-child(1) .lead{animation-delay:.8s}
[data-motion="m03"][data-state="playing"] .m3 figure:nth-child(2) .lead{animation-delay:3.8s}
[data-motion="m03"][data-state="playing"] .m3 figure:nth-child(3) .lead{animation-delay:6.8s}
[data-motion="m03"][data-state="playing"] .m3 .sensor-pt{transform-box:fill-box;transform-origin:center;opacity:0;animation:io-pop .5s var(--ease) forwards}
[data-motion="m03"][data-state="playing"] .m3 figure:nth-child(1) .sensor-pt{animation-delay:.5s}
[data-motion="m03"][data-state="playing"] .m3 figure:nth-child(2) .sensor-pt{animation-delay:3.5s}
[data-motion="m03"][data-state="playing"] .m3 figure:nth-child(3) .sensor-pt{animation-delay:6.5s}

@media (prefers-reduced-motion:reduce){
  /* playback remains available by explicit choice; nothing moves otherwise */
  [data-motion][data-state="static"] *{animation:none!important}
}