:root {
  --night: #05080a;
  --cold: #c8d2d6;
  --cold-dim: #7c898f;
  --lamp: #f2c48c;
  --paper: #eadcc4;
  --paper-dim: #a8977d;
  --screen: #120d09;
  --serif: "Literata", "Iowan Old Style", Georgia, serif;
  --industrial: "Big Shoulders Text", "Arial Narrow", sans-serif;
  color-scheme: dark;
}

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

html { background: var(--night); }

body {
  margin: 0;
  background: var(--night);
  color: var(--cold);
  font-family: var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#world {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  display: block;
  z-index: 0;
}

/* ---------- descent overlays ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.pin-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pin-line line {
  stroke: var(--cold);
  stroke-width: 1;
  opacity: .55;
  vector-effect: non-scaling-stroke;
}

.pin {
  position: absolute;
  left: 0; top: 0;
  margin: 0;
  color: var(--cold);
  white-space: nowrap;
  text-shadow: 0 0 20px rgba(0, 0, 0, .9);
  will-change: transform, opacity;
}
.pin__title {
  display: block;
  font: 500 16px/1.18 var(--industrial);
  letter-spacing: .075em;
}
.pin__sub {
  display: block;
  margin-top: 5px;
  font: italic 350 14px/1.2 var(--serif);
  color: var(--cold-dim);
}

.beat {
  position: absolute;
  isolation: isolate;
  left: max(16px, 6.5vw);
  bottom: 17vh;
  margin: 0;
  max-width: 19ch;
  font-weight: 300;
  font-size: clamp(21px, 2.1vw, 31px);
  line-height: 1.32;
  color: var(--cold);
  opacity: 0;
  text-shadow: 0 0 24px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .9);
  will-change: transform, opacity, filter;
}

/* ---------- chrome ---------- */

.chrome {
  position: fixed;
  top: 0; right: 0;
  z-index: 5;
  padding: 22px max(16px, 3vw);
}

/* V4: a HUD bracket, not a link underline */
.skip {
  display: inline-block;
  padding: 7px 12px 6px;
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cold-dim);
  border: 1px solid rgba(160, 175, 190, .32);
  border-radius: 2px;
  background: rgba(4, 6, 8, .35);
  backdrop-filter: blur(3px);
  transition: color .25s, border-color .25s, background .25s;
}
.skip span { display: inline-block; transition: transform .25s; }
.skip:hover { color: var(--cold); border-color: rgba(200, 215, 228, .7); background: rgba(8, 11, 14, .55); }
.skip:hover span { transform: translateX(3px); }
.skip:focus-visible, a:focus-visible {
  outline: 1px solid var(--lamp);
  outline-offset: 4px;
}

.hint, .range {
  position: fixed;
  z-index: 3;
  margin: 0;
  pointer-events: none;
  font-family: var(--industrial);
  font-weight: 500;
  color: var(--cold-dim);
}

.hint {
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font-size: 15px;
  letter-spacing: .04em;
  transition: opacity .6s;
}

.range {
  left: max(16px, 3vw);
  bottom: 24px;
  font-size: 15px;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  transition: opacity .6s;
  display: flex;
  align-items: center;
  gap: 10px;
}
#rangeNum { min-width: 4.4em; }
/* V4: a rangefinder scale, log distance from 2.5 km to the glass; the mark rides it */
.range__scale {
  position: relative;
  width: 84px;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, rgba(160, 175, 190, .55) 0 1px, transparent 1px 12px) 0 100% / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(160, 175, 190, .8) 0 1px, transparent 1px 42px) 0 100% / 100% 9px no-repeat;
}
.range__scale i {
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 0;
  border: 4px solid transparent;
  border-bottom-color: var(--lamp, #ffb066);
  transform: translateX(-4px);
}

/* ---------- the descent ---------- */

.descent {
  height: 1100vh;
  position: relative;
}

/* ---------- the arrival (handoff to the site) ---------- */

.arrival {
  position: fixed;
  z-index: 6;
  left: 0; top: 0;
  width: var(--w, 100vw); height: var(--h, 100vh);
  transform: translate(var(--x, 0), var(--y, 0));
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: #0b0b0a;
}
.arrival img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: left top;
  transition: opacity .5s ease;
}
.arrival__tall { opacity: 0; }
.arrival.go {
  opacity: 1 !important;
  transition: transform .7s cubic-bezier(.6, 0, .2, 1), width .7s cubic-bezier(.6, 0, .2, 1), height .7s cubic-bezier(.6, 0, .2, 1);
  transform: translate(0, 0);
  width: 100vw; height: 100vh;
}
.arrival.go.tall .arrival__tall { opacity: 1; transition-delay: .15s; }
.arrival.go.tall .arrival__wide { opacity: 0; transition-delay: .15s; }

.noscript { position: fixed; inset: auto 0 40vh; text-align: center; z-index: 7; font-size: 20px; }
.noscript a { color: var(--paper); }

/* ---------- no WebGL ---------- */

.nogl #world { display: none; }
.nogl .descent { height: 0; }
.nogl .overlay, .nogl .hint, .nogl .range { display: none; }
.nogl body, .nogl { background: var(--screen); }

@media (max-width: 700px) {
  .beat { bottom: 14vh; right: 16px; max-width: none; font-size: 21px; }
  .pin__title { font-size: 13px; }
  .pin__sub { font-size: 12px; }
  .hint { bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .beat { will-change: auto; }
}

.beat.high { bottom: auto; top: 16vh; }
/* a soft dark pool behind each caption, so the structure never stripes through the type */
.beat::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2.6em -3em;
  background: radial-gradient(closest-side, rgba(2, 3, 4, .74), rgba(2, 3, 4, .5) 50%, rgba(2, 3, 4, .18) 80%, rgba(2, 3, 4, 0));
  pointer-events: none;
}