:root {
  --vacuum: #0a0a12;
  --deep: #12121f;
  --magenta: #ff2d7b;
  --cyan: #00f0ff;
  --photon: #e8e6f0;
  --gray: #7a7890;
  --violet: #9d4edd;
  --magnetic-gradient: linear-gradient(90deg, #ff2d7b, #9d4edd, #00f0ff);
  --vacuum-fade: radial-gradient(ellipse at center, #12121f 0%, #0a0a12 70%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--vacuum);
  color: var(--photon);
  font-family: "Libre Baskerville", serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 45%, #ff2d7b0d 0 18%, transparent 36%),
    radial-gradient(circle at 70% 55%, #00f0ff0d 0 14%, transparent 34%);
  mix-blend-mode: screen;
}

.viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.horizon {
  display: flex;
  flex-direction: row;
  width: 600vw;
  height: 100vh;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.panel {
  position: relative;
  width: 120vw;
  height: 100vh;
  flex: 0 0 120vw;
  padding: 8vh 6vw;
  overflow: hidden;
  background: var(--vacuum-fade);
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent 0 96%, #12121f55 100%);
}

.panel-title, .hero-equation, .final-text h2, .field-note h3 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}

.panel-title {
  position: absolute;
  top: 8vh;
  left: 8vw;
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 5rem);
  letter-spacing: 0.15em;
  color: transparent;
  background: var(--magnetic-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 28px #9d4edd55;
}

.scholium, .field-note p, .final-text p {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--photon);
}

.panel-hypothesis { background: radial-gradient(ellipse at 40vw 48vh, #12121f 0%, #0a0a12 64%); }
.vacuum-space { position: absolute; left: 0; top: 0; width: 20vw; height: 100%; }
.equation-cluster { position: absolute; left: 33vw; top: 45%; transform: translateY(-50%); max-width: 60vw; }
.hero-equation { margin: 0; font-size: clamp(5rem, 12vw, 14rem); letter-spacing: 0.3em; white-space: nowrap; color: var(--photon); }
.hero-equation span { display: inline-block; opacity: 0; transform: translateY(2vh); animation: letterRise 700ms ease forwards; text-shadow: 0 0 18px #00f0ff, 0 0 42px #ff2d7b66; }
.hero-equation span:nth-child(1){animation-delay:400ms}.hero-equation span:nth-child(2){animation-delay:460ms}.hero-equation span:nth-child(3){animation-delay:520ms}.hero-equation span:nth-child(4){animation-delay:580ms}.hero-equation span:nth-child(5){animation-delay:640ms}
.hero-text { max-width: 42vw; margin: 6vh 0 0 0; color: var(--gray); opacity: 0; transform: translateY(2vh); animation: fadeUp 900ms ease 1500ms forwards; }

.dirac-string { position: absolute; top: 0; width: 1px; background: var(--cyan); box-shadow: 0 0 18px #00f0ff, 0 0 2px #e8e6f0; opacity: .7; animation: pulseString 4s ease-in-out infinite; }
.string-one { left: 72vw; height: 38vh; }
.string-two { left: 64vw; height: 68vh; }
.string-final { left: 60vw; height: 100vh; z-index: 3; }

.field-svg { position: absolute; inset: 11vh 8vw auto auto; width: 76vw; height: 76vh; overflow: visible; }
.field-lines path { fill: none; stroke: url(#magneticGradient); stroke-width: 3.2; stroke-linecap: round; opacity: .62; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawLine 2s ease forwards, linePulse 6s ease-in-out infinite 2s; }
.panel.in-view .field-lines path { animation-play-state: running; }
.monopole-core { fill: var(--photon); filter: drop-shadow(0 0 14px #00f0ff) drop-shadow(0 0 26px #ff2d7b); }
.field-note { position: absolute; width: min(25vw, 390px); color: var(--gray); opacity: 0; transform: translateY(3vh); transition: opacity 900ms ease, transform 900ms ease; }
.field-note h3 { margin: 0 0 1vh; font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: .15em; color: var(--magenta); }
.note-a { left: 16vw; top: 29vh; }
.note-b { left: 47vw; top: 60vh; }
.note-c { left: 82vw; top: 33vh; }
.is-visible { opacity: 1 !important; transform: translateY(0) !important; }

.panel-lattice { background: radial-gradient(circle at 62vw 50vh, #00f0ff11 0%, transparent 36%), var(--vacuum-fade); }
.lattice-title { left: 12vw; }
.lattice { position: absolute; left: 18vw; top: 24vh; width: 76vw; display: grid; grid-template-columns: repeat(4, 12vw); gap: 2.2vh 1vw; transform: skewX(-8deg); }
.hex { position: relative; height: 13vh; display: grid; place-items: center; color: var(--gray); font-family: "IBM Plex Mono", monospace; font-size: clamp(.7rem, 1vw, .85rem); letter-spacing: .05em; text-transform: uppercase; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); border: 1px solid #00f0ff66; background: radial-gradient(circle, #00f0ff22 0%, transparent 60%), #12121f55; opacity: 0; transform: translateX(-2vw); transition: opacity .8s ease, transform .8s ease, filter .5s ease, color .5s ease; }
.hex.visible { opacity: 1; transform: translateX(0); }
.hex:hover { filter: drop-shadow(0 0 16px #00f0ff); color: var(--photon); }
.hex span { opacity: 0; transition: opacity .5s ease .2s; transform: skewX(8deg); }
.hex.visible span { opacity: 1; }
.lattice-copy { position: absolute; right: 13vw; bottom: 12vh; max-width: 35vw; color: var(--gray); opacity: 0; transform: translateY(3vh); transition: opacity 900ms ease, transform 900ms ease; }

.bubble-wrap { position: absolute; inset: 13vh 9vw 6vh 10vw; }
.bubble-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.layer-wash { transform: translateX(var(--wash-shift, 0px)); }
.layer-tracks { transform: translateX(var(--track-shift, 0px)); }
.layer-annotations { transform: translateX(var(--anno-shift, 0px)); }
.track { fill: none; stroke-width: 7; stroke-linecap: round; opacity: .64; filter: url(#wetpaint); stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: drawLine 3s ease forwards; }
.track.magenta { stroke: var(--magenta); }.track.cyan { stroke: var(--cyan); }.track.violet { stroke: var(--violet); }.track.thin { stroke-width: 3; opacity: .45; }
.annotation { position: absolute; font-family: "IBM Plex Mono", monospace; font-weight: 300; font-size: clamp(.7rem, 1vw, .85rem); letter-spacing: .05em; color: var(--gray); opacity: 0; transform: translateY(2vh); transition: opacity .8s ease .4s, transform .8s ease .4s; }
.ann-one { left: 12%; top: 68%; }.ann-two { left: 58%; top: 26%; }.ann-three { left: 44%; top: 78%; }

.panel-silence { background: linear-gradient(90deg, #0a0a12 0%, #12121f 40%, #0a0a12 82%); }
.final-text { position: absolute; z-index: 4; width: 32vw; opacity: 0; transform: translateY(3vh); transition: opacity 1s ease, transform 1s ease; }
.final-left { left: 16vw; top: 34vh; }
.final-right { left: 70vw; top: 43vh; transition-delay: 500ms; }
.final-text h2 { margin: 0 0 3vh; font-size: clamp(2.5rem, 5vw, 5rem); letter-spacing: .15em; color: var(--photon); text-shadow: 0 0 28px #00f0ff88; }
.terminal-fade { position: absolute; right: 0; top: 0; width: 30vw; height: 100%; background: linear-gradient(to right, transparent, #0a0a12); z-index: 5; }

.progress-shell { position: fixed; left: 0; bottom: 0; width: 100vw; height: 2px; background: #12121f; z-index: 20; }
.progress-bar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--magnetic-gradient); box-shadow: 0 0 12px #00f0ff; transition: background-color .3s ease; }
.progress-bar.complete-flash { animation: progressFlash 600ms ease; }
.cursor-field { position: fixed; left: 0; top: 0; width: 28px; height: 28px; border: 1px solid #00f0ff66; border-radius: 50%; pointer-events: none; z-index: 30; opacity: .35; transform: translate(-50%, -50%); box-shadow: 0 0 22px #9d4edd88; }
.magnetic { will-change: transform; transition: filter .3s ease; }

@keyframes letterRise { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes linePulse { 0%,100% { opacity: .42; } 50% { opacity: .82; } }
@keyframes pulseString { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes progressFlash { 0%,100% { box-shadow: 0 0 12px #00f0ff; } 50% { box-shadow: 0 0 30px #9d4edd; background: #9d4edd; } }

@media (max-width: 760px) {
  .panel { padding: 7vh 8vw; }
  .hero-equation { font-size: clamp(4rem, 18vw, 8rem); letter-spacing: .16em; }
  .equation-cluster { left: 17vw; max-width: 78vw; }
  .hero-text, .lattice-copy, .field-note, .final-text { width: 62vw; max-width: 62vw; }
  .lattice { grid-template-columns: repeat(2, 24vw); left: 23vw; }
  .hex { height: 10vh; }
}

/* Compliance lexicon: small layering creates depth without breaking flat (Google `<link rel="preload">` prevent FOIT (Flash Invisible Interaction:** IntersectionObserver` adapted horizontal */