/* ============================================================================
   Black Pixel Studios — the billboard (holding page v5, self-playing)

   One viewport, seven acts, no page scroll. Palette, type and motion tokens
   mirror design/tokens.json. Orange (#FF6200) is light, never fill — except
   the one primary CTA.
   ========================================================================= */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-400_700.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --bg: #000000;
  --fg: #f5f5f5;
  --fg-2: #a8a8a8;
  --fg-3: #858585;
  --line: #1f1f1f;
  --line-2: #2c2c2c;
  --accent: #ff6200;
  --accent-hi: #ff7a1a;

  --sans: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
  --gut: clamp(1.1rem, 3.6vw, 3.25rem);
  /* The notch, the rounded corners and the home indicator. `viewport-fit=cover`
     is already set on the meta tag, so every fixed edge has to pay for it. */
  --gut-l: max(var(--gut), env(safe-area-inset-left));
  --gut-r: max(var(--gut), env(safe-area-inset-right));
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  --top: calc(clamp(3.6rem, 8vh, 5.25rem) + var(--safe-t));
  --bottom: calc(clamp(5.5rem, 12vh, 7.5rem) + var(--safe-b));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.92rem + 0.16vw, 1.0625rem);
  line-height: 1.6;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

::selection {
  background: var(--accent);
  color: #000;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: #fff;
  color: #000;
  padding: 0.75rem 1.1rem;
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: 500;
}
.skip:focus {
  transform: none;
}

/* ── the field ─────────────────────────────────────────────────────────── */

#volume {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
#volume.is-live {
  opacity: 1;
}

/* Vignette. The copy sits bottom-left (or bottom-right, or centred), so the
   scrim is bottom-weighted and the top two thirds of the field stay clean. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0) 34%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.78) 22%, rgba(0, 0, 0, 0.3) 48%, rgba(0, 0, 0, 0) 68%),
    radial-gradient(140% 105% at 50% 44%, transparent 42%, rgba(0, 0, 0, 0.42) 82%, rgba(0, 0, 0, 0.8) 100%);
}
body[data-align="left"] .veil::after,
body[data-align="right"] .veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.14) 34%, rgba(0, 0, 0, 0) 58%);
  transition: opacity 600ms var(--ease-out);
}
body[data-align="right"] .veil::after {
  transform: scaleX(-1);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: screen;
  background-image: var(--grain);
  background-size: 160px 160px;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  background: var(--accent);
  mix-blend-mode: screen;
  opacity: 0;
}
.flash.is-on {
  animation: flash 320ms ease-out;
}
@keyframes flash {
  0% { opacity: 0; }
  14% { opacity: 0.22; }
  100% { opacity: 0; }
}

/* ── fixed chrome ──────────────────────────────────────────────────────── */

.chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: calc(clamp(0.9rem, 2.2vh, 1.5rem) + var(--safe-t)) var(--gut-r)
    clamp(0.9rem, 2.2vh, 1.5rem) var(--gut-l);
  pointer-events: none;
}
.chrome > * {
  pointer-events: auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.95rem;
}
.brand__mark {
  display: grid;
  grid-template-columns: repeat(3, 5px);
  grid-template-rows: repeat(3, 5px);
  gap: 2px;
}
.brand__mark i {
  background: var(--fg);
  border-radius: 1px;
}
.brand__mark i:nth-child(5) {
  background: var(--accent);
  animation: mark 4.2s ease-in-out infinite;
}
@keyframes mark {
  0%, 70%, 100% { opacity: 1; }
  82% { opacity: 0.35; }
}
.brand__name small {
  font-family: var(--mono);
  font-size: 0.72em;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  font-weight: 400;
}
.tagline {
  margin: 0 auto 0 0;
  padding-left: clamp(0.75rem, 2vw, 1.75rem);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  border-left: 1px solid var(--line);
}
.snd {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.4rem 0.7rem;
  margin-right: 0.35rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  position: relative;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.snd:hover {
  color: var(--fg);
  border-color: var(--line-2);
}
/* The icon is built from pixels, like everything else on this page. */
.snd__ico {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}
.snd__ico i {
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  height: 3px;
}
.snd__ico i:nth-child(2) { height: 6px; }
.snd__ico i:nth-child(3) { height: 11px; }
.snd__ico i:nth-child(4) { height: 7px; }
.snd__ico i:nth-child(5) { height: 4px; }
.snd[aria-pressed="true"] {
  color: var(--accent);
  border-color: rgba(255, 98, 0, 0.42);
}
.snd[aria-pressed="true"] .snd__ico i {
  animation: vu 1200ms ease-in-out infinite;
}
.snd[aria-pressed="true"] .snd__ico i:nth-child(2) { animation-delay: 120ms; }
.snd[aria-pressed="true"] .snd__ico i:nth-child(3) { animation-delay: 240ms; }
.snd[aria-pressed="true"] .snd__ico i:nth-child(4) { animation-delay: 360ms; }
.snd[aria-pressed="true"] .snd__ico i:nth-child(5) { animation-delay: 480ms; }
@keyframes vu {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.42); }
}
/* First visit only: a quiet invitation, never a nag. */
.snd.is-invite::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--accent);
  animation: blink 1.8s steps(1, end) infinite;
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--line-2);
}
.lang button {
  background: none;
  border: 0;
  font: inherit;
  color: var(--fg-3);
  padding: 0.4rem;
  cursor: pointer;
  border-radius: 2px;
  transition: color 160ms var(--ease-out);
}
.lang button[aria-pressed="true"] {
  color: var(--fg);
}
.lang button:hover {
  color: var(--accent);
}

/* ── acts ──────────────────────────────────────────────────────────────── */

main {
  position: fixed;
  inset: var(--top) 0 var(--bottom);
  z-index: 10;
}

.act {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0 var(--gut-r) clamp(0.5rem, 2vh, 1.5rem) var(--gut-l);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 520ms var(--ease-out),
    visibility 0s linear 520ms;
}
.act.is-now {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 620ms var(--ease-cine) 120ms,
    visibility 0s;
}

.act__num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-3);
  align-self: start;
}
.act__num b {
  color: var(--accent);
  font-weight: 500;
}
.act__num::after {
  content: "";
  flex: 1;
  max-width: 6rem;
  height: 1px;
  background: var(--line);
}

.act__copy {
  align-self: end;
  max-width: min(50rem, 62vw);
}
.act[data-align="right"] .act__copy {
  justify-self: end;
  text-align: right;
}
.act[data-align="right"] .act__num {
  flex-direction: row-reverse;
  justify-self: end;
}
.act[data-align="center"] .act__copy {
  justify-self: center;
  text-align: center;
  max-width: min(46rem, 88vw);
}
/* Centred copy sits over the brightest part of the field, so it carries its
   own scrim rather than dimming the whole frame. */
body[data-align="center"] .veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(76% 46% at 50% 88%, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0) 78%);
}

/* Type enters as the act does: a small, fast lift. Never a transform on the
   H1 at first paint — LCP must not wait for JS. */
.act.is-now .act__copy > * {
  animation: lift 700ms var(--ease-cine) both;
}
.act.is-now .act__copy > *:nth-child(2) { animation-delay: 80ms; }
.act.is-now .act__copy > *:nth-child(3) { animation-delay: 150ms; }
.act.is-now .act__copy > *:nth-child(4) { animation-delay: 220ms; }
@keyframes lift {
  from { opacity: 0; transform: translateY(16px); }
}
body:not(.is-live) .act.is-now .act__copy > * {
  animation: none;
}

.display {
  margin: 0;
  font-size: clamp(2.1rem, min(6.2vw, 8.4vh), 5.6rem);
  line-height: 0.97;
  letter-spacing: -0.042em;
  font-weight: 600;
  text-wrap: balance;
  max-width: 17ch;
  /* Dutch compounds are long; never let the browser invent a break inside
     one, and never let one push the frame wider than the phone. */
  hyphens: manual;
  overflow-wrap: break-word;
}
.act[data-align="right"] .display {
  margin-left: auto;
}
.act[data-align="center"] .display {
  margin-inline: auto;
  max-width: 19ch;
}
.display em {
  font-style: normal;
  color: var(--fg-3);
  display: block;
}

.lead {
  margin: clamp(1rem, 2.6vh, 1.75rem) 0 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 36rem;
  overflow-wrap: break-word;
}
.lead--sm {
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  color: var(--fg-3);
}
.lead strong {
  color: var(--fg);
  font-weight: 500;
}
.act[data-align="right"] .lead {
  margin-left: auto;
}
.act[data-align="center"] .lead {
  margin-inline: auto;
}

/* 03 — the three offers, all readable, the live one lit */
.subs {
  list-style: none;
  margin: clamp(1rem, 2.4vh, 1.6rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: clamp(0.95rem, 1.35vw, 1.15rem);
}
.subs li {
  position: relative;
  padding-left: 1.5rem;
  color: #4a4a4a;
  transition: color 420ms var(--ease-out), transform 420ms var(--ease-cine);
}
.subs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: #2e2e2e;
  transition: background 420ms var(--ease-out), width 420ms var(--ease-cine);
}
.subs li.is-live {
  color: var(--fg);
  transform: translateX(4px);
}
.subs li.is-live::before {
  background: var(--accent);
  width: 14px;
}

/* 05 — the honesty badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 clamp(0.9rem, 2vh, 1.3rem);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 1px;
  animation: blink 2.4s steps(1, end) infinite;
}
@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.2; }
}

/* 06 — the number and the joke */
.pct-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(0.75rem, 2vh, 1.4rem);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease-cine), transform 600ms var(--ease-cine);
}
.pct-row.is-live {
  opacity: 1;
  transform: none;
}
.pct {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  line-height: 0.82;
  flex: none;
}
.pct__num {
  font-size: clamp(3.2rem, 9vw, 6rem);
  letter-spacing: -0.05em;
  font-weight: 500;
  color: var(--fg);
}
.pct__sign {
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: var(--accent);
}
.pct__word {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--fg-3);
  margin-left: 0.5rem;
  letter-spacing: 0;
}
.pct-row > div {
  max-width: 30rem;
}
.status {
  margin: 0.75rem 0 0;
  font-size: 0.76rem;
  color: var(--fg-3);
  min-height: 1.5em;
  display: flex;
  gap: 0.5rem;
}
.status__caret {
  color: var(--accent);
}
#statusText {
  transition: opacity 240ms var(--ease-out);
}

/* 07 — the one action */
.actions {
  margin: clamp(1.4rem, 3.4vh, 2.25rem) 0 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  background: var(--accent);
  color: #000;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  letter-spacing: -0.01em;
  will-change: transform;
  transition: background 180ms var(--ease-out);
}
.btn:hover {
  background: var(--accent-hi);
}
.btn__mark {
  width: 9px;
  height: 9px;
  background: #000;
  border-radius: 1px;
  flex: none;
  transition: transform 260ms var(--ease-cine);
}
.btn:hover .btn__mark {
  transform: translateX(3px);
}
.btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── the chapter rail ──────────────────────────────────────────────────── */

.rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(clamp(2.5rem, 5.4vh, 3.2rem) + var(--safe-b));
  z-index: 40;
  display: flex;
  gap: clamp(0.25rem, 1vw, 0.9rem);
  padding: 0 var(--gut-r) 0 var(--gut-l);
  justify-content: flex-start;
}
.rail button {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 0.7rem 0 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4d4d4d;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: color 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.rail button::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: var(--p, 0%);
  background: var(--accent);
  transition: width 120ms linear;
}
.rail button i {
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.rail button:hover,
.rail button:focus-visible {
  color: var(--fg-2);
  border-color: var(--line-2);
}
.rail button:hover i,
.rail button:focus-visible i {
  opacity: 1;
}
.rail button[aria-current="true"] {
  color: var(--accent);
}
.rail button[aria-current="true"] i {
  opacity: 1;
}
.rail button.is-past {
  color: #6a6a6a;
}

/* ── footer ────────────────────────────────────────────────────────────── */

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.55rem var(--gut-r) calc(0.55rem + var(--safe-b)) var(--gut-l);
  display: flex;
  align-items: center;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #5e5e5e;
  background: linear-gradient(0deg, #000 60%, rgba(0, 0, 0, 0));
}
.foot a {
  color: var(--fg-3);
  text-decoration: none;
}
.foot a:hover {
  color: var(--accent);
}
.foot__play {
  background: none;
  border: 0;
  font: inherit;
  color: #5e5e5e;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 160ms var(--ease-out);
}
.foot__play:hover,
.foot__play[aria-pressed="true"] {
  color: var(--accent);
}

/* ── custom cursor ─────────────────────────────────────────────────────── */

.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
  opacity: 0;
  transition: opacity 200ms linear;
}
.cursor {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
  border-radius: 1px;
}
.cursor-ring {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  transition:
    opacity 200ms linear,
    width 260ms var(--ease-cine),
    height 260ms var(--ease-cine),
    margin 260ms var(--ease-cine),
    border-color 260ms var(--ease-cine);
}
body.cursor-on .cursor,
body.cursor-on .cursor-ring {
  opacity: 1;
}
body.cursor-hot .cursor-ring {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-color: var(--accent);
}
.cursor-ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 180ms linear;
}
body.cursor-hot .cursor-ring__label {
  opacity: 1;
}

/* ── responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root {
    --bottom: clamp(5rem, 14vh, 8rem);
  }
  .tagline {
    display: none;
  }
  .snd__label {
    display: none;
  }
  .snd {
    padding: 0.4rem 0.5rem;
  }
  .act__copy,
  .act[data-align="center"] .act__copy {
    max-width: none;
    text-align: left;
  }
  .act[data-align="right"] .act__copy {
    justify-self: start;
    text-align: left;
  }
  .act[data-align="right"] .act__num {
    flex-direction: row;
    justify-self: start;
  }
  .act[data-align="right"] .display,
  .act[data-align="center"] .display,
  .act[data-align="right"] .lead,
  .act[data-align="center"] .lead {
    margin-inline: 0;
  }
  .act[data-align="center"] .act__copy {
    align-self: end;
  }
  .display {
    max-width: 14ch;
    letter-spacing: -0.034em;
  }
  .veil {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 18%, rgba(0, 0, 0, 0) 32%),
      linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.86) 30%, rgba(0, 0, 0, 0.42) 58%, rgba(0, 0, 0, 0) 76%);
  }
  body[data-align="left"] .veil::after,
  body[data-align="right"] .veil::after {
    display: none;
  }
  .rail {
    gap: 0.3rem;
  }
  .rail button {
    padding-top: 0.55rem;
    font-size: 0.6rem;
  }
  .rail button i {
    display: none;
  }
  .pct-row {
    gap: 0.9rem;
  }
  .foot {
    font-size: 0.62rem;
    gap: 0.35rem 0.9rem;
  }
  /* The copyright line only. `.foot span:first-child` also matched the
     label inside the pause button, which silently removed the control. */
  .foot > span:first-child {
    display: none;
  }
}

@media (max-width: 420px) {
  .brand__name small {
    display: none;
  }
}

@media (pointer: coarse), (hover: none) {
  .cursor,
  .cursor-ring {
    display: none;
  }
  /* 44 px targets make the rail tall enough to overlap the footer, which
     would sit an invisible rail button on top of the pause control. Lift the
     rail clear of it and give the copy the matching headroom. */
  :root {
    --bottom: calc(7.6rem + var(--safe-b));
  }
  .rail {
    bottom: calc(4.3rem + var(--safe-b));
  }
  .foot {
    z-index: 41;
  }
  /* 44 px minimum, without moving the hairline the marker rides on. */
  .rail button {
    min-height: 44px;
    align-items: flex-start;
    padding-top: 0.5rem;
  }
  .snd,
  .lang button,
  .foot__play,
  .foot a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .foot a {
    min-width: 0;
    justify-content: flex-end;
  }
  .foot__play {
    white-space: nowrap;
  }
}

/* ── portrait ──────────────────────────────────────────────────────────── */
/* The composition bleeds behind the copy on a phone — the subject is a crop,
   not a miniature — so the text block carries its own ground. */
@media (orientation: portrait) and (max-width: 900px) {
  .act::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 58%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      0deg,
      #000 6%,
      rgba(0, 0, 0, 0.93) 32%,
      rgba(0, 0, 0, 0.6) 64%,
      rgba(0, 0, 0, 0) 100%
    );
  }
  .display {
    max-width: 13ch;
  }
  .act__copy {
    padding-bottom: 0.25rem;
  }
}

@media (max-width: 370px) {
  .display {
    font-size: clamp(1.85rem, 7.4vw, 2.4rem);
    max-width: 12ch;
  }
  .lead {
    font-size: 0.92rem;
  }
}

/* A dropped WebGL context: keep the words, lose the field, say nothing. */
body.gl-lost #volume {
  opacity: 0;
}

/* ── reduced motion ────────────────────────────────────────────────────── */
/* No auto-advance, no camera motion, no entrance animation. One static
   composition per act; the rail and the arrow keys still move between them. */

@media (prefers-reduced-motion: reduce) {
  #volume {
    opacity: 1;
    transition: none;
  }
  .act,
  .act.is-now,
  .act.is-now .act__copy > *,
  .subs li,
  .subs li::before,
  .pct-row,
  .rail button,
  .rail button i,
  .btn__mark,
  #statusText,
  .veil::after {
    transition: none;
    animation: none;
  }
  .act.is-now .act__copy > * {
    opacity: 1;
    transform: none;
  }
  .pct-row {
    opacity: 1;
    transform: none;
  }
  .brand__mark i:nth-child(5),
  .badge::before,
  .snd__ico i,
  .snd.is-invite::after {
    animation: none;
  }
  .grain {
    opacity: 0.02;
  }
  .rail button i {
    opacity: 1;
  }
  .foot__play {
    display: none;
  }
}