:root {
  --velvet: #050403;
  --obsidian: #11100C;
  --gold: #D6A84F;
  --champagne: #F4E7C5;
  --brass: #8B6A2B;
  --blush: #F8D7C7;
  --plum: #241421;
  --scroll: 0;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--velvet);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--champagne);
  background:
    radial-gradient(circle at 19% 9%, rgba(36, 20, 33, 0.42), transparent 28vw),
    radial-gradient(circle at 84% 44%, rgba(17, 16, 12, 0.88), transparent 34vw),
    var(--velvet);
  font-family: "Noto Sans KR", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(244, 231, 197, 0.08) 0.7px, transparent 0.7px);
  background-size: 4px 4px;
  opacity: 0.16;
  mix-blend-mode: screen;
  z-index: 20;
}

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

.stage-depth {
  position: fixed;
  inset: -20vh -15vw;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% calc(8% + var(--scroll) * 20%), rgba(214, 168, 79, 0.07), transparent 22%),
    radial-gradient(ellipse at calc(80% - var(--scroll) * 15%) 70%, rgba(248, 215, 199, 0.07), transparent 18%),
    radial-gradient(ellipse at 30% 54%, rgba(36, 20, 33, 0.55), transparent 30%);
  filter: blur(1px);
}

.edge-jewelry {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.edge-jewelry a {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(139, 106, 43, 0.72);
  border-radius: 999px 999px 999px 42%;
  display: grid;
  place-items: center;
  color: rgba(244, 231, 197, 0.64);
  font: 600 9px/1 "Jost", sans-serif;
  letter-spacing: 0.16em;
  background: rgba(5, 4, 3, 0.58);
  transition: border-color 400ms ease, color 400ms ease, transform 400ms cubic-bezier(.2, 1.5, .3, 1);
}

.edge-jewelry a.active,
.edge-jewelry a:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateX(-7px) rotate(-18deg);
}

.gold-thread {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3;
  pointer-events: none;
  opacity: 0.86;
}

.gold-thread path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.32;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: calc(900 - var(--scroll) * 900);
  filter: drop-shadow(0 0 8px rgba(214, 168, 79, 0.28));
}

.chamber {
  position: relative;
  min-height: 105vh;
  isolation: isolate;
  padding: clamp(72px, 9vw, 128px) clamp(26px, 8vw, 120px);
  display: grid;
  overflow: hidden;
}

.section-mark {
  position: absolute;
  top: clamp(28px, 4vw, 58px);
  left: clamp(28px, 6vw, 92px);
  color: rgba(214, 168, 79, 0.72);
  font: 600 11px/1 "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  writing-mode: vertical-rl;
}

.serif-whisper {
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 34px);
  color: var(--blush);
  letter-spacing: 0.03em;
}

.framed-copy,
.annotation,
.doubt-copy {
  border: 1px solid rgba(214, 168, 79, 0.58);
  border-radius: 2px 36px 2px 36px;
  box-shadow: inset 0 0 32px rgba(214, 168, 79, 0.05), 0 0 0 1px rgba(139, 106, 43, 0.2);
  background: rgba(17, 16, 12, 0.36);
}

.framed-copy {
  max-width: 560px;
  margin: 24px 0 0;
  padding: 24px 28px;
  color: rgba(244, 231, 197, 0.86);
  font-weight: 300;
  line-height: 1.85;
  word-break: keep-all;
}

.chamber-threshold {
  align-items: end;
}

.title-cluster {
  position: relative;
  z-index: 7;
  max-width: 940px;
  margin: 0 0 7vh 3vw;
}

h1 {
  margin: 0;
  color: var(--champagne);
  font-family: "Noto Sans KR", sans-serif;
  font-size: clamp(72px, 15vw, 210px);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.86;
  text-shadow: 0 0 42px rgba(214, 168, 79, 0.1);
}

h1 span {
  display: inline-block;
  margin-left: 0.05em;
  font-family: "Jost", sans-serif;
  font-size: 0.28em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.portal {
  position: absolute;
  border: 2px solid var(--gold);
  border-radius: 48% 52% 44% 56% / 58% 42% 55% 45%;
  background:
    radial-gradient(ellipse at 63% 40%, rgba(36, 20, 33, 0.72), transparent 34%),
    radial-gradient(ellipse at 40% 60%, rgba(17, 16, 12, 0.95), var(--velvet) 64%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.95), 0 0 32px rgba(214, 168, 79, 0.22), 0 0 0 11px rgba(139, 106, 43, 0.04);
  animation: morph 8s ease-in-out infinite;
  z-index: 4;
}

.portal::before,
.portal::after {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1px solid rgba(139, 106, 43, 0.74);
  border-radius: inherit;
  transform: rotate(7deg);
}

.portal::after { inset: 18%; border-color: rgba(244, 231, 197, 0.12); transform: rotate(-11deg); }
.portal-main { width: clamp(280px, 42vw, 640px); height: clamp(360px, 56vw, 780px); right: 7vw; top: 8vh; }
.portal-small { width: clamp(220px, 33vw, 440px); height: clamp(270px, 42vw, 560px); right: 12vw; top: 17vh; }

.seed-swarm i,
.comma {
  position: absolute;
  display: block;
  width: 18px;
  height: 34px;
  border-radius: 90% 25% 75% 35%;
  background: radial-gradient(circle at 38% 22%, #F4E7C5, #F8D7C7 58%, rgba(248, 215, 199, 0.08));
  box-shadow: 0 0 18px rgba(248, 215, 199, 0.22);
  animation: floaty 7s ease-in-out infinite;
}

.swarm-a i:nth-child(1) { left: 17vw; top: 18vh; transform: rotate(21deg); animation-delay: -1s; }
.swarm-a i:nth-child(2) { left: 24vw; top: 34vh; transform: rotate(-31deg); animation-delay: -4s; }
.swarm-a i:nth-child(3) { left: 74vw; top: 15vh; transform: rotate(43deg); animation-delay: -2s; }
.swarm-a i:nth-child(4) { left: 83vw; top: 61vh; transform: rotate(-12deg); animation-delay: -5s; }
.swarm-a i:nth-child(5) { left: 9vw; top: 68vh; transform: rotate(64deg); animation-delay: -3s; }
.swarm-a i:nth-child(6) { left: 53vw; top: 83vh; transform: rotate(-54deg); animation-delay: -6s; }

.chamber-paths { align-items: center; min-height: 115vh; }
.giant-glyph {
  position: absolute;
  left: 7vw;
  top: 14vh;
  margin: 0;
  font-family: "Noto Sans KR", sans-serif;
  font-size: clamp(140px, 31vw, 430px);
  letter-spacing: -0.16em;
  color: rgba(244, 231, 197, 0.085);
  -webkit-text-stroke: 1px rgba(214, 168, 79, 0.26);
}

.coin-mobile { position: relative; width: min(76vw, 900px); height: 70vh; margin-left: 12vw; z-index: 8; }
.coin-mobile::before,
.coin-mobile::after {
  content: "";
  position: absolute;
  border: 1px dotted rgba(214, 168, 79, 0.45);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.coin-mobile::before { inset: 9% 12% 17% 5%; }
.coin-mobile::after { inset: 24% 28% 25% 26%; transform: rotate(28deg); }

.choice-coin {
  position: absolute;
  width: clamp(78px, 10vw, 126px);
  height: clamp(78px, 10vw, 126px);
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle at 62% 38%, rgba(36, 20, 33, 0.82), var(--obsidian) 52%, var(--velvet));
  color: var(--champagne);
  font: 700 clamp(20px, 3vw, 40px)/1 "Noto Sans KR", sans-serif;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.9), 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 14px rgba(214, 168, 79, 0.18);
  cursor: pointer;
  transition: filter 300ms ease;
  animation: driftCoin 9s ease-in-out infinite;
}
.choice-coin:nth-child(1) { left: 9%; top: 16%; animation-delay: -3s; }
.choice-coin:nth-child(2) { left: 48%; top: 5%; animation-delay: -7s; }
.choice-coin:nth-child(3) { left: 70%; top: 42%; animation-delay: -1s; }
.choice-coin:nth-child(4) { left: 32%; top: 56%; animation-delay: -5s; }
.choice-coin:nth-child(5) { left: 5%; top: 70%; animation-delay: -9s; }
.choice-coin:hover { filter: brightness(1.3); }

.annotation { max-width: 430px; padding: 26px 30px; line-height: 1.85; color: rgba(244, 231, 197, 0.82); font-weight: 300; word-break: keep-all; }
.annotation-right { position: absolute; right: 10vw; bottom: 12vh; z-index: 9; }
.annotation-left { position: absolute; left: 10vw; bottom: 16vh; z-index: 9; }

.chamber-doubt { min-height: 120vh; align-items: center; }
.plum-shadow {
  position: absolute;
  width: 58vw;
  height: 52vh;
  left: 4vw;
  top: 20vh;
  background: radial-gradient(ellipse at 45% 52%, rgba(36, 20, 33, 0.56), transparent 66%);
  border-radius: 42% 58% 70% 30% / 44% 40% 60% 56%;
  filter: blur(10px);
  animation: morph 11s ease-in-out infinite reverse;
}
.vertical-ribbon {
  position: relative;
  z-index: 6;
  margin-left: 18vw;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  transform: rotate(-6deg);
}
.vertical-ribbon span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(214, 168, 79, 0.9);
  font: 700 clamp(54px, 10vw, 150px)/0.9 "Noto Sans KR", sans-serif;
  letter-spacing: -0.05em;
}
.doubt-copy { position: absolute; right: 9vw; top: 22vh; max-width: 420px; padding: 28px 32px; color: rgba(244, 231, 197, 0.83); line-height: 1.9; z-index: 8; }
.elastic-ribbon { position: absolute; inset: 38vh -6vw auto; width: 112vw; height: 44vh; z-index: 5; overflow: visible; }
.elastic-ribbon path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 9px rgba(214, 168, 79, 0.22)); stroke-dasharray: 18 18; animation: ribbonRun 5s linear infinite; }

.chamber-shimmer { min-height: 112vh; align-items: center; }
.shimmer-word {
  position: relative;
  z-index: 8;
  margin-left: 18vw;
  color: var(--champagne);
  font: 700 clamp(82px, 19vw, 260px)/0.82 "Noto Sans KR", sans-serif;
  letter-spacing: -0.08em;
  text-shadow: 0 0 8px rgba(214, 168, 79, 0.35), 0 0 55px rgba(214, 168, 79, 0.16);
}
.glint-field i {
  position: absolute;
  width: 2px;
  height: 70px;
  background: linear-gradient(transparent, var(--gold), transparent);
  transform: rotate(40deg);
  animation: glint 4.6s ease-in-out infinite;
}
.glint-field i:nth-child(1) { left: 20%; top: 18%; animation-delay: -1s; }
.glint-field i:nth-child(2) { left: 51%; top: 24%; animation-delay: -3s; }
.glint-field i:nth-child(3) { left: 75%; top: 37%; animation-delay: -2s; }
.glint-field i:nth-child(4) { left: 37%; top: 72%; animation-delay: -4s; }
.glint-field i:nth-child(5) { left: 86%; top: 66%; animation-delay: -0.5s; }
.glint-field i:nth-child(6) { left: 10%; top: 55%; animation-delay: -2.8s; }
.glint-field i:nth-child(7) { left: 60%; top: 82%; animation-delay: -1.7s; }

.chamber-ending { min-height: 110vh; align-items: center; justify-items: center; text-align: left; }
.final-copy { position: relative; z-index: 10; width: min(840px, 82vw); }
.final-copy h2 {
  margin: 0;
  font: 700 clamp(62px, 11vw, 160px)/0.98 "Noto Sans KR", sans-serif;
  letter-spacing: -0.08em;
  color: var(--champagne);
}
.ending-orbit { position: absolute; inset: 0; }
.ending-orbit .comma:nth-child(1) { left: 17vw; top: 24vh; transform: rotate(22deg) scale(1.6); }
.ending-orbit .comma:nth-child(2) { right: 18vw; top: 18vh; transform: rotate(-44deg) scale(2.4); background: radial-gradient(circle at 35% 20%, #F4E7C5, #D6A84F 48%, rgba(214, 168, 79, 0.08)); }
.ending-orbit .comma:nth-child(3) { right: 26vw; bottom: 18vh; transform: rotate(72deg) scale(1.2); }
.open-ring {
  position: absolute;
  right: 13vw;
  bottom: 13vh;
  width: 118px;
  height: 118px;
  border: 1px solid var(--gold);
  border-radius: 50% 50% 44% 56%;
  display: grid;
  place-items: center;
  color: var(--gold);
  font: 600 13px/1 "Noto Sans KR", sans-serif;
  letter-spacing: 0.18em;
  background: rgba(5, 4, 3, 0.42);
  box-shadow: 0 0 28px rgba(214, 168, 79, 0.16);
  animation: morph 7s ease-in-out infinite;
}

.reveal-text { opacity: 0; transform: translateY(34px) scaleX(0.96); filter: blur(8px); transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2, 1.25, .2, 1), filter 900ms ease, letter-spacing 1200ms ease; }
.reveal-text.is-visible { opacity: 1; transform: translateY(0) scaleX(1); filter: blur(0); }
.reveal-text h1, .reveal-text h2, .reveal-text.giant-glyph, .reveal-text.shimmer-word { letter-spacing: -0.16em; transition: letter-spacing 1500ms cubic-bezier(.2, 1.2, .2, 1); }
.reveal-text.is-visible h1, .reveal-text.is-visible h2, .reveal-text.giant-glyph.is-visible, .reveal-text.shimmer-word.is-visible { letter-spacing: -0.06em; }
.magnetic { will-change: transform; }

@keyframes morph {
  0%, 100% { border-radius: 48% 52% 44% 56% / 58% 42% 55% 45%; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotate(-3deg) scale(1); }
  50% { border-radius: 58% 42% 62% 38% / 43% 59% 41% 57%; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotate(4deg) scale(1.035); }
}

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50% { translate: 18px -24px; }
}

@keyframes driftCoin {
  0%, 100% { translate: 0 0; }
  50% { translate: -13px 18px; }
}

@keyframes ribbonRun { to { stroke-dashoffset: -72; } }

@keyframes glint {
  0%, 100% { opacity: 0; transform: translateY(12px) rotate(40deg) scaleY(0.4); }
  42%, 58% { opacity: 1; transform: translateY(-16px) rotate(40deg) scaleY(1); }
}

@media (max-width: 760px) {
  .edge-jewelry { right: 10px; gap: 10px; }
  .edge-jewelry a { width: 25px; height: 25px; font-size: 8px; }
  .chamber { padding: 72px 24px; min-height: 100vh; }
  .section-mark { left: 13px; }
  .portal-main { right: -32vw; top: 6vh; opacity: 0.78; }
  .title-cluster { margin-left: 0; }
  h1 { font-size: clamp(70px, 24vw, 120px); }
  .coin-mobile { margin-left: 0; width: 88vw; }
  .annotation-right, .annotation-left, .doubt-copy { position: relative; right: auto; left: auto; bottom: auto; top: auto; margin-top: 24px; }
  .vertical-ribbon { margin-left: 6vw; }
  .portal-small { right: -24vw; opacity: 0.62; }
  .shimmer-word { margin-left: 2vw; }
  .open-ring { right: 8vw; bottom: 7vh; }
}