/* ==========================================================================
Mission Me — components · the base system (first drawn as v0.4 "Polish"; Tactile sits on top)
Ordered by Atomic Design: base → atoms → molecules → organisms → templates.
Class names: .block, .block__part, .block--variant, state via .is-* or ARIA.
The look comes from Figma "✦ Polish" (123:2) and the art direction (70:1684):
the stop's photo blurred into colour, light display type set left, glass that
reads as a material (blur, a 1px top highlight, a soft drop), one bone-white
action. On paper the same parts turn to frosted white with ink.
Colours only come from the semantic tokens, so every part works on photo and
on paper (tokens.css switches the set for .screen--paper / .panel--paper).
========================================================================== */
/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
* { font-variation-settings: "MONO" var(--mono), "DRKM" var(--drkm), "slnt" var(--slnt); }
body { margin: 0; font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--type-body-size); line-height: var(--type-body-lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: var(--weight-light); }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 4px; }
/* ==========================================================================
ATOMS
========================================================================== */
/* ---- Type: the Figma text styles ----------------------------------------- */
.t-numeral { font-size: var(--type-numeral-size); line-height: var(--type-numeral-lh); letter-spacing: var(--type-numeral-track); font-weight: var(--weight-light); }
.t-display { font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh); letter-spacing: var(--type-display-track); font-weight: var(--weight-light); }
.t-display-l, .t-title-l, .t-statement
{ font-size: var(--type-display-l-size); line-height: var(--type-display-l-lh); letter-spacing: var(--type-display-track); font-weight: var(--weight-light); }
.t-title { font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: var(--type-title-track); font-weight: var(--weight-light); }
.t-body-l { font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); letter-spacing: var(--type-body-l-track); }
.t-row { font-size: var(--type-row-size); line-height: var(--type-row-lh); letter-spacing: var(--type-row-track); }
.t-body { font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-track); }
.t-small { font-size: var(--type-small-size); line-height: var(--type-small-lh); }
.t-label, .t-meta
{ font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-track); font-weight: var(--weight-medium); }
.t-label { color: var(--text-secondary); }
.t-caption, .t-note
{ font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-label-track); font-weight: var(--weight-medium); }
.t-note { color: var(--text-tertiary); }
.t-note--sup { vertical-align: super; margin: 0 .2em; }
/* One word set a little heavier than the line around it */
.t-em { font-style: normal; font-weight: var(--weight-medium); }
.t-statement em { font-style: normal; font-weight: var(--weight-medium); }
.t-slant { --slnt: var(--slant-on); }
.t-mono { --mono: var(--mono-on); }
.t-upper { text-transform: uppercase; }
.t-muted { color: var(--text-secondary); }
.t-subtle { color: var(--text-tertiary); }
.t-center { text-align: center; }
/* ---- Icon: 16px line icons, 1.2px stroke, colour follows the text -------- */
.icon { width: var(--size-icon); height: var(--size-icon); flex: none; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.icon--l { width: 24px; height: 24px; }
/* ---- Glass: a material, not a flat card ---------------------------------
Figma "Glass/On photo": blur 30, 1px top highlight, 0 12 32 drop.
"Glass/On paper": frosted white, two soft ink shadows. */
.glass {
background-color: var(--surface-glass);
border: 1px solid var(--border-glass);
box-shadow: var(--glass-highlight), var(--glass-shadow);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
}
.glass--subtle { background-color: var(--surface-glass-subtle); }
.glass--strong { background-color: var(--surface-glass-strong); }
/* ---- Rule: a hairline ---------------------------------------------------- */
.rule { height: 1px; border: 0; margin: 0; background: var(--indicator-inactive); }
/* ---- Sky: one blurred column of colour on paper --------------------------
For the colour-only screens (eyes closed, sunrise). --sky-end sets how far
down the colour reaches; below it the paper shows through. */
.sky { position: absolute; inset: 0; overflow: hidden; background: var(--paper-100);
--core: var(--sky-evening-core); --edge: var(--sky-evening-edge); --sky-end: 100%; }
.sky::before {
content: ""; position: absolute; left: -4%; right: -4%; bottom: calc(100% - var(--sky-end)); height: 124%;
border-radius: 195px;
background: radial-gradient(88% 86% at 50% 94%, var(--core) 0%, color-mix(in srgb, var(--core) 55%, var(--edge)) 35%, var(--edge) 100%);
filter: blur(var(--blur-sky));
}
.sky::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: var(--grain-opacity); mix-blend-mode: overlay; pointer-events: none; }
.sky--evening { --core: var(--sky-evening-core); --edge: var(--sky-evening-edge); }
.sky--neon { --core: var(--sky-neon-core); --edge: var(--sky-neon-edge); }
.sky--still { --core: var(--sky-still-core); --edge: var(--sky-still-edge); }
.sky--night { --core: var(--sky-night-core); --edge: var(--sky-night-edge); --sky-end: 112%; }
.sky--night::before { left: -24%; right: -24%; }
.sky--sunrise { --core: var(--sky-sunrise-core); --edge: var(--sky-sunrise-edge); }
.sky--sunrise::before { bottom: auto; top: calc(100% - var(--sky-end)); background: radial-gradient(88% 86% at 50% 6%, var(--core) 0%, color-mix(in srgb, var(--core) 50%, var(--edge)) 45%, var(--edge) 100%); }
.sky--half { --sky-end: 64%; }
.sky--most { --sky-end: 92%; }
/* Silver: the art direction's smoky glass — a silver atmosphere, one small warm light */
.sky--silver { background: linear-gradient(180deg, #8A8189 0%, #B9BCC4 46%, var(--silver-core) 100%); }
.sky--silver::before { left: auto; right: -30%; bottom: auto; top: 18%; width: 90%; height: 46%; border-radius: 50%;
background: radial-gradient(closest-side, var(--glow-amber-deep), color-mix(in srgb, var(--glow-amber) 40%, transparent) 55%, transparent); opacity: .85; }
/* ---- Scene: an illustration used full-bleed ------------------------------ */
.scene { position: absolute; inset: 0; overflow: hidden; background: var(--night-900); }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to bottom, rgb(11 12 14 / .30) 0%, rgb(11 12 14 / 0) 18%, rgb(11 12 14 / 0) 45%, rgb(11 12 14 / .70) 80%, rgb(11 12 14 / .88) 100%); }
/* Haze: the stop's photo blurred into colour — the ground of every journey screen */
.scene--haze .scene__img { filter: blur(var(--blur-haze)); transform: scale(1.15); }
.scene--haze::after { background: linear-gradient(to bottom, rgb(11 12 14 / .14), rgb(11 12 14 / .02) 40%, rgb(11 12 14 / .24)); }
.scene__liquid { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(var(--blur-haze)); transform: scale(1.15); }
.scene.has-liquid .scene__img { visibility: hidden; }
.scene--dim::after { background: rgb(11 12 14 / .5); }
.scene--glow::before { content: ""; position: absolute; z-index: 1; left: -10%; right: -10%; bottom: -12%; height: 34%; border-radius: 50%;
background: radial-gradient(closest-side, var(--glow-amber-deep), transparent); filter: blur(24px); }
/* ---- Progress segment: one of ten (intro + nine stops) ------------------- */
.segments { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--space-half); }
.segments__seg { position: relative; height: 2px; border-radius: var(--radius-pill); overflow: hidden; background: var(--indicator-inactive); }
.segments__seg::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--indicator-active); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }
/* Older single-line progress, same colours */
.progress { position: relative; height: 2px; border-radius: var(--radius-pill); background: var(--indicator-inactive); }
.progress__fill { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--indicator-active); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }
/* ---- Dot: route stops ------------------------------------------------------
Upcoming: a small ring. Done: filled. Current ("Next"): the warm light. */
.dot { position: relative; width: 16px; height: 16px; flex: none; }
.dot::before { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; border: 1px solid var(--text-secondary); }
.dot.is-done::before { background: var(--text-secondary); }
.dot.is-current::before { inset: 3px; border: 0; background: var(--accent-glow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-glow) 35%, transparent), 0 0 8px color-mix(in srgb, var(--accent-glow) 50%, transparent); }
/* ---- Clues: nine dots, filled as you find them ----------------------------- */
.clues { display: flex; gap: var(--space-1); }
.clues__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--indicator-inactive); }
.clues__dot.is-found { background: var(--indicator-active); border-color: transparent; }
.clues--s { gap: var(--space-half); }
.clues--s .clues__dot { width: 5px; height: 5px; }
/* ---- Tag: "Next" -------------------------------------------------------------- */
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-glass-strong); color: var(--text-primary);
font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-label-track); font-weight: var(--weight-medium); }
/* ==========================================================================
MOLECULES
========================================================================== */
/* ---- Button (Figma 165:82): full-width, label left, arrow right ----------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
height: var(--size-control); padding: 0 var(--space-3); border-radius: var(--radius-pill);
font-size: var(--type-button-size); line-height: var(--type-button-lh); letter-spacing: var(--type-button-track); font-weight: var(--weight-medium);
white-space: nowrap; text-align: left;
background: var(--action-primary-bg); color: var(--action-primary-fg); border: 1px solid transparent; box-shadow: var(--elevation-button);
transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn:hover { opacity: .92; }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; box-shadow: none; }
.btn--block { width: 100%; justify-content: space-between; }
/* The arrow comes with every full-width action, unless it carries its own icon */
.btn--block:not(.btn--text):not(.btn--no-arrow):not(:has(svg))::after { content: ""; width: var(--size-icon); height: var(--size-icon); flex: none; background: currentColor;
-webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; }
/* Glass: the second option ("Not now", the glass Continue) */
.btn--glass, .btn--line {
background: var(--surface-glass); color: var(--text-primary); border-color: var(--border-glass);
box-shadow: var(--glass-highlight), var(--glass-shadow);
-webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
/* Text: "Try shapes instead", "Need someone to talk to?" */
.btn--text { height: auto; min-height: var(--size-hit); padding: 0; border: 0; background: none; box-shadow: none; color: var(--text-tertiary);
font-size: var(--type-small-size); line-height: var(--type-small-lh); letter-spacing: 0; font-weight: var(--weight-regular); white-space: normal; }
.btn--text:hover { opacity: 1; color: var(--text-secondary); }
.btn--s { height: 36px; padding: 0 var(--space-2); font-size: var(--type-small-size); }
/* ---- Icon button (165:40): round glass, swap the icon -------------------- */
.icon-btn { position: relative; display: grid; place-items: center; width: var(--size-icon-btn); height: var(--size-icon-btn); flex: none; border-radius: 50%;
color: var(--text-primary); background-color: var(--surface-glass-subtle); border: 1px solid var(--border-glass);
box-shadow: var(--glass-highlight), var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
/* A 44px target around the 32px circle */
.icon-btn::before { content: ""; position: absolute; inset: -6px; }
.icon-btn--l { width: 48px; height: 48px; background: var(--indicator-active); color: var(--action-primary-fg); border-color: transparent; box-shadow: var(--elevation-button); }
/* ---- Help link (165:89): on every screen ---------------------------------- */
.help-link { display: block; width: 100%; text-align: center; color: var(--text-tertiary); font-size: var(--type-small-size); line-height: var(--type-small-lh); text-decoration: none; }
.help-link:hover { color: var(--text-secondary); }
/* ---- Heading (165:92): eyebrow, display title, optional body -------------- */
.heading { display: grid; gap: var(--space-12); }
.heading__eyebrow { font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-track); font-weight: var(--weight-medium); color: var(--text-secondary); }
.heading__title { font-size: var(--type-display-l-size); line-height: var(--type-display-l-lh); letter-spacing: var(--type-display-track); font-weight: var(--weight-light); color: var(--text-primary); }
.heading__body { font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-track); color: var(--text-secondary); }
/* ---- Stop title (167:176): the chapter break between stops ---------------- */
.stop-title { display: grid; gap: var(--space-1); }
.stop-title__num { font-size: var(--type-numeral-size); line-height: var(--type-numeral-lh); letter-spacing: var(--type-numeral-track); font-weight: var(--weight-light); font-variant-numeric: tabular-nums; }
.stop-title__name { font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh); letter-spacing: var(--type-display-track); font-weight: var(--weight-light); }
.stop-title__meta { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-secondary); white-space: pre; }
/* ---- Title tab: the v0.3 sketch's melted tag + bar (kept for older screens) */
.title-tab { position: relative; width: 342px; height: 144px; max-width: 100%; color: var(--text-primary); }
.title-tab__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--surface-glass); stroke: var(--border-glass); stroke-width: 1; }
.title-tab__tag { position: absolute; left: 188px; top: 0; width: 120px; height: 59px; display: grid; place-items: center; }
.title-tab__title { position: absolute; left: 0; right: 0; top: 75px; height: 69px; display: grid; place-items: center; text-align: center; font-size: var(--type-title-size); }
/* ---- Journey header (165:46) ------------------------------------------------
Where you are, the time of night, help and pause/exit, then ten segments
(intro + nine stops). Sits at y 52 on every journey screen. */
.wayfinder { display: grid; gap: var(--space-2); }
.wayfinder__row { display: flex; align-items: center; gap: var(--space-1); min-height: var(--size-icon-btn); }
.wayfinder__where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary);
font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-track); font-weight: var(--weight-medium); }
.wayfinder__time { color: var(--text-tertiary); font-size: var(--type-small-size); line-height: var(--type-small-lh); font-variant-numeric: tabular-nums; margin-right: var(--space-half); }
/* ---- Segmented control (167:193): Explore / Reflect ---------------------- */
.toggle { display: inline-flex; align-self: center; align-items: center; width: max-content; height: 44px; padding: 0 3px; border-radius: var(--radius-pill);
background-color: var(--surface-glass-strong); border: 1px solid var(--border-glass); box-shadow: var(--glass-highlight), var(--glass-shadow);
-webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.toggle__opt { height: 36px; min-width: 88px; padding: 0 var(--space-2); border-radius: var(--radius-pill); text-align: center;
font-size: var(--type-small-size); color: var(--text-secondary);
transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.toggle__opt[aria-pressed="true"] { background: var(--indicator-active); color: var(--action-primary-fg); }
/* ---- Filter card (167:44) and the generic answer tile ----------------------- */
.choice {
position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 116px;
padding: var(--space-2); border-radius: var(--radius-l); text-align: left; color: var(--text-primary);
transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.choice:active { transform: scale(.98); }
/* Sheen: glass catches a soft light where the finger is (components.js sets --mx/--my) */
.glass, .choice, .chip, .zone, .flip__face {
background-image: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / calc(.16 * var(--sheen))), transparent 70%);
transition: --sheen 600ms var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.is-lit { --sheen: 1; transition-duration: 200ms; }
.choice__num { color: var(--text-tertiary); }
.choice[aria-checked="true"] { background-color: var(--surface-glass-strong); border-color: var(--indicator-active); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
/* ---- Answer row (167:28): single choice, no right answers ------------------ */
.choice--row { min-height: var(--size-answer); flex-direction: row; align-items: center; gap: var(--space-2); padding: 0 var(--space-20); border-radius: var(--radius-m); }
.choice--row > :first-child { flex: 1; font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); letter-spacing: var(--type-body-l-track); }
/* The radio: a ring, then a filled disc with a check */
.choice--row::after { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.2px solid var(--text-secondary);
background: transparent center / 12px no-repeat; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.choice--row[aria-checked="true"] { border-color: var(--border-glass); }
.choice--row[aria-checked="true"]::after { border-color: transparent; background-color: var(--indicator-active); background-image: var(--icon-check-ink); }
.screen--paper .choice--row[aria-checked="true"]::after, .panel--paper .choice--row[aria-checked="true"]::after { background-image: var(--icon-check-white); }
/* ---- Flip card: the filter card, with its meaning on the back ------------- */
.flip { position: relative; height: 116px; perspective: 800px; text-align: left; color: var(--text-primary); }
/* It leans toward your finger, and turns over with a small overshoot */
.flip__inner { position: absolute; inset: 0; transform-style: preserve-3d;
transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--turn, 0deg)));
transition: transform 900ms var(--ease-spring); }
.flip.is-tilting:not(.is-turning) .flip__inner { transition-duration: 240ms; transition-timing-function: var(--ease-out); }
.flip.is-flipped { --turn: 180deg; }
.flip__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-2); border-radius: var(--radius-l);
border: 1px solid var(--border-glass); background-color: var(--surface-glass); box-shadow: var(--glass-highlight), var(--glass-shadow);
-webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
-webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip__face > :first-child { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-label-track); font-weight: var(--weight-medium); color: var(--text-tertiary); }
.flip__face > :last-child { font-size: var(--type-row-size); line-height: var(--type-row-lh); letter-spacing: var(--type-row-track); font-weight: var(--weight-regular); }
/* The flip icon, top right */
.flip__face::after { content: ""; position: absolute; top: var(--space-2); right: var(--space-2); width: var(--size-icon); height: var(--size-icon); background: var(--text-secondary);
-webkit-mask: var(--icon-flip) center / contain no-repeat; mask: var(--icon-flip) center / contain no-repeat; }
.flip__face--back { transform: rotateY(180deg); background-color: var(--surface-glass-strong); border-color: var(--indicator-active); }
.flip__face--back > :last-child { font-size: var(--type-small-size); line-height: var(--type-small-lh); }
/* ---- Chip (165:83): a small glass pill for hints, status and thoughts ----- */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
font-size: var(--type-small-size); line-height: var(--type-small-lh); color: var(--text-primary); }
.chip.glass, .chip { background-color: var(--surface-glass-subtle); }
.chip:active { transform: scale(.96); }
.chip[aria-checked="true"] { background-color: var(--indicator-active); color: var(--action-primary-fg); border-color: transparent; }
.chip .icon { margin-left: -2px; }
/* ---- Field: optional private text ---------------------------------------- */
.field { display: grid; gap: var(--space-1); }
.field__input { width: 100%; min-height: 120px; padding: var(--space-2) var(--space-20); border-radius: var(--radius-m); resize: none; color: var(--text-primary);
font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); }
.field__input::placeholder { color: var(--text-tertiary); }
.field__input:focus { outline: none; border-color: var(--indicator-active); }
.field__hint { color: var(--text-tertiary); text-align: center; }
/* ---- Slider: a 2px line with a glass thumb -------------------------------- */
.slider { display: grid; gap: var(--space-1); color: var(--text-primary); }
.slider__input { -webkit-appearance: none; appearance: none; width: 100%; height: var(--size-hit); background: transparent; margin: 0; }
.slider__input::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient(to right, var(--indicator-active) var(--v, 50%), var(--indicator-inactive) var(--v, 50%)); }
.slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -13px; border-radius: 50%; background: var(--surface-glass-strong); border: 1px solid var(--indicator-active);
box-shadow: var(--glass-highlight), var(--glass-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.slider__input::-moz-range-track { height: 2px; background: var(--indicator-inactive); }
.slider__input::-moz-range-progress { height: 2px; background: var(--indicator-active); }
.slider__input::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-glass-strong); border: 1px solid var(--indicator-active); }
.slider__ends { display: flex; justify-content: space-between; color: var(--text-tertiary); }
.slider__value { text-align: center; font-size: var(--type-title-size); line-height: var(--type-title-lh); }
/* ---- Countdown (167:111): a glass dial with 60 ticks -----------------------
Ticks light up as time passes; --left is the share of time left (1 → 0). */
.countdown { position: relative; display: grid; place-items: center; align-content: center; width: 104px; height: 104px; border-radius: 50%; color: var(--text-primary); padding: 0; }
.countdown__ticks { position: absolute; inset: -1px; width: 104px; height: 104px; overflow: visible; }
.countdown__ticks line { stroke: var(--indicator-active); stroke-width: 1; stroke-linecap: round;
opacity: calc(.3 + .65 * clamp(0, (1 - var(--left, 1)) * 60 - var(--i), 1)); transition: opacity 400ms var(--ease-out); }
.countdown__ring { display: none; }
.countdown__num { position: relative; font-size: var(--type-display-xl-size); line-height: 1; letter-spacing: var(--type-display-track); font-weight: var(--weight-light); font-variant-numeric: tabular-nums; }
.countdown__unit { position: relative; margin-top: 2px; color: var(--text-tertiary); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-label-track); font-weight: var(--weight-medium); }
/* ---- Route stop (167:59) ----------------------------------------------------- */
.stop { position: relative; display: grid; grid-template-columns: 16px 1fr auto auto; align-items: center; gap: var(--space-2); min-height: 36px; }
.stop > :nth-child(2) { color: var(--text-secondary); font-size: var(--type-row-size); line-height: var(--type-row-lh); letter-spacing: var(--type-row-track); font-weight: var(--weight-regular); }
.stop__time { grid-column: 4; color: var(--text-tertiary); font-size: var(--type-small-size); line-height: var(--type-small-lh); letter-spacing: 0; font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; }
.stop.is-next > :nth-child(2), .stop:has(.dot.is-current) > :nth-child(2) { color: var(--text-primary); }
.stop .tag { grid-column: 3; }
/* ---- Breath: a glass circle that swells ---------------------------------- */
.breath { position: relative; width: 176px; height: 176px; display: grid; place-items: center; color: var(--text-primary); }
.breath::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--border-glass); background: var(--surface-glass);
box-shadow: var(--glass-highlight), var(--glass-shadow);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: mm-breathe calc(var(--dur-breath) * 2) var(--ease-in-out) infinite; }
/* The word sits above the swelling glass */
.breath > * { position: relative; }
@keyframes mm-breathe { 0%, 100% { transform: scale(.62); } 50% { transform: scale(1); } }
/* ==========================================================================
ORGANISMS
========================================================================== */
/* ---- Route panel (167:60): the nine stops of the night in one glass panel -- */
.route { position: relative; display: grid; padding: var(--space-12) var(--space-20); border-radius: var(--radius-xl);
background-color: var(--surface-glass); border: 1px solid var(--border-glass); box-shadow: var(--glass-highlight), var(--glass-shadow);
-webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
/* The metro line through the dots */
.route::before { content: ""; position: absolute; left: calc(var(--space-20) + 7.5px); top: 30px; bottom: 30px; width: 1px; background: var(--indicator-inactive); }
/* ---- Card wheel (Figma 286:2808): the six filters on one wheel --------------
Cards stand on a hub just below the screen. Drag sideways to spin, tap the
front card to flip it, press and hold to choose it: ink rises from the
bottom and the card turns over to ink with white type. components.js builds
the parts and sets --a (each card's angle) and --spin (the hub's turn). */
.card-wheel { --r: 335px; --card-w: 167px; --card-h: 325px; --hold: 650ms;
position: absolute; left: 0; right: 0; top: 36%; bottom: 0; z-index: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.card-wheel.is-dragging { cursor: grabbing; }
/* The hub: a ring round the wheel, a small circle and three spokes that turn with it */
.card-wheel__hub { position: absolute; left: 50%; top: calc(100% + 8px); width: 0; height: 0; pointer-events: none; color: var(--text-primary); }
.card-wheel__hub svg { position: absolute; overflow: visible; left: 0; top: 0; fill: none; stroke: currentColor; stroke-width: 1; }
.card-wheel__spokes { transform: rotate(var(--spin, 0deg)); }
.card-wheel__spokes path { stroke-dasharray: 3 4; }
.wcard { position: absolute; left: calc(50% - var(--card-w) / 2); top: calc(100% + 8px - var(--card-h) / 2); width: var(--card-w); height: var(--card-h);
transform: rotate(var(--a, 0deg)) translateY(calc(var(--r) * -1)); perspective: 900px; text-align: left; color: var(--text-primary); -webkit-tap-highlight-color: transparent; }
.wcard__inner { position: absolute; inset: 0; transform-style: preserve-3d;
transform: scale(calc(var(--press, 1) * var(--size, .94))) rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--turn, 0deg)));
transition: transform 900ms var(--ease-spring); }
/* The card at the front stands a little taller than the rest */
.wcard.is-front { --size: 1.06; }
.wcard.is-flipped { --turn: 180deg; }
.wcard.is-holding { --press: .97; }
.wcard.is-tilting .wcard__inner { transition-duration: 240ms; transition-timing-function: var(--ease-out); }
.wcard__face { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-2);
border-radius: var(--radius-l); border: 1px solid var(--border-glass); background-color: var(--card-bg, var(--surface-glass));
box-shadow: var(--glass-highlight), var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
-webkit-backface-visibility: hidden; backface-visibility: hidden; transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); }
.wcard__face--back { transform: rotateY(180deg); }
.wcard__face > * { position: relative; z-index: 2; }
/* The front card's warm light, rising from the bottom edge */
.wcard__face::after { content: ""; position: absolute; z-index: 0; left: -10%; right: -10%; bottom: -30px; height: 110px; border-radius: 50%;
background: radial-gradient(closest-side, #FE6448, #F78825 45%, color-mix(in srgb, #EFAC02 60%, transparent) 75%, transparent); filter: blur(14px);
opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
/* The front card's glow rises into it, each time a card comes to the front */
.wcard.is-front .wcard__face::after { opacity: .9; --grad-rise: 70px; animation: grad-in 1.8s var(--grad-ease) var(--grad-delay) both; }
@media (prefers-reduced-motion: reduce) { .wcard.is-front .wcard__face::after { animation: none; } }
/* Hold to choose: ink rises from the bottom while you press */
.wcard__face::before { content: ""; position: absolute; z-index: 1; inset: 0; background: var(--indicator-active); transform-origin: 50% 100%; transform: scaleY(0);
transition: transform 260ms var(--ease-out); }
.wcard.is-holding .wcard__face::before { transform: scaleY(1); transition: transform var(--hold) cubic-bezier(.4, 0, .6, 1); }
.wcard[aria-checked="true"] .wcard__face { color: var(--action-primary-fg); border-color: var(--indicator-active); }
.wcard[aria-checked="true"] .wcard__face::before { transform: scaleY(1); }
.wcard[aria-checked="true"] .wcard__face::after { opacity: 0; }
.wcard__top { display: flex; justify-content: space-between; align-items: center; }
.wcard__num { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-label-track); opacity: .55; font-variant-numeric: tabular-nums; }
.wcard__top .icon { opacity: .7; }
.wcard__title { font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: var(--type-title-track); font-weight: var(--weight-light); }
/* The back reads like the front: number and icon on top, the text set bottom left */
.wcard__back { font-size: var(--type-body-l-size); line-height: var(--type-title-lh); letter-spacing: var(--type-title-track); }
/* The way on appears once a card is chosen */
.card-wheel-next, .drift-next { position: relative; z-index: 2; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
:is(.card-wheel-next, .drift-next):disabled { opacity: 0; transform: translateY(8px); }
/* ---- Drift field (Figma 322:677) -----------------------------------------------
The words lie on a field bigger than the screen. Drag anywhere to move around:
they follow on springs and swing clear of the circles and the heading, which
stay put. Hold a word and the circles lean in; drag it over one and it fills
with ink; let go and the word stays inside. */
.drift { position: absolute; inset: 0; z-index: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.drift.is-panning { cursor: grabbing; }
.drift__circle { --r: 121px; position: absolute; left: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin-left: calc(var(--r) * -1);
border: 1px solid var(--text-primary); border-radius: 50%; color: var(--text-primary); background-color: transparent; pointer-events: none;
transition: transform 700ms var(--ease-spring), background-color 380ms var(--ease-out), color 380ms var(--ease-out),
width 700ms var(--ease-spring), height 700ms var(--ease-spring), margin 700ms var(--ease-spring), top 700ms var(--ease-spring), clip-path 700ms var(--ease-spring); }
/* --r grows as a circle fills (components.js); the centres stay put */
.drift__circle--top { top: calc(133px - var(--r)); clip-path: inset(calc(var(--r) - 29px) -10px -10px -10px); } /* it rises from under the header */
.drift__circle--bottom { top: calc(100% - 28px - var(--r)); }
.drift.is-holding .drift__circle { transform: scale(1.06); }
/* Carrying a word: the circle it heads for grows, the other gives way (--s from components.js) */
.drift.is-carrying .drift__circle { transform: scale(var(--s, 1)); }
.drift__circle.is-over { background-color: var(--text-primary); color: var(--action-primary-fg); }
.drift__label { position: absolute; left: 0; right: 0; text-align: center; font-size: var(--type-small-size); line-height: var(--type-small-lh); }
.drift__circle--top .drift__label { top: calc(50% + 11px); }
.drift__circle--bottom .drift__label { top: calc(50% - 27px); }
.drift__more { position: absolute; left: 0; top: 0; font-size: var(--type-caption-size); line-height: 1.2; color: var(--text-secondary); white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity 380ms var(--ease-out), color 380ms var(--ease-out); }
.drift__more.is-shown { opacity: 1; }
.drift__more.is-inverted { color: var(--action-primary-fg); }
.drift__word { position: absolute; left: 0; top: 0; padding: 6px 8px; white-space: nowrap; font-style: italic; font-size: var(--type-body-l-size); line-height: 1.18;
color: var(--text-primary); transform-origin: 50% 50%; will-change: transform, opacity; cursor: inherit; transition: color 380ms var(--ease-out);
animation: drift-in 1600ms cubic-bezier(.42, 0, .58, 1); }
.drift__word.is-held { cursor: grabbing; z-index: 1; }
.drift__word.is-inverted { color: var(--action-primary-fg); }
.drift__word:focus-visible { outline: 1px solid var(--focus-ring); border-radius: var(--radius-s, 4px); }
@keyframes drift-in { from { opacity: .25; } }
/* The heading sits in the middle; it and the header float over the field without blocking the drag */
.screen--influence .screen__top { position: relative; z-index: 1; }
.screen--influence .screen__body, .screen--influence .screen__foot { position: relative; z-index: 1; pointer-events: none; }
.screen--influence :is(.screen__body, .screen__foot) .btn { pointer-events: auto; }
.screen--influence .drift-head { position: absolute; left: var(--gutter); right: var(--gutter); top: 51%; gap: 20px; transition: opacity 420ms var(--ease-out); }
.screen--influence.is-carrying .drift-head { opacity: .08; }
.screen--influence .drift-head .t-statement i { font-weight: inherit; }
.screen--influence .drift-next { align-self: center; justify-self: center; width: auto; margin-top: -8px; color: var(--text-primary); }
.screen--influence .drift-next:disabled { pointer-events: none; }
/* ---- Chapter mark: "Chapter 1 / The Algorithm" beside a short vertical rule (Figma 322:94) */
.chapter-mark { display: grid; gap: 4px; padding: 13px 0 13px 15px; border-left: 1px solid currentColor; }
.chapter-mark__num { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-tertiary); }
.chapter-mark__title { font-size: var(--type-statement-size); line-height: 1.2; font-weight: var(--weight-medium); }
/* Chapter opening screen: the mark at y 200, the text at y 440, set left */
.screen--chapter .chapter-mark { position: absolute; left: var(--gutter); top: 23.7%; }
.screen--chapter .chapter-text { position: absolute; left: calc(var(--gutter) + 16px); right: var(--gutter); top: 52%; }
/* ---- Chapter card --------------------------------------------------------- */
.chapter-card { display: grid; align-content: space-between; min-height: 454px; padding: var(--space-6) var(--space-4) var(--space-8); border-radius: var(--radius-card); color: var(--text-primary); }
/* ---- Reflect card (167:223): the mirror — only your own choices and words --- */
.ledger { display: grid; gap: var(--space-1); }
.ledger__row, .reflect-card { position: relative; display: grid; gap: var(--space-1); padding: var(--space-20); border-radius: var(--radius-l);
background-color: var(--surface-glass); border: 1px solid var(--border-glass); box-shadow: var(--glass-highlight), var(--glass-shadow);
-webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); color: var(--text-primary); }
.ledger__num { display: none; }
.ledger__row .t-label, .reflect-card__label { color: var(--text-tertiary); font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-track); font-weight: var(--weight-medium); }
.reflect-card__value { font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: var(--type-title-track); font-weight: var(--weight-light); }
.reflect-card__body { font-size: var(--type-small-size); line-height: var(--type-small-lh); color: var(--text-secondary); }
.ledger__row.is-locked .t-title, .ledger__row.is-locked .reflect-card__value, .reflect-card.is-locked .reflect-card__value { color: var(--text-tertiary); }
.ledger__row.is-locked::after, .reflect-card.is-locked::after { content: ""; position: absolute; top: var(--space-20); right: var(--space-20); width: var(--size-icon); height: var(--size-icon);
background: var(--text-secondary); -webkit-mask: var(--icon-lock) center / contain no-repeat; mask: var(--icon-lock) center / contain no-repeat; }
/* ---- Journey item (167:238) on the home arc --------------------------------- */
/* ---- Journey picker (Figma 286:2692): a drum like the iOS time picker -------------
The band (two short rules, an arrow) stays in the middle; the journeys roll
through it. Positions come from components.js. */
.picker { position: absolute; inset: 0; z-index: 0; overflow: hidden; perspective: 900px; touch-action: none; user-select: none; -webkit-user-select: none;
color: var(--text-primary); cursor: grab; }
.picker__band { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(50.4% - 37.5px); height: 75px; border-left: 1px solid currentColor; border-right: 1px solid currentColor;
pointer-events: none; }
.picker__band .icon { position: absolute; right: 16px; top: 50%; margin-top: -8px; opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.picker__band.is-open .icon { opacity: 1; transform: none; }
.picker__item { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: block; text-align: left; color: inherit; transform-origin: 50% 50%; will-change: transform, opacity; }
.picker__item.is-selected[data-go] { cursor: pointer; }
.picker__title, .picker__meta { position: absolute; left: 0; display: block; white-space: nowrap; will-change: transform; }
.picker__title { top: 0; font-size: var(--type-body-l-size); line-height: 1.2; letter-spacing: -.005em; font-weight: var(--weight-medium); }
.picker__meta { top: 23px; font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--text-tertiary); white-space: pre; }
.picker__line { position: absolute; left: 50%; top: 0; width: 1px; height: 1px; margin-left: -.5px; background: currentColor; transform-origin: 0 0; pointer-events: none; }
.picker:focus-visible { outline: none; }
.picker:focus-visible .picker__band { outline: 1px solid var(--focus-ring); outline-offset: 4px; }
/* The Explore / Reflect switch floats over the drum */
.screen--home :is(.screen__top, .screen__foot) { position: relative; z-index: 1; }
.wheel { position: relative; height: 600px; color: var(--text-primary); }
.wheel__item { position: absolute; left: 0; right: 0; top: 50%; display: flex; align-items: center; gap: var(--space-2); height: 126px; margin-top: -63px; padding: 4px var(--space-12) 4px 4px;
border: 1px solid transparent; border-radius: var(--radius-pill); text-align: left;
transform: translate(var(--x, 0), calc(var(--o, 0) * 124px)) rotate(var(--r, 0deg)); opacity: var(--a, 1); transform-origin: 0 50%;
transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), background-color var(--dur) var(--ease-out); }
.wheel__img { width: 88px; height: 88px; margin: 0 14px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--white);
box-shadow: 0 10px 24px rgb(0 0 0 / .15); transition: width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out), margin var(--dur-slow) var(--ease-out); }
.wheel__text { flex: 1; min-width: 0; display: grid; gap: var(--space-half); }
.wheel__text > :first-child { font-size: var(--type-button-size); line-height: var(--type-button-lh); letter-spacing: var(--type-button-track); font-weight: var(--weight-medium); }
.wheel__text > :last-child { color: var(--text-tertiary); font-size: var(--type-small-size); line-height: var(--type-small-lh); letter-spacing: 0; font-weight: var(--weight-regular); }
.wheel__item.is-selected { background-color: var(--surface-glass-strong); border-color: var(--border-glass); box-shadow: var(--glass-highlight), var(--glass-shadow);
-webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.wheel__item.is-selected .wheel__img { width: 116px; height: 116px; margin: 0; }
/* The start button: a dark disc with the arrow (the label stays for screen readers) */
.wheel__item .btn--s { width: 48px; height: 48px; padding: 0; justify-content: center; font-size: 0; border-radius: 50%; background: var(--indicator-active); color: var(--action-primary-fg); }
.wheel__item .btn--s::after { content: ""; width: var(--size-icon); height: var(--size-icon); background: currentColor; -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; }
.wheel__item:not(.is-selected) .btn--s { display: none; }
/* One journey item on its own (kitchen sink, lists) */
.wheel__item--static { position: relative; top: auto; margin: 0; transform: none; }
.wheel__item--static:not(.is-selected) { padding-left: 0; }
/* Along the arc (Figma 01 Home): items stay upright, step in and fade */
.wheel__item[data-o="-3"] { --o: -3; --x: 40px; --a: .25; }
.wheel__item[data-o="-2"] { --o: -2; --x: 16px; --a: .5; }
.wheel__item[data-o="-1"] { --o: -1; --x: 0px; --a: .85; }
.wheel__item[data-o="1"] { --o: 1; --x: 0px; --a: .85; }
.wheel__item[data-o="2"] { --o: 2; --x: 16px; --a: .5; }
.wheel__item[data-o="3"] { --o: 3; --x: 40px; --a: .25; }
/* ---- Terrain: the journey map (terrain.js) -------------------------------- */
.terrain { --terrain-ground: var(--paper-100); --terrain-line: #3B4A6B;
--terrain-low: var(--paper-100); --terrain-peak: #D2DAE6; position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--terrain-ground); }
.terrain__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.terrain.is-moving .terrain__canvas { cursor: grabbing; }
.terrain::after { content: ""; position: absolute; inset: 0 0 auto; height: 200px; pointer-events: none;
background: linear-gradient(to bottom, var(--terrain-ground) 40%, color-mix(in srgb, var(--terrain-ground) 0%, transparent)); }
.terrain__pins { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: var(--space-1); pointer-events: auto; color: var(--terrain-line);
margin: -12px 0 0 -12px; transition: opacity var(--dur) var(--ease-out); }
.pin__ring { position: relative; width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; background: var(--terrain-ground); flex: none; transition: transform var(--dur) var(--ease-out); }
.pin__ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: currentColor; }
.pin__label { white-space: nowrap; color: var(--ink-900); text-shadow: 0 0 6px var(--terrain-ground), 0 0 2px var(--terrain-ground); transition: opacity var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.pin--done .pin__label { opacity: .55; }
.pin--current .pin__ring { border-color: var(--glow-amber-deep); box-shadow: 0 0 0 6px color-mix(in srgb, var(--glow-amber) 45%, transparent); }
.pin--current .pin__ring::after { background: var(--glow-amber-deep); }
.pin--ahead .pin__ring { transform: scale(.5); opacity: .6; }
.pin--ahead .pin__ring::after { display: none; }
.pin--ahead .pin__label { opacity: 0; filter: blur(6px); }
.pin--ahead.is-known .pin__ring { transform: scale(.8); opacity: 1; }
.pin--ahead.is-known .pin__label { opacity: .6; filter: none; }
.pin.is-selected .pin__label { font-weight: var(--weight-medium); opacity: 1; }
.pin.is-selected .pin__ring { transform: scale(1.1); }
/* The card for the selected stop: glass on paper */
.stop-card { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-l); color: var(--ink-900);
background: rgb(255 255 255 / .72); border: 1px solid var(--white); box-shadow: 0 1px 2px rgb(20 20 26 / .06), 0 14px 36px rgb(20 20 26 / .08);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.stop-card .btn:disabled { opacity: .25; }
/* ---- Sort zones (the last train) ----------------------------------------- */
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.zone { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--space-1); min-height: 176px; padding: var(--space-2); border-radius: var(--radius-l);
border: 1px dashed var(--border-glass); background-color: color-mix(in srgb, var(--surface-glass) 50%, transparent); color: var(--text-primary); }
.zone__label { width: 100%; margin-bottom: var(--space-1); color: var(--text-secondary); }
.zone--tray { grid-column: 1 / -1; min-height: 0; border-color: transparent; background-color: transparent; justify-content: center; padding: 0 0 var(--space-2); }
/* ---- Split: a statement on colour above, its answer on paper below -------- */
.split { position: absolute; left: 0; right: 0; top: 64%; bottom: 0; display: grid; align-content: start; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--gutter) 0; color: var(--ink-900); text-align: center; }
/* ---- Scatter: one sentence broken across the page ------------------------- */
.scatter { display: grid; height: 100%; align-content: space-between; text-align: center; }
/* ---- Reveal (sunrise) ---------------------------------------------------- */
.reveal { display: grid; gap: var(--space-3); text-align: center; color: var(--text-primary); }
.reveal__row { display: grid; gap: var(--space-half); }
/* ==========================================================================
TEMPLATES — a 390 × 844 phone screen and its regions
Fixed lines (Figma notes): header at y 52, heading from y 140, the primary
action at y 732, the help link under it.
========================================================================== */
.screen {
position: relative; isolation: isolate; overflow: hidden; flex: none;
width: var(--size-screen-w); height: var(--size-screen-h); border-radius: var(--radius-screen);
display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
padding: var(--y-header) var(--gutter) var(--space-3);
color: var(--text-primary); background: var(--surface-night); --drkm: 1;
}
.screen > .sky, .screen > .scene { z-index: -1; }
.screen--paper { background: var(--paper-100); color: var(--text-primary); }
.screen__top { display: grid; gap: var(--space-2); min-height: var(--size-icon-btn); }
.screen__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); min-height: 0; }
.screen__body--top { justify-content: flex-start; padding-top: 38px; } /* header 52 + 50 tall + 38 = heading at y 140 */
.screen__body--end { justify-content: flex-end; }
.screen__foot { display: grid; gap: var(--space-2); padding-top: var(--space-2); }
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-2)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-1)); }
.terrain-hint { transition: opacity var(--dur-slow) var(--ease-out); }
.screen:has(.terrain.is-moving) .terrain-hint { opacity: 0; }
/* The energy word gains weight as energy rises (components.js sets --v-num) */
.slider__value { font-weight: calc(400 + 300 * var(--v-num, .5)); transition: font-weight var(--dur-fast) var(--ease-out); }
/* ---- Icons used as CSS masks (the same paths as the sprite in components.js) */
:root {
--icon-arrow: url("data:image/svg+xml;utf8,");
--icon-flip: url("data:image/svg+xml;utf8,");
--icon-lock: url("data:image/svg+xml;utf8,");
--icon-check-ink: url("data:image/svg+xml;utf8,");
--icon-check-white: url("data:image/svg+xml;utf8,");
}
/* ==========================================================================
JOURNEY v2 (Figma 307:17678): the five steps every stop shares, and the
new experiences. Title → Experience → Reflection → Closing line → Map.
========================================================================== */
/* Gradients come in from below: they wait a moment for the screen to fade in, then rise a
long way into place while they fade in, slowing gently at the end */
:root { --grad-in-dur: 2.6s; --grad-delay: 250ms; --grad-rise: 240px; --grad-ease: cubic-bezier(.3, .1, .2, 1); }
@keyframes grad-in { from { opacity: 0; translate: 0 var(--grad-rise); } }
/* A stop's colour: one soft blurred glow (Figma "Scene light"), --g = two colours */
.stop-glow { position: absolute; z-index: -1; left: var(--glow-x, 50%); top: var(--glow-y, 81%); width: var(--glow-size, 520px); aspect-ratio: 1;
transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: .6;
background: radial-gradient(closest-side, var(--g), transparent); filter: blur(40px); mix-blend-mode: var(--glow-blend, normal);
animation: glow-rise var(--grad-in-dur) var(--grad-ease) var(--grad-delay) both; }
@keyframes glow-rise { from { opacity: 0; transform: translate(-50%, calc(-50% + var(--grad-rise))) scale(.9); } }
/* Title: "Stop 1 of 10 · Notice", the place, its question (centred, y 300) */
.stop-title { position: absolute; left: var(--gutter); right: var(--gutter); top: 35.5%; display: grid; justify-items: center; text-align: center; color: var(--text-primary); }
.stop-title__meta { font-size: var(--type-body-size); line-height: 20px; color: var(--text-secondary); }
.stop-title__name { margin: 14px 0 0; font-size: 44px; line-height: 50px; font-weight: var(--weight-regular); letter-spacing: -.01em; }
.stop-title__q { margin: 28px 0 0; max-width: 300px; font-size: 20px; line-height: 28px; font-style: italic; }
/* Closing line: AMMA's words between two short rules */
.closing { position: absolute; left: 0; right: 0; top: 39.7%; display: grid; justify-items: center; gap: 34px; padding: 0 40px; text-align: center;
font-size: 24px; line-height: 34px; color: var(--text-primary); }
.closing p { margin: 0; max-width: 310px; }
.closing::before, .closing::after { content: ""; width: 55px; height: 1px; background: currentColor; opacity: .5; }
/* Map moment: the heading over the contour map, Continue at the foot */
.screen--map .terrain { top: 38%; }
.screen--map .terrain::after { height: 90px; }
.screen--map .screen__foot { position: relative; z-index: 1; }
.map-list-link { justify-self: start; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit;
font-size: var(--type-body-size); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.map-list { position: absolute; left: 0; right: 0; top: 38%; bottom: 0; margin: 0; padding: var(--space-2) var(--gutter) 96px; list-style: none; overflow: auto;
background: var(--paper-100); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out); }
.map-list li { display: grid; grid-template-columns: 32px 1fr auto; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--border-glass); color: var(--text-primary); }
.screen--overview.is-list .map-list { opacity: 1; pointer-events: auto; }
/* The marker and "Next" aren't shown; the time is, in Tactile (theme-tactile.css) */
.map-list__mark, .map-list__next, .map-list__time { display: none; }
/* Small chips (12px) and the "Is this typical for you?" row */
.chips--s .chip { min-height: 28px; padding: 0 12px; font-size: 12px; }
.typical { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.play__chips.chips--s, .typical .play__chips { justify-content: flex-start; }
.screen--paper .heading ~ .play__chips, .screen--paper .heading ~ [data-options] .play__chips { justify-content: flex-start; }
/* A line to write on (Figma: italic placeholder over a hairline) */
.line-field { display: grid; gap: 14px; margin-top: var(--space-4); }
.line-field__input { width: 100%; padding: 0 0 10px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 40%, transparent); border-radius: 0;
background: none; color: var(--text-primary); font: inherit; font-size: 18px; line-height: 24px; }
.line-field__input::placeholder { color: var(--text-tertiary); font-style: italic; }
.line-field__input:focus { outline: none; border-bottom-color: var(--text-primary); }
.line-field--now { gap: 8px; margin-top: var(--space-3); }
.line-field__row { display: flex; align-items: baseline; gap: 6px; font-size: 20px; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 40%, transparent); }
.line-field__row span { flex: none; }
.line-field__row .line-field__input { border: 0; font-size: 20px; }
/* Small caps over colour */
.t-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
/* Dark: lights out */
.screen--dark { background: #0A0A0D; color: var(--white); --text-primary: var(--white); --text-secondary: rgb(255 255 255 / .6); --text-tertiary: rgb(255 255 255 / .5);
--indicator-active: var(--white); --indicator-inactive: rgb(255 255 255 / .18); }
.screen--dark .chip { background: rgb(255 255 255 / .4); color: #141414; }
/* Neon lights: the count */
.big-count { margin: var(--space-6) 0 0; font-size: 140px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.big-count.is-tick { animation: count-tick 600ms var(--ease-out); }
@keyframes count-tick { from { opacity: .3; transform: translateY(-6px); } }
/* Pattern card (Ginza glass, Tea house): one card, front in your words, back through their eyes */
.pcard { position: absolute; left: 50%; top: 34.4%; width: 300px; height: 400px; margin-left: -150px; perspective: 1200px; cursor: pointer; }
.pcard__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 900ms var(--ease-out); }
.is-flipped .pcard__inner { transform: rotateY(180deg); }
/* Both faces read like a card-wheel card; the back is inked, like a chosen wheel card */
.pcard__face { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; padding: var(--space-2); border-radius: var(--radius-l);
backface-visibility: hidden; -webkit-backface-visibility: hidden;
border: 1px solid var(--border-glass); background-color: var(--surface-glass); color: var(--text-primary);
box-shadow: var(--glass-highlight), var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.pcard__face > * { position: relative; z-index: 1; }
.pcard__face--back { transform: rotateY(180deg); background-color: var(--indicator-active); border-color: var(--indicator-active); color: var(--action-primary-fg); }
/* Ginza glass's light rises into the front, like the front card on the wheel */
.pcard__face--front::after { content: ""; position: absolute; z-index: 0; left: -10%; right: -10%; bottom: -30px; height: 110px; border-radius: 50%;
background: radial-gradient(closest-side, #8C9FBC, #B9C6D8 45%, color-mix(in srgb, #B9C6D8 60%, transparent) 75%, transparent); filter: blur(14px);
opacity: .9; --grad-rise: 70px; animation: grad-in 1.8s var(--grad-ease) var(--grad-delay) both; }
@media (prefers-reduced-motion: reduce) { .pcard__face--front::after { animation: none; } }
.pcard__label { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-label-track); opacity: .55; }
.pcard__text { margin: auto 0 0; font-size: var(--type-title-size); line-height: var(--type-title-lh); letter-spacing: var(--type-title-track); }
.pcard__write { margin-top: auto; width: 100%; padding: 0; border: 0; resize: none; background: none; color: inherit; font: inherit;
font-size: var(--type-title-size); line-height: var(--type-title-lh); }
.pcard__write::placeholder { color: currentColor; opacity: .4; font-style: italic; }
.pcard__write:focus { outline: none; }
.pcard__hint { margin-top: var(--space-2); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-label-track); text-align: left; opacity: .55; cursor: pointer; }
.pattern-head { display: grid; }
.pattern-head > * { grid-area: 1 / 1; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s var(--dur-slow); }
.pattern-head > :last-child, .is-flipped .pattern-head > :first-child { visibility: hidden; }
.is-flipped .pattern-head > :last-child { visibility: visible; transition-delay: 0s; }
.pattern-head > :last-child, .is-flipped .pattern-head > :first-child { opacity: 0; }
.is-flipped .pattern-head > :last-child { opacity: 1; }
/* Centred in the space between the card and the bottom of the screen */
.pattern-after { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(34.4% + 400px); bottom: var(--space-3);
display: grid; align-content: center; justify-items: center; gap: 12px; opacity: 0; pointer-events: none;
transition: opacity var(--dur-slow) var(--ease-out) 600ms; }
.pattern-after .play__chips { justify-content: center; }
.pattern-after__q { font-size: 16px; font-style: italic; color: var(--text-primary); }
.is-flipped .pattern-after { opacity: 1; pointer-events: auto; }
/* Tea house: the smaller "I have to …" card */
.pcard--s { top: 34.4%; width: 250px; height: 360px; margin-left: -125px; }
.pcard--s .pcard__face { border-radius: 24px; padding: 13px 14px 16px; }
.pcard--s .pcard__label { font-size: 11px; }
.pcard--s :is(.pcard__text, .pcard__write) { font-size: 20px; line-height: 26px; }
.choose-note { position: absolute; left: 35px; right: 35px; top: 81.7%; }
/* Shibuya: the bridge back to what was in the moment */
.bridge { position: absolute; left: var(--gutter); right: var(--gutter); top: 35.5%; display: grid; justify-items: center; text-align: center; gap: 10px; color: var(--text-primary); }
.bridge .play__chips { justify-content: center; margin-bottom: 26px; }
.bridge__line { margin: 0; max-width: 320px; font-size: 24px; line-height: 34px; }
.bridge__line em { font-style: italic; }
/* Metro map: a pair becomes a line; drag the dot to where you are */
.metro { position: absolute; left: var(--gutter); right: var(--gutter); top: 59%; padding: 0 21px; touch-action: none; cursor: grab; --v: .55; }
.metro.is-dragging { cursor: grabbing; }
.metro__line { position: relative; height: 4px; border-radius: 2px; background: #7C63C8; }
.metro__end { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--white); border: 1px solid #141414; }
.metro__end:last-of-type { left: 100%; }
.metro__dot { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: #141414;
transition: transform var(--dur) var(--ease-out); }
.metro.is-dragging .metro__dot { transform: scale(1.12); }
.metro__labels { display: flex; justify-content: space-between; margin: 24px -21px 0; font-size: var(--type-body-size); color: var(--text-primary); }
/* Dojo and garden: swipe on instinct */
.swipe { position: absolute; left: 50%; top: 35%; width: 280px; height: 420px; margin-left: -140px; }
/* The card reads like a card-wheel card: same surface, border, number and title */
.swipe__card { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-2);
border-radius: var(--radius-l); border: 1px solid var(--border-glass); background-color: var(--surface-glass); color: var(--text-primary);
box-shadow: var(--glass-highlight), var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
/* (backwards, not both: a held end state would sit over the drag in Safari and freeze the card) */
transition: transform 420ms var(--ease-out), opacity 320ms var(--ease-out); animation: card-in 500ms var(--ease-out) backwards; }
.swipe__card.is-dragging { transition: none; cursor: grabbing; }
.swipe__card > * { position: relative; z-index: 1; margin: 0; }
/* The garden's green light rises into each card, like the front card on the wheel */
.swipe__card::after { content: ""; position: absolute; z-index: 0; left: -10%; right: -10%; bottom: -30px; height: 110px; border-radius: 50%;
background: radial-gradient(closest-side, #7FAF83, #B5D4A6 45%, color-mix(in srgb, #B5D4A6 60%, transparent) 75%, transparent); filter: blur(14px);
opacity: .9; --grad-rise: 70px; animation: grad-in 1.8s var(--grad-ease) var(--grad-delay) both; }
@media (prefers-reduced-motion: reduce) { .swipe__card::after { animation: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
/* Pause and Act sit just under the card */
.swipe-labels { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(35% + 440px); display: flex; justify-content: space-between; font-size: 16px; color: var(--text-primary); }
.swipe-labels span { transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.screen--swipe[data-lean="act"] .swipe-labels span:first-child, .screen--swipe[data-lean="pause"] .swipe-labels span:last-child { opacity: .25; }
.screen--swipe[data-lean="act"] .swipe-labels span:last-child { transform: translateX(-4px) scale(1.06); }
.screen--swipe[data-lean="pause"] .swipe-labels span:first-child { transform: translateX(4px) scale(1.06); }
/* Karaoke: spin the mic round the ring like a prize wheel; it clicks past eight friends and stops at you (the bottom).
Drawn at 200 across and scaled up (--mic-scale) to fill the width less 24px each side */
/* (play.js sets its size and height for each screen: 24px from the left and right edges, 24px under
the heading; these are only the starting values) */
.mic { position: absolute; left: 50%; top: 350px; width: 200px; height: 200px; margin-left: -100px; border-radius: 50%; --a: 0deg;
transform: scale(var(--mic-scale)); --mic-scale: 1.2;
touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.mic:active { cursor: grabbing; }
/* You can grab the wheel anywhere on it, out to the people round it, not just inside the track */
.mic::before { content: ""; position: absolute; inset: -46px; border-radius: 50%; }
/* The dial: hairline ticks, a dotted track and a dashed inner ring, in ink on the paper */
/* Like a prize wheel, the whole wheel turns (the mic is on one of its slices) and stops with the
mic's slice at the fixed pointer, at You */
.mic__dial { position: absolute; left: -30px; top: -30px; width: 260px; height: 260px; overflow: visible; pointer-events: none; color: var(--text-primary);
stroke: currentColor; stroke-width: 1; fill: none; transform: rotate(calc(var(--a) + var(--nudge))); transform-origin: 50% 50%; }
.mic__track { stroke-dasharray: 1 4; opacity: .5; }
.mic__inner { stroke-dasharray: 4 5; opacity: .25; }
/* The trail of coloured particles the mic sheds as it moves (play.js), under the dial */
.mic__trail { position: absolute; z-index: 0; left: -150px; top: -150px; width: 500px; height: 500px; pointer-events: none; }
/* Before you've touched it, two cues that it turns: a curved arrow inside the ring, its dashes
flowing the way to drag, and every few seconds the mic leans a little that way and swings
back, like a wheel someone just gave a test push. Both go as soon as you touch it */
@property --nudge { syntax: ""; inherits: true; initial-value: 0deg; }
.mic { --nudge: 0deg; animation: mic-nudge 3.4s var(--ease-in-out) 1.4s infinite; }
@keyframes mic-nudge { 0%, 55%, 100% { --nudge: 0deg; } 68% { --nudge: 16deg; } 80% { --nudge: -4deg; } 89% { --nudge: 3deg; } }
.mic__cue { position: absolute; left: -30px; top: -30px; width: 260px; height: 260px; overflow: visible; pointer-events: none; color: var(--text-primary);
stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: .7; transition: opacity var(--dur) var(--ease-out); }
.mic__cue-arc { stroke-dasharray: 4 4; animation: mic-cue-flow 1.2s linear infinite; }
@keyframes mic-cue-flow { to { stroke-dashoffset: -8; } }
.is-touched .mic, .is-spun .mic { animation: none; }
.is-touched .mic__cue, .is-spun .mic__cue { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mic, .mic__cue-arc { animation: none; } }
/* The mic's slice, filled with one colour from the stop's gradient (its lilac, #B98BE0), and the mic
in ink in the middle of it (Figma 430:22252) */
.mic__slice { fill: #B98BE0; fill-opacity: .45; stroke: none; }
.mic__icon-body { fill: var(--text-primary); stroke: none; }
.mic__icon-stand { fill: none; stroke: var(--text-primary); stroke-width: 2.025; stroke-linecap: round; }
/* The people round the wheel: fixed triangles pointing in, the others barely there, yours solid */
.mic__people { position: absolute; z-index: 3; left: -30px; top: -30px; width: 260px; height: 260px; overflow: visible; pointer-events: none; }
.mic__person { fill: var(--text-primary); opacity: .06; }
.mic__hub { fill: var(--text-primary); opacity: .18; } /* the faint dot at the centre of the wheel */
.mic__person--you { opacity: 1; }
/* You: under your triangle */
.mic__you { position: absolute; z-index: 3; left: 50%; top: calc(100% + 46px); transform: translateX(-50%); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
color: var(--text-secondary); pointer-events: none; transition: color var(--dur) var(--ease-out); }
.is-yours .mic__you { color: var(--text-primary); }
/* Sunrise: what you've seen, from your own answers */
.seen { display: grid; margin-top: var(--space-3); }
.seen__row { display: grid; gap: 4px; padding: 12px 0 14px; border-top: 1px solid rgb(20 20 20 / .25); }
.seen__value { font-size: 17px; line-height: 24px; font-style: italic; color: var(--text-primary); }
.then-card { display: grid; gap: 10px; margin-top: var(--space-3); padding: 13px 15px 16px; border-radius: 20px; background: rgb(255 255 255 / .35); border: 1px solid rgb(20 20 20 / .18); }
.then-card__text { font-size: 17px; line-height: 24px; font-style: italic; color: var(--text-primary); }
/* After the journey */
.mission-card { display: grid; gap: 8px; padding: 17px; border-radius: 20px; text-align: left; font: inherit; cursor: pointer;
background: rgb(255 255 255 / .4); border: 1px solid rgb(20 20 20 / .22); color: #141414; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.mission-card__name { font-size: 18px; line-height: 22px; font-weight: var(--weight-medium); }
.mission-card__text { font-size: 13px; line-height: 19px; opacity: .8; }
.mission-card[aria-checked="true"] { background: #141414; border-color: #141414; color: var(--white); }
.sub-q { margin: var(--space-4) 0 0; font-size: 20px; line-height: 28px; font-weight: var(--weight-medium); color: var(--text-primary); }
/* ---- The street (Figma 322:2217, 322:2249): a layered ink alley, rain, sound ---- */
/* Title card: a small window onto the illustration under the question */
.stop-preview { position: absolute; left: calc(50% - 51.5px); top: 60.4%; width: 103px; height: 170px;
background-size: 509px 728px; background-position: -203px -279px; background-repeat: no-repeat; }
.stop-preview::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 4px 12px rgb(0 0 0 / .95); }
/* The scene itself, inset on the paper, darkened at top and bottom for the white type */
.screen--street { --clip: 0px 0px 0px 0px; --clip-r: 0px; --city: none; }
.street { position: absolute; left: 23px; right: 24px; top: 56px; bottom: 32px; overflow: hidden; isolation: isolate;
background: #050506; /* night, under the film while it loads */
clip-path: inset(var(--clip) round var(--clip-r)); }
.street__win { position: absolute; inset: 0; } /* the film's window (neon-street.js); it can be shown in another screen first */
.street__scene { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-out); }
.street.is-ready .street__scene { opacity: 1; }
.street__rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.street__shade { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, #000 0%, transparent 25%, transparent 77.9%, #000 100%); }
.street__frame { position: absolute; inset: var(--clip); border-radius: var(--clip-r); pointer-events: none; box-shadow: inset 0 4px 12px rgb(0 0 0 / .95); }
.street__title { position: absolute; left: 39px; top: 83px; width: 230px; margin: 0; color: var(--white);
font-size: 22px; line-height: 36px; font-weight: var(--weight-medium); pointer-events: none; }
.street__title em { font-style: italic; }
.street__hint { position: absolute; left: var(--gutter); right: var(--gutter); top: 770px; margin: 0; text-align: center; font-size: 13px; color: rgb(255 255 255 / .6); pointer-events: none; }
@media (max-width: 520px) { .street__hint { top: auto; bottom: calc(env(safe-area-inset-bottom) + 58px); } }
/* Countdown: a dotted ring, a white arc for the seconds gone, the number in the middle */
.street-count { --gone: 0; position: absolute; left: calc(50% + 83px); top: 65px; width: 88px; height: 88px; display: grid; place-items: center; pointer-events: none;
background: radial-gradient(closest-side, rgb(0 0 0 / .55), transparent); border-radius: 50%; }
.street-count svg { position: absolute; left: 11px; top: 11px; width: 66px; height: 66px; overflow: visible; transform: rotate(-90deg); }
.street-count circle { fill: none; stroke: var(--white); stroke-width: 1; }
.street-count__ring { opacity: .5; stroke-dasharray: .5 3.2; stroke-linecap: round; }
.street-count__arc { stroke-dasharray: calc(var(--gone) * 100) 100; transition: stroke-dasharray 900ms var(--ease-out); }
.street-count__num { position: relative; color: var(--white); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.street-count__num.is-tick { animation: count-tick 600ms var(--ease-out); }
/* Walking up to the window (play.js approach()): from the title's small preview to the full frame */
.screen--street .street__scene, .screen--street .street__rain { transform: var(--city); transform-origin: 0 0; }
.screen--street.is-walking :is(.street, .street__frame) { transition: clip-path 1800ms cubic-bezier(.4, .08, .18, 1), inset 1800ms cubic-bezier(.4, .08, .18, 1), border-radius 1800ms cubic-bezier(.4, .08, .18, 1); }
.screen--street.is-walking :is(.street__scene, .street__rain) { transition: transform 1800ms cubic-bezier(.4, .08, .18, 1), opacity 900ms var(--ease-out); }
.play > .screen.screen--street.is-current { animation: none; }
.play > .screen.screen--street.is-arriving { z-index: 3; }
[data-theme] .play > .screen.screen--street.is-see-through { background: transparent; }
/* the dark edges, the type and the light come in as you arrive */
.screen--street :is(.street__shade, .street__title, .street-count, .street__hint, .stop-glow) { opacity: 0; transition: opacity 900ms var(--ease-out); }
.screen--street.is-walking .street__shade { opacity: 1; transition-duration: 1700ms; }
.screen--street.is-walking .stop-glow { opacity: .6; transition-duration: 1700ms; }
.screen--street.is-there .street__shade { opacity: 1; }
.screen--street.is-there .stop-glow { opacity: .6; }
.screen--street.is-there :is(.street__title, .street-count) { opacity: 1; }
.screen--street.is-there .street__hint { opacity: 1; transition-delay: 400ms; }
.screen--street .stop-glow { animation: none; }
/* the title stays a moment longer while the window comes towards you */
.play > .screen.screen--stop.is-leaving:has(.stop-preview) { animation-duration: 800ms; }