/* Pick2Stock League: motion. Everything here only applies under html.motion, which
   src/ui/motion.js adds when JS runs and the reader has not asked for reduced motion. Without it
   every element renders in its final, readable state. Hover scale lives with each component in
   system.css and uses the independent `scale` property, so it composes with these transforms. */

/* ---------- reveal: fade and rise ---------- */

html.motion [data-reveal]:not([data-reveal="words"]):not([data-reveal="lines"]) {
  opacity: 0;
  translate: 0 24px;
  transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * var(--stagger));
}
html.motion [data-reveal].is-revealed:not([data-reveal="words"]):not([data-reveal="lines"]) {
  opacity: 1;
  translate: 0 0;
}
/* once in, hover and other transitions are not slowed by the reveal timing */
html.motion [data-reveal].is-settled:not([data-reveal="words"]):not([data-reveal="lines"]) { transition: none; translate: none; }
html.motion .btn[data-reveal].is-settled,
html.motion .card[data-reveal].is-settled {
  transition: scale var(--dur) ease-out, filter var(--dur) ease-out, background-color var(--dur) ease-out,
    border-color var(--dur) ease-out, -webkit-backdrop-filter var(--dur) ease-out, backdrop-filter var(--dur) ease-out;
}
html.motion .step[data-reveal].is-settled { transition: scale var(--dur) ease-out; }

/* ---------- text reveal: words or lines rise inside a clip ---------- */

.tr { display: inline; }
.tr-w {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  /* room for ascenders and descenders, cancelled so layout does not move */
  padding: .08em .02em .14em;
  margin: -.08em -.02em -.14em;
}
.tr-i { display: inline-block; }
html.motion [data-reveal="words"] .tr-i,
html.motion [data-reveal="lines"] .tr-i {
  opacity: 0;
  transform: translateY(.6em);
  transition: transform 1000ms var(--ease-out), opacity 700ms var(--ease-soft);
  transition-delay: calc(var(--tr-i, 0) * var(--tr-step, 55ms) + var(--tr-base, 0ms));
}
html.motion [data-reveal="lines"] .tr-i { --tr-step: 110ms; }
html.motion [data-reveal="words"].is-revealed .tr-i,
html.motion [data-reveal="lines"].is-revealed .tr-i {
  opacity: 1;
  transform: none;
}

/* ---------- SVG: draw, assemble, drift ---------- */

html.motion [data-draw]:not([data-draw="assemble"]) .draw-p {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--draw-dur, 1400ms) var(--ease-in-out);
  transition-delay: calc(var(--draw-i, 0) * var(--draw-step, 90ms) + var(--draw-base, 0ms));
}
html.motion [data-draw].is-revealed:not([data-draw="assemble"]) .draw-p { stroke-dashoffset: 0; }
html.motion [data-draw].is-drawn:not([data-draw="assemble"]) .draw-p { stroke-dasharray: none; transition: none; }
/* fills fade in after the strokes */
html.motion [data-draw]:not([data-draw="assemble"]) .draw-fill { opacity: 0; transition: opacity 600ms ease; transition-delay: var(--fill-delay, 900ms); }
html.motion [data-draw].is-revealed .draw-fill { opacity: 1; }

html.motion [data-draw="assemble"] .asm-p {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--ax, 0px), var(--ay, 0px)) rotate(var(--ar, 0deg)) scale(.6);
  transition: transform 900ms var(--ease-out), opacity 500ms ease;
  transition-delay: calc(var(--asm-i, 0) * 90ms + var(--asm-base, 0ms));
}
html.motion [data-draw="assemble"].is-revealed .asm-p { opacity: 1; transform: none; }

html.motion [data-drift] .drift-p {
  transform-box: fill-box;
  transform-origin: center;
  animation: p2s-drift var(--drift-dur, 9s) ease-in-out infinite alternate;
  animation-delay: var(--drift-delay, 0s);
  animation-play-state: paused;
}
html.motion [data-drift].is-inview .drift-p { animation-play-state: running; }
@keyframes p2s-drift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(var(--dx, 2px), var(--dy, -2px)); }
  100% { transform: translate(calc(var(--dx, 2px) * -.6), calc(var(--dy, -2px) * .8)); }
}

/* ---------- live dot pulse ---------- */

html.motion .live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--ember);
  animation: p2s-ping 2.2s var(--ease-out) infinite;
}
@keyframes p2s-ping { 0% { opacity: .8; scale: .5; } 80%, 100% { opacity: 0; scale: 1.6; } }

/* ---------- value flash on live change ---------- */

html.motion .flash-up { animation: p2s-flash-up 1.2s ease-out; }
html.motion .flash-down { animation: p2s-flash-down 1.2s ease-out; }
@keyframes p2s-flash-up { 0% { color: var(--yes); } 100% { color: inherit; } }
@keyframes p2s-flash-down { 0% { color: var(--no); } 100% { color: inherit; } }

/* ---------- narrative frames ---------- */

.narr {
  /* user, 2026-09-18: no box, the illustration sits straight on the page background */
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: visible;
  color: var(--text-2);
  isolation: isolate;
}
.narr__top { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0; }
.narr__title { font-size: .8125rem; font-weight: 600; color: var(--text-2); letter-spacing: -0.005em; }
.narr__svg { width: 100%; height: auto; overflow: visible; font-family: var(--f-sans); }
.narr__svg text { font-family: var(--f-sans); font-variant-numeric: tabular-nums; }
.narr__cap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
}
.narr__cap-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-2); font-size: .6875rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
}
.narr__cap-text { flex: 1; min-width: 0; transition: opacity 260ms ease; }
.narr__cap-text.is-swapping { opacity: 0; }
.narr__bar { position: relative; width: 64px; height: 2px; border-radius: 1px; background: var(--line-2); overflow: hidden; flex: none; }
.narr__bar i { position: absolute; inset: 0; background: var(--ember); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* narrative SVG vocabulary (src/ui/narratives.js) */
.narr__svg .n-grid line { stroke: #1c1c1c; stroke-width: 1; }
.narr__svg .n-axis { stroke: var(--line-2); stroke-width: 1; }
.narr__svg .n-sep { stroke: var(--line); stroke-width: 1; }
.narr__svg .n-line { fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.narr__svg .n-line--soft { stroke: var(--text-2); stroke-width: 1.5; }
.narr__svg .n-area { fill: rgba(255, 255, 255, .07); stroke: none; }
.narr__svg .n-head { fill: var(--text); }
.narr__svg .n-dot { fill: var(--ember); }
.narr__svg .n-ring { fill: none; stroke: var(--ember); stroke-width: 1.2; }
.narr__svg .n-thr { stroke: var(--ember-2); stroke-width: 1.2; stroke-dasharray: 5 5; }
.narr__svg .n-thr--quiet { stroke: rgba(255, 255, 255, .45); }
.narr__svg .n-conn { stroke: var(--ember); stroke-width: 1.4; }
.narr__svg .n-resolve { stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; stroke-dasharray: 3 4; }
.narr__svg .n-card { fill: #171717; stroke: var(--line-2); stroke-width: 1; }
.narr__svg .n-vault { fill: #191919; }
.narr__svg .is-lit { stroke: var(--ember-line); transition: stroke 400ms ease; }
.narr__svg .n-chip { fill: rgba(255, 255, 255, .03); stroke: var(--line-2); stroke-width: 1; }
.narr__svg .n-chip--ember { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .38); }
.narr__svg .n-badge { fill: #1f1f1f; stroke: var(--line-2); stroke-width: 1; }
.narr__svg .n-badge-t { fill: var(--text); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.narr__svg .n-glyph { fill: none; stroke: var(--text-2); stroke-width: 1.4; stroke-linejoin: round; }
.narr__svg .n-t { fill: var(--text); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.narr__svg .n-t2 { fill: var(--text-2); font-size: 12.5px; font-weight: 500; }
.narr__svg .n-m { fill: var(--muted); font-size: 11.5px; font-weight: 500; }
.narr__svg .n-xs { font-size: 10.5px; }
.narr__svg .n-sm { font-size: 12.5px; }
.narr__svg .n-lg { font-size: 15px; }
.narr__svg .n-strong { font-weight: 600; fill: var(--text); }
.narr__svg .n-eb { fill: var(--faint); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; }
.narr__svg .n-big { fill: var(--text); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.narr__svg .n-huge { fill: var(--text); font-size: 38px; font-weight: 700; letter-spacing: -0.04em; }
.narr__svg .n-giant { fill: var(--text); font-size: 72px; font-weight: 700; letter-spacing: -0.05em; }
.narr__svg .n-num { fill: var(--text); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.narr__svg .n-num--dim { fill: var(--text-2); }
.narr__svg .n-clock { fill: var(--text); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; transition: fill 300ms; }
.narr__svg .n-clock.is-locked { fill: var(--ember-2); }
.narr__svg .n-yes-t { fill: var(--yes); }
.narr__svg .n-no-t { fill: var(--no); }
.narr__svg .n-ember-t { fill: var(--ember-2); }
.narr__svg .n-live { fill: var(--ember); }
.narr__svg .n-pill { fill: transparent; stroke-width: 1.2; }
.narr__svg .n-pill--yes { stroke: var(--yes-line); fill: var(--yes-tint); }
.narr__svg .n-pill--no { stroke: var(--no-line); fill: var(--no-tint); }
.narr__svg .n-pill-t { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; }
.narr__svg .n-pickbig { fill: rgba(255, 255, 255, .02); stroke-width: 1.3; transition: fill 260ms ease; }
.narr__svg .n-pickbig--yes { stroke: var(--yes-line); }
.narr__svg .n-pickbig--no { stroke: var(--no-line); }
.narr__svg .n-pickbig.is-on { fill: rgba(126, 224, 184, .16); stroke: var(--yes); }
.narr__svg .n-pick-t { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.narr__svg .n-cursor { fill: var(--text); stroke: #0a0a0a; stroke-width: 1.4; stroke-linejoin: round; }
.narr__svg .n-track { fill: #202020; }
.narr__svg .n-hatch { stroke: #353535; stroke-width: 2; }
.narr__svg .n-fill-yes { fill: var(--yes); }
.narr__svg .n-fill-no { fill: var(--no); }
.narr__svg .n-fill-ember { fill: var(--ember); }
.narr__svg .n-dot-neutral { fill: #363636; stroke: #464646; stroke-width: 1; }
.narr__svg .n-dot-yes { fill: var(--yes); }
.narr__svg .n-dot-no { fill: var(--no); }
.narr__svg .n-lock-body { fill: #262626; stroke: var(--text-2); stroke-width: 1.3; }
.narr__svg .n-lock-shackle { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: round; }
.narr__svg .n-round { fill: #0e0e0e; stroke: var(--text-2); stroke-width: 1.5; transition: fill 250ms, stroke 250ms, opacity 250ms; }
.narr__svg .is-after .n-round, .narr__svg .n-round.is-after { opacity: .32; }
.narr__svg .is-effect .n-round, .narr__svg .n-round.is-effect { fill: var(--ember); stroke: var(--ember); }
.narr__svg .n-scan { fill: none; stroke: var(--ember); stroke-width: 1.5; stroke-dasharray: 3 3; transition: stroke-dasharray 200ms; }
.narr__svg .is-selected .n-scan { stroke-dasharray: none; stroke-width: 2; }
.narr__svg .n-stamp { fill: rgba(126, 224, 184, .1); stroke: var(--yes); stroke-width: 2.2; }
.narr__svg .n-stamp-t { fill: var(--yes); font-size: 22px; font-weight: 700; letter-spacing: .08em; }
.narr__svg .n-stamp-t--lg { font-size: 30px; }
.narr__svg .n-shock { fill: none; stroke: var(--yes); stroke-width: 1.2; }
.narr__svg .n-check { fill: none; stroke: var(--yes); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.narr__svg .n-check--dark { stroke: #0a0a0a; }
.narr__svg .n-rank { fill: var(--faint); font-size: 12px; font-weight: 600; }
.narr__svg .n-pts { fill: var(--text); font-size: 13.5px; font-weight: 600; }
.narr__svg .n-row-bg { fill: rgba(255, 255, 255, .08); }
.narr__svg .n-row-bar { fill: var(--ember); }
.narr__svg .n-delta { fill: var(--ember-2); font-size: 15px; font-weight: 700; }
.narr__svg .n-flow { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; stroke-dasharray: 2 5; }
.narr__svg .n-flow--ghost { stroke: rgba(255, 255, 255, .14); }
.narr__svg .n-glow { display: none; } /* no orange glows (user, 2026-09-15) */
.narr__svg .n-token { fill: #202020; stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; }
.narr__svg .n-token-ring { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.narr__svg .n-token-glyph { fill: none; stroke: var(--ember-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.narr__svg .n-slot { fill: none; stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 2 3; }
.narr__svg .n-claim { fill: rgba(255, 255, 255, .2); stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.narr__svg .n-ripple { fill: none; stroke: var(--ember-2); stroke-width: 1; }

/* the story rail sits in the frame top */
.narr__rail { display: flex; gap: 6px; flex: 1; justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
.narr__rail li { display: grid; gap: 7px; min-width: 0; flex: 0 1 96px; font-size: .75rem; font-weight: 600; color: var(--faint); transition: color 300ms ease; }
.narr__rail li i { display: block; height: 2px; border-radius: 1px; background: var(--line-2); overflow: hidden; position: relative; }
.narr__rail li i::after { content: ""; position: absolute; inset: 0; background: var(--ember); transform-origin: left; transform: scaleX(var(--p, 0)); }
.narr__rail li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.narr__rail li.is-active { color: var(--text); }
.narr--frame .narr__top .narr__title { display: none; }

/* ---------- scroll story ---------- */

.story__steps { display: grid; gap: 56px; }
.story__step { display: grid; gap: 14px; }
.story__still { margin-top: 18px; }
.story__visual-col { display: none; }

@media (min-width: 960px) {
  html.motion .story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 72px; align-items: start; }
  html.motion .story__steps { gap: 0; }
  html.motion .story__step {
    min-height: 78vh;
    align-content: center;
    opacity: .28;
    transition: opacity 500ms ease;
  }
  html.motion .story__step.is-active { opacity: 1; }
  html.motion .story__step:first-child { min-height: 64vh; }
  html.motion .story__step:last-child { min-height: 70vh; }
  html.motion .story__still { display: none; }
  html.motion .story__visual-col { display: block; position: sticky; top: calc(50vh - min(34vw, 460px) * .5 + var(--header-h) * .25); }
}

@media (prefers-reduced-motion: reduce) {
  .narr__cap-text { transition: none; }
}