/* One fixed scene behind everything. The words sit on it like the signs of a mountain station:
   red enamel plates, wide lettering, quiet serif captions. */

@font-face { font-family: "Krona One"; src: url("/assets/fonts/krona-one-latin-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Krona One"; src: url("/assets/fonts/krona-one-latin-ext-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-latin-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-latin-ext-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --dusk: #18204a;
  --dusk-2: #252c5c;
  --ice: #eef3fa;
  --enamel: #c8321f;
  --enamel-2: #a02415;
  --brass: #e8b949;
  --ink: #171c3a;
  --wide: "Krona One", "Arial Black", sans-serif;
  --read: "Literata", Georgia, serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
}

* { box-sizing: border-box; }
html { background: var(--dusk); }
body { margin: 0; background: var(--dusk); color: var(--ice); font-family: var(--read); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.skip { position: fixed; left: var(--gutter); top: 8px; z-index: 40; padding: 8px 14px; background: var(--ice); color: var(--ink); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- Top bar ---------- */

.top { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top, 0px)) var(--gutter) 14px; }
.brand { font-family: var(--wide); font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.top-right { display: flex; align-items: center; gap: 8px; }
.lang { min-width: 44px; min-height: 44px; background: none; border: 0; cursor: pointer; font-family: var(--wide); font-size: 12px; }
.top-book { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--enamel); color: #fff6ea; font-family: var(--wide); font-size: 12px; text-decoration: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 246, 234, .55), inset 0 0 0 3px var(--enamel); }
.top-book:hover { background: var(--enamel-2); }

/* ---------- The stage ---------- */

.ride { position: relative; height: 1250vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: linear-gradient(#18204a, #4c4583 60%, #d98377); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scrim { position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(16, 19, 48, .62)); pointer-events: none; }

.beat { position: absolute; left: var(--gutter); max-width: min(620px, calc(100vw - 2 * var(--gutter) - 40px)); opacity: 0; visibility: hidden; transform: translateY(var(--lift, 0)); pointer-events: none; }
.beat-hero { top: 22vh; max-width: min(860px, calc(100vw - 2 * var(--gutter))); }
.beat-hero::before { content: ""; position: absolute; inset: -22vh -30vw -16vh calc(-1 * var(--gutter)); z-index: -1; background: radial-gradient(ellipse at 20% 45%, rgba(20, 22, 58, .62), transparent 68%); }
.beat-low, .beat-floor { bottom: max(40px, env(safe-area-inset-bottom, 0px)); }

.beat h1 { font-family: var(--wide); font-size: clamp(34px, 5.6vw, 84px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; text-shadow: 0 2px 30px rgba(20, 20, 60, .45); }
.line-big { font-family: var(--wide); font-size: clamp(24px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; text-shadow: 0 2px 22px rgba(15, 15, 50, .6); }
.say { margin-top: 14px; max-width: 46ch; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; text-wrap: pretty; text-shadow: 0 1px 14px rgba(10, 12, 40, .85); }
.fine { margin-top: 12px; font-size: 14px; opacity: .85; text-shadow: 0 1px 10px rgba(10, 12, 40, .8); }
.beat.cue { left: 0; right: 0; max-width: none; bottom: max(24px, env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 15px; text-shadow: 0 1px 10px rgba(10, 12, 40, .8); }
.cue::after { content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: currentColor; }

/* The station sign: the one thing that's loud on each floor. */
.plate { display: inline-block; padding: 11px 18px 10px; background: var(--enamel); color: #fff6ea; font-family: var(--wide); font-size: clamp(20px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -0.02em; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--enamel), inset 0 0 0 3px rgba(255, 246, 234, .75), 0 8px 24px rgba(10, 10, 40, .4); }

/* ---------- The rail: the cable, top to bottom, with the floors as stops ---------- */

.rail { position: absolute; right: calc(var(--gutter) + 6px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: space-between; height: min(50vh, 340px); }
.rail::before { content: ""; position: absolute; right: 21px; top: 22px; bottom: 22px; width: 1px; background: rgba(238, 243, 250, .55); }
.rail button { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 14px; text-shadow: 0 1px 8px rgba(10, 12, 40, .9); }
.rail button span { opacity: 0; transform: translateX(4px); transition: opacity .2s, transform .2s; }
.rail button::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 17px; border-radius: 50%; background: var(--dusk); border: 1px solid var(--ice); }
.rail button:hover span, .rail button:focus-visible span, .rail button[aria-current] span { opacity: 1; transform: none; }
.rail button[aria-current]::after { background: var(--brass); border-color: var(--brass); }
.rail-cabin { position: absolute; right: 16px; width: 11px; height: 15px; margin-top: -7px; background: var(--enamel); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 246, 234, .7); top: 100%; z-index: 1; pointer-events: none; }

.status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s; font-size: 16px; text-shadow: 0 1px 10px #000; pointer-events: none; }
.status.is-needed { opacity: 1; }

/* ---------- The booking ---------- */

.desk { position: absolute; right: calc(var(--gutter) + 62px); top: 50%; display: flex; flex-direction: column; width: min(430px, calc(100vw - 2 * var(--gutter))); height: min(600px, calc(100svh - 124px)); background: var(--ice); color: var(--ink); border-radius: 6px; overflow: hidden; box-shadow: 0 30px 70px rgba(5, 7, 30, .55); transform: translateY(calc(-50% + 16px)); opacity: 0; visibility: hidden; transition: opacity .35s, transform .35s, visibility .35s; }
.desk.is-open { opacity: 1; visibility: visible; transform: translateY(calc(-50% + 22px)); }
.desk-head { flex: none; padding: 15px 20px 13px; background: var(--enamel); color: #fff6ea; font-family: var(--wide); font-size: 15px; letter-spacing: -0.01em; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; font-size: 17px; line-height: 1.45; }
.line { max-width: 34ch; }
.line-guest { align-self: flex-end; max-width: 80%; padding: 7px 12px; background: var(--dusk); color: var(--ice); border-radius: 4px; font-size: 15px; }
.chat-choices { flex: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 20px 18px; border-top: 1px solid rgba(23, 28, 58, .15); }
.chat-choices:empty { display: none; }
.chat-choices button { min-height: 44px; padding: 8px 14px; background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: 4px; cursor: pointer; font-size: 15px; line-height: 1.25; text-align: left; }
.chat-choices button:hover { background: var(--dusk); color: var(--ice); }

/* ---------- After the ride ---------- */

.after { position: relative; padding: clamp(70px, 12vw, 150px) var(--gutter); background: var(--dusk); }
.after h2 { max-width: 19ch; font-family: var(--wide); font-size: clamp(26px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.after p { max-width: 58ch; margin-top: 22px; }
.after-cta { display: inline-flex; align-items: center; min-height: 48px; margin-top: 28px; padding: 0 22px; background: var(--ice); color: var(--ink); text-decoration: none; font-family: var(--wide); font-size: 13px; border-radius: 4px; }
.after-cta:hover { background: var(--brass); }

/* ---------- Tall screens ---------- */

@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  body { font-size: 17px; }
  .ride { height: 1100vh; }
  .beat { right: var(--gutter); left: var(--gutter); max-width: none; }
  .beat.cue { left: 0; right: 0; }
  .beat-hero { top: 15vh; }
  .beat h1 { font-size: clamp(30px, 9.4vw, 62px); }
  .beat-low, .beat-floor { top: 76px; bottom: auto; }
  .scrim { inset: 0 0 auto; height: 44%; background: linear-gradient(rgba(16, 19, 48, .72), transparent); }
  .say { margin-top: 10px; font-size: 16px; }
  .rail { display: none; }
  .desk { top: auto; right: var(--gutter); bottom: max(14px, env(safe-area-inset-bottom, 0px)); left: var(--gutter); width: auto; height: min(56svh, 520px); transform: translateY(16px); }
  .desk.is-open { transform: none; }
  .chat-log { font-size: 16px; padding: 14px 16px; }
  .chat-choices { padding: 10px 16px 14px; max-height: 44%; overflow-y: auto; }
  .brand { font-size: 15px; }
}

/* ---------- No 3D: the words still work ---------- */

.no-3d .ride { height: auto; }
.no-3d .stage { position: relative; height: auto; display: grid; gap: 34px; padding: 110px var(--gutter) 40px; }
.no-3d #scene, .no-3d .scrim, .no-3d .rail, .no-3d .cue, .no-3d .status { display: none; }
.no-3d .beat, .no-3d .desk { position: static; opacity: 1; visibility: visible; transform: none; max-width: 640px; }
.no-3d .desk { height: 560px; width: min(460px, 100%); }

@media (prefers-reduced-motion: reduce) {
  .desk, .rail button span, .status { transition: none; }
}