/* #how — Mount / Detect / Play / Review. Scroll-snap cards on mobile, sticky stage on desktop. */
#how { position: relative; }
#how .how-head { max-width: 46rem; margin-bottom: var(--s6); }
#how .how-head .display { font-size: clamp(2.6rem, 8vw, 6rem); margin-top: var(--s3); }
#how .how-hl { color: var(--accent-ink); }
#how .how-lede b { color: var(--accent-ink); font-weight: 700; }
#how .how-lede { color: var(--fg); font-size: 1.15rem; margin: var(--s4) 0 0; max-width: 32ch; }

#how .how-steps { list-style: none; margin: 0; padding: 0; }
#how .how-num {
  display: block;
  font: 900 clamp(4rem, 9vw, 8.5rem)/.85 var(--font-display);
  font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--fg);
  transition: color .5s var(--ease-out), -webkit-text-stroke-color .5s;
}
#how .in-view .how-num { color: var(--fg); -webkit-text-stroke-color: var(--fg); }
#how h3 { font: 900 clamp(1.8rem, 4vw, 2.8rem)/1 var(--font-display); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; margin: var(--s3) 0 var(--s2); }
#how .how-copy p { color: var(--muted); margin: 0; max-width: 34ch; }
#how .how-copy b { color: var(--fg); font-weight: 600; }

/* illustration panel: a dark screen; felt only where there is a table, orange only for corners locked + pots */
#how .fig {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 2px solid var(--line);
  box-shadow: 0 30px 80px -40px var(--shadow);
  display: grid; place-items: center;
  overflow: hidden;
}
#how .fig svg { width: 100%; height: 100%; fill: none; stroke: var(--fg); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#how .fig .thin { stroke-width: 2.5; }
#how .fig .fill { fill: var(--fg); stroke: none; }
#how .fig text { font: 700 13px var(--font-mono); letter-spacing: .1em; fill: var(--fg); stroke: none; }
#how .fig .pot rect.fill { fill: var(--accent); }
#how .fig .pot text, #how .fig .hole { fill: var(--rail); stroke: none; }
#how .fig .rec { fill: var(--accent); }
/* tables look like tables: black rail + pockets on felt, in both themes */
#how .fig .rail { stroke: var(--rail); stroke-width: 14; }
#how .fig .pocket, #how .fig .corner .fill, #how .fig .ball8 { fill: var(--rail); stroke: none; }
#how .fig .corner .fill { r: 9px; }
#how .fig .corner .ring { stroke: var(--fg); opacity: .5; }
#how .fig .diamond { fill: var(--ball); stroke: none; opacity: .8; }
#how .fig .aim { stroke-width: 2.5; stroke-dasharray: 2 7; opacity: .55; }
#how .fig .sensor { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
#how .fig .cue { transform-box: fill-box; transform-origin: center; }
#how .fig .fov { stroke-width: 2; stroke-dasharray: 2 7; opacity: .55; }
#how .fig .felt { fill: var(--felt); stroke: none; }
#how .fig .scan { stroke-width: 2; opacity: 0; }
#how .fig .ring { stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
#how .fig .cue { fill: var(--ball); stroke-width: 3; }
#how .fig .obj { transform-box: fill-box; transform-origin: center; }

/* mobile: horizontal scroll-snap cards */
@media (max-width: 899px) {
  #how .how-stage { display: none; }
  #how .how-steps {
    display: flex; gap: var(--s3);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--s4);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  #how .how-steps::-webkit-scrollbar { display: none; }
  #how .how-step {
    flex: 0 0 min(84%, 360px);
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s3) var(--s3) var(--s4);
  }
  #how .how-copy { padding: var(--s4) var(--s2) 0; }
}

/* desktop: sticky illustration, steps scroll past */
@media (min-width: 900px) {
  #how .how-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s6); }
  #how .how-stage {
    position: sticky; top: max(96px, calc(50vh - 220px)); align-self: start;
    display: grid;
  }
  #how .how-stage .fig {
    grid-area: 1 / 1;
    border-radius: var(--radius-lg);
    opacity: 0; transform: scale(.94) rotate(-1.5deg);
    transition: opacity .5s var(--ease-out), transform .7s var(--ease-spring);
  }
  #how .how-stage .fig.is-active { opacity: 1; transform: none; }
  #how.staged .how-step > .fig { display: none; }
  #how .how-step {
    min-height: 72vh;
    display: flex; flex-direction: column; justify-content: center; gap: var(--s4);
  }
  #how .how-copy { border-left: 4px solid var(--line); padding-left: var(--s5); transition: border-color .4s, opacity .4s; }
  #how.staged .how-step:not(.is-active) .how-copy { opacity: .35; }
  #how.staged .how-step.is-active .how-copy { border-color: var(--fg); }
  #how.staged .how-step:not(.is-active) .how-num { color: transparent; -webkit-text-stroke-color: var(--fg); }
}

/* motion: the static state above is the reduced-motion state */
@media (prefers-reduced-motion: no-preference) {
  /* tables, rails and pockets are drawn from the first frame; only balls and pocket sensors move */
  #how .fig .rec, #how .fig .tag { opacity: 0; transition: opacity .3s .15s; }
  #how :is(.in-view > .fig, .fig.is-active) :is(.tag, .rec) { opacity: 1; }
  #how :is(.in-view > .fig, .fig.is-active) .rec { animation: how-blink 1.2s steps(2, jump-none) .5s infinite; }

  #how :is(.in-view > .fig, .fig.is-active) .ring { animation: how-pulse 2s var(--ease-out) calc((var(--d) - 1s) * 4) infinite; }
  #how :is(.in-view > .fig, .fig.is-active) .scan { animation: how-scan 1s ease-in-out .2s 2 alternate both; }

  #how .row { opacity: 0; }
  #how :is(.in-view > .fig, .fig.is-active) .row { animation: how-row 6s var(--ease-out) calc(var(--i) * .3s) infinite both; }

  #how :is(.in-view > .fig, .fig.is-active) .cue { animation: how-cue 4s var(--ease-out) infinite; }
  #how :is(.in-view > .fig, .fig.is-active) .obj { animation: how-pot 4s var(--ease-out) infinite; }
  #how :is(.in-view > .fig, .fig.is-active) .sensor { animation: how-sensor 4s var(--ease-out) infinite; }

  /* loops pause while the section is off-screen (how.js toggles .on) */
  #how:not(.on) .fig * { animation-play-state: paused; }
}

@keyframes how-blink { to { opacity: 0; } }
@keyframes how-pulse { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes how-scan { from { opacity: 0; transform: translateY(10px); } to { opacity: .9; transform: translateY(150px); } }
@keyframes how-row {
  0% { opacity: 0; transform: translateX(-18px); }
  8%, 80% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}
/* one 4 s rack: cue rolls to contact, object ball drops TR, the TR pocket sensor fires, reset */
@keyframes how-cue {
  0%, 10% { opacity: 1; transform: none; }
  32%, 88% { opacity: 1; transform: translate(110px, -44px); }
  96%, 100% { opacity: 0; transform: translate(110px, -44px); }
}
@keyframes how-pot {
  0%, 32% { opacity: 1; transform: none; }
  58% { opacity: 1; transform: translate(74px, -44px) scale(.75); }
  66%, 100% { opacity: 0; transform: translate(80px, -48px) scale(0); }
}
@keyframes how-sensor {
  0%, 58% { opacity: 0; transform: scale(.6); }
  64% { opacity: 1; transform: scale(1); }
  86%, 100% { opacity: 0; transform: scale(1.8); }
}