:root {
  --void: #050814;
  --mist: #EAF7FF;
  --violet: #7B5CFF;
  --lime: #C7FF4A;
  --cyan: #35D7E8;
  --nickel: #6E7487;
  --pole-x: 68%;
  --pole-y: 31%;
  --cursor-x: 50%;
  --cursor-y: 50%;
  --scroll: 0;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--void);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--mist);
  font-family: "Commissioner", sans-serif;
  background: var(--void);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(234,247,255,.09), transparent 11%, transparent 89%, rgba(234,247,255,.05)),
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(199,255,74,.07), transparent 18rem);
  mix-blend-mode: screen;
}

.chamber-shell {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--pole-x) var(--pole-y), rgba(199,255,74,.18) 0, rgba(199,255,74,.04) 7rem, transparent 19rem),
    radial-gradient(circle at 15% 80%, rgba(53,215,232,.12), transparent 24rem),
    radial-gradient(circle at 84% 20%, rgba(123,92,255,.18), transparent 27rem),
    linear-gradient(180deg, #050814 0%, #070b1d 52%, #050814 100%);
}

.void-noise,
.cloud-front,
.fog-floor,
.halo,
.pole,
.particles,
.field-svg { position: absolute; }

.void-noise {
  inset: -20%;
  opacity: .42;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(234,247,255,.05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(112deg, rgba(53,215,232,.035) 0 1px, transparent 1px 17px);
  filter: blur(.25px);
  animation: grainDrift 18s linear infinite;
}

.cloud-front {
  width: 160vw;
  height: 120vh;
  left: -30vw;
  top: 8vh;
  opacity: .36;
  filter: blur(34px);
  transform: translateX(calc((var(--scroll) - .5) * -18vw));
  background:
    radial-gradient(ellipse at 20% 62%, rgba(234,247,255,.30), transparent 18%),
    radial-gradient(ellipse at 42% 48%, rgba(53,215,232,.25), transparent 20%),
    radial-gradient(ellipse at 69% 64%, rgba(123,92,255,.23), transparent 17%),
    radial-gradient(ellipse at 86% 55%, rgba(234,247,255,.17), transparent 22%);
  animation: cloudBreath 16s ease-in-out infinite alternate;
}

.fog-floor {
  left: -10vw;
  right: -10vw;
  bottom: -16vh;
  height: 42vh;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(234,247,255,.42), transparent 55%),
    linear-gradient(180deg, transparent, rgba(234,247,255,.16) 38%, rgba(5,8,20,.9));
  filter: blur(18px);
  animation: fogPulse 9s ease-in-out infinite;
}

.pole {
  z-index: 8;
  left: var(--pole-x);
  top: var(--pole-y);
  width: 1rem;
  height: 1rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 1rem var(--lime), 0 0 4rem rgba(199,255,74,.85), 0 0 10rem rgba(123,92,255,.35);
  transition: left .55s cubic-bezier(.2,.8,.2,1), top .55s cubic-bezier(.2,.8,.2,1);
  animation: polePulse 2.8s ease-in-out infinite;
}

.pole span {
  position: absolute;
  inset: -1.4rem;
  border: 1px solid rgba(199,255,74,.45);
  border-radius: 50%;
  animation: ping 2.8s ease-out infinite;
}

.halo {
  left: var(--pole-x);
  top: var(--pole-y);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left .55s cubic-bezier(.2,.8,.2,1), top .55s cubic-bezier(.2,.8,.2,1);
}

.halo-one {
  width: 44rem;
  height: 44rem;
  border: 1px solid rgba(53,215,232,.23);
  background: conic-gradient(from 40deg, transparent, rgba(53,215,232,.16), transparent, rgba(123,92,255,.22), transparent);
  mask: radial-gradient(circle, transparent 45%, #000 46% 47%, transparent 49% 55%, #000 56% 57%, transparent 59%);
  animation: rotateSlow 38s linear infinite;
}

.halo-two {
  width: 76rem;
  height: 76rem;
  border: 1px dashed rgba(234,247,255,.12);
  box-shadow: inset 0 0 4rem rgba(53,215,232,.08);
  animation: rotateReverse 64s linear infinite;
}

.field-svg {
  inset: -4vh -2vw;
  width: 104vw;
  height: 420vh;
  z-index: 3;
  transform: translateY(calc(var(--scroll) * -34vh));
  pointer-events: none;
}

.field-line {
  fill: none;
  stroke: rgba(123,92,255,.50);
  stroke-width: 2;
  stroke-dasharray: 11 21;
  filter: drop-shadow(0 0 12px rgba(123,92,255,.5));
  animation: dashFlow 9s linear infinite;
}

.field-line.unpaired {
  stroke: var(--lime);
  stroke-width: 3;
  stroke-dasharray: 2 18 90 28;
  filter: drop-shadow(0 0 16px rgba(199,255,74,.85));
}

.field-line.cyan { stroke: rgba(53,215,232,.62); }
.field-line.faint { stroke: rgba(234,247,255,.20); stroke-width: 1; }

.particles {
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: .22rem;
  height: .22rem;
  border-radius: 50%;
  background: var(--mist);
  opacity: .7;
  transform: translate3d(var(--tx), var(--ty), 0);
  box-shadow: 0 0 .8rem currentColor;
}

.particle:nth-child(3n) { color: var(--cyan); background: var(--cyan); }
.particle:nth-child(4n) { color: var(--violet); background: var(--violet); }
.particle:nth-child(7n) { color: var(--lime); background: var(--lime); }

.story {
  position: relative;
  z-index: 10;
}

.state {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  border-top: 1px solid rgba(234,247,255,.07);
}

.state::before {
  content: "";
  position: absolute;
  inset: 6vh 5vw;
  border: 1px solid rgba(234,247,255,.12);
  border-radius: 50%;
  clip-path: polygon(0 22%, 100% 7%, 100% 84%, 0 100%);
  opacity: .55;
  pointer-events: none;
}

.state-hero {
  display: grid;
  align-content: center;
  padding: 12vh 10vw;
}

.chapter-mark,
.reading-strip,
.nickel-plate,
.edge-calibration a,
.instrument-control,
.trace-link {
  font-family: "Commissioner", sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: var(--nickel);
}

.chapter-mark {
  margin: 0 0 2rem 7vw;
  color: var(--cyan);
}

.wordmark {
  max-width: 11ch;
  margin: 0;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(4.2rem, 12vw, 12.5rem);
  line-height: .82;
  letter-spacing: -.08em;
  color: rgba(234,247,255,.92);
  text-shadow: 0 0 1rem rgba(234,247,255,.18), 0 .12em 0 rgba(53,215,232,.06);
  filter: blur(.08px);
}

.breath-copy,
.glass-label,
.drift-cloud p,
.final-copy {
  font-family: "Fraunces", serif;
  font-size: clamp(1.25rem, 2.1vw, 2.35rem);
  line-height: 1.18;
  font-weight: 350;
  color: rgba(234,247,255,.82);
}

.breath-copy {
  max-width: 38rem;
  margin: 2rem 0 0 18vw;
}

.instrument-control,
.trace-link {
  width: fit-content;
  margin: 2.8rem 0 0 24vw;
  padding: .85rem 1.15rem;
  color: var(--lime);
  border: 1px solid rgba(199,255,74,.36);
  background: rgba(5,8,20,.42);
  backdrop-filter: blur(16px);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 0 1.5rem rgba(199,255,74,.08), 0 0 2rem rgba(199,255,74,.08);
}

.instrument-control.is-stable {
  color: var(--void);
  background: var(--lime);
}

.edge-calibration {
  position: fixed;
  z-index: 20;
  top: 50%;
  right: 1.2rem;
  display: grid;
  gap: 1.25rem;
  transform: translateY(-50%);
}

.edge-calibration a {
  position: relative;
  display: block;
  max-width: 9rem;
  padding-right: 2.4rem;
  color: rgba(110,116,135,.85);
  text-align: right;
  text-decoration: none;
}

.edge-calibration a::after {
  content: attr(data-state);
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.5rem;
  border-top: 1px solid currentColor;
  color: var(--cyan);
}

.edge-calibration a.active { color: var(--mist); }

.polar-title {
  position: absolute;
  max-width: 54rem;
  transform-origin: center;
}

.polar-title span {
  display: block;
  margin-bottom: .5rem;
  font-family: "Commissioner", sans-serif;
  font-size: .8rem;
  letter-spacing: .35em;
  color: var(--lime);
}

.polar-title h2 {
  margin: 0;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(3.6rem, 8vw, 9.6rem);
  line-height: .9;
  letter-spacing: -.065em;
  color: var(--mist);
}

.title-left { left: 7vw; top: 15vh; transform: rotate(-7deg); }
.title-right { right: 7vw; top: 12vh; text-align: right; transform: rotate(8deg); }
.title-left.low { top: 18vh; }

.glass-label {
  position: absolute;
  z-index: 2;
  max-width: 32rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid rgba(234,247,255,.18);
  border-radius: 2.2rem;
  background: linear-gradient(135deg, rgba(234,247,255,.10), rgba(53,215,232,.04));
  box-shadow: inset 0 0 2rem rgba(234,247,255,.05), 0 1.5rem 5rem rgba(5,8,20,.4);
  backdrop-filter: blur(18px);
}

.label-orbit-a { right: 11vw; bottom: 18vh; transform: rotate(5deg); }
.label-orbit-b { left: 8vw; bottom: 16vh; transform: rotate(-4deg); }

.aperture {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(53,215,232,.45);
  background:
    radial-gradient(circle at 60% 40%, rgba(199,255,74,.12), transparent 12%),
    repeating-radial-gradient(circle, transparent 0 2.2rem, rgba(53,215,232,.16) 2.25rem 2.32rem);
  box-shadow: inset 0 0 5rem rgba(53,215,232,.12), 0 0 7rem rgba(123,92,255,.16);
}

.aperture-one {
  width: min(62vw, 48rem);
  height: min(62vw, 48rem);
  left: 18vw;
  top: 29vh;
  animation: contourBreath 8s ease-in-out infinite;
}

.reading-strip {
  position: absolute;
  left: 8vw;
  bottom: 8vh;
  width: 58vw;
  padding-top: .8rem;
  border-top: 1px solid rgba(53,215,232,.38);
}

.compass-rose {
  position: absolute;
  left: 45%;
  top: 48%;
  width: min(47vw, 34rem);
  height: min(47vw, 34rem);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(234,247,255,.18);
  background: repeating-conic-gradient(from 8deg, rgba(53,215,232,.16) 0deg 1deg, transparent 1deg 15deg);
  box-shadow: inset 0 0 4rem rgba(53,215,232,.09), 0 0 5rem rgba(123,92,255,.13);
}

.compass-rose i,
.compass-rose b,
.compass-rose em {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--lime), transparent);
  filter: drop-shadow(0 0 12px rgba(199,255,74,.8));
}

.compass-rose i { animation: needleLost 3.4s ease-in-out infinite; }
.compass-rose b { opacity: .38; transform: rotate(142deg); background: linear-gradient(90deg, var(--cyan), transparent); }
.compass-rose em { opacity: .22; transform: rotate(238deg); background: linear-gradient(90deg, var(--violet), transparent); }

.nickel-plate {
  position: absolute;
  right: 16vw;
  bottom: 11vh;
  padding: 1.1rem 1.5rem;
  border: 1px solid rgba(110,116,135,.55);
  border-radius: 999px;
  color: var(--mist);
  background: linear-gradient(135deg, rgba(110,116,135,.32), rgba(234,247,255,.04));
  box-shadow: 0 1.5rem 4rem rgba(5,8,20,.45);
}

.drift-cloud {
  position: absolute;
  left: 11vw;
  right: -22vw;
  bottom: 18vh;
  min-height: 28rem;
  display: grid;
  align-items: center;
  padding: 5rem 24vw 5rem 8vw;
  clip-path: ellipse(58% 42% at 54% 52%);
  background:
    radial-gradient(ellipse at 20% 50%, rgba(234,247,255,.26), transparent 28%),
    radial-gradient(ellipse at 54% 44%, rgba(53,215,232,.22), transparent 32%),
    radial-gradient(ellipse at 76% 57%, rgba(123,92,255,.20), transparent 29%);
  filter: saturate(120%);
  transform: translateX(calc((var(--scroll) - .62) * -18vw));
}

.drift-cloud p { max-width: 46rem; }
.drift-cloud strong { color: var(--lime); font-weight: 500; }

.dew-lens {
  position: absolute;
  display: grid;
  place-items: center;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  border: 1px solid rgba(234,247,255,.32);
  color: rgba(234,247,255,.75);
  font-family: "Fraunces", serif;
  font-size: 1.2rem;
  line-height: 1;
  text-align: center;
  background: radial-gradient(circle at 30% 25%, rgba(234,247,255,.42), rgba(234,247,255,.08) 36%, rgba(53,215,232,.04));
  backdrop-filter: blur(10px);
  box-shadow: inset -.8rem -1rem 2rem rgba(5,8,20,.32), 0 0 3rem rgba(53,215,232,.13);
  transform: rotateX(calc((var(--cursor-y) - 50%) * .08)) rotateY(calc((50% - var(--cursor-x)) * .08));
}

.lens-a { right: 15vw; bottom: 12vh; }
.lens-b { left: 68vw; top: 19vh; }
.lens-c { left: 13vw; bottom: 12vh; width: 7rem; height: 7rem; font-size: .95rem; }

.weather-map {
  position: absolute;
  inset: 5vh 4vw;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid rgba(234,247,255,.13);
  background:
    radial-gradient(circle at var(--pole-x) var(--pole-y), rgba(199,255,74,.28), transparent 9rem),
    repeating-radial-gradient(circle at 62% 72%, transparent 0 3rem, rgba(53,215,232,.13) 3.05rem 3.12rem),
    repeating-linear-gradient(167deg, transparent 0 2.4rem, rgba(234,247,255,.05) 2.45rem 2.52rem);
}

.weather-glyph {
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 220deg at 62% 72%, rgba(199,255,74,.7), rgba(53,215,232,.28), rgba(123,92,255,.35), transparent, rgba(234,247,255,.22), rgba(199,255,74,.7));
  mask: radial-gradient(circle at 62% 72%, transparent 0 5rem, #000 5.2rem 6rem, transparent 6.4rem 9rem, #000 9.2rem 10rem, transparent 10.4rem 14rem, #000 14.2rem 15rem, transparent 15.5rem);
  animation: rotateSlow 28s linear infinite;
}

.final-title { left: 8vw; top: 10vh; transform: rotate(-4deg); }
.final-copy { position: absolute; right: 8vw; bottom: 18vh; max-width: 35rem; }
.trace-link { position: absolute; right: 8vw; bottom: 9vh; margin: 0; }

.is-visible .polar-title h2,
.is-visible .glass-label,
.is-visible .drift-cloud,
.is-visible .final-copy {
  animation: condenseIn 1.2s ease both;
}

@keyframes polePulse { 0%,100% { transform: translate(-50%,-50%) scale(.9); } 50% { transform: translate(-50%,-50%) scale(1.35); } }
@keyframes ping { from { transform: scale(.5); opacity: .85; } to { transform: scale(2.7); opacity: 0; } }
@keyframes rotateSlow { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rotateReverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes grainDrift { to { transform: translate3d(-4rem, 3rem, 0); } }
@keyframes cloudBreath { from { transform: translateX(calc((var(--scroll) - .5) * -18vw)) scale(1); } to { transform: translateX(calc((var(--scroll) - .5) * -18vw + 4vw)) scale(1.06); } }
@keyframes fogPulse { 50% { opacity: .72; transform: translateY(-2vh); } }
@keyframes dashFlow { to { stroke-dashoffset: -260; } }
@keyframes contourBreath { 50% { transform: scale(1.06) rotate(4deg); filter: blur(.4px); } }
@keyframes needleLost { 0%,100% { transform: rotate(23deg); } 28% { transform: rotate(91deg); } 58% { transform: rotate(-18deg); } 76% { transform: rotate(157deg); } }
@keyframes condenseIn { from { opacity: 0; filter: blur(18px); transform: translateY(2rem) rotate(var(--r, 0deg)); } to { opacity: 1; filter: blur(0); } }

@media (max-width: 820px) {
  .edge-calibration { display: none; }
  .wordmark { font-size: clamp(3.2rem, 18vw, 6rem); }
  .breath-copy, .instrument-control { margin-left: 0; }
  .polar-title, .title-left, .title-right, .final-title { left: 7vw; right: 7vw; top: 11vh; text-align: left; transform: rotate(-4deg); }
  .glass-label, .label-orbit-a, .label-orbit-b, .final-copy { left: 7vw; right: 7vw; bottom: 12vh; max-width: none; }
  .compass-rose { width: 78vw; height: 78vw; }
  .drift-cloud { left: -10vw; right: -30vw; padding: 3rem 20vw; }
  .lens-a, .lens-b, .lens-c { display: none; }
}