/* CUCUS - one desert highway, a sign at every mile.
   Colour: 08_LOOK tokens. Type: Paquito Bold / Giphurs Medium, ratio 1.25.
   Surface: die 5, inset. Every box on this page is a well carved into the plastic. */

:root {
  /* colour, sampled off his own plate and pushed */
  --sky: #2d6afb;
  --sand: #eab446;
  --ink: #241708;
  --accent: #ff4fa3;
  --paper: #fff6e4;
  --green: #56a125;

  --sky-2: color-mix(in oklab, var(--sky), var(--paper) 58%);
  --sky-3: color-mix(in oklab, var(--sky), var(--ink) 34%);
  --sand-far: color-mix(in oklab, var(--sand), var(--paper) 38%);
  --sand-2: color-mix(in oklab, var(--sand), var(--ink) 30%);
  --ink-2: color-mix(in oklab, var(--ink), var(--paper) 42%);
  --road: color-mix(in oklab, var(--ink), var(--sky) 16%);
  --road-2: color-mix(in oklab, var(--road), var(--paper) 14%);
  --fascia: color-mix(in oklab, var(--ink), var(--sky) 6%);
  --fascia-2: color-mix(in oklab, var(--fascia), var(--paper) 12%);
  --lcd: color-mix(in oklab, var(--sand), var(--ink) 72%);
  --lcd-ink: #6bff9d;
  --scrim: oklch(from var(--ink) l c h / 0.48);

  /* type, ratio 1.25, steps skipped between roles */
  --t-hero: clamp(40px, 10.5vw, 131px);
  --t-head: clamp(21px, 3.4vw, 43px);
  --t-body: clamp(15px, 1.2vw, 17.5px);
  --t-label: 14px;
  --t-micro: 11px;

  /* surface, one recipe: a well carved into the plastic */
  --pad: 14px;
  --radius: 12px;
  --radius-inner: max(0px, calc(var(--radius) - var(--pad)));
  --well: inset 0 3px 0 rgb(0 0 0 / 0.5), inset 0 -2px 0 rgb(255 255 255 / 0.14), inset 0 10px 18px rgb(0 0 0 / 0.4);
  --well-deep: inset 0 5px 14px rgb(0 0 0 / 0.62), inset 0 -2px 0 rgb(255 255 255 / 0.12);
  --well-sign: inset 0 0 0 6px rgb(0 0 0 / 0.22), inset 0 8px 16px rgb(0 0 0 / 0.3);
  --rim: inset 0 0 0 8px var(--green), inset 0 0 0 11px rgb(0 0 0 / 0.16), inset 0 10px 18px rgb(0 0 0 / 0.22);
  --ring: 0 0 0 3px var(--paper), 0 0 0 7px var(--accent);
  --none: none;

  --z-world: 0;
  --z-rail: 1;
  --z-stage: 2;
  --z-shout: 3;
  --z-dash: 20;
  --z-finale: 30;
  --z-overlay: 40;

  --dur: 220ms;
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);

  --horizon: 44%;
  --ground-y: 520px;
  --board-w: min(70vw, calc(50svh * 1.333));
}

@font-face {
  font-family: "Paquito";
  src: url("/vendor/fonts/paquito-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Paquito fallback";
  src: local("Arial Narrow"), local("Arial");
  size-adjust: 106%;
  ascent-override: 108%;
  descent-override: 38%;
  line-gap-override: 10%;
}
@font-face {
  font-family: "Giphurs";
  src: url("/vendor/fonts/giphurs-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Giphurs fallback";
  src: local("Arial");
  size-adjust: 96%;
  ascent-override: 100%;
  descent-override: 28%;
  line-gap-override: 0%;
}

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

html {
  scroll-snap-type: y proximity;
  background: var(--sky-3);
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: "Giphurs", "Giphurs fallback", system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--t-body);
  font-synthesis: none;
  color: var(--paper);
  overflow-x: hidden;
  cursor: url("/cur/hat.png") 6 16, auto;
}

h1, h2, h3, figcaption, .shout { text-wrap: balance; }
p { text-wrap: pretty; }

button, a { font: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius); }

/* ---------------------------------------------------------------- the world */

#world {
  position: fixed;
  inset: 0;
  z-index: var(--z-world);
  perspective: 900px;
  perspective-origin: 50% var(--horizon);
  overflow: hidden;
  background: var(--sky);
}

.sky {
  position: absolute;
  inset: 0 0 calc(100% - var(--horizon)) 0;
  background: linear-gradient(180deg, var(--sky-3) 0%, var(--sky) 40%, var(--sky-2) 88%, var(--sand-far) 100%);
}

.sun {
  position: absolute;
  left: 62%;
  top: 4%;
  width: 46vmin;
  height: 46vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 250 220 / 0.95) 0 16%, rgb(255 240 190 / 0.35) 30%, rgb(255 240 190 / 0) 62%);
}

.mesa {
  position: absolute;
  left: -30%;
  width: 190%;
  background-image: url("/cut/mesas.webp");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: auto 100%;
}
.mesa-far {
  height: 10svh;
  bottom: calc(100% - var(--horizon) - 0.4svh);
  opacity: 0.5;
  filter: saturate(0.62);
  transform: translateX(var(--drift-far, 0)) scaleX(2.1);
}
.mesa-mid {
  height: 10svh;
  bottom: calc(100% - var(--horizon) - 0.25svh);
  opacity: 0.68;
  filter: saturate(0.72);
  transform: translateX(var(--drift-mid, 0)) scaleX(1.25);
  background-position-x: 37%;
}
.mesa-near {
  height: 7.5svh;
  bottom: calc(100% - var(--horizon) - 0.1svh);
  opacity: 0.92;
  transform: translateX(var(--drift-near, 0)) scaleX(0.78);
  background-position-x: 71%;
}

.sand {
  position: absolute;
  inset: calc(var(--horizon) - 1.6svh) 0 0 0;
  background: linear-gradient(180deg, var(--sand-far) 0%, var(--sand) 34%, var(--sand-2) 100%);
}

/* the desert floor, same plane maths as the road so the two stay welded together */
.dirt {
  position: absolute;
  left: 50%;
  top: var(--horizon);
  width: 4200px;
  height: 7000px;
  transform-origin: 50% 0;
  transform: translateX(-50%) translateY(var(--ground-y)) rotateX(-90deg)
             translateY(calc(-900px - var(--roll, 0px)));
  background-color: var(--sand);
  background-image:
    radial-gradient(circle 7px at 40px 60px, var(--sand-2) 0 94%, rgb(0 0 0 / 0) 100%),
    radial-gradient(circle 4px at 150px 30px, var(--sand-2) 0 94%, rgb(0 0 0 / 0) 100%),
    radial-gradient(circle 9px at 110px 170px, var(--sand-2) 0 94%, rgb(0 0 0 / 0) 100%),
    radial-gradient(circle 5px at 210px 130px, var(--sand-2) 0 94%, rgb(0 0 0 / 0) 100%);
  background-size: 260px 260px;
}

/* the floor: one plane lying away from the camera, its far end at the vanishing point */
.asphalt {
  position: absolute;
  left: 50%;
  top: var(--horizon);
  width: 1250px;
  height: 7000px;
  transform-origin: 50% 0;
  transform: translateX(-50%) translateY(var(--ground-y)) rotateX(-90deg)
             translateY(calc(-900px - var(--roll, 0px)));
  background-color: var(--road);

  background-image:
    repeating-linear-gradient(180deg, var(--paper) 0 150px, rgb(0 0 0 / 0) 150px 430px),
    linear-gradient(var(--paper), var(--paper)),
    linear-gradient(var(--paper), var(--paper)),
    linear-gradient(90deg, var(--sand-2) 0 3%, rgb(0 0 0 / 0) 3% 97%, var(--sand-2) 97%),
    linear-gradient(oklch(from var(--road) l c h / 0.62), oklch(from var(--road) l c h / 0.62)),
    url("/tex/asphalt.webp");
  background-size: 26px 430px, 13px 100%, 13px 100%, 100% 100%, 100% 100%, 560px 560px;
  background-position: 50% 0, 6% 0, 94% 0, 0 0, 0 0, 0 0;
  background-repeat: repeat-y, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

.cloud {
  position: absolute;
  width: 22vmin;
  height: auto;
  animation: drift 90s linear infinite;
}
.cloud-a { left: -16%; top: 16%; scale: 0.9; }
.cloud-b { left: 14%; top: 3%; scale: 0.6; animation-duration: 130s; }
.cloud-c { left: 44%; top: 21%; scale: 0.42; animation-duration: 170s; }
.cloud-d { left: -38%; top: 26%; scale: 0.75; animation-duration: 210s; opacity: 0.85; }
.cloud-e { left: 60%; top: 8%; scale: 0.8; animation-duration: 150s; }
.cloud-f { left: 82%; top: 24%; scale: 0.5; animation-duration: 190s; opacity: 0.8; }

/* three of them, turning slowly over the mesas */
.bird {
  position: absolute;
  width: 34px;
  height: auto;
  opacity: 0.72;
  animation: flap 2.4s ease-in-out infinite, circle 46s linear infinite;
}
.bird-a { left: 16%; top: 18%; }
.bird-b { left: 22%; top: 23%; scale: 0.7; animation-delay: -0.7s, -12s; }
.bird-c { left: 11%; top: 26%; scale: 0.52; animation-delay: -1.3s, -26s; }

/* wind: real sand blowing through the same projection the props use */
#dust {
  position: fixed;
  inset: 0;
  z-index: var(--z-shout);
  pointer-events: none;
}

.heat {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--horizon) - 4svh);
  height: 7svh;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, var(--sand-far) 46%, rgb(0 0 0 / 0) 100%);
  opacity: 0.34;
}

/* ------------------------------------------------------------- the props */

#stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-stage);
  perspective: 900px;
  perspective-origin: 50% var(--horizon);
  transform-style: preserve-3d;
  pointer-events: none;
}

/* everything in the world is planted on the same floor line */
.prop, .board {
  position: absolute;
  left: 50%;
  top: var(--horizon);
  transform: translate3d(-50%, calc(-100% + var(--ground-y)), -9000px);
  backface-visibility: hidden;
  opacity: 0;
}

#weed {
  width: min(26vw, 230px);
  height: auto;
}

.walker, .pole, .saguaro, .rocks { transform-origin: 50% 100%; }
.walker img, .pole img, .saguaro img, .rocks img {
  display: block;
  width: 100%;
  height: auto;
}
.saguaro::after, .rocks::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3%;
  width: 92%;
  height: 11%;
  margin-left: -46%;
  background: radial-gradient(ellipse at 50% 50%, var(--sand-2) 0 42%, rgb(0 0 0 / 0) 72%);
  opacity: 0.5;
}
/* he stands on the sand, so he gets a contact shadow and a sway, never a hover */
.walker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: 96%;
  height: 13%;
  margin-left: -48%;
  background: radial-gradient(ellipse at 50% 50%, var(--sand-2) 0 42%, rgb(0 0 0 / 0) 72%);
  opacity: 0.6;
}

.board {
  width: var(--board-w);
  margin: 0;
  padding: calc(var(--board-w) * 0.022);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--rim);
  pointer-events: auto;
  cursor: url("/cur/hat.png") 6 16, pointer;
}

/* the sign is staked in the sand: one post, one contact shadow, no floating cutout */
.board::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 5%;
  height: 30%;
  margin-left: -2.5%;
  background: linear-gradient(90deg, var(--road), var(--sand-2) 46%, var(--road));
  z-index: var(--z-world);
}
.board::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 128%;
  width: 34%;
  height: 5%;
  margin-left: -17%;
  background: radial-gradient(ellipse at 50% 50%, var(--sand-2) 0 40%, rgb(0 0 0 / 0) 74%);
  opacity: 0.55;
}

.plate {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--fascia);
  border-radius: var(--radius-inner);
  overflow: hidden;
  box-shadow: var(--well-sign);
}

.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sky-2);
  opacity: var(--haze, 0);
  pointer-events: none;
}

.shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-inner);
}

/* the title panel is bolted under the picture and scales with the sign, so its
   type is set in world px and the perspective does the sizing */
.board figcaption {
  display: block;
  padding: calc(var(--board-w) * 0.02) calc(var(--board-w) * 0.03) calc(var(--board-w) * 0.012);
  color: var(--ink);
  font-family: "Paquito", "Paquito fallback", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: calc(var(--board-w) * 0.082);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
}

/* ------------------------------------------------------------- the shout */

#shout {
  position: fixed;
  left: 50%;
  top: 13svh;
  z-index: var(--z-shout);
  margin: 0;
  transform: translateX(-50%);
  font-family: "Paquito", "Paquito fallback", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--paper);
  text-shadow: 0 8px 0 var(--accent), 0 12px 0 var(--ink);
  pointer-events: none;
  opacity: 0;
}

/* --------------------------------------------------------------- the rail */

#rail {
  position: relative;
  z-index: var(--z-rail);
  pointer-events: none;
}

.mile {
  height: 62svh;
  scroll-snap-align: start;
}

/* the finale: the banner at the end of the road, the clip in the middle of it,
   and the two buttons big enough to be the last thing you see */
#mile-end {
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 var(--pad) 14svh;
}

.finale {
  position: relative;
  z-index: var(--z-finale);
  display: grid;
  justify-items: center;
  gap: calc(var(--pad) * 1.2);
  width: min(1180px, 94vw);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  pointer-events: auto;
}
.finale.here { opacity: 1; transform: none; }

.finale-mark {
  width: min(46vw, 400px);
  height: auto;
}

.finale-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pad) * 1.4);
  width: 100%;
}

.screen {
  flex: 0 1 min(58vw, 620px);
  padding: calc(var(--pad) * 0.9);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--rim);
}
.screen video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-inner);
}

.big {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: calc(var(--pad) * 1.1) calc(var(--pad) * 1.1);
  min-width: 176px;
  padding: calc(var(--pad) * 1.3);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-family: "Paquito", "Paquito fallback", "Arial Narrow", sans-serif;
  font-size: var(--t-head);
  letter-spacing: 0.04em;
  box-shadow: var(--rim);
  cursor: url("/cur/hat.png") 6 16, pointer;
  transition: transform 110ms var(--ease);
}
.big img { display: block; width: 64px; height: 64px; }
.big:hover { transform: translateY(-3px); }
.big:active { transform: translateY(2px); }
#big-buy { background: var(--accent); }

/* --------------------------------------------------------------- the gate */

#gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--pad) * 1.4);
  padding: var(--pad);
  background: var(--scrim);
  backdrop-filter: blur(14px) saturate(1.15);
  transition: opacity 520ms var(--ease);
}
#gate.off { opacity: 0; pointer-events: none; }

.gate-mark {
  width: min(78vw, 620px);
  height: auto;
  animation: bob 3.4s var(--ease) infinite;
}

.gate-line {
  margin: 0;
  max-width: 22ch;
  font-family: "Paquito", "Paquito fallback", "Arial Narrow", sans-serif;
  font-size: var(--t-head);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--paper);
  text-shadow: 0 5px 0 var(--ink);
}

#key {
  padding: calc(var(--pad) * 0.9) calc(var(--pad) * 2.2);
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: "Paquito", "Paquito fallback", "Arial Narrow", sans-serif;
  font-size: var(--t-head);
  letter-spacing: 0.06em;
  box-shadow: var(--well);
  cursor: url("/cur/hat.png") 6 16, pointer;
  transition: transform 120ms var(--ease);
}
#key:hover { transform: scale(1.03); }
#key:active { transform: scale(0.97); }

/* ------------------------------------------------- the two things in the sand
   There is no footer on this site. The radio and the signpost are objects
   standing in the world and every control is a hit area on the object itself. */

.thing {
  position: fixed;
  z-index: var(--z-dash);
  user-select: none;
}
.thing img {
  display: block;
  width: 100%;
  height: auto;
}

#radio {
  left: max(var(--pad), env(safe-area-inset-left));
  bottom: calc(2vh + env(safe-area-inset-bottom));
  width: clamp(250px, 23vw, 430px);
}
#post {
  right: max(var(--pad), env(safe-area-inset-right));
  bottom: calc(1vh + env(safe-area-inset-bottom));
  width: clamp(210px, 19vw, 352px);
}

/* the radio: the tuning window is the readout, the knob and the two keys are real */
.dial {
  position: absolute;
  left: 54%;
  top: 45.6%;
  width: 35.7%;
  height: 7.4%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 4%;
  justify-content: center;
}
/* the speaker breathes with the track */
.pulse {
  position: absolute;
  left: 7.5%;
  top: 40.7%;
  width: 40.2%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--paper) 0 40%, rgb(0 0 0 / 0) 72%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.tune {
  flex: 0 1 auto;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--ink);
  font-size: calc(var(--t-micro) * 0.95);
  line-height: 1;
  letter-spacing: 0.02em;
}
.tune span {
  display: inline-block;
  padding-right: 2em;
}
.tune.roll span { animation: tuneroll 9s linear infinite; }
.hit {
  position: absolute;
  padding: 0;
  border: 0;
  background: rgb(0 0 0 / 0);
  cursor: url("/cur/hat.png") 6 16, pointer;
  transition: transform 90ms var(--ease);
}
.hit:active { transform: translateY(2px); }
.knob {
  left: 64.3%;
  top: 59.1%;
  width: 19.8%;
  height: 18.8%;
  border-radius: 50%;
}
.knob::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  width: 8%;
  height: 34%;
  margin-left: -4%;
  border-radius: 999px;
  background: var(--paper);
  opacity: 0.85;
  transform-origin: 50% 145%;
  transform: rotate(-120deg);
  transition: transform var(--dur) var(--ease);
}
.knob[aria-pressed="true"]::after { transform: rotate(38deg); }
.keyA { left: 73.6%; top: 78%; width: 15.5%; height: 12.1%; border-radius: var(--radius-inner); }
.keyB { left: 55.9%; top: 78%; width: 15.5%; height: 12.1%; border-radius: var(--radius-inner); }

/* the signpost: two planks, the contract on one, the links on the other */
.plank {
  position: absolute;
  left: 6%;
  width: 88%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4%;
  border: 0;
  background: rgb(0 0 0 / 0);
  color: var(--ink);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  cursor: url("/cur/hat.png") 6 16, pointer;
  transition: transform 90ms var(--ease);
}
.plank-a { top: 19%; height: 20.3%; justify-content: center; gap: 8px; }
.plank-b { top: 48.1%; height: 20.7%; justify-content: center; gap: 11%; }
.plank-a:active { transform: translateY(2px); }
#ca-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--t-micro);
}
.copy { color: var(--accent); flex: 0 0 auto; }

.plank-b a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 90ms var(--ease);
}
.plank-b a:active { transform: translateY(2px); }
.plank-b img, .plank-b svg { display: block; width: 20px; height: 20px; }
.plank-b .go {
  font-family: "Paquito", "Paquito fallback", "Arial Narrow", sans-serif;
  font-size: calc(var(--t-label) * 1.15);
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------- the lightbox */

#lightbox {
  width: min(96vw, 1080px);
  max-width: none;
  padding: calc(var(--pad) * 1.1);
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--rim);
  color: var(--ink);
}
#lightbox::backdrop { background: var(--scrim); backdrop-filter: blur(8px); }
#lightbox .frame img, #lightbox .frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-inner);
  box-shadow: var(--well-sign);
}
#lightbox h2 {
  margin: calc(var(--pad) * 0.7) 0 0;
  color: var(--ink);
  font-family: "Paquito", "Paquito fallback", "Arial Narrow", sans-serif;
  font-size: var(--t-head);
  letter-spacing: 0.03em;
  text-align: center;
}
#lightbox .close {
  position: absolute;
  right: calc(var(--pad) * 1.9);
  top: calc(var(--pad) * 1.9);
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-inner);
  background: var(--accent);
  color: var(--ink);
  letter-spacing: 0.08em;
  box-shadow: var(--well-deep);
  cursor: url("/cur/hat.png") 6 16, pointer;
}

.nojs {
  position: fixed;
  left: 50%;
  top: 40svh;
  z-index: var(--z-overlay);
  transform: translateX(-50%);
  max-width: 28ch;
  text-align: center;
  color: var(--paper);
  text-shadow: 0 3px 0 var(--ink);
}

/* -------------------------------------------------------------- no script */

.no-js #stage {
  position: static;
  perspective: none;
  padding: 8svh var(--pad) 22svh;
  display: grid;
  gap: 6svh;
  justify-items: center;
}
.no-js .prop, .no-js .board {
  position: static;
  transform: none;
  opacity: 1;
}
.no-js #gate, .no-js #shout { display: none; }

/* ---------------------------------------------------------------- motion */

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-10px) rotate(0.6deg); }
}

@keyframes tuneroll {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(calc(-100% + 4ch)); }
}

@keyframes flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.42); }
}

@keyframes circle {
  0% { translate: 0 0; }
  25% { translate: 10vw -2vh; }
  50% { translate: 17vw 0.6vh; }
  75% { translate: 8vw 2vh; }
  100% { translate: 0 0; }
}

@keyframes drift {
  from { translate: 0 0; }
  to { translate: 120vw 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .gate-mark { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* ----------------------------------------------------------------- phones */

@media (max-width: 760px) {
  :root { --board-w: min(82vw, calc(38svh * 1.333)); }
  #shout { top: 7svh; }
  #radio { width: 45vw; left: 2vw; bottom: 2vw; }
  #post { width: 33vw; right: 2vw; bottom: 2vw; }
  .plank { font-size: calc(var(--t-micro) * 0.85); }
  .finale-row { flex-wrap: wrap; }
  .screen { flex: 1 1 100%; order: 1; }
  .big { flex: 1 1 40%; order: 2; min-width: 0; }
  #mile-end { padding-bottom: 22svh; }
  .plank-b .go { font-size: var(--t-label); }
  .plank-b img { width: 15px; height: 15px; }
}