:root {
  --design-font-token: "IBM Plex Sans Condensed**";
  --obsidian: #07080D;
  --porcelain: #F4F1E8;
  --violet: #5B2D8F;
  --cyan: #25E4FF;
  --vermilion: #F04438;
  --graphite: #2A2E3A;
  --pollen: #D8FF4F;
  --seam-x: 50vw;
  --pointer-y: 50vh;
  --bend: 0px;
  --polarity: 0;
  --scene: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--porcelain);
  font-family: "Commissioner", sans-serif;
  overflow-x: hidden;
}

.chamber {
  min-height: 400vh;
  background:
    radial-gradient(circle at calc(var(--seam-x) + 12vw) var(--pointer-y), rgba(91,45,143,.36), transparent 28vw),
    linear-gradient(90deg, rgba(244,241,232,.08) 0, rgba(244,241,232,.04) calc(var(--seam-x) - 6vw), rgba(37,228,255,.08) calc(var(--seam-x) + 2vw), rgba(240,68,56,.07) 100%),
    var(--obsidian);
}

.noise, .scan-field, .apparatus, .argument-seam, .scene-index {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.noise {
  opacity: .19;
  mix-blend-mode: screen;
  background-image: repeating-linear-gradient(90deg, rgba(244,241,232,.04) 0 1px, transparent 1px 7px), repeating-linear-gradient(0deg, rgba(37,228,255,.03) 0 1px, transparent 1px 11px);
  mask-image: linear-gradient(90deg, #000, transparent 48%, #000);
}

.scan-field {
  opacity: .5;
  background: repeating-linear-gradient(-18deg, transparent 0 34px, rgba(37,228,255,.07) 35px, transparent 36px 84px);
  transform: translateX(calc((var(--polarity) - .5) * 20px));
}

.argument-seam {
  left: calc(var(--seam-x) - 3px);
  right: auto;
  width: 6px;
  filter: drop-shadow(0 0 18px var(--cyan));
  transform: skewY(calc(var(--bend) * .05deg));
  z-index: 4;
}

.seam-core {
  height: 100%;
  background: linear-gradient(var(--cyan), var(--pollen) 48%, var(--vermilion));
  clip-path: polygon(45% 0, 100% 18%, 42% 40%, 82% 62%, 30% 100%, 0 100%, 54% 60%, 12% 38%, 62% 17%, 15% 0);
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pollen);
  box-shadow: 0 0 16px var(--pollen);
  animation: filings 5s ease-in-out infinite;
}
.p1 { top: 18%; left: -24px; animation-delay: -.8s; }
.p2 { top: 38%; left: 20px; background: var(--cyan); }
.p3 { top: 63%; left: -18px; background: var(--vermilion); animation-delay: -2s; }
.p4 { top: 82%; left: 14px; animation-delay: -3s; }

@keyframes filings {
  0%, 100% { transform: translate(0,0) scale(.8); opacity: .35; }
  50% { transform: translate(calc(var(--bend) * .8), -22px) scale(1.35); opacity: 1; }
}

.apparatus { z-index: 2; opacity: .92; }
.proof-grid path { stroke: rgba(244,241,232,.16); stroke-width: 1; fill: none; }
.shield-system { transform-origin: 71% 46%; transform: rotate(calc(var(--polarity) * 80deg + var(--scene) * 34deg)); transition: transform .35s ease-out; }
.shield-disc { fill: rgba(42,46,58,.62); stroke: var(--porcelain); stroke-width: 1.4; }
.shield-ring { fill: none; stroke-width: 2; stroke-dasharray: 18 16; }
.ring-a { stroke: var(--cyan); filter: url(#softGlow); }
.ring-b { stroke: var(--vermilion); stroke-dasharray: 6 12; }
.shield-cut { fill: none; stroke: var(--violet); stroke-width: 9; opacity: .55; }
.spear-system { transform-origin: 8% 75%; transform: scaleX(calc(1 + var(--polarity) * .18)) rotate(calc((var(--polarity) - .5) * 4deg)); transition: transform .28s ease-out; }
.spear-line, .spear-caliper { fill: none; stroke: var(--cyan); stroke-width: 4; filter: url(#softGlow); }
.spear-shadow { fill: none; stroke: var(--vermilion); stroke-width: 7; opacity: .55; transform: translate(13px, 13px); }
.spear-head { fill: var(--cyan); stroke: var(--porcelain); stroke-width: 1; }
.collision-beam { fill: none; stroke: var(--pollen); stroke-width: 3; stroke-dasharray: 22 20; opacity: calc(.25 + var(--scene) * .18); filter: url(#softGlow); }

.scene-index {
  inset: 32px auto auto 32px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 180px;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: 12px;
  pointer-events: auto;
}
.scene-index a { color: rgba(244,241,232,.56); text-decoration: none; transition: color .25s, transform .25s; }
.scene-index a.active, .scene-index a:hover { color: var(--pollen); transform: translateX(8px); }

main { position: relative; z-index: 5; }
.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.split-title {
  position: absolute;
  top: 14vh;
  left: 5vw;
  right: 4vw;
  font-family: "Syne", sans-serif;
  font-size: clamp(78px, 16vw, 252px);
  line-height: .78;
  font-weight: 800;
  letter-spacing: -.08em;
  text-transform: lowercase;
}
.title-left { color: var(--porcelain); clip-path: inset(0 calc(100vw - var(--seam-x)) 0 0); }
.title-right {
  color: transparent;
  -webkit-text-stroke: 2px var(--cyan);
  text-shadow: 8px 0 0 rgba(240,68,56,.75), -4px 0 24px rgba(37,228,255,.45);
  display: inline-block;
  transform: scaleX(-1) translateX(calc(var(--polarity) * -22px));
}

.hanja-block {
  position: absolute;
  right: 8vw;
  top: 16vh;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(80px, 11vw, 190px);
  color: rgba(244,241,232,.1);
  writing-mode: vertical-rl;
}
.hanja-block span:first-child { color: rgba(37,228,255,.32); transform: translateY(calc(var(--polarity) * -34px)); display: inline-block; }
.hanja-block span:nth-child(2) { color: rgba(240,68,56,.34); transform: translateY(calc(var(--polarity) * 28px)); display: inline-block; }
.hanja-block small { font-family: "Commissioner", sans-serif; font-size: 11px; letter-spacing: .22em; color: var(--porcelain); opacity: .55; }

.proof-plate {
  position: absolute;
  border: 1px solid rgba(244,241,232,.22);
  background: linear-gradient(135deg, rgba(244,241,232,.13), rgba(42,46,58,.28));
  backdrop-filter: blur(12px);
  padding: clamp(22px, 4vw, 54px);
  max-width: 520px;
  box-shadow: 0 0 0 1px rgba(37,228,255,.08) inset, 0 30px 90px rgba(0,0,0,.35);
  clip-path: polygon(0 0, 92% 0, 100% 18%, 100% 100%, 9% 100%, 0 82%);
}
.proof-plate h1, .proof-plate h2 {
  margin: 0 0 18px;
  font-family: "Syne", sans-serif;
  font-size: clamp(46px, 7vw, 112px);
  line-height: .82;
  letter-spacing: -.06em;
}
.proof-plate p { line-height: 1.55; color: rgba(244,241,232,.78); }
.kicker { margin: 0 0 18px; font-family: "IBM Plex Sans Condensed", sans-serif; color: var(--cyan); letter-spacing: .22em; font-size: 13px; text-transform: uppercase; }
.plate-a { left: 12vw; bottom: 12vh; transform: rotate(-2deg); }
.plate-b { right: 10vw; top: 20vh; transform: rotate(4deg); }
.plate-c { left: 9vw; top: 18vh; transform: rotate(-5deg); }
.io-line { margin-top: 22px; font-family: "IBM Plex Sans Condensed", sans-serif; color: var(--pollen); letter-spacing: .08em; }
.io-line span { display: inline-block; width: 80px; height: 1px; background: var(--vermilion); margin: 0 12px 4px; }
.rotated-label, .arc-label {
  position: absolute;
  font-family: "IBM Plex Sans Condensed", sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cyan);
}
.label-claim { left: 38vw; bottom: 30vh; transform: rotate(-24deg); }

.binary-lamps { display: flex; gap: 22px; margin-top: 28px; }
.binary-lamps span {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  font-family: "Syne", sans-serif; font-size: 36px; color: var(--obsidian);
  background: var(--pollen); box-shadow: 0 0 28px var(--pollen);
}
.binary-lamps span + span { background: var(--cyan); box-shadow: 0 0 28px var(--cyan); }
.arc-label { right: 12vw; bottom: 14vh; transform: rotate(19deg); color: var(--vermilion); }
.massive-word {
  position: absolute;
  left: -5vw;
  bottom: 7vh;
  font-family: "Syne", sans-serif;
  font-size: clamp(110px, 22vw, 330px);
  font-weight: 800;
  letter-spacing: -.09em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(240,68,56,.55);
  transform: skewX(-11deg);
}

.moire-panel {
  position: absolute;
  inset: 8vh 12vw;
  background: repeating-linear-gradient(64deg, rgba(37,228,255,.25) 0 2px, transparent 2px 8px), repeating-linear-gradient(116deg, rgba(240,68,56,.22) 0 2px, transparent 2px 9px);
  mix-blend-mode: screen;
  clip-path: polygon(13% 0, 100% 18%, 83% 100%, 0 77%);
  animation: vibrate 1.2s steps(2) infinite;
}
@keyframes vibrate { 50% { transform: translate(8px, -5px); filter: hue-rotate(30deg); } }
.both-stack {
  position: absolute;
  right: 6vw;
  bottom: 11vh;
  font-family: "Syne", sans-serif;
  font-size: clamp(72px, 13vw, 210px);
  font-weight: 800;
  line-height: .72;
  letter-spacing: -.08em;
}
.both-stack span { display: block; color: transparent; -webkit-text-stroke: 2px var(--porcelain); }
.both-stack span + span { transform: translateX(-9vw); -webkit-text-stroke-color: var(--vermilion); }
.both-stack em { color: var(--pollen); font-style: normal; mix-blend-mode: difference; }
.theorem-strip {
  position: absolute;
  left: 18vw;
  bottom: 14vh;
  padding: 10px 22px;
  background: var(--porcelain);
  color: var(--obsidian);
  font-family: "IBM Plex Sans Condensed", sans-serif;
  letter-spacing: .16em;
  transform: rotate(-8deg);
}

.output-drift {
  position: absolute;
  left: 18vw;
  top: 20vh;
  max-width: 680px;
  transform: translateX(calc((var(--polarity) - .5) * 15vw));
  transition: transform .24s ease-out;
}
.output-drift h2 {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-size: clamp(84px, 16vw, 260px);
  line-height: .75;
  letter-spacing: -.1em;
  color: var(--porcelain);
  text-shadow: calc((var(--polarity) - .5) * 18px) 0 0 var(--cyan), calc((.5 - var(--polarity)) * 18px) 0 0 var(--vermilion);
}
.output-drift p:not(.kicker) { font-size: 18px; max-width: 520px; line-height: 1.55; color: rgba(244,241,232,.76); }
button {
  margin-top: 28px;
  border: 1px solid var(--pollen);
  color: var(--pollen);
  background: rgba(7,8,13,.7);
  padding: 14px 22px;
  font: 500 13px "IBM Plex Sans Condensed", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
}
.terminal-inscription {
  position: absolute;
  right: 5vw;
  bottom: 8vh;
  display: grid;
  gap: 10px;
  color: var(--cyan);
  font-family: "IBM Plex Sans Condensed", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .scene-index { inset: 16px 16px auto 16px; width: auto; flex-direction: row; flex-wrap: wrap; font-size: 10px; }
  .proof-plate { left: 6vw !important; right: 6vw !important; max-width: none; }
  .plate-b, .plate-c { top: 28vh; }
  .hanja-block { opacity: .55; right: 2vw; }
  .output-drift { left: 7vw; right: 7vw; }
}