:root {
  --porcelain: #F4F1E8;
  --cyan: #8FE7FF;
  --black: #050507;
  --silver: #BFC7CE;
  --oxide: #B84A3B;
  --slate: #2A2B31;
  --violet: #37304E;
  --display: "Bodoni Moda", serif;
  --body: "Commissioner", sans-serif;
  --kr: "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 620vh;
  color: var(--porcelain);
  background:
    radial-gradient(circle at 18% 14%, rgba(143, 231, 255, .16), transparent 28rem),
    radial-gradient(circle at 82% 36%, rgba(55, 48, 78, .85), transparent 34rem),
    radial-gradient(circle at 52% 78%, rgba(184, 74, 59, .16), transparent 30rem),
    var(--black);
  font-family: var(--body);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.grain-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    linear-gradient(115deg, rgba(244, 241, 232, .035) 0 1px, transparent 1px 9px),
    radial-gradient(circle, rgba(191, 199, 206, .16) 0 1px, transparent 1.2px);
  background-size: 96px 96px, 7px 7px;
  mix-blend-mode: screen;
}

.cursor-orbit {
  position: fixed;
  width: 12rem;
  height: 12rem;
  margin: -6rem 0 0 -6rem;
  border: 1px solid rgba(143, 231, 255, .22);
  border-radius: 50%;
  z-index: 8;
  pointer-events: none;
  opacity: .52;
  transform: translate3d(50vw, 50vh, 0) scale(.8);
  transition: opacity .4s ease;
}

.studio-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 2rem;
  color: var(--silver);
  font: 500 .72rem/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nav-mark {
  color: var(--porcelain);
  font: 500 1.3rem/1 var(--display);
  letter-spacing: .02em;
  text-transform: none;
}

.nav-ticks { display: flex; gap: 1.1rem; }
.nav-ticks a { opacity: .7; transition: color .35s ease, opacity .35s ease; }
.nav-ticks a:hover, .nav-ticks a.active { color: var(--cyan); opacity: 1; }

.infinite-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  perspective: 1400px;
  overflow: hidden;
}

.scroll-meter {
  position: fixed;
  left: 2rem;
  bottom: 2rem;
  width: 13rem;
  height: 1px;
  background: rgba(191, 199, 206, .22);
  z-index: 9;
}

.scroll-meter span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--oxide));
}

.loop-chamber, .scene-panel, .return-chamber {
  position: absolute;
  inset: 0;
  min-height: 100vh;
}

.hero-chamber { display: grid; place-items: center; }

.infinity-ribbon {
  position: absolute;
  inset: -7vh -8vw;
  transform: translate3d(var(--ribbon-x, 0px), var(--ribbon-y, 0px), 0) rotate(var(--ribbon-rot, 0deg)) scale(var(--ribbon-scale, 1));
  transition: transform .16s linear;
}

.ribbon-svg { width: 100%; height: 100%; overflow: visible; }
.ribbon-shadow { fill: none; stroke: rgba(55, 48, 78, .68); stroke-width: 72; stroke-linecap: round; }
.ribbon-line { fill: none; stroke: url(#ribbonInk); stroke-width: 3.5; stroke-linecap: round; filter: url(#softGlow); stroke-dasharray: 3200; stroke-dashoffset: var(--dash, 3200); }
.ribbon-thin { fill: none; stroke: rgba(244, 241, 232, .18); stroke-width: 1; stroke-dasharray: 8 18; }

@keyframes vellumDrift {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(143, 231, 255, 0)); }
  50% { filter: drop-shadow(0 0 1.4rem rgba(143, 231, 255, .16)); }
}

@keyframes orbitPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(143, 231, 255, 0); }
  50% { box-shadow: 0 0 2.4rem rgba(143, 231, 255, .22); }
}

.vellum-plane {
  background: linear-gradient(135deg, rgba(244, 241, 232, .13), rgba(191, 199, 206, .045));
  border: 1px solid rgba(244, 241, 232, .18);
  box-shadow: 0 2rem 7rem rgba(5, 5, 7, .45), inset 0 0 4rem rgba(143, 231, 255, .035);
  backdrop-filter: blur(18px);
  animation: vellumDrift 8s ease-in-out infinite;
}

.hero-copy {
  position: relative;
  width: min(74rem, 84vw);
  padding: 4.6rem 4.2rem;
  text-align: center;
  border-radius: 44% 56% 52% 48% / 52% 42% 58% 48%;
}

.korean-fragment {
  margin: 0 0 1.1rem;
  color: var(--cyan);
  font: 300 .88rem/1.5 var(--kr);
  letter-spacing: .18em;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.045em;
}

h1 { font-size: clamp(5.8rem, 15vw, 17rem); line-height: .78; }
h2 { font-size: clamp(3rem, 7.2vw, 8.4rem); line-height: .86; }

.hero-line {
  max-width: 43rem;
  margin: 1.5rem auto 0;
  color: var(--silver);
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.75;
}

.mirror-annotation {
  position: absolute;
  color: rgba(191, 199, 206, .72);
  font: 500 .68rem/1 var(--body);
  letter-spacing: .22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-note { right: 6vw; top: 32vh; }

.scene-panel {
  padding: 8rem 7vw;
  opacity: var(--scene-opacity, 0);
  transform: translate3d(var(--scene-x, 0), var(--scene-y, 0), var(--scene-z, 0)) rotate(var(--scene-r, 0deg));
  transition: opacity .2s linear;
}

.left-loop { --scene-x: -38vw; --scene-y: 9vh; --scene-z: -160px; --scene-r: -8deg; }
.crossing-table { --scene-x: 0vw; --scene-y: -2vh; --scene-z: -80px; display: grid; place-items: center; }
.right-loop { --scene-x: 38vw; --scene-y: 7vh; --scene-z: -140px; --scene-r: 7deg; }
.archive-bend { --scene-x: -18vw; --scene-y: 4vh; --scene-z: -80px; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.scene-number {
  position: absolute;
  top: 7.5rem;
  left: 7vw;
  color: var(--oxide);
  font: 500 1rem/1 var(--display);
}

.chamber-copy {
  width: min(45rem, 78vw);
  padding: 2.2rem;
  border-radius: 1.8rem;
}

.chamber-copy p:not(.section-kicker), .return-copy p:not(.korean-fragment) {
  color: var(--silver);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.75;
}

.section-kicker {
  margin: 0 0 1rem;
  color: var(--cyan);
  font: 600 .72rem/1 var(--body);
  letter-spacing: .24em;
  text-transform: uppercase;
}

.paper-maquette {
  position: absolute;
  right: 18vw;
  bottom: 12vh;
  width: 19rem;
  height: 19rem;
  transform-style: preserve-3d;
  transform: rotateX(62deg) rotateZ(-26deg);
}
.paper-maquette span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(244, 241, 232, .35);
  background: rgba(244, 241, 232, .055);
  transform: translateZ(calc(var(--i, 0) * 2rem));
}
.paper-maquette span:nth-child(2) { --i: 1; inset: 2.2rem; border-color: rgba(143, 231, 255, .45); }
.paper-maquette span:nth-child(3) { --i: 2; inset: 4.4rem; border-color: rgba(184, 74, 59, .55); }

.table-edge {
  position: absolute;
  width: 86vw;
  height: 14rem;
  border: 1px solid rgba(191, 199, 206, .2);
  border-radius: 50%;
  transform: rotate(-8deg);
  background: linear-gradient(90deg, transparent, rgba(143, 231, 255, .07), transparent);
}

.artifact-grid {
  position: absolute;
  right: 8vw;
  bottom: 12vh;
  display: grid;
  grid-template-columns: repeat(2, 10rem);
  gap: .8rem;
}
.artifact-grid div, .archive-stack article {
  min-height: 8rem;
  padding: 1.1rem;
  border: 1px solid rgba(244, 241, 232, .16);
  background: rgba(42, 43, 49, .56);
  color: var(--silver);
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.artifact-grid b { display: block; margin-top: 2rem; color: var(--porcelain); font-family: var(--kr); font-weight: 400; letter-spacing: .08em; }

.orbit-system {
  position: absolute;
  left: 10vw;
  top: 18vh;
  width: 34rem;
  height: 34rem;
  border: 1px solid rgba(143, 231, 255, .2);
  border-radius: 50%;
  transform: rotate(var(--orbit-tilt, 0deg));
}
.orbit-system::before, .orbit-system::after {
  content: "";
  position: absolute;
  inset: 4rem;
  border: 1px dashed rgba(191, 199, 206, .25);
  border-radius: 50%;
}
.orbit-system::after { inset: 9rem; border-color: rgba(184, 74, 59, .28); }
.orbit-object { position: absolute; border-radius: 50%; }
.moon { width: 4.8rem; height: 4.8rem; left: 2rem; top: 8rem; background: var(--porcelain); box-shadow: 0 0 3rem rgba(244, 241, 232, .35); animation: orbitPulse 6s ease-in-out infinite; }
.compass { width: 2.1rem; height: 2.1rem; right: 5rem; top: 4rem; background: var(--cyan); }
.seal { width: 3.4rem; height: 3.4rem; right: 7rem; bottom: 5rem; background: var(--oxide); }
.orbital-shelf { position: absolute; left: 7rem; right: 7rem; top: 50%; height: 1px; background: var(--silver); transform: rotate(-22deg); }
.right-loop .chamber-copy { position: absolute; right: 8vw; top: 28vh; }

.archive-stack { display: grid; gap: 1rem; }
.archive-stack article { min-height: 11rem; transform: rotate(var(--tilt, -2deg)); }
.archive-stack article:nth-child(2) { --tilt: 2deg; margin-left: 3rem; }
.archive-stack article:nth-child(3) { --tilt: -4deg; margin-left: 1rem; }
.archive-stack span { display: block; color: var(--cyan); margin-bottom: 4rem; }
.archive-stack strong { color: var(--porcelain); font: 500 2rem/1 var(--display); letter-spacing: -.03em; text-transform: none; }

.return-chamber {
  display: grid;
  place-items: center;
  opacity: var(--return-opacity, 0);
  text-align: center;
}
.final-seal {
  position: absolute;
  color: rgba(143, 231, 255, .12);
  font: 400 clamp(18rem, 44vw, 42rem)/1 var(--display);
}
.return-copy { position: relative; width: min(62rem, 84vw); }
.oxide-mark {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 1.3rem;
  color: var(--porcelain);
  background: var(--oxide);
  border-radius: 999px;
  font: 600 .75rem/1 var(--body);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.revealable { opacity: 0; transform: translateY(2rem); transition: opacity .8s ease, transform .8s ease; }
.revealable.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 800px) {
  body { min-height: 700vh; }
  .nav-ticks { display: none; }
  .studio-nav { padding: 1rem; }
  .hero-copy { width: 92vw; padding: 3rem 1.4rem; }
  h1 { font-size: clamp(4.5rem, 22vw, 8rem); }
  .scene-panel { padding: 6.5rem 1rem; transform: none; }
  .chamber-copy, .right-loop .chamber-copy { position: relative; top: auto; right: auto; width: 92vw; }
  .paper-maquette, .orbit-system, .artifact-grid { opacity: .45; transform: scale(.72); right: -4rem; left: auto; }
  .archive-bend { grid-template-columns: 1fr; gap: 1rem; }
  .mirror-annotation { display: none; }
}