:root {
  /* Design vocabulary: from Interactions should feel like manipulating an antique cosmic instrument: hover states can rotate a dial by a few degrees; IntersectionObserver` to trigger **fade-reveal** fade-reveal fade-revea fade-reveall states: diagrams brighten from smoked ruby into parchment cream. */
  --burgundy: #3B0715;
  --oxide: #6E1230;
  --cream: #F6E7C8;
  --brass: #C99A4A;
  --ruby: #941B44;
  --core: #12070A;
  --blue: #BFD7E3;
  --line-opacity: .62;
  --chamber-pad: clamp(1.25rem, 4vw, 5rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: "Noto Sans", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 45%, #6E1230 0%, #3B0715 45%, #12070A 100%);
  overflow-x: hidden;
}

.enamel-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  opacity: .22;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(246, 231, 200, .08) 0 1px, transparent 1.8px),
    linear-gradient(115deg, rgba(201, 154, 74, .05), transparent 28%, rgba(18, 7, 10, .13) 70%),
    repeating-linear-gradient(90deg, rgba(246, 231, 200, .018) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.spacetime-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 600vh;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.geodesic,
.geodesic-shadow {
  fill: none;
  stroke-linecap: round;
}

.geodesic-shadow {
  stroke: #12070A;
  stroke-width: 16;
  opacity: .45;
  filter: blur(8px);
}

.geodesic {
  stroke: #F6E7C8;
  stroke-width: 3.4;
  opacity: .88;
  filter: drop-shadow(0 0 10px rgba(246, 231, 200, .18));
}

.global-orbits ellipse {
  fill: none;
  stroke: #C99A4A;
  stroke-width: 1.1;
  stroke-dasharray: 12 18;
  opacity: .34;
}

.coordinate-nav {
  position: fixed;
  right: clamp(.8rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  gap: .7rem;
}

.coordinate-nav button {
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid rgba(246, 231, 200, .34);
  border-radius: 50%;
  color: rgba(246, 231, 200, .72);
  background: rgba(59, 7, 21, .6);
  font: 600 .68rem/1 "IBM Plex Mono", monospace;
  cursor: pointer;
  transition: border-color .35s ease, color .35s ease, background .35s ease, transform .35s ease;
}

.coordinate-nav button.active,
.coordinate-nav button:hover {
  color: #12070A;
  background: #F6E7C8;
  border-color: #C99A4A;
  transform: rotate(-12deg) scale(1.08);
}

.chamber {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: var(--chamber-pad);
  overflow: hidden;
  border-top: 1px solid rgba(201, 154, 74, .13);
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border: 1px solid rgba(246, 231, 200, .08);
  border-radius: 3rem;
  pointer-events: none;
  box-shadow: inset 0 0 50px rgba(18, 7, 10, .28);
}

.act-label,
.plaque,
.equation-ribbon,
.final-mark,
.tick,
.enamel-plate {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.act-label {
  color: #C99A4A;
  font-size: clamp(.65rem, 1.2vw, .86rem);
}

h1,
h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .82;
  color: #F6E7C8;
  text-shadow: 0 18px 48px rgba(18, 7, 10, .6);
}

h1 { font-size: clamp(4.8rem, 18vw, 17rem); }
h2 { font-size: clamp(3.5rem, 11vw, 10rem); max-width: 10ch; }

p {
  margin: 1.4rem 0 0;
  color: rgba(246, 231, 200, .78);
  font-size: clamp(1rem, 1.45vw, 1.34rem);
  line-height: 1.65;
  max-width: 38rem;
  font-weight: 300;
}

.hero {
  min-height: 112vh;
  place-items: center;
  text-align: center;
}

.hero-content { position: relative; z-index: 3; }

.plaque {
  display: inline-flex;
  gap: .8rem;
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  color: rgba(246, 231, 200, .8);
  background: rgba(18, 7, 10, .24);
  border: 1px solid rgba(201, 154, 74, .42);
  border-radius: 999px;
  font-size: .68rem;
}

.plaque span { color: #BFD7E3; }
.lead { margin-inline: auto; }

.hero-orbit {
  position: absolute;
  width: min(82vw, 980px);
  aspect-ratio: 1.62;
  border-radius: 50%;
  z-index: 2;
  transform: rotate(-8deg);
}

.orbital-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(246, 231, 200, .45);
  border-radius: 50%;
  box-shadow: 0 0 42px rgba(201, 154, 74, .12);
}

.ring-b { inset: 12% 5%; transform: rotate(18deg); border-color: rgba(201, 154, 74, .42); }

.pearl {
  position: absolute;
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: #F6E7C8;
  box-shadow: 0 0 18px #F6E7C8;
  animation: pearlGlow 3s ease-in-out infinite alternate;
}

.pearl-one { left: 9%; top: 43%; }
.pearl-two { right: 16%; top: 23%; animation-delay: .6s; }
.pearl-three { left: 58%; bottom: 8%; animation-delay: 1.2s; background: #C99A4A; }

.singularity-core {
  position: absolute;
  right: 14vw;
  bottom: 12vh;
  width: 9.5rem;
  aspect-ratio: 1;
  border: 1px solid rgba(246, 231, 200, .32);
  border-radius: 50%;
  background: radial-gradient(circle, #12070A 0 34%, #941B44 36% 38%, transparent 40%), rgba(59, 7, 21, .5);
}

.singularity-core span {
  position: absolute;
  inset: 10%;
  border-top: 1px solid rgba(201, 154, 74, .65);
  border-radius: 50%;
  transform: rotate(calc(var(--i, 1) * 22deg));
}

.singularity-core span:nth-child(1) { --i: 1; }
.singularity-core span:nth-child(2) { --i: 2; }
.singularity-core span:nth-child(3) { --i: 3; }
.singularity-core span:nth-child(4) { --i: 4; }
.singularity-core strong { position: absolute; inset: 0; display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; color: #C99A4A; }

.cone,
.engine { grid-template-columns: .95fr 1.05fr; gap: 4vw; }
.lens,
.twin { grid-template-columns: 1.05fr .95fr; gap: 4vw; }
.return { place-items: center; text-align: center; }

.act-copy {
  position: relative;
  max-width: 48rem;
  padding: clamp(1rem, 2vw, 2rem);
}

.equation-ribbon {
  display: inline-block;
  margin-top: 2rem;
  padding: .8rem 1.2rem;
  border: 1px solid rgba(201, 154, 74, .46);
  border-radius: 999px 45% 999px 45%;
  color: #C99A4A;
  background: linear-gradient(90deg, rgba(18, 7, 10, .5), rgba(148, 27, 68, .22));
  font-size: .72rem;
}

.light-cone-diagram {
  position: relative;
  min-height: min(72vh, 620px);
  border: 1px solid rgba(246, 231, 200, .22);
  border-radius: 44% 44% 2rem 2rem;
  background: radial-gradient(circle at 50% 52%, rgba(148, 27, 68, .42), transparent 38%), rgba(18, 7, 10, .16);
  overflow: hidden;
}

.cone-half {
  position: absolute;
  top: 10%;
  bottom: 10%;
  width: 48%;
  border: 1px solid rgba(246, 231, 200, .62);
  opacity: .84;
}

.cone-half.left {
  left: 4%;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  background: repeating-linear-gradient(28deg, transparent 0 25px, rgba(246, 231, 200, .1) 26px 27px);
}

.cone-half.right {
  right: 4%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: repeating-linear-gradient(-28deg, transparent 0 25px, rgba(191, 215, 227, .1) 26px 27px);
}

.cone-axis {
  position: absolute;
  left: 50%;
  top: 5%;
  bottom: 5%;
  border-left: 1px dashed rgba(201, 154, 74, .7);
}

.tick { position: absolute; color: #BFD7E3; font-size: .72rem; }
.t1 { left: 50%; top: 49%; }
.t2 { left: 52%; top: 12%; }
.t3 { right: 11%; top: 52%; }

.gravity-lens svg { width: min(78vw, 620px); filter: drop-shadow(0 34px 80px rgba(18, 7, 10, .58)); }
.rays path { fill: none; stroke: #BFD7E3; stroke-width: 2; opacity: .78; }
.facets polygon { fill: rgba(246, 231, 200, .08); stroke: #C99A4A; stroke-width: 1.4; transition: transform .5s ease, fill .5s ease; transform-origin: 260px 260px; }
.gravity-lens:hover .facets polygon { fill: rgba(246, 231, 200, .14); }
.lens-core { stroke: #F6E7C8; stroke-width: 1; }
.event-horizon { fill: none; stroke: #941B44; stroke-width: 2; stroke-dasharray: 7 10; }

.engine-frame {
  position: relative;
  width: min(78vw, 610px);
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid rgba(246, 231, 200, .32);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 7, 10, .45) 0 24%, rgba(110, 18, 48, .35) 25% 46%, transparent 47%);
  box-shadow: inset 0 0 80px rgba(18, 7, 10, .45), 0 0 0 24px rgba(201, 154, 74, .04);
}

.calibration-ring,
.rotor-orbit {
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(201, 154, 74, .62);
  border-radius: 50%;
}

.rotor-orbit { inset: 22%; animation: rotateInstrument 18s linear infinite; border-style: solid; border-color: rgba(246, 231, 200, .38); }
.orbit-two { inset: 34%; animation-duration: 11s; animation-direction: reverse; }
.rotor-orbit span { position: absolute; left: 50%; top: -.35rem; width: .7rem; height: .7rem; border-radius: 50%; background: #F6E7C8; box-shadow: 0 0 20px #F6E7C8; }
.enamel-plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 1rem 1.2rem; border: 1px solid rgba(201, 154, 74, .55); border-radius: 1.2rem; background: #3B0715; color: #C99A4A; font-size: .78rem; }
.metric-lines i { position: absolute; left: 50%; top: 50%; width: 42%; border-top: 1px solid rgba(246, 231, 200, .13); transform-origin: left; transform: rotate(calc(var(--r) * 1deg)); }
.metric-lines i:nth-child(1) { --r: 18; } .metric-lines i:nth-child(2) { --r: 74; } .metric-lines i:nth-child(3) { --r: 130; } .metric-lines i:nth-child(4) { --r: 214; } .metric-lines i:nth-child(5) { --r: 300; }

.balcony-diagram { position: relative; min-height: 430px; }
.balcony-diagram svg { width: 100%; height: 360px; overflow: visible; }
.voyage,
.balcony-rail { fill: none; stroke: #F6E7C8; stroke-width: 2; stroke-linecap: round; }
.voyage { stroke: #BFD7E3; stroke-dasharray: 12 14; }
.balcony-rail { stroke: #C99A4A; opacity: .8; }
.clock { position: absolute; top: 225px; width: 7.5rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(246, 231, 200, .44); background: radial-gradient(circle, rgba(18, 7, 10, .8), rgba(110, 18, 48, .42)); display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; color: #C99A4A; }
.clock span { position: absolute; width: 1px; height: 38%; background: #F6E7C8; transform-origin: bottom; bottom: 50%; animation: rotateInstrument 8s linear infinite; }
.clock.home { left: 6%; }
.clock.voyager { right: 6%; transform: scale(.86); }
.clock.voyager span { animation-duration: 13s; }

.return-vector { position: relative; width: min(78vw, 760px); height: 240px; margin-bottom: 4rem; }
.vector-line { position: absolute; left: 8%; right: 10%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #F6E7C8, #C99A4A); transform: rotate(-11deg); box-shadow: 0 0 22px rgba(246, 231, 200, .34); }
.vector-head { position: absolute; right: 8%; top: 36%; width: 3rem; height: 3rem; border-top: 2px solid #C99A4A; border-right: 2px solid #C99A4A; transform: rotate(34deg); }
.return-pearl { position: absolute; left: 9%; top: 45%; width: .9rem; height: .9rem; border-radius: 50%; background: #BFD7E3; box-shadow: 0 0 24px #BFD7E3; animation: travelVector 4s ease-in-out infinite; }
.final-mark { margin-top: 2rem; color: #C99A4A; font-size: .72rem; }

.revealable {
  opacity: .18;
  filter: blur(10px);
  transform: translateY(38px) scale(.985);
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}

.chamber.active .revealable,
.revealable.in-view {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.instrument-dial,
[data-dial] { transition: transform .55s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease; }
[data-dial]:hover { transform: rotate(4deg) scale(1.025); border-color: #C99A4A; box-shadow: 0 0 42px rgba(201, 154, 74, .14); }

@keyframes pearlGlow { to { transform: scale(1.35); opacity: .68; } }
@keyframes rotateInstrument { to { transform: rotate(360deg); } }
@keyframes travelVector { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(min(58vw, 560px)); } }

@media (max-width: 820px) {
  .cone,
  .engine,
  .lens,
  .twin { grid-template-columns: 1fr; }
  .coordinate-nav { right: .45rem; }
  .chamber { padding-right: 3.4rem; }
  .singularity-core { right: 4rem; width: 6.5rem; }
  h1 { font-size: clamp(4rem, 21vw, 8rem); }
}