/* Uhrenatelier Vallembert, start page: the two sticky runs, the atelier section, the pre-loader and the measurement
   overlay. Generated from the prototype styles; base, actions, navigation, menu and footer come
   from site.css. */

/* ---------- type roles ---------- */

.display, .h2, .h3, .path-say, .overview-title, .brand-word, .plate-price {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-kerning: normal;
}
.display {
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display);
  font-weight: var(--w-display); text-wrap: balance; max-width: 11.5em;
}
.h2 {
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  font-weight: var(--w-display); text-wrap: balance; max-width: 18em;
}
.h3 {
  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
  font-weight: var(--w-h3); text-wrap: balance;
}
.lead {
  font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-ink-2);
  max-width: 30em; text-wrap: pretty;
}
.panel p:not(.lead), .estimate-note, .path-meta { text-wrap: pretty; }

/* ---------- stage (shared by both runs) ---------- */

.run { position: relative; }
.run-frame { position: relative; }

.stage, .run-frame {
  /* subject geometry of the poster, the placeholder and the dimension line: mirrors drehbuch K0
     (k 0.56, shift +0.14 / +0.02; portrait: k x 1.22 of the width, shift 0 / +0.13) */
  --cx: 64%; --cy: 48%; --d: 56cqmin;
}
@media (max-aspect-ratio: 17/20) {
  .stage, .run-frame { --cx: 50%; --cy: 37%; --d: 68cqw; }
}
.stage {
  position: absolute; inset: 0 0 auto 0; height: 100svh; overflow: hidden;
  container-type: size; z-index: var(--z-stage);
}
.stage-light {
  position: absolute; inset: 0;
  /* the poster's backdrop (the render tools): #15130F with a faint lift #1E1A15 behind the subject */
  background: radial-gradient(ellipse 50% 50% at var(--cx) var(--cy), #1e1a15 0%, var(--c-ground) 62%);
}
.stage > canvas {
  /* the live picture lies under the poster (z 0); runs.js shows it once the stage is live */
  position: absolute; inset: 0; z-index: 0; width: 100% !important; height: 100% !important; opacity: 0;
}

/* the Cycles poster: cover-scaled like the live frame (camera.js), zoomed around the optical axis in S1 */
.poster {
  position: absolute; inset: 0; z-index: 1; will-change: opacity, filter, transform;
  transform-origin: var(--ox, 64%) var(--oy, 48%); transform: scale(var(--zoom, 1));
}
.poster picture, .poster img { display: block; width: 100%; height: 100%; }
/* the poster is frame 0 of the image sequence (2:1, portrait 0.42, rendered with a safety margin). It is
   cropped like the sequence player crops every frame (seq/crop.js): cover, with the optical axis of the frame
   (focus 0.692 / 0.6, portrait 0.54 / 0.3453) where the layout wants it (0.74 / 0.6, portrait 0.54 / 0.33).
   The stage is a size container, so cqw/cqh are the stage. Values from sequenz/posen/werk-*.json frame 0. */
.poster img {
  object-fit: cover;
  object-position: clamp(calc(100cqw - 200cqh), calc(0.74 * 100cqw - 0.692 * 200cqh), 0px) 0px;
}
@media (min-aspect-ratio: 2/1) {
  .poster img { object-position: 0px clamp(calc(100cqh - 50cqw), calc(0.6 * 100cqh - 0.6 * 50cqw), 0px); }
}
@media (max-aspect-ratio: 17/20) {
  .poster img { object-position: 0px clamp(calc(100cqh - 238.095cqw), calc(0.33 * 100cqh - 0.3453 * 238.095cqw), 0px); }
}
/* tablet held upright (0.546 to 0.85): the whole portrait frame height, centred, the sides in the ground (seq/crop.js) */
@media (max-aspect-ratio: 17/20) and (min-aspect-ratio: 273/500) {
  .poster img {
    object-fit: contain; object-position: 50% 0%;
    /* the frame edges fade into the ground over a tenth of the frame width, like the canvas (player.js) */
    -webkit-mask-image: linear-gradient(to right, transparent calc(50cqw - 21cqh), #000 calc(50cqw - 16.8cqh), #000 calc(50cqw + 16.8cqh), transparent calc(50cqw + 21cqh));
    mask-image: linear-gradient(to right, transparent calc(50cqw - 21cqh), #000 calc(50cqw - 16.8cqh), #000 calc(50cqw + 16.8cqh), transparent calc(50cqw + 21cqh));
  }
}
/* sequence player: hand layers (projective transform on the dial plane) and the additive light sweep */
.seq-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.seq-hand { position: absolute; left: 0; top: 0; display: none; max-width: none; transform-origin: 0 0; will-change: transform; }
.seq-occ { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; }
.stage > .seq-sweep { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: plus-lighter; }
/* stills of the fallback tier (created by stills.js) */
.stage-still {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  pointer-events: none; will-change: opacity;
}
/* stills next to the texts in the calm layout (reduced motion, no script); never in the sticky stage */
.flow-still { display: block; margin-bottom: var(--sp-5); border-radius: var(--r-m); overflow: hidden; background: var(--c-ground-deep); }
.flow-still img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 72% 50%; }   /* stills from the 2:1 sequence: subject right of centre */
html.run-on .flow-still { display: none; }

.leaders, .overview-labels, .ring, .spec { display: none; }


/* ---------- run «Werk», flow layout ---------- */

.frame-copy { position: relative; z-index: var(--z-copy); }

.hero-copy {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-4);
  padding: calc(var(--nav-h) + 3rem) var(--edge) clamp(2.25rem, 6svh, 4.5rem);
}
.hero-lead { max-width: 27em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-2); }
.hero-cta { display: inline-flex; }
@media (min-width: 40rem) { .hero-cta { display: none; } }

html:not(.run-on) .run-werk .chapter-head,
html:not(.run-on) .layers,
html:not(.run-on) .overview {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
}
html:not(.run-on) .run-werk .chapter-head { padding-top: var(--sec); display: grid; gap: var(--sp-5); }
html:not(.run-on) .layers { display: grid; gap: var(--sp-8); padding-block: var(--sp-9) 0; }
html:not(.run-on) .layer { display: grid; gap: var(--sp-3); }
html:not(.run-on) .layer p { color: var(--c-ink-2); max-width: var(--measure); }
@media (min-width: 64rem) {
  html:not(.run-on) .layer { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); }
  html:not(.run-on) .layer .flow-still { grid-column: 1 / -1; margin-bottom: 0; }
}
html:not(.run-on) .overview { display: grid; gap: var(--sp-3); padding-block: var(--sp-9) var(--sec); }
.overview-title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-h3); letter-spacing: var(--tr-h3); }

/* ---------- atelier ---------- */

.atelier { position: relative; z-index: 3; background: var(--c-ground); padding-block: var(--sec); overflow-x: clip; }
.atelier-grid { display: grid; gap: var(--sp-9); }
.atelier-main .h2 { margin-bottom: clamp(3rem, 7svh, 5.5rem); }
.path { display: grid; gap: clamp(3rem, 8svh, 5.5rem); }
.path-say {
  font-size: var(--fs-say); line-height: 1.2; letter-spacing: -0.015em; font-weight: var(--w-display);
  max-width: 20em; text-wrap: pretty;
}
.path-say .w { transition: opacity 120ms linear; }
.path-meta { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-2); }

.estimate-inner { display: grid; gap: var(--sp-5); justify-items: start; }
.plate {
  position: relative; width: min(100%, 25rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #25221c 0%, #1b1915 62%, #171511 100%);
  box-shadow: inset 0 0 0 1px var(--c-line), 0 28px 48px -28px rgba(0, 0, 0, 0.7);
  isolation: isolate; overflow: hidden;   /* the turning canvas stays inside the round plate */
}
.plate-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.plate-face {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--sp-2);
  text-align: center; z-index: 1;
}
.plate-price { display: grid; justify-items: center; gap: var(--sp-1); }
.plate-ab { font-family: var(--f-text); font-size: var(--fs-micro); letter-spacing: var(--tr-micro); color: var(--c-ink-2); font-weight: var(--w-ui); }
.plate-price .ticker {
  font-size: clamp(3rem, 2.2rem + 2.6vw, 4.5rem); font-weight: 360; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.plate-dur { font-size: var(--fs-small); color: var(--c-ink-2); }

/* rolling digits (adapted from ReactBits Counter, MIT + Commons Clause, see the choreography notes) */
.ticker { display: inline-flex; line-height: 1; }
.tk { display: inline-block; height: 1.12em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
.tk-col { display: flex; flex-direction: column; transition: transform 420ms var(--ease-house); }
.tk-col span { display: block; height: 1.12em; line-height: 1.12em; text-align: center; }

.seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  margin: 0; padding: 4px; border: 0; border-radius: var(--r-pill);
  background: var(--c-ground-raise); box-shadow: inset 0 0 0 1px var(--c-line);
}
.seg-opt { position: relative; display: block; }
.seg-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt span {
  display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 1.05rem;
  border-radius: var(--r-pill); font-weight: var(--w-ui); font-size: var(--fs-small); color: var(--c-ink-2);
  white-space: nowrap; pointer-events: none;
  transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
.seg-opt input:checked + span { background: rgba(237, 237, 234, 0.09); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-brass-soft); }
.seg-opt input:focus-visible + span { outline: 1.5px solid var(--c-brass); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .seg-opt input:not(:checked):hover + span { color: var(--c-ink); }
}
.estimate-note { font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-3); max-width: 26rem; }

@media (min-width: 64rem) {
  .atelier-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6); align-items: start; }
  .atelier-main { grid-column: 1 / span 7; }
  .estimate { grid-column: 8 / -1; align-self: stretch; }   /* 64 to 80rem: five columns, the switch fits (Chronograph) */
  .estimate-inner { position: sticky; top: calc(var(--nav-h) + 3rem); }
}
@media (min-width: 80rem) {
  .estimate { grid-column: 9 / -1; }
}
.seg { max-width: 100%; }
@media (max-width: 26rem) {
  .seg { width: 100%; }
  .seg-opt span { padding: 0 0.5rem; font-size: 0.875rem; }
}

/* ---------- run «Montage», flow layout ---------- */

html:not(.run-on) .run-montage .stage,
html:not(.run-on) .counter { display: none; }
html:not(.run-on) .run-montage .frame-copy {
  max-width: var(--wrap); margin-inline: auto; padding: var(--sec) var(--gut);
  display: grid; gap: var(--sp-8);
}
html:not(.run-on) .m-head { display: grid; gap: var(--sp-5); }
html:not(.run-on) .beats { display: grid; gap: var(--sp-3); counter-reset: none; }
html:not(.run-on) .beat { font-family: var(--f-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-h3); }
html:not(.run-on) .close { display: grid; gap: var(--sp-5); justify-items: start; padding-top: var(--sp-6); }

.close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); }
.pause {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0 1rem;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: transparent; cursor: pointer;
  font-weight: var(--w-ui); font-size: var(--fs-micro); letter-spacing: var(--tr-micro); color: var(--c-ink-2);
  transition: transform var(--dur-press) var(--ease-house), color var(--dur-ui) ease;
}
.pause:active { transform: scale(0.97); }
.pause::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-brass); }
.pause[aria-pressed="true"]::before { background: transparent; box-shadow: inset 0 0 0 1px var(--c-ink-3); }

.counter { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--fs-small); color: var(--c-ink-2); }
.counter-digits { font-family: var(--f-display); font-size: var(--fs-h3); color: var(--c-ink); font-variant-numeric: tabular-nums lining-nums; }

/* =========================================================================================
   html.run-on: the two runs become sticky stages (set by main.js only when motion is allowed)
   ========================================================================================= */

html.run-on .run { height: calc((var(--len, 11) + 1) * 100svh); }
html.run-on .run-werk { --len: 11.652; }
html.run-on .run-montage { --len: 13.195; }   /* scroll length (drehbuch.js scrollLen); runs.js sets the exact value */
html.run-on .run-frame { position: sticky; top: 0; height: 100svh; overflow: clip; container-type: size; }
html.run-on .stage { inset: 0; height: 100%; }
html.run-on .frame-copy { position: absolute; inset: 0; pointer-events: none; }

/* panels: they appear with the scroll position, not with time (runs.js sets --tin and --tout, 0 to 1, per panel);
   lines rise one after the other inside the entry ramp. Before the first frame the class is-on decides. */
html.run-on [data-toggle] { position: absolute; pointer-events: none; --tin: 0; --tout: 0; }
html.run-on [data-toggle].is-on { --tin: 1; --tout: 1; }
html.run-on [data-toggle] > *,
html.run-on .beat {
  --k: 0;
  --c: min(clamp(0, calc((var(--tin) - var(--k) * 0.14) / 0.58), 1), var(--tout));
  opacity: var(--c); transform: translate3d(0, calc((1 - var(--c)) * 14px), 0);
}
html.run-on [data-toggle].is-on { pointer-events: auto; }
html.run-on [data-toggle] > :nth-child(2) { --k: 1; }
html.run-on [data-toggle] > :nth-child(3) { --k: 2; }
html.run-on [data-toggle] > :nth-child(n + 4) { --k: 3; }
/* keyboard focus inside a panel that is switched off shows it (never a mouse click: after «Uhr anhalten» the
   button keeps focus, and the closing panel would otherwise hang over the montage when scrolling back) */
html.run-on [data-toggle]:has(:focus-visible) > * { opacity: 1; transform: none; filter: none; }

/* hero copy: bottom left, flat on the page; drifts with the scroll (transform set by runs.js) */
html.run-on .hero-copy {
  inset: auto auto 0 0; min-height: 0; width: 100%;
  padding: 0 var(--edge) clamp(2rem, 6.5svh, 4.5rem);
}
html.run-on .hero-copy > .display { max-width: 11.5em; }

/* panel position: left column, vertically centred (translate positions, transform animates) */
html.run-on .panel {
  left: var(--edge); top: 50%; translate: 0 -50%;
  width: min(29rem, 40vw); display: grid; gap: var(--sp-4);
}
html.run-on .chapter-head { width: min(34rem, 44vw); gap: var(--sp-5); }
html.run-on .layers { position: absolute; inset: 0; }
html.run-on .layer p { color: var(--c-ink-2); }
html.run-on .overview { top: auto; bottom: clamp(2rem, 7svh, 4.5rem); translate: none; gap: var(--sp-2); }

/* the macro poster fills the frame: a soft ground of the base tone under the hero text, like studio light that
   falls off towards the text side. In the flow layout it lies over the first screen; in the runs it switches with
   the hero text. */
.hero-scrim {
  position: absolute; inset: 0 0 auto 0; height: 100svh; pointer-events: none;
  background: radial-gradient(ellipse 58% 62% at 14% 74%, rgb(21 19 15 / 0.9) 0%, rgb(21 19 15 / 0.84) 48%, rgb(21 19 15 / 0.4) 74%, rgb(21 19 15 / 0) 100%);
}
@media (max-aspect-ratio: 17/20) {
  /* portrait: the text sits low, over the lug of the case */
  .hero-scrim { background: linear-gradient(to top, rgb(21 19 15 / 0.92) 0%, rgb(21 19 15 / 0.86) 40%, rgb(21 19 15 / 0) 64%); }
}
html.run-on .hero-scrim {
  inset: 0; height: auto;
  opacity: 0; transition: opacity var(--dur-state-out) var(--ease-house);
}
html.run-on .hero-scrim.is-on { opacity: 1; transition-duration: var(--dur-state); }

/* dimension line under the case (R9 linework), geometry follows the subject and the zoom */
html.run-on .spec {
  display: block; position: absolute;
  left: var(--spec-x, 40%); top: var(--spec-y, 75%); width: var(--spec-w, 30%);
}
html.run-on .spec > * { transform: none; }
.spec-measure {
  position: relative; text-align: center; padding-bottom: 0.875rem;
  font-size: var(--fs-small); font-weight: var(--w-ui); color: var(--c-ink); font-variant-numeric: tabular-nums;
}
.spec-measure::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  border-left: 1px solid var(--c-brass); border-right: 1px solid var(--c-brass);
  background: linear-gradient(var(--c-brass), var(--c-brass)) center / 100% 1px no-repeat;
  transform-origin: center; transform: scaleX(0); transition: transform var(--dur-state-out) var(--ease-house);
}
html.run-on .spec.is-on .spec-measure::after { transform: scaleX(1); transition-duration: 900ms; }
.spec-text { margin-top: var(--sp-4); text-align: center; font-size: var(--fs-micro); line-height: 1.5; letter-spacing: var(--tr-micro); color: var(--c-ink-2); }
/* stills tier: the poster stays a macro, there is no whole case to measure; the data sits as a caption where
   the hero text stood, on the same calm ground */
html[data-tier="fallback"].run-on .spec {
  left: var(--edge); right: auto; top: auto; bottom: clamp(2.25rem, 6svh, 4.5rem); width: auto;
}
html[data-tier="fallback"] .spec-measure, html[data-tier="fallback"] .spec-text { text-align: left; }
html[data-tier="fallback"] .spec-measure::after { display: none; }
html[data-tier="fallback"].run-on .hero-scrim:has(~ .spec.is-on) { opacity: 1; transition-duration: var(--dur-state); }

/* the stage overlay sits above the canvas and below the text */
html.run-on .leaders {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; overflow: visible;
}
.leaders path {
  fill: none; stroke: var(--c-brass); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-state-out) var(--ease-house);
}
.leaders path.is-on { stroke-dashoffset: 0; transition-duration: var(--dur-state); }
.leaders circle { fill: var(--c-brass); opacity: 0; transition: opacity var(--dur-state-out) var(--ease-house); }
.leaders circle.is-on { opacity: 1; transition-duration: var(--dur-state); }

html.run-on .overview-labels { display: block; position: absolute; inset: 0; z-index: var(--z-copy); pointer-events: none; }
.ov-label {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: var(--fs-micro); line-height: 1; letter-spacing: var(--tr-micro); font-weight: var(--w-ui); color: var(--c-ink);
  opacity: 0; transition: opacity var(--dur-state-out) var(--ease-house);
}
.ov-label.is-on { opacity: 1; transition-duration: var(--dur-state); }

/* progress ring: seven marks on a 270 degree sector like a power-reserve scale. bottom left under the text
   column, since the close views of the holds now fill the right half down to the lower edge */
html.run-on .ring {
  display: block; position: absolute; left: var(--edge); bottom: clamp(1.5rem, 5svh, 3rem);
  width: 6rem; height: 6rem; z-index: var(--z-copy);
}
html.run-on .ring[hidden] { display: none; }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring line { stroke: var(--c-ink-3); stroke-width: 1.5; stroke-linecap: round; transition: stroke 300ms ease; }
.ring line.is-done { stroke: var(--c-ink-2); }
.ring line.is-active { stroke: var(--c-brass); stroke-width: 2; }
.ring-num {
  position: absolute; inset: 0; display: grid; place-content: center;
  font-family: var(--f-display); font-size: 1.375rem; font-variant-numeric: tabular-nums lining-nums; color: var(--c-ink);
}
.ring button {
  position: absolute; width: 1.75rem; height: 1.75rem; margin: -0.875rem 0 0 -0.875rem; padding: 0; border: 0;
  border-radius: 50%; background: transparent; cursor: pointer;
}
.ring button:focus-visible { outline-offset: 0; }
html[data-device="phone"].run-on .ring, html[data-device="tablet"].run-on .ring { pointer-events: none; }


/* montage run */
html.run-on .run-montage .beats { position: absolute; inset: 0; }
html.run-on .beat {
  position: absolute; left: var(--edge); top: 50%; translate: 0 -50%; width: min(26rem, 38vw);
  font-family: var(--f-display); font-size: var(--fs-h3); line-height: var(--lh-h3);
  font-weight: var(--w-h3); letter-spacing: var(--tr-h3); text-wrap: balance;
}
html.run-on .counter { right: var(--edge); bottom: clamp(1.5rem, 5svh, 3rem); }
html.run-on .counter > * { transform: none; }
html.run-on .close { width: min(30rem, 42vw); gap: var(--sp-5); justify-items: start; }

/* portrait windows: subject in the upper part, text on the calm lower part */
@media (max-aspect-ratio: 17/20) {
  html.run-on .panel, html.run-on .beat {
    top: auto; bottom: calc(clamp(1.5rem, 4svh, 2.5rem) + env(safe-area-inset-bottom));
    translate: none; width: auto; left: var(--gut); right: var(--gut); max-width: 36rem;
  }
  html.run-on .chapter-head, html.run-on .close { width: auto; }
  html.run-on .overview { bottom: calc(clamp(1.5rem, 4svh, 2.5rem) + env(safe-area-inset-bottom)); }
  html.run-on .ring {
    top: calc(var(--nav-h) + env(safe-area-inset-top) + 0.5rem); bottom: auto; left: auto; right: var(--edge); width: 4.25rem; height: 4.25rem;
  }
  .ring-num { font-size: 1.125rem; }
  html.run-on .counter { top: calc(var(--nav-h) + env(safe-area-inset-top) + 1rem); bottom: auto; }
  html.run-on .layer .h3 { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.75rem); }
  html.run-on .layer p { font-size: 1rem; line-height: 1.55; }
}

/* low windows (laptops at 125 to 175 per cent scaling, phones held sideways) */
@media (max-height: 40rem) {
  html.run-on .panel { gap: var(--sp-3); }
  html.run-on .layer p { font-size: 1rem; line-height: 1.5; }
}
/* laptops with a low window (1280 x 590) keep the reading size of 17 px; phones held sideways stay at 16 */
@media (max-height: 40rem) and (min-width: 64rem) {
  html.run-on .layer p { font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .btn:active, .nav-toggle:active, .pause:active { transform: none; }
  .tk-col { transition: none; }
  .menu { transition: opacity 200ms ease; clip-path: none; }
}


/* ---------- pre-loader of the image sequence (gate.js) ---------- */
/* the page waits at the hero until the sequence can play without stutter; the ring fills, then reads «Scrollen» */
.seq-gate { display: none; }
html.run-on[data-tier="seq"] .seq-gate {
  display: inline-flex; align-items: center; gap: 0.625rem; margin: 0;
  font: var(--w-ui) var(--fs-micro) / 1 var(--f-text); letter-spacing: var(--tr-micro); color: var(--c-ink-2);
}
.seq-gate-ring { width: 1.375rem; height: 1.375rem; flex: none; overflow: visible; }
.seq-gate-track, .seq-gate-arc { fill: none; stroke-width: 1.25; }
.seq-gate-track { stroke: var(--c-line-strong); }
.seq-gate-arc {
  stroke: var(--c-brass); stroke-linecap: round; stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--p, 0) * 100);
  transform: rotate(-90deg); transform-origin: 12px 12px;
  transition: stroke-dashoffset 320ms var(--ease-house);
}
html.gate-done .seq-gate-label { color: var(--c-ink); }
html.is-gated, html.is-gated body { overflow: hidden; overscroll-behavior: none; }

/* ---------- measurement overlay (?fps=1, fps.js) ---------- */
.fps-panel {
  position: fixed; right: 0.75rem; top: calc(var(--nav-h, 4.5rem) + 0.5rem); z-index: 2147483000;
  display: grid; gap: 0.2rem; min-width: 11.5rem; padding: 0.625rem 0.75rem;
  background: rgba(12, 11, 9, 0.86); border: 1px solid var(--c-line-strong); border-radius: 6px;
  font: 500 0.6875rem / 1.25 var(--f-text); color: var(--c-ink); font-variant-numeric: tabular-nums;
}
.fps-panel p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
.fps-panel p > :first-child { color: var(--c-ink-2); }
.fps-reset {
  margin-top: 0.375rem; min-height: 2rem; padding: 0 0.75rem; border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill); background: transparent; color: var(--c-ink); font: inherit; cursor: pointer;
}

/* note while a run is still being rendered (player.js, manifest «pending»); disappears with the complete sequence */
.seq-pending {
  position: absolute; right: var(--edge); top: calc(var(--nav-h) + 1rem); z-index: 2; margin: 0;
  padding: 0.5rem 0.875rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  font: var(--w-ui) var(--fs-micro) / 1 var(--f-text); letter-spacing: var(--tr-micro); color: var(--c-ink-2);
  background: rgba(12, 11, 9, 0.6);
}
.seq-pending[hidden] { display: none; }