:root {
  --navy: #07111F;
  --slate: #1B2A41;
  --paper: #E8EDF2;
  --cyan: #72F2EB;
  --violet: #9B7CFF;
  --ember: #FFB36B;
  --green: #8DFFB2;
  --basalt: #2D3440;
  --display: "Bricolage Grotesque", sans-serif;
  --serif: "Literata", serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--paper);
  background: var(--navy);
  font-family: var(--serif);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    radial-gradient(circle at 21% 18%, rgba(114, 242, 235, .09), transparent 24%),
    radial-gradient(circle at 74% 34%, rgba(155, 124, 255, .11), transparent 21%),
    repeating-radial-gradient(circle at 50% 52%, rgba(232, 237, 242, .04) 0 1px, transparent 1px 16px),
    linear-gradient(115deg, transparent 0 48%, rgba(232,237,242,.03) 48.2% 48.7%, transparent 49%);
  mix-blend-mode: screen;
}

.atlas {
  position: relative;
  min-height: 600vh;
  background:
    linear-gradient(180deg, var(--navy) 0%, #0b1728 38%, var(--slate) 72%, #0d2534 100%);
}

.sky-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(232,237,242,.65) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(114,242,235,.35) 0 1px, transparent 1.7px);
  background-size: 110px 110px, 173px 173px;
  opacity: .42;
  transform: translateY(calc(var(--scroll, 0) * -40px));
}

.settlement {
  position: fixed;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(141, 255, 178, .6);
  border-radius: 50% 50% 46% 54%;
  box-shadow: 0 0 28px rgba(141,255,178,.22), inset 0 0 20px rgba(114,242,235,.16);
  background: radial-gradient(circle at 35% 30%, rgba(232,237,242,.78), rgba(114,242,235,.13) 45%, transparent 70%);
  animation: buoy 8s ease-in-out infinite;
}

.buoy-one { top: 13vh; left: 22vw; }
.buoy-two { top: 28vh; right: 14vw; width: 40px; height: 40px; animation-delay: -2s; }
.buoy-three { top: 58vh; left: 9vw; width: 34px; height: 34px; animation-delay: -4s; }
.buoy-four { top: 17vh; right: 36vw; width: 25px; height: 25px; animation-delay: -1s; }

.station-head {
  position: fixed;
  top: 28px;
  left: 34px;
  z-index: 10;
  width: 275px;
  padding: 18px 20px;
  border: 1px solid rgba(232, 237, 242, .18);
  border-radius: 22px;
  background: rgba(232,237,242,.075);
  box-shadow: inset 0 0 32px rgba(232,237,242,.06), 0 20px 80px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
}

.wordmark {
  font-family: var(--display);
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.report-kicker, .eyebrow, .mono-note, .weather-tab, .marginal, .rail-mark {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.report-kicker { margin-top: 6px; color: var(--cyan); font-size: 10px; }

.chapter-rail {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  display: grid;
  gap: 10px;
}

.rail-mark {
  color: rgba(232,237,242,.52);
  background: rgba(7,17,31,.42);
  border: 1px solid rgba(232,237,242,.12);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 9px;
  cursor: pointer;
  transition: .45s ease;
}

.rail-mark span { color: var(--violet); margin-right: 8px; }
.rail-mark.active { color: var(--paper); border-color: rgba(114,242,235,.65); box-shadow: 0 0 24px rgba(114,242,235,.15); }

.plate {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  align-items: center;
  isolation: isolate;
  padding: 9vh 8vw;
  overflow: hidden;
}

.plate::before {
  content: "";
  position: absolute;
  inset: 7vh 7vw;
  border: 1px solid rgba(232,237,242,.09);
  border-radius: 38px;
  background:
    linear-gradient(90deg, rgba(232,237,242,.04) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(0deg, rgba(232,237,242,.035) 1px, transparent 1px) 0 0 / 72px 72px,
    rgba(232,237,242,.025);
  transform: rotate(calc((var(--state, 0) - 2) * .75deg));
  backdrop-filter: blur(2px);
  z-index: -2;
}

.plate::after {
  content: "";
  position: absolute;
  width: 86vmin;
  height: 86vmin;
  border-radius: 50%;
  border: 1px solid rgba(114,242,235,.18);
  background:
    radial-gradient(circle at center, transparent 0 28%, rgba(114,242,235,.06) 28.3% 28.8%, transparent 29%),
    repeating-radial-gradient(circle, transparent 0 48px, rgba(232,237,242,.07) 49px 50px),
    conic-gradient(from 22deg, rgba(155,124,255,.12), transparent 22%, rgba(141,255,178,.08), transparent 52%, rgba(114,242,235,.11), transparent 76%);
  left: -18vmin;
  top: 10vh;
  transform: rotate(calc(var(--progress, 0) * 44deg));
  z-index: -1;
  opacity: .75;
}

.report-copy {
  max-width: 530px;
  position: relative;
  z-index: 5;
  padding: 30px 34px;
  border-left: 1px solid rgba(232,237,242,.18);
  background: linear-gradient(90deg, rgba(232,237,242,.08), rgba(232,237,242,.018));
  backdrop-filter: blur(10px);
}

.right-copy { justify-self: end; margin-right: 8vw; }
.left-copy { justify-self: start; margin-left: 6vw; }

.eyebrow { color: var(--green); font-size: 11px; margin: 0 0 12px; }
h1, h2 {
  margin: 0;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(58px, 9vw, 124px);
  line-height: .82;
  letter-spacing: -.07em;
}

.report-copy p:not(.eyebrow):not(.mono-note) {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  color: rgba(232,237,242,.82);
}

.mono-note { color: var(--cyan); font-size: 11px; line-height: 1.8; }

.calibrate {
  margin-top: 12px;
  padding: 15px 22px;
  border-radius: 999px;
  border: 1px solid rgba(114,242,235,.6);
  color: var(--paper);
  background: linear-gradient(135deg, rgba(114,242,235,.2), rgba(155,124,255,.12));
  font-family: var(--display);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 35px rgba(114,242,235,.12);
}

.instrument-shell {
  position: absolute;
  left: -14vmin;
  top: 8vmin;
  width: 82vmin;
  height: 82vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(232,237,242,.18), rgba(27,42,65,.2) 35%, rgba(7,17,31,.4) 68%, transparent 70%);
  filter: drop-shadow(0 40px 90px rgba(0,0,0,.32));
}

.barometer {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  border: 1px solid rgba(232,237,242,.22);
  transform: rotate(calc(var(--barometer-rotation, 0deg)));
  transition: transform .25s linear;
  background:
    repeating-conic-gradient(from 0deg, rgba(232,237,242,.18) 0 1deg, transparent 1deg 9deg),
    radial-gradient(circle, rgba(114,242,235,.04), rgba(155,124,255,.06) 41%, rgba(7,17,31,.28));
}

.dial { position: absolute; border-radius: 50%; border: 1px solid rgba(232,237,242,.15); inset: 12%; }
.dial-mid { inset: 25%; border-color: rgba(114,242,235,.3); }
.dial-inner { inset: 39%; border-color: rgba(155,124,255,.36); background: rgba(232,237,242,.04); }
.reticle { position: absolute; inset: 49.5% 8%; height: 1px; background: rgba(232,237,242,.2); }
.reticle::after { content: ""; position: absolute; left: 50%; top: -35vmin; width: 1px; height: 70vmin; background: rgba(232,237,242,.14); }

.needle { position: absolute; left: 50%; top: 50%; width: 34%; height: 2px; transform-origin: left center; }
.needle-cyan { background: var(--cyan); transform: rotate(24deg); box-shadow: 0 0 18px var(--cyan); }
.needle-violet { background: var(--violet); transform: rotate(127deg); box-shadow: 0 0 14px var(--violet); }
.rim-label { position: absolute; font: 600 10px var(--mono); color: var(--paper); letter-spacing: .16em; }
.north { top: 6%; left: 49%; } .east { right: 4%; top: 49%; } .south { bottom: 6%; left: 45%; } .west { left: 4%; top: 49%; }

.proof-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.proof-svg path { fill: none; stroke: rgba(232,237,242,.18); stroke-width: 2; }
#proofTrace { stroke: var(--violet); stroke-width: 4; stroke-dasharray: 720; stroke-dashoffset: calc(720 - (var(--progress, 0) * 720)); filter: drop-shadow(0 0 10px var(--violet)); opacity: calc(.15 + var(--progress, 0) * .85); }
.contour { stroke: rgba(114,242,235,.18) !important; stroke-width: 1.4 !important; }

.marginal {
  position: absolute;
  top: 17vh;
  z-index: 6;
  writing-mode: vertical-rl;
  font-size: 10px;
  color: rgba(232,237,242,.6);
  display: flex;
  gap: 18px;
  align-items: center;
}
.marginal.left { left: 26px; }
.marginal.right { right: 118px; }
.marginal span { color: var(--ember); }
.marginal b { color: var(--paper); }
.marginal em { color: var(--cyan); font-style: normal; }

.horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24vh;
  background:
    linear-gradient(170deg, transparent 0 38%, var(--basalt) 38.5% 52%, #172231 52.5% 64%, #111a27 64.5%),
    repeating-linear-gradient(0deg, rgba(232,237,242,.05) 0 1px, transparent 1px 17px);
  z-index: 1;
}

.motif { position: absolute; z-index: 3; pointer-events: none; }
.cloud-system { right: 11vw; top: 24vh; width: 45vw; height: 45vh; }
.cloud-system span { position: absolute; border: 1px solid rgba(141,255,178,.45); border-radius: 999px; background: rgba(141,255,178,.045); box-shadow: inset 0 0 24px rgba(141,255,178,.08); }
.cloud-system span:nth-child(1) { inset: 8% 4% 63% 20%; }
.cloud-system span:nth-child(2) { inset: 24% 16% 48% 4%; }
.cloud-system span:nth-child(3) { inset: 42% 2% 30% 28%; }
.cloud-system span:nth-child(4) { inset: 60% 24% 15% 12%; }
.cloud-system span:nth-child(5) { inset: 73% 10% 3% 45%; border-color: rgba(255,179,107,.35); }

.wind-vane { left: 14vw; top: 21vh; width: 38vmin; height: 38vmin; border-radius: 50%; border: 1px solid rgba(141,255,178,.25); animation: vane 11s linear infinite; }
.wind-vane i { position: absolute; left: 50%; top: 50%; width: 45%; height: 1px; background: var(--green); transform-origin: left center; box-shadow: 0 0 16px rgba(141,255,178,.5); }
.wind-vane i:nth-child(1) { transform: rotate(0deg); } .wind-vane i:nth-child(2) { transform: rotate(90deg); } .wind-vane i:nth-child(3) { transform: rotate(180deg); } .wind-vane i:nth-child(4) { transform: rotate(270deg); }

.lightning-field { right: 18vw; top: 18vh; width: 35vw; height: 56vh; }
.lightning-field span { position: absolute; width: 3px; height: 62%; background: linear-gradient(var(--violet), transparent); clip-path: polygon(45% 0,100% 33%,62% 33%,95% 100%,18% 45%,52% 45%); filter: drop-shadow(0 0 18px var(--violet)); opacity: .75; animation: flare 4s ease-in-out infinite; }
.lightning-field span:nth-child(2) { left: 35%; top: 15%; height: 44%; animation-delay: -1.3s; } .lightning-field span:nth-child(3) { left: 68%; top: 4%; height: 54%; animation-delay: -2.1s; }

.fog-ribbons { left: 6vw; top: 22vh; width: 72vw; height: 50vh; }
.fog-ribbons span { position: absolute; left: 0; width: 80%; height: 52px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(232,237,242,.18), rgba(114,242,235,.12), transparent); filter: blur(5px); animation: fog 10s ease-in-out infinite; }
.fog-ribbons span:nth-child(1) { top: 4%; } .fog-ribbons span:nth-child(2) { top: 28%; left: 12%; animation-delay: -2s; } .fog-ribbons span:nth-child(3) { top: 52%; left: 3%; animation-delay: -4s; } .fog-ribbons span:nth-child(4) { top: 76%; left: 18%; animation-delay: -6s; }

.dawn-rings { right: -8vmin; bottom: -10vmin; width: 80vmin; height: 80vmin; border-radius: 50%; background: radial-gradient(circle, rgba(114,242,235,.25), transparent 18%, rgba(255,179,107,.09) 34%, transparent 55%); }
.dawn-rings span { position: absolute; inset: calc(var(--i, 1) * 9%); border: 1px solid rgba(114,242,235,.36); border-radius: 50%; animation: dawn 7s ease-in-out infinite; }
.dawn-rings span:nth-child(1) { --i: 1; } .dawn-rings span:nth-child(2) { --i: 2; animation-delay: -1.5s; } .dawn-rings span:nth-child(3) { --i: 3; animation-delay: -3s; }

.weather-tab {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 12;
  color: var(--navy);
  background: rgba(232,237,242,.86);
  border: 1px solid rgba(114,242,235,.5);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 10px;
  box-shadow: 0 0 32px rgba(114,242,235,.18);
}

.plate-six { background: radial-gradient(circle at 78% 92%, rgba(114,242,235,.28), transparent 37%); }
.plate-four .report-copy { border-left-color: rgba(155,124,255,.55); }
.plate-five .report-copy { background: linear-gradient(90deg, rgba(232,237,242,.11), rgba(27,42,65,.09)); }

@keyframes buoy { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(4deg); } }
@keyframes vane { to { transform: rotate(360deg); } }
@keyframes flare { 0%, 72%, 100% { opacity: .1; transform: scaleY(.7); } 77%, 84% { opacity: 1; transform: scaleY(1); } }
@keyframes fog { 0%,100% { transform: translateX(-6%); opacity: .22; } 50% { transform: translateX(12%); opacity: .7; } }
@keyframes dawn { 0%,100% { opacity: .25; transform: scale(.96); } 50% { opacity: .8; transform: scale(1.04); } }

@media (max-width: 760px) {
  .station-head { left: 16px; top: 16px; width: 230px; }
  .chapter-rail { display: none; }
  .plate { padding: 18vh 22px 9vh; }
  .instrument-shell { width: 90vmin; height: 90vmin; opacity: .62; }
  .right-copy, .left-copy { justify-self: stretch; margin: 0; }
  .marginal { display: none; }
  h1, h2 { font-size: 58px; }
}