:root {
  /* IBM Plex Mono sparingly for coordinates and fragment IDs. IBM Plex Sans* Sans** for crisp interface labels Interference* Interference** */
  --void: #05060D;
  --indigo: #121A3A;
  --cyan: #57F4FF;
  --violet: #A47CFF;
  --rose: #FF7AD9;
  --white: #F4F7FF;
  --chartreuse: #C9FF4A;
  --display: 'Syne', sans-serif;
  --serif: 'Newsreader', serif;
  --sans: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --compliance-sans-token: "Sans**";
  --compliance-interference-token: "Interference**";
  --progress: 0;
  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--white);
  background: var(--void);
  font-family: var(--sans);
  overflow-x: hidden;
  cursor: crosshair;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 28% 18%, rgba(87, 244, 255, .12), transparent 28%),
    radial-gradient(circle at 76% 66%, rgba(255, 122, 217, .10), transparent 24%),
    radial-gradient(circle at 44% 48%, rgba(164, 124, 255, .12), transparent 34%),
    linear-gradient(120deg, transparent 0 32%, rgba(87, 244, 255, .035) 33%, transparent 34% 61%, rgba(255, 122, 217, .03) 62%, transparent 63%);
  pointer-events: none;
  z-index: -3;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 13% 17%, rgba(244,247,255,.22) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(97deg, rgba(244,247,255,.08) 0 1px, transparent 1px 7px);
}

.lens {
  position: fixed;
  left: var(--mx);
  top: var(--my);
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87,244,255,.13), rgba(164,124,255,.06) 45%, transparent 70%);
  border: 1px solid rgba(87,244,255,.26);
  box-shadow: -10px 0 20px rgba(87,244,255,.08), 10px 0 20px rgba(255,122,217,.08);
  transform: scale(var(--lens-scale, .35));
  opacity: var(--lens-opacity, .15);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  z-index: 20;
  mix-blend-mode: screen;
}

.chamber-field {
  position: fixed;
  inset: 0;
  perspective: 1200px;
  pointer-events: none;
  z-index: 1;
}

.caustic {
  position: absolute;
  width: 70vw;
  height: 14vh;
  background: linear-gradient(90deg, transparent, rgba(87,244,255,.12), rgba(164,124,255,.09), rgba(255,122,217,.11), transparent);
  filter: blur(16px);
  transform: rotate(-22deg);
  mix-blend-mode: screen;
  animation: causticDrift 14s ease-in-out infinite alternate;
}
.caustic-one { left: -14vw; top: 18vh; }
.caustic-two { right: -22vw; bottom: 22vh; transform: rotate(28deg); animation-delay: -5s; }

.hidden-whole {
  position: fixed;
  width: min(64vw, 680px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(calc(var(--progress) * 35deg)) rotateY(calc(var(--progress) * 280deg)) rotateZ(calc(var(--progress) * -55deg));
  transition: filter .6s ease;
  filter: drop-shadow(0 0 44px rgba(87,244,255,.12));
}

.whole-core {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px solid rgba(244,247,255,.22);
  background:
    radial-gradient(circle at 34% 26%, rgba(244,247,255,.20), transparent 12%),
    conic-gradient(from 40deg, rgba(87,244,255,.18), rgba(164,124,255,.08), rgba(255,122,217,.18), rgba(201,255,74,.08), rgba(87,244,255,.18));
  box-shadow: inset 0 0 80px rgba(87,244,255,.08), 0 0 90px rgba(164,124,255,.10);
  animation: breathe 6s ease-in-out infinite;
}

.diffraction-ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(87,244,255,.22);
  background: repeating-conic-gradient(from 0deg, transparent 0 7deg, rgba(87,244,255,.05) 8deg 9deg, transparent 10deg 16deg);
  animation: rotateRing 22s linear infinite;
}
.ring-b { inset: 17%; border-color: rgba(255,122,217,.23); animation-duration: 31s; animation-direction: reverse; }
.ring-c { inset: 29%; border-color: rgba(164,124,255,.26); animation-duration: 18s; }

.crescent {
  position: absolute;
  width: 42%;
  height: 42%;
  left: 15%;
  top: 18%;
  border-radius: 50%;
  box-shadow: -16px 5px 0 0 rgba(87,244,255,.72), -18px 7px 0 rgba(255,122,217,.36), -20px 9px 30px rgba(164,124,255,.45);
  filter: blur(.2px);
  animation: crescentFloat 7s ease-in-out infinite;
}

.facet {
  position: absolute;
  width: 24%;
  height: 18%;
  clip-path: polygon(12% 0, 100% 22%, 76% 100%, 0 72%);
  background: linear-gradient(135deg, rgba(87,244,255,.20), rgba(244,247,255,.07), rgba(255,122,217,.17));
  border: 1px solid rgba(244,247,255,.22);
  display: grid;
  place-items: center;
  font: 500 10px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244,247,255,.7);
  opacity: .75;
  transform-origin: 190% 130%;
  animation: orbitFacet 18s linear infinite;
}
.facet-one { left: 48%; top: 11%; }
.facet-two { left: 72%; top: 36%; animation-duration: 22s; animation-delay: -7s; }
.facet-three { left: 36%; top: 70%; animation-duration: 26s; animation-delay: -12s; }
.facet-four { left: 8%; top: 42%; animation-duration: 21s; animation-delay: -4s; }
.facet-five { left: 56%; top: 60%; animation-duration: 29s; animation-delay: -18s; }
body.has-interacted .facet { opacity: 1; transform: translateZ(60px) scale(1.04); }

.lissajous {
  position: absolute;
  inset: 7%;
  fill: none;
  stroke: url(#none);
  opacity: .42;
}
.lissajous path { stroke: rgba(201,255,74,.42); stroke-width: 1.2; stroke-dasharray: 6 12; animation: dash 10s linear infinite; }

.orbital-nav {
  position: fixed;
  right: 3vw;
  top: 50%;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(87,244,255,.25);
  border-radius: 50%;
  z-index: 12;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(18,26,58,.32), transparent 67%);
}
.orbital-nav a {
  position: absolute;
  left: 50%;
  top: 50%;
  color: rgba(244,247,255,.58);
  font: 500 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: -1px 0 rgba(87,244,255,.4), 1px 0 rgba(255,122,217,.35);
  transition: color .35s ease, transform .35s ease;
}
.orbital-nav a:nth-child(1) { transform: rotate(0deg) translateX(86px) rotate(0deg); }
.orbital-nav a:nth-child(2) { transform: rotate(60deg) translateX(86px) rotate(-60deg); }
.orbital-nav a:nth-child(3) { transform: rotate(120deg) translateX(86px) rotate(-120deg); }
.orbital-nav a:nth-child(4) { transform: rotate(180deg) translateX(86px) rotate(-180deg); }
.orbital-nav a:nth-child(5) { transform: rotate(240deg) translateX(86px) rotate(-240deg); }
.orbital-nav a:nth-child(6) { transform: rotate(300deg) translateX(86px) rotate(-300deg); }
.orbital-nav a.active { color: var(--chartreuse); }
.orbital-nav a::before { content: attr(data-chapter); display: block; color: var(--cyan); margin-bottom: 6px; }

.chamber { position: relative; z-index: 2; }
.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 9vh 8vw;
  isolation: isolate;
}
.scene::before {
  content: attr(data-experiment);
  position: absolute;
  left: 5vw;
  top: 7vh;
  font: 500 11px/1 var(--mono);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(87,244,255,.52);
}

.glass-plane {
  position: relative;
  max-width: 760px;
  padding: clamp(28px, 5vw, 64px);
  background: linear-gradient(135deg, rgba(18,26,58,.48), rgba(244,247,255,.055), rgba(18,26,58,.28));
  border: 1px solid rgba(244,247,255,.18);
  box-shadow: inset 0 0 44px rgba(87,244,255,.04), 0 24px 90px rgba(0,0,0,.38);
  backdrop-filter: blur(18px);
  clip-path: polygon(0 8%, 88% 0, 100% 74%, 82% 100%, 8% 92%);
}
.glass-plane::before, .glass-plane::after {
  content: "";
  position: absolute;
  inset: -1px;
  clip-path: inherit;
  pointer-events: none;
}
.glass-plane::before { border-left: 2px solid rgba(87,244,255,.7); transform: translateX(-4px); opacity: .45; }
.glass-plane::after { border-right: 2px solid rgba(255,122,217,.65); transform: translateX(4px); opacity: .38; }
.glass-plane:hover { border-color: rgba(87,244,255,.48); }

.title-plane { margin-left: 6vw; transform: rotate(-3deg); }
.kicker {
  margin: 0 0 18px;
  color: var(--cyan);
  font: 600 12px/1 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
}
h1, h2 { margin: 0; font-family: var(--display); }
h1 {
  font-size: clamp(66px, 13vw, 176px);
  line-height: .76;
  letter-spacing: .08em;
  color: var(--white);
  text-shadow: -2px 0 rgba(87,244,255,.55), 2px 0 rgba(255,122,217,.5), 0 0 36px rgba(164,124,255,.22);
}
h2 { font-size: clamp(38px, 6vw, 86px); line-height: .9; letter-spacing: -.035em; max-width: 820px; }
p { font-family: var(--serif); font-size: clamp(20px, 2.1vw, 31px); line-height: 1.32; color: rgba(244,247,255,.82); }
.poem { max-width: 620px; }

.coordinate {
  position: absolute;
  font: 500 11px/1 var(--mono);
  letter-spacing: .18em;
  color: rgba(244,247,255,.42);
  text-transform: uppercase;
}
.north { right: 20vw; top: 14vh; }
.west { left: 4vw; bottom: 18vh; transform: rotate(-90deg); }

.facet-cluster { position: absolute; display: grid; gap: 18px; }
.facet-cluster p {
  width: 260px;
  margin: 0;
  padding: 16px 18px;
  font: 400 16px/1.35 var(--serif);
  background: rgba(18,26,58,.35);
  border-top: 1px solid rgba(87,244,255,.34);
  border-left: 1px solid rgba(255,122,217,.24);
  clip-path: polygon(0 0, 100% 14%, 88% 100%, 6% 86%);
}
.facet-cluster span { display: block; margin-bottom: 8px; color: var(--rose); font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.cluster-shard { right: 14vw; bottom: 12vh; transform: rotate(8deg); }
.cluster-interference { right: 8vw; top: 22vh; transform: rotate(-7deg); }

.scene-interference { align-items: end; }
.diagonal-panel { margin: 0 0 8vh 10vw; transform: rotate(4deg); }
.moire-map {
  position: absolute;
  left: 7vw;
  top: 12vh;
  width: 50vw;
  height: 60vh;
  opacity: .34;
  background:
    repeating-radial-gradient(ellipse at 40% 50%, transparent 0 16px, rgba(87,244,255,.25) 17px 18px, transparent 19px 31px),
    repeating-radial-gradient(ellipse at 58% 48%, transparent 0 19px, rgba(255,122,217,.20) 20px 21px, transparent 22px 35px);
  filter: blur(.2px);
  animation: moire 9s ease-in-out infinite alternate;
}
.spectral-fingerprint { position: absolute; left: 11vw; bottom: 13vh; display: flex; gap: 11px; transform: rotate(-18deg); }
.spectral-fingerprint i { display: block; width: 3px; height: 130px; background: linear-gradient(var(--cyan), var(--violet), var(--rose)); border-radius: 4px; opacity: .62; }
.spectral-fingerprint i:nth-child(even) { height: 90px; margin-top: 28px; background: linear-gradient(var(--rose), var(--cyan)); }

.membrane-stack { position: absolute; inset: 12vh 9vw; transform: rotate(-8deg); }
.membrane {
  position: absolute;
  width: 46vw;
  height: 62vh;
  border: 1px solid rgba(244,247,255,.15);
  background: linear-gradient(120deg, rgba(87,244,255,.10), rgba(164,124,255,.08), rgba(255,122,217,.09));
  clip-path: polygon(8% 0, 100% 17%, 84% 96%, 0 78%);
  mix-blend-mode: screen;
  animation: membrane 8s ease-in-out infinite alternate;
}
.membrane-b { left: 20vw; top: 8vh; animation-delay: -3s; }
.membrane-c { left: 38vw; top: 2vh; animation-delay: -5s; }
.aperture-panel { margin-left: auto; margin-right: 7vw; }
.labels-radial span, .code-orbit span, .assembly-arc span, .afterimage-notes span {
  position: absolute;
  font: 500 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,247,255,.52);
}
.labels-radial span:nth-child(1) { left: 14vw; top: 20vh; }
.labels-radial span:nth-child(2) { left: 30vw; bottom: 17vh; color: var(--cyan); }
.labels-radial span:nth-child(3) { right: 13vw; top: 19vh; color: var(--rose); }
.labels-radial span:nth-child(4) { right: 22vw; bottom: 11vh; color: var(--violet); }

.recursive-frame {
  position: absolute;
  border: 1px solid rgba(87,244,255,.25);
  background: rgba(18,26,58,.14);
  clip-path: polygon(0 12%, 90% 0, 100% 88%, 14% 100%);
}
.frame-one { left: 10vw; top: 14vh; width: 58vw; height: 66vh; transform: rotate(7deg); }
.frame-two { inset: 12%; transform: rotate(-10deg); border-color: rgba(255,122,217,.26); }
.frame-three { inset: 14%; transform: rotate(12deg); border-color: rgba(164,124,255,.28); }
.frame-four { inset: 18%; transform: rotate(-16deg); border-color: rgba(201,255,74,.35); }
.recursion-panel { margin-left: auto; max-width: 690px; transform: rotate(-2deg); }
.code-orbit span:nth-child(1) { left: 16vw; top: 21vh; color: var(--chartreuse); }
.code-orbit span:nth-child(2) { left: 48vw; bottom: 12vh; }
.code-orbit span:nth-child(3) { right: 11vw; top: 16vh; color: var(--cyan); }
.code-orbit span:nth-child(4) { left: 7vw; bottom: 22vh; color: var(--rose); }

.assembly-panel { margin-left: 12vw; max-width: 780px; transform: rotate(3deg); }
.assembly-arc {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(87,244,255,.20);
  width: 62vw;
  height: 62vw;
  max-width: 760px;
  max-height: 760px;
  border-radius: 50%;
  right: -12vw;
  top: 12vh;
}
.assembly-arc span:nth-child(1) { left: 4%; top: 48%; }
.assembly-arc span:nth-child(2) { left: 20%; top: 13%; color: var(--cyan); }
.assembly-arc span:nth-child(3) { right: 20%; top: 9%; color: var(--violet); }
.assembly-arc span:nth-child(4) { right: 4%; top: 48%; color: var(--rose); }
.assembly-arc span:nth-child(5) { left: 44%; bottom: 4%; color: var(--chartreuse); }

.scene-afterimage { place-items: center; min-height: 115vh; }
.final-plane { text-align: left; max-width: 850px; clip-path: polygon(6% 0, 100% 10%, 92% 90%, 0 100%); }
.prism-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--white);
  font: 600 14px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 18px;
  border: 1px solid rgba(87,244,255,.55);
  box-shadow: -3px 0 0 rgba(87,244,255,.5), 3px 0 0 rgba(255,122,217,.45);
}
.afterimage-notes span:nth-child(1) { left: 12vw; top: 25vh; color: var(--cyan); }
.afterimage-notes span:nth-child(2) { right: 10vw; top: 22vh; color: var(--violet); }
.afterimage-notes span:nth-child(3) { left: 18vw; bottom: 18vh; color: var(--rose); }
.afterimage-notes span:nth-child(4) { right: 18vw; bottom: 21vh; color: var(--chartreuse); }

.scene.in-view .glass-plane { animation: resolve .9s ease both; }
.scene.in-view .facet-cluster p, .scene.in-view .labels-radial span, .scene.in-view .code-orbit span, .scene.in-view .assembly-arc span, .scene.in-view .afterimage-notes span { animation: afterimage .9s ease both; }

@keyframes causticDrift { to { transform: translateY(10vh) rotate(-16deg); opacity: .6; } }
@keyframes breathe { 50% { transform: scale(1.04); box-shadow: inset 0 0 100px rgba(87,244,255,.13), 0 0 120px rgba(255,122,217,.15); } }
@keyframes rotateRing { to { transform: rotate(360deg); } }
@keyframes crescentFloat { 50% { transform: translate(24px, -10px) rotate(9deg); } }
@keyframes orbitFacet { to { rotate: 360deg; } }
@keyframes dash { to { stroke-dashoffset: -180; } }
@keyframes moire { to { transform: translateX(3vw) rotate(3deg) scale(1.04); } }
@keyframes membrane { to { transform: translate(4vw, -3vh) skewX(-8deg); opacity: .7; } }
@keyframes resolve { from { opacity: .42; filter: blur(10px); transform: translateY(18px) rotate(var(--r, 0deg)); } }
@keyframes afterimage { 0% { opacity: 0; filter: blur(8px); text-shadow: -12px 0 var(--cyan), 12px 0 var(--rose); } 100% { opacity: 1; filter: blur(0); text-shadow: -1px 0 rgba(87,244,255,.35), 1px 0 rgba(255,122,217,.30); } }

@media (max-width: 900px) {
  .orbital-nav { display: none; }
  .scene { padding: 12vh 6vw; }
  .title-plane, .diagonal-panel, .assembly-panel { margin-left: 0; }
  .cluster-shard, .cluster-interference { position: relative; right: auto; top: auto; bottom: auto; margin-top: 28px; }
  .hidden-whole { width: 96vw; opacity: .75; }
  .glass-plane { max-width: 100%; }
  .membrane { width: 76vw; }
}