:root {
  /* DESIGN TYPOGRAPHY TOKENS: IBM Plex Sans** from Google Fonts. Use tabular-looking numeric compositions */
  --rice-paper: #F2F0E8;
  --mist-gray: #C9CCC4;
  --ink-charcoal: #272B2A;
  --moss-shadow: #667568;
  --rain-blue: #9FB8C6;
  --moon-lavender: #D8D4EA;
  --signal-amber: #B8A06A;
  --hud-x: 0px;
  --hud-y: 0px;
  --scroll-depth: 0;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--rice-paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 300vh;
  color: var(--ink-charcoal);
  font-family: "Noto Sans", "Inter", system-ui, sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 76% 16%, rgba(216, 212, 234, .48), transparent 31vw),
    radial-gradient(circle at 18% 70%, rgba(159, 184, 198, .25), transparent 38vw),
    linear-gradient(115deg, #F2F0E8 0%, #eeece4 50%, #F2F0E8 100%);
}

button { font: inherit; }

.paper-grain,
.mist-field,
.rain-layer,
.hud-shell {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.paper-grain {
  z-index: 0;
  opacity: .72;
  background-image:
    linear-gradient(90deg, rgba(39,43,42,.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(39,43,42,.018) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(201,204,196,.45) 0 1px, transparent 2px);
  background-size: 82px 82px, 117px 117px, 19px 19px;
  mix-blend-mode: multiply;
}

.mist-field {
  z-index: 1;
  transform: translate3d(calc(var(--hud-x) * -.12), calc(var(--hud-y) * -.12), 0);
  background:
    linear-gradient(180deg, rgba(242,240,232,.18), rgba(201,204,196,.34) 48%, rgba(242,240,232,.08)),
    radial-gradient(ellipse at 50% 62%, rgba(102,117,104,.18), transparent 44%);
  filter: blur(11px);
}

.rain-layer {
  z-index: 2;
  opacity: .38;
  background-image: repeating-linear-gradient(90deg, transparent 0 31px, rgba(159,184,198,.42) 32px 33px, transparent 34px 96px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  animation: rainDrift 18s linear infinite;
}

.scenes {
  position: relative;
  z-index: 4;
}

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.fog-line { background: transparent; }
.signal-garden { background: linear-gradient(180deg, rgba(242,240,232,0), rgba(201,204,196,.15) 40%, rgba(242,240,232,.16)); }
.night-hill { background: linear-gradient(180deg, rgba(159,184,198,.08), rgba(39,43,42,.13)); }

.hud-shell {
  z-index: 10;
  transform: translate3d(var(--hud-x), var(--hud-y), 0);
  transition: opacity 900ms ease;
  animation: hudArrival 1300ms ease both;
}

.hud-frame {
  position: absolute;
  inset: 5.4vh 4.2vw;
  border: 1px solid rgba(39,43,42,.18);
  box-shadow: inset 0 0 0 1px rgba(242,240,232,.36);
}

.hud-frame::before,
.hud-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(102,117,104,.18);
}

.hud-frame::before { top: 33.33%; }
.hud-frame::after { top: 66.66%; }

.vertical-measures,
.altitude-bands {
  position: absolute;
  inset: 0;
  opacity: .52;
}

.vertical-measures {
  background-image: repeating-linear-gradient(90deg, rgba(39,43,42,.13) 0 1px, transparent 1px calc(100% / 12));
}

.altitude-bands {
  background-image: repeating-linear-gradient(180deg, transparent 0 58px, rgba(159,184,198,.22) 59px 60px, transparent 61px 154px);
}

.corner {
  position: absolute;
  width: 42px;
  height: 42px;
  border-color: var(--ink-charcoal);
  opacity: .62;
}

.corner-tl { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.corner-tr { top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; }
.corner-bl { bottom: -1px; left: -1px; border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

.readout,
.scene-kicker,
.micro-line,
.station-stamp,
.station-nav button {
  font-family: "IBM Plex Sans", "Noto Sans", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 1.7;
}

.readout {
  position: absolute;
  color: rgba(39,43,42,.58);
  animation: marksPopulate 1200ms 480ms ease both;
}

.readout-left { left: 6vw; bottom: 9vh; }
.readout-right { right: 6vw; top: 8vh; text-align: right; }

.moon-dots {
  position: absolute;
  top: 15.5vh;
  right: 6vw;
  display: flex;
  gap: 8px;
}

.moon-dots i {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(39,43,42,.36);
  border-radius: 50%;
  background: rgba(216,212,234,.42);
}

.moon-dots i:nth-child(3) { background: var(--signal-amber); opacity: .72; }

.station-nav {
  position: absolute;
  right: 4.15vw;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 16px;
  pointer-events: auto;
}

.station-nav button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(39,43,42,.2);
  border-radius: 50%;
  color: rgba(39,43,42,.52);
  background: rgba(242,240,232,.36);
  cursor: pointer;
  transition: border-color 280ms ease, color 280ms ease, transform 420ms cubic-bezier(.2,1.6,.3,1);
}

.station-nav button.active {
  color: var(--ink-charcoal);
  border-color: var(--signal-amber);
  transform: scale(1.16);
}

.wordmark-block {
  position: absolute;
  left: 16vw;
  top: 57vh;
  transform: translateY(-50%);
  animation: condensation 1800ms 520ms both;
}

h1, h2 {
  margin: 0;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  font-weight: 300;
  letter-spacing: .035em;
}

h1 {
  font-size: clamp(72px, 15vw, 210px);
  line-height: .88;
  color: rgba(39,43,42,.76);
  text-shadow: 0 20px 50px rgba(102,117,104,.12);
}

h2 {
  font-size: clamp(30px, 6vw, 92px);
  line-height: 1.02;
  color: rgba(39,43,42,.68);
}

.poem {
  margin: 18px 0 0 7px;
  color: rgba(102,117,104,.78);
  letter-spacing: .14em;
}

.hill-form {
  position: absolute;
  left: -8vw;
  right: -6vw;
  bottom: 5vh;
  height: 40vh;
  background: var(--moss-shadow);
  opacity: .18;
  filter: blur(22px);
  clip-path: polygon(0 78%, 16% 66%, 29% 71%, 42% 47%, 56% 57%, 68% 35%, 82% 52%, 100% 43%, 100% 100%, 0 100%);
  transform: translate3d(0, calc(var(--scroll-depth) * -20px), 0);
}

.paper-scrap {
  position: absolute;
  border: 1px solid rgba(39,43,42,.12);
  background: rgba(242,240,232,.48);
  box-shadow: 0 18px 70px rgba(39,43,42,.06);
  backdrop-filter: blur(6px);
  mix-blend-mode: multiply;
  transform: translate3d(0, calc(var(--scroll-depth) * -16px), 0) rotate(var(--r, 0deg));
}

.paper-scrap span {
  position: absolute;
  left: 14px;
  top: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: .22em;
  color: rgba(102,117,104,.62);
}

.scrap-a { width: 18vw; height: 23vh; left: 54vw; top: 20vh; --r: -2deg; background: rgba(216,212,234,.2); }
.scrap-b { width: 28vw; height: 16vh; left: 14vw; top: 15vh; --r: 1.4deg; background: rgba(159,184,198,.16); }
.scrap-c { width: 25vw; height: 44vh; right: 17vw; top: 18vh; --r: 4deg; background: rgba(201,204,196,.3); }
.scrap-d { width: 38vw; height: 18vh; left: 7vw; bottom: 13vh; --r: -3deg; background: rgba(159,184,198,.18); }
.scrap-e { width: 30vw; height: 38vh; left: 52vw; top: 26vh; --r: -5deg; background: rgba(216,212,234,.24); }

.scan-rings {
  position: absolute;
  left: 16vw;
  top: 57vh;
  width: clamp(150px, 28vw, 420px);
  aspect-ratio: 1;
  transform: translate(-12%, -52%);
  pointer-events: none;
}

.scan-rings span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(216,212,234,.72);
  border-radius: 50%;
  opacity: 0;
  animation: scanPulse 3000ms cubic-bezier(.17,.84,.28,1) 1150ms 1 both;
}

.scan-rings span:nth-child(2) { inset: 12%; animation-delay: 1290ms; border-color: rgba(159,184,198,.48); }
.scan-rings span:nth-child(3) { inset: 25%; animation-delay: 1430ms; border-color: rgba(184,160,106,.38); }

.micro-line {
  position: absolute;
  left: 62vw;
  bottom: 19vh;
  color: rgba(102,117,104,.5);
}

.topo-disk,
.moon-glow {
  position: absolute;
  border-radius: 50%;
}

.topo-disk {
  width: 56vw;
  aspect-ratio: 1;
  left: -14vw;
  top: 13vh;
  opacity: .45;
  background: repeating-radial-gradient(circle, transparent 0 25px, rgba(102,117,104,.24) 26px 27px), radial-gradient(circle, rgba(159,184,198,.22), transparent 64%);
  filter: blur(.2px);
}

.antenna-field span {
  position: absolute;
  bottom: 15vh;
  width: 1px;
  height: 26vh;
  background: rgba(102,117,104,.34);
  transform-origin: bottom;
  animation: reedSway 6s ease-in-out infinite;
}

.antenna-field span::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 7px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(159,184,198,.48);
  border-radius: 50%;
}

.antenna-field span:nth-child(1) { left: 35vw; height: 20vh; animation-delay: -.8s; }
.antenna-field span:nth-child(2) { left: 42vw; height: 32vh; animation-delay: -1.7s; }
.antenna-field span:nth-child(3) { left: 51vw; height: 25vh; animation-delay: -2.4s; }
.antenna-field span:nth-child(4) { left: 62vw; height: 36vh; animation-delay: -3.1s; }
.antenna-field span:nth-child(5) { left: 71vw; height: 22vh; animation-delay: -4s; }

.text-fragment {
  position: absolute;
  max-width: 520px;
}

.text-fragment p:not(.scene-kicker) {
  max-width: 390px;
  color: rgba(39,43,42,.54);
  line-height: 1.9;
  letter-spacing: .03em;
}

.fragment-east { left: 51vw; top: 34vh; }
.fragment-west { left: 13vw; top: 32vh; }

.station-stamp {
  position: absolute;
  right: 24vw;
  bottom: 26vh;
  padding: 12px 14px;
  color: var(--signal-amber);
  border: 1px solid rgba(184,160,106,.42);
  background: rgba(242,240,232,.34);
}

.moon-glow {
  width: 42vw;
  aspect-ratio: 1;
  right: 5vw;
  top: 12vh;
  background: radial-gradient(circle, rgba(216,212,234,.74), rgba(159,184,198,.18) 38%, transparent 70%);
  filter: blur(10px);
}

.night-panel {
  position: absolute;
  border: 1px solid rgba(159,184,198,.24);
  background: rgba(159,184,198,.16);
}

.panel-one { width: 22vw; height: 70vh; left: 8vw; top: 10vh; }
.panel-two { width: 46vw; height: 18vh; right: 11vw; bottom: 11vh; }

.closing-glyph {
  position: absolute;
  right: 17vw;
  bottom: 23vh;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(26px, 4vw, 58px);
  letter-spacing: .22em;
  color: rgba(216,212,234,.82);
}

@keyframes hudArrival {
  from { opacity: 0; clip-path: inset(50% 50% 50% 50%); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes marksPopulate {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes condensation {
  from { opacity: 0; filter: blur(18px); letter-spacing: .32em; }
  to { opacity: 1; filter: blur(0); letter-spacing: inherit; }
}

@keyframes scanPulse {
  0% { opacity: 0; transform: scale(.64); }
  28% { opacity: .82; }
  72% { opacity: .26; transform: scale(1.08); }
  100% { opacity: .18; transform: scale(.98); }
}

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

@keyframes rainDrift {
  from { transform: translateY(-5vh); }
  to { transform: translateY(5vh); }
}

@media (max-width: 760px) {
  .hud-frame { inset: 4vh 5vw; }
  .wordmark-block { left: 10vw; top: 56vh; }
  .fragment-east, .fragment-west { left: 10vw; right: 10vw; top: 33vh; }
  .readout-left { display: none; }
  .paper-scrap { opacity: .75; }
  .scrap-c, .scrap-e { width: 58vw; }
  .moon-glow { width: 70vw; }
}