/* /switchback/jimothy — the Jimothy show.

   He does the talking. The page is one lamp, one black riser, him, and the name of each
   act hung behind him in huge type, lit by the same lamp (--light, written each frame by
   /jimothy.js) so it flickers on with it and goes dark between acts. Black, white and
   grey only: the canvas is drawn through a grayscale filter, so even his blackberry is
   grey. National Park, the game's own trail-sign face, for every word on the bill. */

@font-face {
  font-family: 'National Park';
  src: url('/assets/fonts/NationalPark-Variable.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --black: #000;
  --white: #f2f2f2;
  --grey: #8e8e8e;
  --dark: #4a4a4a;
  --rule: rgba(255, 255, 255, .14);
  --bill: 'National Park', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gutter: max(20px, 5vw);
  --light: 1;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
::selection { background: var(--white); color: var(--black); }

/* ── the stage ── */
.stage {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  display: block; z-index: 1;
  pointer-events: none;
  filter: grayscale(1);
}
.no-webgl .stage, .no-webgl .dims, .no-webgl .parts { display: none; }

/* labels pinned to points on him (positioned by the script) */
.dims, .parts { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.dim, .part {
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--white); white-space: nowrap;
}
.dim { background: var(--black); padding: 2px 6px; border: 1px solid var(--white); }
.part { padding: 2px 6px; background: var(--black); border: 1px solid rgba(255, 255, 255, .5); }

.notes { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.note {
  position: absolute; font-size: 26px; color: var(--white); opacity: 0;
  animation: note-float 1.8s ease-out forwards;
}
@keyframes note-float {
  0% { opacity: 0; transform: translate(0, 0) rotate(-8deg) scale(.7); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(26px, -110px) rotate(12deg) scale(1.1); }
}

/* ── the bar along the top ── */
.bill {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: var(--black); border-bottom: 1px solid var(--rule);
}
.bill-in {
  height: 48px; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 18px;
  font-family: var(--bill); text-transform: uppercase; letter-spacing: .2em; font-size: 11px;
}
.bill-house { color: var(--grey); text-decoration: none; }
.bill-house:hover { color: var(--white); }
.bill-show { font-weight: 800; letter-spacing: .32em; }
.bill-box { text-decoration: none; border-bottom: 1px solid var(--white); padding-bottom: 2px; }

/* ── the acts: each one's name hangs BEHIND the stage (under the canvas) and he
   performs in front of it ── */
.act { position: relative; height: 250vh; }
.hero { height: 190vh; }
.feature { height: 320vh; }
.built { height: 820vh; }
.tickets { height: 200vh; }
.pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 0; pointer-events: none; text-align: center;
}
.billing { margin-top: max(66px, 9vh); opacity: var(--light); }
.billing-n {
  margin: 0;
  font-family: var(--bill); font-weight: 600; font-size: clamp(11px, 1vw, 14px); letter-spacing: .5em; text-transform: uppercase;
  color: var(--grey);
}
.name {
  margin: .04em 0 0;
  font-family: var(--bill); font-weight: 800; text-transform: uppercase;
  font-size: min(23vw, calc(124vw / var(--len)), 36vh);
  line-height: .86; letter-spacing: -.045em;
  color: var(--white);
}

/* ── the technical notes: a small card in front, bottom left, under each feature ── */
.spec {
  --in: clamp(0, (var(--p) - .1) * 6, 1);
  --out: clamp(0, (.95 - var(--p)) * 8, 1);
  pointer-events: auto;
  width: min(380px, calc(100vw - 40px)); margin: 0 auto max(24px, 5vh) var(--gutter);
  padding: 18px 20px; text-align: left;
  background: rgba(0, 0, 0, .78); border: 1px solid var(--rule);
  opacity: min(var(--in), var(--out));
}
.spec p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--grey); font-weight: 500; }
.spec p + p { margin-top: 8px; }
.spec .spec-lead { font-family: var(--bill); font-weight: 700; font-size: 18px; letter-spacing: .01em; color: var(--white); }
.spec b { color: var(--white); font-weight: 700; }
.swatches { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.swatch {
  height: 46px; padding: 4px 5px; display: flex; flex-direction: column; justify-content: flex-end;
  font-family: var(--mono); font-size: 9px; letter-spacing: .02em; color: #fff; text-shadow: 0 0 3px #000;
}
.swatch b { font-weight: 700; text-transform: uppercase; }

/* the live readout under his feet in COMPAC */
.readouts { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.readouts .dim { opacity: 0; }

/* ── the song, in the bar: off until asked for ── */
.song { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.song-toggle {
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  color: var(--grey); background: none; border: 1px solid var(--rule); padding: 5px 10px;
}
.song-toggle:hover, .song-toggle[aria-pressed="true"] { color: var(--white); border-color: var(--white); }
.song-state { color: var(--white); margin-left: .4em; }
.song-volume { width: 76px; accent-color: #fff; opacity: .5; }
.song-toggle[aria-pressed="true"] + .song-volume { opacity: 1; }

/* ── tickets: in front of the stage, at his feet ── */
.pin-front { margin-top: -100vh; margin-top: -100svh; z-index: 2; align-items: flex-end; }
.ticket-row {
  margin-bottom: max(26px, 6vh); display: flex; justify-content: center; align-items: stretch; gap: 16px; flex-wrap: wrap;
  opacity: clamp(0, (var(--p) - .06) * 6, 1);
}
.ticket {
  pointer-events: auto;
  display: flex; align-items: stretch; text-decoration: none; text-align: left;
  border: 1px solid var(--white); background: var(--black);
  transition: background .15s ease, color .15s ease;
}
.ticket-main { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 22px 14px 20px; }
.ticket-act { font-family: var(--bill); font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.ticket-seat { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ticket-stub {
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 8px 10px; border-right: 1px dashed currentColor;
  font-family: var(--bill); font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
}
.ticket:first-child { background: var(--white); color: var(--black); }
.ticket:hover { background: var(--white); color: var(--black); }
.ticket:first-child:hover { background: var(--black); color: var(--white); }
.ticket:focus-visible, .bill a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

/* ── footer ── */
.foot { position: relative; z-index: 3; background: var(--black); border-top: 1px solid var(--rule); }
.foot-in {
  padding: 26px var(--gutter) 40px;
  display: flex; gap: 14px 28px; flex-wrap: wrap; justify-content: space-between;
  font-size: 12px; color: var(--dark);
}
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--grey); text-decoration: none; }
.foot a:hover { color: var(--white); text-decoration: underline; }

/* ── cookie notice (consent.js) ── */
.cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; display: flex; justify-content: center; }
.cookie-notice[hidden] { display: none; }
.cookie-card {
  max-width: 640px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 16px 18px; border: 1px solid var(--rule); background: var(--black);
}
.cookie-card p { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.55; color: var(--grey); }
.cookie-actions { display: flex; gap: 10px; }
.cookie-btn {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 8px 16px; border: 1px solid var(--white); background: transparent; color: var(--white);
}
.cookie-btn:hover { background: var(--white); color: var(--black); }

@media (max-width: 760px) {
  .bill-house, .song-volume { display: none; }
  .bill-in { gap: 12px; }
  .spec { margin: 0 auto max(16px, 3vh); }
  .ticket-row { flex-direction: column; align-items: center; }
  .logo { width: 220px; margin: 0 auto 4px; }
  .ticket { width: min(320px, calc(100vw - 40px)); }
  .ticket-main { flex: 1; }
  .foot-in { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── INTRODUCING: his name lands when he does ── */
.hero .name { opacity: var(--arrive, 1); transform: translateY(calc((1 - var(--arrive, 1)) * 30px)); }
.built .name { line-height: .84; }

/* ── SMOL: a tag at each animal's feet ── */
.tags { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.tag {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grey); background: var(--black); border: 1px solid var(--rule); padding: 3px 8px;
}
.tag b { color: var(--white); font-weight: 700; margin-right: .4em; }
.tag-me { border-color: var(--white); }

/* ── the riser spins: drag sideways ── */
html { cursor: grab; touch-action: pan-y; }
html.is-spinning, html.is-spinning * { cursor: grabbing !important; }
main, .stage { -webkit-user-select: none; user-select: none; }
a, button, input { cursor: pointer; }


/* ── the game's wordmark, the one thing in colour, over the tickets ── */
.logo { display: block; width: 210px; height: auto; align-self: center; margin-right: 10px; }