/* scene.css (2026-10-23, his ask: the tank stories should look and move like shorodo.nagoya, scfo.de, twodo.design,
   velmax.llc, jeffmilanes.com ...). One type and motion system for the five tank pages; scene.js drives it.
   Type: the site's own sans (SF Pro / Inter, as before 10/23; Instrument Serif and the mono labels dropped 10/23 on his ask:
   "revert the page back to the old fonts"); labels: small capitals with a number; big outlined numerals; numbers that roll. Colours come from the page's own tokens (v4 / bowl.css). */
:root { --sc-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif; --sc-mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --sc-ease: cubic-bezier(.16, 1, .3, 1); }

/* ------------------------------------------------------------------ labels, headlines, accents */
.sc-label { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.4rem; font: 600 .72rem/1 var(--sc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.sc-label b { color: var(--chum-text); font-weight: 600; }
.sc-label::after { content: ""; width: 3.5rem; height: 1px; background: currentColor; opacity: .5; order: 0; }
.sc-label > :last-child { order: 1; }
.sc-h em, .sc .tale > p:first-child em { font-family: var(--sc-serif); font-style: normal; font-weight: 600; color: var(--chum-text); letter-spacing: -.025em; }

/* ------------------------------------------------------------------ the existing tank pages: chapter marks
   10/15 he dropped full-screen chapter titles ("no title screens"); so each chapter opens with a mark, not a screen:
   the number and name in small capitals, a big outlined numeral drifting behind it. */
html.v4.sc .ch-head { display: block !important; position: relative; isolation: isolate; min-height: 0; margin: 0; padding: clamp(3.5rem, 11vh, 6.5rem) 0 clamp(1.25rem, 4vh, 2.25rem); text-align: center; }
html.v4.sc #c-live > .ch-head, html.v4.sc.ctlpage .ch-head { display: none !important; }
html.v4.sc .ch-head h2, html.v4.sc .ch-head .ch-sub { display: none; }
html.v4.sc .ch-head::before { content: attr(data-n) "  \00B7  " attr(data-label); display: inline-block; margin: 0; white-space: pre; font: 600 .72rem/1 var(--sc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--chum-text); }
html.v4.sc .ch-head::after { content: attr(data-n); position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% calc(-38% + var(--py, 0px)); font: 600 clamp(9rem, 38vw, 20rem)/.8 var(--sc-serif);
  color: transparent; -webkit-text-stroke: 1px var(--line-strong); pointer-events: none; opacity: .65; }
html.v4.sc .tale > p:first-child { font-family: var(--sc-serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.02; }
html.v4.sc .ch-head + .band .lede > .head:first-child { display: none; }
html.v4.sc .lede .head h2 { font-family: var(--sc-mono); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; }
html.v4.sc .chstrip .chtab, html.v4.sc .chnav a { white-space: nowrap; }
html.v4.sc .sc-rows h3 { font-family: var(--sc-serif); font-weight: 600; }
html.v4.sc .sc-rows, html.v4.sc .sc-stats { text-align: left; }
html.v4.sc .sc-note { margin: 1.75rem 0 0; color: var(--grey); text-align: left; }
html.v4.sc .sc-note a { text-decoration: none; border-bottom: 1px solid currentColor; }
html.sc-anim .ch-head::before, html.sc-anim .ch-head::after { transition: opacity 1.2s var(--sc-ease); }
html.sc-anim .ch-head:not(.sc-in)::before { opacity: 0; }
html.sc-anim .ch-head:not(.sc-in)::after { opacity: 0; }

/* ------------------------------------------------------------------ the guide parts: numbered rows, stats, cards */
.sc-rows { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); counter-reset: scr; }
.sc-rows > li { display: grid; grid-template-columns: 3rem 1fr; gap: .25rem 1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); counter-increment: scr; }
.sc-rows > li::before { content: counter(scr, decimal-leading-zero); grid-row: span 2; font: 600 .72rem/1.9 var(--sc-mono); letter-spacing: .16em; color: var(--chum-text); }
.sc-rows h3 { margin: 0; font: 600 clamp(1.5rem, 4.4vw, 2.1rem)/1.05 var(--sc-serif); letter-spacing: -.025em; color: var(--strong); }
.sc-rows h3 i { font-style: italic; color: var(--grey); font-size: .7em; }
.sc-rows p { margin: .35rem 0 0; color: var(--grey); font-size: 1rem; line-height: 1.55; max-width: 40rem; }
.sc-rows p b { color: var(--text); font-weight: 600; }
@media (min-width: 52rem) { .sc-rows > li { grid-template-columns: 5rem 16rem 1fr; } .sc-rows > li::before { grid-row: auto; } .sc-rows p { margin: 0; } }
.sc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 2.25rem 0 0; border-top: 1px solid var(--line); }
@media (min-width: 52rem) { .sc-stats { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
.sc-stat { padding: 1.25rem 1rem 1.4rem 0; border-bottom: 1px solid var(--line); }
.sc-stat .k { display: block; margin-bottom: .7rem; font: 600 .66rem/1.3 var(--sc-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }
.sc-stat .v { display: flex; align-items: baseline; gap: .3rem; font: 600 clamp(2.6rem, 9vw, 4.4rem)/.95 var(--sc-serif); letter-spacing: -.03em; color: var(--strong); font-variant-numeric: tabular-nums; }
.sc-stat .v small { font: 600 .8rem/1 var(--sc-mono); letter-spacing: .08em; color: var(--chum-text); }
.sc-stat p { margin: .6rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--grey); }

/* the odometer */
.odo-d { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: -.08em; }
.odo-s { display: flex; flex-direction: column; transform: translateY(-20em); }
.odo-s > span { display: block; height: 1em; line-height: 1; text-align: center; }
html.sc-anim [data-count]:not(.sc-in) .odo-s { transform: translateY(0); }
html.sc-anim [data-count] .odo-s { transition: transform 1.8s cubic-bezier(.2, .75, .05, 1) calc(var(--k, 0) * 90ms + .1s); }
.odo-c { display: inline-block; }

/* ------------------------------------------------------------------ reveals (10/23 calm pass: one soft fade and lift, no blur, no word masks) */
html.sc-anim .sc-r, html.sc-anim [data-split], html.sc-anim .sc-rows > li, html.sc-anim .sc-stats > *, html.sc-anim .sc-cards > *, html.sc-anim .tk5 > *, html.sc-anim .sc-fig {
  transition: opacity 1.2s var(--sc-ease) calc(var(--i, 0) * 60ms), transform 1.4s var(--sc-ease) calc(var(--i, 0) * 60ms); }
html.sc-anim .sc-r:not(.sc-in), html.sc-anim [data-split]:not(.sc-in), html.sc-anim .sc-rows > li:not(.sc-in), html.sc-anim .sc-stats > :not(.sc-in), html.sc-anim .sc-cards > :not(.sc-in), html.sc-anim .tk5 > :not(.sc-in) { opacity: 0; transform: translateY(1rem); }
html.sc-anim .sc-fig:not(.sc-in) { opacity: 0; }

/* ------------------------------------------------------------------ the five tanks */
.tk5 { display: grid; margin: 2rem 0 0; border-top: 1px solid var(--line); }
.tk5-row { display: grid; grid-template-columns: 2.2rem 4.5rem 1fr auto; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--strong); text-decoration: none; }
.tk5-n { font: 600 .72rem/1 var(--sc-mono); letter-spacing: .14em; color: var(--grey); }
.tk5-img { width: 4.5rem; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #0b1016; }
.tk5-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--sc-ease); }
.tk5-t { display: grid; gap: .15rem; min-width: 0; }
.tk5-t b { font: 600 clamp(1.5rem, 4.6vw, 2.2rem)/1.05 var(--sc-serif); letter-spacing: -.025em; }
.tk5-t small { font: 600 .66rem/1.3 var(--sc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.tk5-go { font: 600 .72rem/1 var(--sc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); transition: transform .5s var(--sc-ease), color .3s; }
.tk5-row:hover .tk5-go, .tk5-row:focus-visible .tk5-go { transform: translateX(.35rem); color: var(--chum-text); }
.tk5-row:hover .tk5-img img { transform: scale(1.08); }
.tk5-row.is-here .tk5-n, .tk5-row.is-here .tk5-go { color: var(--chum-text); }
.tk5-row.is-here .tk5-t b { color: var(--chum-text); }
.tk5-row:focus-visible { outline: 2px solid var(--chum); outline-offset: 2px; }
@media (min-width: 52rem) { .tk5-row { grid-template-columns: 4rem 7rem 1fr auto; padding: 1.1rem 0; } .tk5-img { width: 7rem; } }

/* ------------------------------------------------------------------ the scene marker */
.sc-hud { position: fixed; z-index: 40; left: max(16px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); display: grid; gap: .55rem;
  font: 600 .66rem/1 var(--sc-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--sc-ease); }
.sc-hud.on { opacity: 1; transform: none; }
@media (max-width: 59.99rem) { .sc-hud { padding: .55rem .8rem .5rem; border-radius: 12px; background: var(--bar-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); gap: .45rem; } }
.sc-hud-t { display: flex; align-items: baseline; gap: .55rem; }
.sc-hud-t b { color: var(--strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-hud-name { color: var(--chum-text); }
.sc-hud.flip .sc-hud-t b, .sc-hud.flip .sc-hud-name { animation: hudflip .6s var(--sc-ease); }
@keyframes hudflip { from { opacity: 0; transform: translateY(.6em); } }
.sc-hud-rule { display: flex; gap: 4px; align-items: flex-end; height: 10px; }
.sc-hud-rule i { width: 1px; height: 5px; background: var(--line-strong); transition: height .4s var(--sc-ease), background .4s; }
.sc-hud-rule i.done { background: var(--grey); }
.sc-hud-rule i.now { height: 10px; background: var(--chum); }
@media (prefers-reduced-motion: reduce) { .sc-hud, .sc-hud.flip .sc-hud-t b, .sc-hud.flip .sc-hud-name { transition: none; animation: none; } }

/* ------------------------------------------------------------------ phones: smooth scrolling (10/23, his words: "so clunky on mobile")
   Reveals on a touch screen fade and lift only: a blur on each word and row, animated while the finger scrolls,
   was a filtered GPU layer per element. The look stays; the blur-in is kept on computers. */
@media (hover: none) and (pointer: coarse) {
  html.sc-anim .sc-r, html.sc-anim .sc-rows > li, html.sc-anim .sc-stats > *, html.sc-anim .sc-cards > *, html.sc-anim .tk5 > * { transition-property: opacity, transform; }
  html.sc-anim .sc-r:not(.sc-in), html.sc-anim .sc-rows > li:not(.sc-in), html.sc-anim .sc-stats > :not(.sc-in), html.sc-anim .sc-cards > :not(.sc-in), html.sc-anim .tk5 > :not(.sc-in) { filter: none; }
  html.tk-anim .tk-words .w { filter: none; transition-property: opacity, transform; }
  .tk-rot-w, .tk-rot-w:not(.on) { filter: none; }
}

/* 10/23 minimal pass (his rule since 10/15: no hairlines): rows, stats and the tank list separate by space alone */
.sc-rows, .sc-rows > li, .sc-stats, .sc-stat, .tk5, .tk5-row { border-top: 0; border-bottom: 0; }
/* 10/23 calm pass: the old fonts have no italic accent; the accent word is chum blue, upright */
.sc-h em, .sc-h3 em, .bw-step h2 em, .bw-hero h1 em, .tale > p em { font-style: normal; }