:root {
  --void: #101114;
  --porcelain: #F4F0E8;
  --cobalt: #174CFF;
  --oxide: #B7352D;
  --silver: #B8BEC8;
  --ion: #B6FF3B;
  --axis-x: 50vw;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--porcelain);
  color: var(--void);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
  transition: background 700ms ease, color 700ms ease;
}

body.inverted {
  background: var(--void);
  color: var(--porcelain);
}

button { font: inherit; }

.fixed-atlas {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: multiply;
}

body.inverted .fixed-atlas { mix-blend-mode: screen; }

.atlas-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.86;
}

.field-lines path {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 1.05;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  opacity: 0.62;
  animation: drawField 2600ms cubic-bezier(.2,.8,.16,1) forwards;
}

.field-lines path:nth-child(2n) { stroke: var(--silver); animation-delay: 220ms; }
.field-lines path:nth-child(3n) { stroke: var(--oxide); opacity: 0.28; animation-delay: 420ms; }

.degree-rings circle {
  fill: none;
  stroke: var(--silver);
  stroke-width: 0.75;
  stroke-dasharray: 3 18;
  opacity: 0.45;
}

.tick-line {
  stroke: var(--void);
  stroke-width: 1;
  opacity: 0.28;
}

body.inverted .tick-line { stroke: var(--porcelain); }

.halo { opacity: 0; transform-origin: 50% 50%; transition: opacity 700ms ease, transform 900ms ease; }
body.field-emergence .halo-cobalt,
body.field-orbit .halo-cobalt,
body.field-collapse .halo-cobalt { opacity: 1; }
body.field-collapse .halo-cobalt { transform: scale(1.8, 1.18); }
body.field-emergence .halo-ion { opacity: 0.75; animation: ionBlink 1800ms ease-in-out infinite; }

.pole {
  position: absolute;
  top: 50%;
  left: var(--axis-x);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--void);
  box-shadow: 0 0 0 9px rgba(23, 76, 255, 0.09), 0 0 36px rgba(23, 76, 255, 0.18);
  transform: translate(-50%, -50%);
  transition: height 900ms cubic-bezier(.2,.8,.16,1), width 900ms cubic-bezier(.2,.8,.16,1), border-radius 900ms ease, background 500ms ease;
}

.pole span {
  position: absolute;
  left: 50%;
  top: -18px;
  width: 1px;
  height: calc(100% + 36px);
  background: rgba(244, 240, 232, 0.38);
  transform: translateX(-50%);
}

body:not(.field-zero) .pole {
  width: 10px;
  height: 118vh;
  border-radius: 16px;
}

body.field-collapse .pole { width: 16px; background: var(--cobalt); box-shadow: 0 0 70px rgba(23, 76, 255, 0.62); }
body.field-residual .pole { width: 2px; background: var(--silver); box-shadow: none; }
body.inverted .pole { background: var(--porcelain); }

.spine-nav {
  position: absolute;
  top: 12vh;
  left: calc(var(--axis-x) + 17px);
  display: flex;
  height: 76vh;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: auto;
}

.spine-nav button {
  width: 34px;
  height: 18px;
  border: 0;
  border-left: 9px solid var(--void);
  background: transparent;
  color: var(--void);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transform: translateX(0);
  transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.spine-nav button.is-active { border-left-color: var(--cobalt); color: var(--cobalt); transform: translateX(5px); }
body.inverted .spine-nav button { color: var(--porcelain); border-left-color: var(--porcelain); }

.plate {
  position: relative;
  min-height: 100vh;
  padding: 8vh 7vw;
  overflow: hidden;
  isolation: isolate;
}

.coordinate,
.origin-label,
.section-stamp,
.angle-label,
.radius-note,
.specimen small {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.zero-field {
  display: grid;
  place-items: center;
}

.origin-label {
  position: absolute;
  top: calc(50% + 32px);
  left: calc(50% + 28px);
  margin: 0;
  color: rgba(16, 17, 20, 0.42);
  font-size: 11px;
}

.origin-dot {
  position: fixed;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--void);
  transform: translate(-50%, -50%);
  animation: dotPulse 2400ms ease-in-out infinite;
  transition: opacity 500ms ease, transform 800ms ease;
  pointer-events: none;
}

body:not(.field-zero) .origin-dot { opacity: 0; transform: translate(-50%, -50%) scaleY(18); }

.quiet-ring {
  position: absolute;
  border: 1px solid rgba(184, 190, 200, 0.36);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.ring-one { width: 28vw; height: 28vw; }
.ring-two { width: 52vw; height: 52vw; border-style: dashed; }

.field-whisper {
  position: absolute;
  right: 9vw;
  bottom: 12vh;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(24px, 4vw, 64px);
  color: rgba(16, 17, 20, 0.18);
  transform: rotate(-8deg);
}

.mass-title {
  position: absolute;
  left: 8vw;
  top: 10vh;
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(72px, 15vw, 238px);
  line-height: 0.82;
  letter-spacing: -0.08em;
  color: var(--void);
  transform: rotate(-3deg);
}

.emergence-copy {
  position: absolute;
  right: 8vw;
  bottom: 14vh;
  width: min(360px, 34vw);
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1.12;
  transform: rotate(5deg);
}

.angle-label {
  position: absolute;
  color: var(--cobalt);
  font-size: 11px;
  z-index: 2;
}
.label-a { top: 18vh; right: 24vw; transform: rotate(24deg); }
.label-b { bottom: 22vh; left: 18vw; transform: rotate(-17deg); color: var(--oxide); }

.filings { position: absolute; inset: 0; z-index: -1; }
.filing {
  position: absolute;
  width: 17px;
  height: 2px;
  background: var(--void);
  opacity: 0.28;
  transform-origin: center;
  transition: transform 260ms ease, opacity 260ms ease;
}

.northless {
  position: absolute;
  right: 13vw;
  top: 18vh;
  width: 156px;
  height: 156px;
  border: 1px solid var(--silver);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "IBM Plex Mono", monospace;
  color: var(--oxide);
  animation: compassSpin 9s linear infinite;
}
.northless span { position: absolute; }
.northless span:nth-child(1) { top: 12px; }
.northless span:nth-child(2) { left: 16px; }
.northless span:nth-child(3) { right: 16px; color: var(--cobalt); }

.section-stamp { position: absolute; left: 8vw; top: 9vh; font-size: 11px; color: var(--cobalt); }
.studio-note {
  position: absolute;
  left: 10vw;
  bottom: 11vh;
  width: min(470px, 39vw);
  font-size: clamp(22px, 3.4vw, 52px);
  line-height: 0.98;
  font-weight: 500;
}

.calibration-text {
  position: absolute;
  right: 7vw;
  bottom: 7vh;
  width: 330px;
  margin: 0;
  color: rgba(16, 17, 20, 0.38);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  line-height: 1.45;
  transform: rotate(-2deg);
}

.specimen {
  position: absolute;
  width: 260px;
  min-height: 164px;
  padding: 18px;
  border: 1px solid var(--void);
  background: rgba(244, 240, 232, 0.82);
  box-shadow: 12px 18px 0 rgba(184, 190, 200, 0.35);
  transition: transform 700ms cubic-bezier(.2,.8,.16,1), box-shadow 300ms ease;
}
.specimen::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -46vw;
  width: 46vw;
  border-top: 1px solid var(--silver);
  transform: rotate(-1deg);
}
.specimen strong { display: block; margin: 20px 0 10px; font-family: "Archivo Black", sans-serif; font-size: 24px; line-height: 0.95; text-transform: uppercase; }
.specimen span { font-size: 14px; line-height: 1.2; }
.enamel { right: 13vw; top: 13vh; background: var(--void); color: var(--porcelain); }
.cobalt-glass { right: 26vw; bottom: 13vh; border-color: var(--cobalt); box-shadow: 12px 18px 0 rgba(23, 76, 255, 0.16); }
.oxide { left: 12vw; top: 26vh; width: 210px; background: var(--oxide); color: var(--porcelain); }
.proof { left: 55vw; top: 45vh; width: 310px; }

.draft-table {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vw, 720px);
  aspect-ratio: 1;
  border: 1px solid var(--silver);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.draft-table::before,
.draft-table::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px dashed rgba(184, 190, 200, 0.6);
  border-radius: 50%;
}
.draft-table::after { inset: 34%; border-color: rgba(23, 76, 255, 0.42); }

.orbit-word {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  color: var(--void);
  transform-origin: 0 0;
  animation: orbit 24s linear infinite;
}
.orbit-one { --r: 255px; --a: 0deg; font-size: 42px; }
.orbit-two { --r: 178px; --a: 76deg; color: var(--cobalt); font-size: 31px; animation-duration: 19s; }
.orbit-three { --r: 304px; --a: 148deg; color: var(--oxide); font-size: 36px; animation-duration: 31s; }
.orbit-four { --r: 215px; --a: 236deg; font-size: 28px; animation-duration: 27s; }
.orbit-five { --r: 330px; --a: 302deg; color: var(--cobalt); font-size: 24px; animation-duration: 35s; }

.orbit-copy {
  position: absolute;
  left: 7vw;
  top: 12vh;
  width: min(390px, 36vw);
}
.orbit-copy h2,
.residual-field h2 {
  margin: 0 0 18px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(42px, 7vw, 104px);
  line-height: 0.88;
  letter-spacing: -0.06em;
}
.orbit-copy p:not(.coordinate), .residual-copy { font-size: 18px; line-height: 1.35; }
.radius-note { position: absolute; right: 9vw; bottom: 14vh; color: var(--oxide); transform: rotate(8deg); }

.collapse-field {
  background: radial-gradient(circle at 50% 50%, rgba(23, 76, 255, 0.16), transparent 36%), var(--void);
  color: var(--porcelain);
}
.collapse-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  transform: translate(-50%, -50%);
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(48px, 9vw, 140px);
  line-height: 0.82;
  letter-spacing: -0.08em;
}
.collapse-stack span {
  display: block;
  transform: translateX(var(--drift, 0));
  transition: transform 900ms cubic-bezier(.2,.8,.16,1), color 700ms ease;
}
.collapse-stack span:nth-child(1) { --drift: -22vw; }
.collapse-stack span:nth-child(2) { --drift: 16vw; color: var(--silver); }
.collapse-stack span:nth-child(3) { --drift: -12vw; color: var(--cobalt); }
.collapse-stack span:nth-child(4) { --drift: 20vw; color: var(--ion); }
body.field-collapse .collapse-stack span { transform: translateX(0); }
.cobalt-bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30vw;
  height: 80vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(23, 76, 255, 0.36), transparent 64%);
  transform: translate(-50%, -50%) scaleX(0.3);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 900ms ease, transform 1100ms ease;
}
body.field-collapse .cobalt-bloom { opacity: 1; transform: translate(-50%, -50%) scaleX(1.5); }
.collapse-note { position: absolute; left: 8vw; bottom: 10vh; width: 310px; color: var(--silver); }
.invert-trigger {
  position: absolute;
  right: 9vw;
  top: 15vh;
  border: 1px solid var(--ion);
  color: var(--ion);
  background: transparent;
  padding: 12px 15px;
  font-family: "IBM Plex Mono", monospace;
  text-transform: lowercase;
  cursor: pointer;
}

.residual-field { display: grid; align-content: center; justify-items: start; padding-left: 10vw; }
.registration-mark {
  position: absolute;
  left: calc(50% - 42px);
  top: calc(50% - 42px);
  width: 84px;
  height: 84px;
  border: 1px solid var(--silver);
  border-radius: 50%;
  opacity: 0.8;
}
.registration-mark span:first-child,
.registration-mark span:last-child {
  position: absolute;
  background: var(--void);
}
.registration-mark span:first-child { left: 50%; top: -28px; width: 1px; height: 140px; }
.registration-mark span:last-child { top: 50%; left: -28px; height: 1px; width: 140px; }
.residual-field .coordinate { color: var(--cobalt); }
.residual-field h2 { width: min-content; }
.residual-copy { max-width: 520px; }
.interaction-note {
  position: absolute;
  right: 8vw;
  top: 18vh;
  width: 280px;
  margin: 0;
  color: var(--oxide);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 1.5;
  transform: rotate(7deg);
}
.final { right: 12vw; bottom: 17vh; color: rgba(23, 76, 255, 0.28); }

.field-cursor {
  position: fixed;
  z-index: 20;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(23, 76, 255, 0.28);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}
.field-cursor.is-visible { opacity: 1; }
.polarity-flash { position: fixed; inset: 0; z-index: 30; pointer-events: none; background: var(--ion); opacity: 0; mix-blend-mode: difference; }
.polarity-flash.fire { animation: flash 440ms ease; }

@keyframes drawField { to { stroke-dashoffset: 0; } }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(23, 76, 255, 0.2); } 50% { box-shadow: 0 0 0 28px rgba(23, 76, 255, 0); } }
@keyframes ionBlink { 0%,100% { opacity: 0.35; } 50% { opacity: 0.95; } }
@keyframes compassSpin { to { transform: rotate(360deg); } }
@keyframes orbit { from { transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); } to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc(-1 * (var(--a) + 360deg))); } }
@keyframes flash { 0% { opacity: 0; } 22% { opacity: 0.88; } 100% { opacity: 0; } }

@media (max-width: 760px) {
  .plate { padding: 8vh 6vw; }
  .mass-title { left: 5vw; font-size: 23vw; }
  .emergence-copy, .studio-note, .orbit-copy { width: 72vw; left: 6vw; right: auto; }
  .specimen { width: 220px; }
  .enamel { right: 5vw; }
  .cobalt-glass { right: 12vw; }
  .proof { left: 38vw; }
  .draft-table { width: 112vw; }
  .orbit-word { font-size: 24px; }
  .orbit-one, .orbit-two, .orbit-three, .orbit-four, .orbit-five { --r: 170px; }
  .spine-nav { left: calc(50vw + 10px); }
}