:root {
  --deep-void: #0a0a0f;
  --star-white: #e8e8e0;
  --meridian-gray: #808080;
  --penumbra: #1a1a22;
  --nebula-dust: #b0b0a8;
  --halo: #c8c8c0;
  --event-horizon: #3a3a42;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--star-white);
  background: var(--deep-void);
  font-family: "Cormorant Garamond", serif;
  perspective: 1200px;
  transform-style: preserve-3d;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  background:
    linear-gradient(90deg, transparent 0 38.05%, rgba(232,232,224,0.035) 38.18%, transparent 38.31%),
    repeating-linear-gradient(0deg, rgba(232,232,224,0.018) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
}

.site-mark {
  position: fixed;
  z-index: 40;
  top: 18px;
  left: 21px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nebula-dust);
  opacity: 0.46;
}

.meridian-line {
  position: fixed;
  left: 38.2%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--meridian-gray);
  opacity: 0.36;
  z-index: 8;
  pointer-events: none;
}

.parallax-stage, main {
  position: relative;
  transform-style: preserve-3d;
}

.parallax-layer {
  position: fixed;
  inset: -18vh -12vw;
  transform-style: preserve-3d;
  pointer-events: none;
}

.layer-stars {
  z-index: 1;
  transform: translateZ(-600px) scale(1.5);
}

.layer-constellations {
  z-index: 2;
  transform: translateZ(-300px) scale(1.25);
}

.layer-frames {
  z-index: 3;
  transform: translateZ(-150px) scale(1.125);
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--star-white), var(--meridian-gray) 55%, transparent 70%);
  opacity: 0.42;
  box-shadow: 0 0 12px rgba(200,200,192,0.26);
}
.star:nth-child(3n) { width: 2px; height: 2px; background: var(--meridian-gray); opacity: 0.34; }
.star:nth-child(4n) { width: 4px; height: 4px; background: var(--nebula-dust); opacity: 0.58; }
.s1{left:6%;top:7%}.s2{left:18%;top:13%}.s3{left:29%;top:5%}.s4{left:43%;top:17%}.s5{left:58%;top:9%}
.s6{left:71%;top:21%}.s7{left:84%;top:8%}.s8{left:94%;top:31%}.s9{left:11%;top:28%}.s10{left:24%;top:37%}
.s11{left:37%;top:26%}.s12{left:53%;top:34%}.s13{left:63%;top:29%}.s14{left:77%;top:42%}.s15{left:89%;top:51%}
.s16{left:5%;top:49%}.s17{left:16%;top:57%}.s18{left:31%;top:46%}.s19{left:46%;top:54%}.s20{left:59%;top:61%}
.s21{left:69%;top:52%}.s22{left:81%;top:64%}.s23{left:96%;top:73%}.s24{left:9%;top:78%}.s25{left:22%;top:69%}
.s26{left:35%;top:81%}.s27{left:48%;top:75%}.s28{left:61%;top:86%}.s29{left:74%;top:79%}.s30{left:88%;top:91%}
.s31{left:14%;top:93%}.s32{left:4%;top:119%}.s33{left:19%;top:137%}.s34{left:32%;top:126%}.s35{left:44%;top:144%}
.s36{left:57%;top:132%}.s37{left:73%;top:121%}.s38{left:91%;top:146%}.s39{left:8%;top:163%}.s40{left:26%;top:178%}
.s41{left:41%;top:168%}.s42{left:52%;top:188%}.s43{left:66%;top:159%}.s44{left:79%;top:182%}.s45{left:95%;top:171%}
.s46{left:13%;top:205%}.s47{left:36%;top:214%}.s48{left:55%;top:202%}.s49{left:72%;top:219%}.s50{left:87%;top:207%}

.constellation {
  position: absolute;
  overflow: visible;
  opacity: 0.78;
}
.constellation path {
  fill: none;
  stroke: var(--event-horizon);
  stroke-width: 1;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.5s ease-in-out;
}
.constellation circle { fill: var(--nebula-dust); opacity: 0.72; }
.constellation.drawn path { stroke-dashoffset: 0; }
.c-one { width: 31vw; left: 3vw; top: 16vh; transform: rotate(-8deg); }
.c-two { width: 26vw; right: 9vw; top: 54vh; transform: rotate(11deg); }
.c-three { width: 36vw; left: 47vw; top: 132vh; transform: rotate(-4deg); }

.orbit {
  position: absolute;
  border: 1px solid var(--event-horizon);
  opacity: 0.68;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 55% 85%, 55% 100%, 0 100%);
}
.orbit-1 { width: 44vw; height: 44vw; border-radius: 50%; left: 12vw; top: 8vh; animation: rotate 120s linear infinite; }
.orbit-2 { width: 34vw; height: 34vw; border-radius: 7vw; right: 10vw; top: 86vh; animation: rotate 90s linear infinite reverse; }
.orbit-3 { width: 50vw; height: 28vw; border-radius: 50%; left: 31vw; top: 218vh; animation: rotate 60s linear infinite; }
.orbit-4 { width: 28vw; height: 28vw; border-radius: 18% 50% 18% 50%; left: 6vw; top: 382vh; animation: rotate 120s linear infinite reverse; }

.ghost {
  position: absolute;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(12rem, 28vw, 25rem);
  line-height: 0.75;
  color: var(--star-white);
  opacity: 0.06;
  white-space: nowrap;
  transform: rotate(-8deg);
  animation: drift 60s var(--ease) infinite alternate;
}
.ghost-void { left: 48vw; top: 35vh; }
.ghost-name { left: -6vw; top: 250vh; transform: rotate(11deg); animation-delay: -20s; }
.ghost-inside { right: -22vw; top: 420vh; transform: rotate(-5deg); animation-delay: -35s; }

main { z-index: 10; }

.zone {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 12vh 0;
  isolation: isolate;
}
.zone:nth-child(even) { background: linear-gradient(90deg, transparent, rgba(26,26,34,0.42) 38%, transparent); }

.zone-content {
  max-width: 55vw;
  position: relative;
  z-index: 11;
}
.zone-content.left { margin-left: 15vw; margin-right: auto; }
.zone-content.right { margin-left: auto; margin-right: 15vw; }
.zone-content.final { max-width: 50vw; }

.kicker, .annotation {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meridian-gray);
}
.kicker { margin: 0 0 5vh; }

h1, h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.94;
  color: var(--star-white);
  max-width: 11ch;
}

.copy, .aside {
  font-size: clamp(18px, 1.75vw, 20px);
  line-height: 1.72;
  letter-spacing: 0.01em;
  font-weight: 300;
  max-width: 31rem;
  color: var(--star-white);
}
.copy { margin: 12vh 0 0; }
.aside { margin: 3vh 0 0 7vw; color: var(--nebula-dust); }

.annotation {
  position: absolute;
  z-index: 4;
  color: var(--nebula-dust);
  opacity: 0.54;
}
.a1 { left: 43%; top: 23%; }
.a2 { left: 11%; top: 68%; transform: rotate(-7deg); }
.a3 { right: 12%; top: 18%; }
.a4 { left: 42%; bottom: 20%; transform: rotate(5deg); }
.a5 { left: 18%; top: 18%; }
.a6 { right: 9%; bottom: 24%; transform: rotate(-6deg); }

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), color 350ms var(--ease);
}
.zone.visible .reveal { opacity: 1; transform: translateY(0); }
.zone.visible .reveal:nth-child(1) { transition-delay: 0ms; }
.zone.visible .reveal:nth-child(2) { transition-delay: 120ms; }
.zone.visible .reveal:nth-child(3) { transition-delay: 240ms; }
.zone.visible .reveal:nth-child(4) { transition-delay: 360ms; }

.star-nav {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform-style: preserve-3d;
}
.nav-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--meridian-gray);
  opacity: 0.34;
  box-shadow: 0 0 0 1px rgba(58,58,66,0.8), 0 0 12px transparent;
  transition: opacity 300ms var(--ease), background-color 300ms var(--ease), transform 220ms var(--ease), box-shadow 300ms var(--ease);
}
.nav-dot:hover, .nav-dot.active {
  opacity: 1;
  background: var(--halo);
  box-shadow: 0 0 0 1px var(--event-horizon), 0 0 18px rgba(200,200,192,0.52);
}

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes drift { from { translate: -20px 0; } to { translate: 20px 0; } }

@media (max-width: 760px) {
  .zone-content, .zone-content.final { max-width: 76vw; }
  .zone-content.left, .zone-content.right { margin-left: 14vw; margin-right: 8vw; }
  .copy { margin-top: 9vh; }
  .aside { margin-left: 0; }
  .constellation { width: 62vw; }
  .orbit-1, .orbit-2, .orbit-3, .orbit-4 { width: 76vw; height: 76vw; }
}

/* Design compliance tokens: — like "47°21'N" (Google IntersectionObserver lines literally themselves "discovered" IntersectionObserver` `.visible` scroll-triggered reveals (stagger entries dots each gets `data-zone` attribute Grotesk's geometric authority creates temporal collision Renaissance calligraphy meets space-age engineering other design corpus achieves. */