:root {
  --lacquer-void: #070608;
  --vellum-proof: #F2E6C9;
  --jade-inference: #2FA37A;
  --vermilion-contradiction: #E84A2A;
  --indigo-night: #1B2148;
  --lantern-gold: #F5C84C;
  --ash-ink: #3B3741;
  --display: "Fraunces", serif;
  --kr: "Noto Serif KR", serif;
  --ui: "Commissioner", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--vellum-proof);
  background:
    radial-gradient(circle at 18% 10%, rgba(47, 163, 122, .12), transparent 28rem),
    radial-gradient(circle at 82% 24%, rgba(27, 33, 72, .8), transparent 32rem),
    linear-gradient(130deg, var(--lacquer-void), #090814 44%, var(--lacquer-void));
  font-family: var(--ui);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(rgba(242, 230, 201, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 230, 201, .025) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

.proof-labyrinth {
  position: relative;
  z-index: 2;
}

.proof-chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  isolation: isolate;
  border-bottom: 1px solid rgba(242, 230, 201, .08);
}

.proof-chamber::before {
  content: attr(data-chamber);
  position: absolute;
  top: 2rem;
  right: 2rem;
  font: 600 .72rem/1 var(--ui);
  letter-spacing: .26em;
  color: rgba(242, 230, 201, .34);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.glyph-nav {
  position: fixed;
  z-index: 20;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.glyph-nav a {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  color: var(--vellum-proof);
  text-decoration: none;
  font: 700 1.1rem var(--ui);
  border: 1px solid rgba(242, 230, 201, .22);
  background: rgba(7, 6, 8, .58);
  border-radius: 50%;
  box-shadow: inset 0 0 1.2rem rgba(59, 55, 65, .55);
  transition: color .35s ease, border-color .35s ease, transform .35s ease, background .35s ease;
}

.glyph-nav a.active,
.glyph-nav a:hover {
  color: var(--lantern-gold);
  border-color: var(--jade-inference);
  background: rgba(27, 33, 72, .82);
  transform: translateX(.35rem) rotate(-8deg);
}

.cursor-seal {
  position: fixed;
  z-index: 30;
  width: 2.25rem;
  height: 2.25rem;
  pointer-events: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(232, 74, 42, .78);
  border: 2px solid rgba(232, 74, 42, .62);
  font: 700 .8rem var(--kr);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72) rotate(-13deg);
  transition: opacity .2s ease, transform .2s ease;
}

.cursor-seal.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-13deg);
}

.wordmark {
  font: 800 clamp(5.4rem, 15vw, 16rem)/.8 var(--display);
  letter-spacing: -.08em;
  margin: 0;
  align-self: center;
  justify-self: center;
  color: var(--vellum-proof);
  text-shadow: 0 0 3rem rgba(245, 200, 76, .1);
  transform: translateX(-4vw);
}

.chamber-label,
.proof-index {
  font-family: var(--ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--jade-inference);
}

.chamber-label {
  position: absolute;
  left: clamp(4rem, 10vw, 10rem);
  top: clamp(2rem, 8vh, 5rem);
  font-size: .74rem;
}

.giant-bracket {
  position: absolute;
  font: 800 min(52rem, 82vw)/.7 var(--display);
  color: transparent;
  -webkit-text-stroke: 2px var(--jade-inference);
  opacity: .72;
  transform-origin: center;
}

.bracket-left {
  left: 6vw;
  top: 3vh;
  z-index: -1;
  filter: drop-shadow(0 0 2rem rgba(47, 163, 122, .32));
}

.bracket-shadow {
  left: 11vw;
  top: 8vh;
  z-index: -2;
  -webkit-text-stroke-color: var(--ash-ink);
  opacity: .25;
}

.moon-halo {
  position: absolute;
  width: 30rem;
  height: 30rem;
  right: 12vw;
  top: 10vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 230, 201, .13), rgba(27, 33, 72, .22) 44%, transparent 68%);
}

.vellum-slip {
  position: relative;
  width: min(34rem, 78vw);
  padding: 1.35rem 1.5rem 1.5rem;
  color: var(--lacquer-void);
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 36%),
    var(--vellum-proof);
  border: 1px solid rgba(245, 200, 76, .42);
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(7, 6, 8, .08);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}

.vellum-slip::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border-left: 3px solid var(--jade-inference);
  border-top: 1px solid rgba(59, 55, 65, .3);
  pointer-events: none;
}

.vellum-slip h2 {
  margin: .6rem 0 .75rem;
  font: 700 clamp(1.8rem, 4vw, 3.7rem)/.95 var(--display);
  letter-spacing: -.045em;
}

.vellum-slip p {
  margin: 0;
  font: 500 clamp(.98rem, 1.4vw, 1.12rem)/1.6 var(--ui);
  color: var(--ash-ink);
}

.kr-text {
  font-family: var(--kr) !important;
}

.premise-gate .premise-slip {
  position: absolute;
  right: 9vw;
  bottom: 10vh;
  transform: rotate(-4deg) translateY(4rem);
}

.proof-chamber.in-view .premise-slip {
  transform: rotate(-1deg) translateY(0);
}

.small-lantern {
  left: 18vw;
  bottom: 15vh;
}

.therefore-lantern {
  position: absolute;
  width: 5rem;
  height: 5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--lacquer-void);
  background: radial-gradient(circle, #FFF0A2, var(--lantern-gold) 48%, rgba(245, 200, 76, .15) 70%);
  font: 800 2rem var(--display);
  box-shadow: 0 0 2rem rgba(245, 200, 76, .35), 0 0 7rem rgba(245, 200, 76, .15);
}

.assumption-pond {
  background: radial-gradient(ellipse at 50% 54%, rgba(27, 33, 72, .92), transparent 35rem);
}

.scope-rail {
  position: absolute;
  top: 9vh;
  bottom: 8vh;
  border-left: 2px solid rgba(47, 163, 122, .48);
  border-bottom: 2px solid rgba(47, 163, 122, .26);
}

.rail-one { left: 15vw; width: 24vw; }
.rail-two { left: 24vw; width: 29vw; top: 22vh; opacity: .6; }

.pond-orbit {
  position: absolute;
  width: min(66vw, 48rem);
  aspect-ratio: 1.8;
  left: 26vw;
  top: 25vh;
  border-radius: 50%;
  border: 1px solid rgba(242, 230, 201, .16);
  box-shadow: inset 0 0 5rem rgba(7, 6, 8, .8), 0 0 4rem rgba(47, 163, 122, .13);
}

.ink-pool {
  position: absolute;
  left: 31vw;
  top: 29vh;
  width: min(54vw, 39rem);
  aspect-ratio: 1.9;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, #030204, var(--lacquer-void) 54%, rgba(47, 163, 122, .18) 55%, transparent 72%);
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: rgba(242, 230, 201, .18);
  font: 800 clamp(3rem, 9vw, 8rem) var(--display);
  transform: rotate(-5deg);
}

.ink-pool span {
  transform: scaleY(-1);
}

.assumption-slip {
  margin: 10vh 0 0 13vw;
  transform: rotate(3deg);
}

.proof-stones {
  position: absolute;
  right: 8vw;
  bottom: 10vh;
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.proof-stone {
  border: 1px solid rgba(242, 230, 201, .2);
  color: var(--vellum-proof);
  background: radial-gradient(circle at 38% 24%, var(--ash-ink), #131018 68%);
  border-radius: 48% 52% 45% 55%;
  min-width: 4.8rem;
  min-height: 3.7rem;
  padding: .7rem 1rem;
  font: 700 1rem var(--ui);
  box-shadow: 0 .9rem 1.8rem rgba(0, 0, 0, .42);
  transition: transform .35s ease, color .35s ease, border-color .35s ease;
}

.proof-stone:nth-child(2) { transform: translateY(-1.2rem) rotate(-5deg); }
.proof-stone:nth-child(3) { transform: translateY(.45rem) rotate(4deg); }
.proof-stone:hover { color: var(--lantern-gold); border-color: var(--jade-inference); transform: translateY(-.8rem) rotate(-2deg); }

.inference-bridge {
  background: linear-gradient(155deg, rgba(7,6,8,.95), rgba(27,33,72,.58), rgba(7,6,8,.96));
}

.bridge-bracket {
  position: absolute;
  top: 5vh;
  color: transparent;
  -webkit-text-stroke: 1px rgba(47, 163, 122, .55);
  font: 800 45rem/.8 var(--display);
  opacity: .36;
}

.left-corridor { left: 8vw; transform: rotate(8deg); }
.right-corridor { right: 6vw; transform: rotate(-8deg); }

.inference-svg {
  position: absolute;
  inset: 6vh 4vw;
  width: 92vw;
  height: 88vh;
  overflow: visible;
}

.inference-thread {
  fill: none;
  stroke: var(--jade-inference);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 .65rem rgba(47, 163, 122, .58));
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
}

.thread-quiet {
  stroke: rgba(242, 230, 201, .35);
  stroke-width: 1.4;
}

.in-view .inference-thread {
  animation: drawThread 2.4s cubic-bezier(.35,.02,.2,1) forwards;
}

.bridge-slip {
  align-self: center;
  justify-self: end;
  margin-right: 9vw;
  transform: rotate(-2deg);
}

.truth-screen {
  position: absolute;
  left: 13vw;
  bottom: 12vh;
  display: grid;
  grid-template-columns: repeat(4, 3.4rem);
  transform: perspective(700px) rotateY(22deg) rotateZ(-2deg);
  border: 1px solid rgba(242, 230, 201, .22);
  background: rgba(242, 230, 201, .05);
}

.truth-screen div {
  height: 3.1rem;
  display: grid;
  place-items: center;
  color: var(--vellum-proof);
  border: 1px solid rgba(242, 230, 201, .16);
  font: 700 .9rem var(--ui);
  transition: background .35s ease, color .35s ease;
}

.truth-screen div.pulse {
  background: rgba(245, 200, 76, .74);
  color: var(--lacquer-void);
}

.contradiction-room {
  background: radial-gradient(circle at 53% 46%, rgba(232, 74, 42, .12), transparent 23rem), var(--lacquer-void);
}

.ash-screen {
  position: absolute;
  inset: 13vh 16vw;
  border: 1px solid rgba(59, 55, 65, .8);
  background: repeating-linear-gradient(90deg, rgba(59,55,65,.14) 0 2px, transparent 2px 7vw);
  transform: skewY(-4deg);
}

.contradiction-slip {
  margin: 12vh 0 0 11vw;
  border-color: rgba(232, 74, 42, .55);
}

.contradiction-slip::before {
  border-left-color: var(--vermilion-contradiction);
}

.contradiction-bloom {
  position: absolute;
  right: 20vw;
  top: 35vh;
  width: 18rem;
  height: 18rem;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 2rem rgba(232, 74, 42, .45));
}

.contradiction-bloom span {
  position: absolute;
  width: 5rem;
  height: 11rem;
  border-radius: 55% 45% 52% 48%;
  background: radial-gradient(circle at 50% 20%, #F2E6C9, var(--vermilion-contradiction) 28%, rgba(232, 74, 42, .12) 72%);
  transform-origin: 50% 88%;
  opacity: .8;
  scale: .15;
}

.contradiction-bloom span:nth-child(1) { rotate: 0deg; }
.contradiction-bloom span:nth-child(2) { rotate: 60deg; }
.contradiction-bloom span:nth-child(3) { rotate: 120deg; }
.contradiction-bloom span:nth-child(4) { rotate: 180deg; }
.contradiction-bloom span:nth-child(5) { rotate: 240deg; }
.contradiction-bloom span:nth-child(6) { rotate: 300deg; }
.contradiction-bloom strong {
  z-index: 2;
  color: var(--lacquer-void);
  background: var(--vermilion-contradiction);
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 4rem var(--display);
}

.in-view .contradiction-bloom span {
  animation: bloom 1.6s cubic-bezier(.18,.9,.2,1.15) forwards;
}

.negation-rain {
  position: absolute;
  left: 10vw;
  right: 10vw;
  bottom: 9vh;
  display: flex;
  justify-content: space-around;
  color: rgba(232, 74, 42, .46);
  font: 700 clamp(2rem, 6vw, 6rem) var(--display);
}

.negation-rain i {
  font-style: normal;
  transform: translateY(var(--fall, 0));
}

.conclusion-lantern {
  min-height: 115vh;
  background: radial-gradient(circle at 50% 50%, rgba(245, 200, 76, .18), transparent 27rem), linear-gradient(180deg, var(--lacquer-void), #141018);
}

.final-bracket {
  position: absolute;
  right: 10vw;
  top: 3vh;
  font: 800 50rem/.8 var(--display);
  color: transparent;
  -webkit-text-stroke: 2px rgba(245, 200, 76, .55);
  opacity: .34;
}

.conclusion-slip {
  align-self: center;
  justify-self: center;
  width: min(48rem, 78vw);
  text-align: center;
  transform: rotate(0deg) translateY(4rem);
}

.conclusion-slip::before {
  border-left-color: var(--lantern-gold);
}

.final-lantern {
  left: 50%;
  bottom: 12vh;
  width: 9rem;
  height: 9rem;
  font-size: 4rem;
  transform: translateX(-50%) scale(.75);
  opacity: .72;
  transition: transform 1.1s ease, opacity 1.1s ease, box-shadow 1.1s ease;
}

.in-view .final-lantern {
  transform: translateX(-50%) scale(1.12);
  opacity: 1;
  box-shadow: 0 0 3rem rgba(245, 200, 76, .75), 0 0 13rem rgba(245, 200, 76, .42);
}

.closing-line {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(242, 230, 201, .72);
  font-size: 1.05rem;
}

.stamp-mark {
  position: fixed;
  z-index: 25;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(232, 74, 42, .58);
  color: rgba(232, 74, 42, .7);
  border-radius: 50%;
  font: 700 .78rem var(--kr);
  pointer-events: none;
  animation: stampFade .85s ease forwards;
}

@keyframes drawThread {
  to { stroke-dashoffset: 0; }
}

@keyframes bloom {
  0% { scale: .15; opacity: 0; }
  60% { scale: 1.12; opacity: .9; }
  100% { scale: .84; opacity: .82; }
}

@keyframes stampFade {
  0% { transform: translate(-50%, -50%) scale(.5) rotate(-18deg); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6) rotate(-18deg); opacity: 0; }
}

@media (max-width: 760px) {
  .glyph-nav { left: .5rem; }
  .proof-chamber { padding: 4.5rem 1.25rem; }
  .wordmark { font-size: 22vw; }
  .premise-gate .premise-slip,
  .assumption-slip,
  .bridge-slip,
  .contradiction-slip {
    position: relative;
    margin: auto 0 0 3rem;
    right: auto;
    bottom: auto;
    width: calc(100vw - 5rem);
  }
  .proof-stones { left: 4rem; right: 1rem; flex-wrap: wrap; }
  .truth-screen { left: 4rem; grid-template-columns: repeat(4, 2.5rem); }
  .truth-screen div { height: 2.4rem; }
  .contradiction-bloom { right: 1rem; top: 54vh; scale: .72; }
}