:root {
  --curtain-black: #08060B;
  --mourning-violet: #2A1438;
  --ash-rose: #C76B7C;
  --antique-parchment: #E8D8B5;
  --tarnished-gold: #B58A3C;
  --ghost-blue: #B9D8E6;
  --blood-plum: #5A1023;
  --bodoni: "Bodoni Moda", serif;
  --cormorant: "Cormorant Garamond", serif;
  --fraunces: "Fraunces", serif;
  --noto: "Noto Serif KR", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--antique-parchment);
  background: var(--curtain-black);
  font-family: var(--cormorant);
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 44%, rgba(185,216,230,.08) 45%, transparent 46% 100%),
    repeating-linear-gradient(90deg, rgba(232,216,181,.035) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 50% 15%, rgba(199,107,124,.16), transparent 34%),
    radial-gradient(circle at 20% 80%, rgba(42,20,56,.7), transparent 48%);
  mix-blend-mode: screen;
}

.cursor-glint {
  width: 30px;
  height: 30px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  border: 1px solid rgba(185,216,230,.75);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 18px rgba(185,216,230,.55), inset 0 0 10px rgba(181,138,60,.35);
}
.cursor-glint::after {
  content: "";
  position: absolute;
  left: 13px;
  top: -11px;
  width: 2px;
  height: 52px;
  background: linear-gradient(transparent, var(--ghost-blue), transparent);
}

.opening-curtain {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: var(--curtain-black);
  transition: opacity 900ms ease, visibility 900ms ease;
}
.opening-curtain.entered { opacity: 0; visibility: hidden; pointer-events: none; }
.curtain-panel {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(8,6,11,.25) 0 20px, rgba(90,16,35,.35) 20px 42px),
    radial-gradient(circle at 50% 10%, rgba(199,107,124,.18), transparent 45%),
    linear-gradient(100deg, #08060B, #2A1438 45%, #5A1023 70%, #08060B);
  filter: drop-shadow(0 0 40px #08060B);
  transform-origin: center;
  transition: clip-path 1500ms cubic-bezier(.8,0,.2,1), transform 1500ms cubic-bezier(.8,0,.2,1);
}
.curtain-left { clip-path: polygon(0 0, 58% 0, 43% 100%, 0 100%); }
.curtain-right { clip-path: polygon(58% 0, 100% 0, 100% 100%, 43% 100%); }
.opening-curtain.tearing .curtain-left { transform: translateX(-34vw) rotate(-4deg); clip-path: polygon(0 0, 48% 0, 25% 100%, 0 100%); }
.opening-curtain.tearing .curtain-right { transform: translateX(34vw) rotate(4deg); clip-path: polygon(70% 0, 100% 0, 100% 100%, 55% 100%); }
.diagonal-tear {
  position: absolute;
  inset: -10%;
  background: linear-gradient(111deg, transparent 47%, var(--antique-parchment) 48% 51%, transparent 52%);
  opacity: 0;
  transition: opacity 650ms ease;
}
.opening-curtain.tearing .diagonal-tear { opacity: .9; }
.curtain-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1rem;
}
.domain {
  font-family: var(--bodoni);
  font-size: clamp(4rem, 14vw, 14rem);
  color: var(--tarnished-gold);
  letter-spacing: .07em;
  text-shadow: 0 4px 0 #5A1023, 0 0 28px rgba(181,138,60,.45);
}
.subtitle { font-family: var(--fraunces); color: rgba(232,216,181,.7); letter-spacing: .4em; text-transform: uppercase; }
.entry-seal, .seal, .ticket {
  font-family: var(--fraunces);
  border: 0;
  color: var(--antique-parchment);
  background: radial-gradient(circle at 40% 35%, #C76B7C, #5A1023 52%, #2A1438 80%);
  box-shadow: 0 0 0 2px rgba(181,138,60,.75), inset 0 -8px 16px rgba(8,6,11,.35), 0 12px 25px rgba(0,0,0,.45);
  cursor: none;
}
.entry-seal {
  justify-self: center;
  width: 102px;
  height: 102px;
  border-radius: 52% 48% 45% 55%;
  text-transform: uppercase;
  letter-spacing: .12em;
  transition: transform 400ms ease;
}
.entry-seal:hover { transform: scale(1.12) rotate(-8deg); }

.seal-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: .8rem;
}
.seal {
  width: 48px;
  height: 48px;
  border-radius: 48% 52% 50% 44%;
  opacity: .55;
  transition: transform 300ms ease, opacity 300ms ease, filter 300ms ease;
}
.seal:hover, .seal.active { transform: scale(1.18) rotate(10deg); opacity: 1; filter: drop-shadow(0 0 14px rgba(199,107,124,.8)); }
.seal span { font-size: .75rem; }

.corridor {
  display: flex;
  width: 600vw;
  height: 100vh;
  transform: translateX(0);
  transition: transform 1000ms cubic-bezier(.68,0,.18,1);
}
.tableau {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 75% 20%, rgba(185,216,230,.16), transparent 26%),
    radial-gradient(circle at 20% 70%, rgba(199,107,124,.12), transparent 30%),
    linear-gradient(120deg, var(--curtain-black), var(--mourning-violet) 50%, var(--curtain-black));
}
.tableau::before {
  content: "";
  position: absolute;
  inset: 2.2rem;
  border: 1px solid rgba(181,138,60,.45);
  border-image: linear-gradient(135deg, transparent, var(--tarnished-gold), transparent, var(--ash-rose)) 1;
  pointer-events: none;
}
.tableau::after {
  content: attr(data-act);
  position: absolute;
  bottom: 1rem;
  left: 50%;
  font-family: var(--noto);
  color: rgba(185,216,230,.45);
  letter-spacing: .6em;
}
.marginalia {
  position: absolute;
  left: 1.3rem;
  top: 4rem;
  writing-mode: vertical-rl;
  font-family: var(--noto);
  font-size: .78rem;
  color: var(--ghost-blue);
  opacity: .72;
}
.marginalia i { color: var(--tarnished-gold); margin-top: 1rem; }
.cropped-number {
  position: absolute;
  right: -4vw;
  top: -5vh;
  font-family: var(--bodoni);
  font-size: clamp(12rem, 34vw, 32rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(181,138,60,.45);
  line-height: .8;
  opacity: .8;
}
.stage-arch {
  position: absolute;
  inset: 7vh 9vw;
  border: 2px solid rgba(181,138,60,.55);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 28% 28% 0 0;
  box-shadow: inset 0 0 80px rgba(8,6,11,.9), 0 0 45px rgba(181,138,60,.12);
}
.torn-page, .vellum-panel, .clockwork, .index-book, .mirror-card {
  position: relative;
  z-index: 2;
  max-width: min(760px, 68vw);
  margin: 13vh 0 0 12vw;
  padding: clamp(2rem, 4vw, 4.5rem);
  color: var(--curtain-black);
  background:
    linear-gradient(135deg, rgba(232,216,181,.96), rgba(185,216,230,.72)),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(90,16,35,.08) 26px 27px);
  clip-path: polygon(0 5%, 5% 3%, 8% 0, 16% 4%, 29% 1%, 40% 5%, 55% 0, 67% 4%, 78% 2%, 92% 6%, 100% 3%, 97% 22%, 100% 38%, 96% 55%, 100% 70%, 96% 100%, 78% 96%, 62% 100%, 46% 95%, 30% 100%, 15% 96%, 0 100%, 3% 80%, 0 66%, 4% 49%, 0 32%);
  box-shadow: 0 35px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(181,138,60,.5) inset;
  transform: perspective(1200px) rotateY(7deg) rotateX(2deg);
  transition: transform 800ms ease, filter 800ms ease;
}
.tableau.is-active .foldable, .tableau.is-active .unfolded { transform: perspective(1200px) rotateY(0) rotateX(0); filter: drop-shadow(0 0 22px rgba(185,216,230,.2)); }
.label {
  margin: 0 0 1rem;
  font-family: var(--fraunces);
  color: var(--blood-plum);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
}
h1, h2 {
  margin: 0;
  font-family: var(--bodoni);
  color: var(--mourning-violet);
  font-size: clamp(3rem, 7vw, 8rem);
  line-height: .86;
  letter-spacing: -.05em;
}
h2 { font-size: clamp(2.6rem, 5.2vw, 6.3rem); }
.excerpt, blockquote {
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.25;
  color: #2A1438;
}
blockquote {
  font-family: var(--fraunces);
  color: var(--blood-plum);
  border-left: 2px solid var(--tarnished-gold);
  padding-left: 1rem;
}
.scratched {
  display: inline-block;
  position: relative;
  font-style: italic;
  color: rgba(90,16,35,.82);
}
.scratched::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--blood-plum), var(--tarnished-gold), transparent);
  transform: rotate(-2deg) scaleX(var(--strike, .15));
  transform-origin: left;
  transition: transform 700ms ease;
}
.scratched.revealed::before {
  content: attr(data-alt);
  position: absolute;
  left: 0;
  bottom: -1.6em;
  width: max-content;
  max-width: 42vw;
  color: var(--ghost-blue);
  text-shadow: 0 0 8px var(--curtain-black);
}
.scratched.revealed::after { --strike: 1; }
.afterword {
  position: absolute;
  right: 15vw;
  bottom: 18vh;
  font-family: var(--fraunces);
  color: var(--ghost-blue);
  transform: rotate(-12deg);
}

.thorn-frame, .smoke-veil, .paper-swan, .mask, .mirror-shards { position: absolute; }
.thorn-frame {
  inset: 10vh 12vw;
  border: 1px solid rgba(181,138,60,.55);
  background: repeating-radial-gradient(circle at 0 50%, transparent 0 18px, rgba(199,107,124,.18) 19px 21px);
  clip-path: polygon(5% 0, 100% 8%, 94% 100%, 0 90%);
}
.rose {
  position: absolute;
  width: 58px;
  height: 90px;
  background: radial-gradient(circle, var(--ash-rose) 0 28%, var(--blood-plum) 29% 52%, transparent 53%), linear-gradient(var(--tarnished-gold), var(--tarnished-gold));
  background-size: 58px 58px, 2px 70px;
  background-position: top, center 28px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 18px rgba(199,107,124,.55));
  animation: swing 5s ease-in-out infinite;
  transform-origin: top;
}
.rose-one { right: 20vw; top: 8vh; } .rose-two { right: 34vw; top: 18vh; animation-delay: -1s; } .rose-three { right: 13vw; top: 33vh; animation-delay: -2.2s; }
@keyframes swing { 0%,100% { transform: rotate(176deg); } 50% { transform: rotate(190deg); } }

.thirteen-clock {
  position: absolute;
  right: 12vw;
  top: 19vh;
  width: min(44vw, 530px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--tarnished-gold);
  box-shadow: inset 0 0 50px rgba(185,216,230,.14), 0 0 40px rgba(181,138,60,.15);
}
.thirteen-clock::before { content: "XIII"; position: absolute; inset: 42% 0 auto; text-align: center; font-family: var(--bodoni); font-size: 5rem; color: rgba(232,216,181,.5); }
.thirteen-clock span {
  position: absolute;
  left: 50%; top: 50%;
  width: 45%; height: 2px;
  background: linear-gradient(90deg, var(--tarnished-gold), transparent);
  transform-origin: left center;
  transform: rotate(calc(var(--r, 0) * 1deg));
}
.thirteen-clock span:nth-child(1){--r:0}.thirteen-clock span:nth-child(2){--r:29}.thirteen-clock span:nth-child(3){--r:57}.thirteen-clock span:nth-child(4){--r:83}.thirteen-clock span:nth-child(5){--r:111}.thirteen-clock span:nth-child(6){--r:139}.thirteen-clock span:nth-child(7){--r:166}.thirteen-clock span:nth-child(8){--r:194}.thirteen-clock span:nth-child(9){--r:222}.thirteen-clock span:nth-child(10){--r:249}.thirteen-clock span:nth-child(11){--r:277}.thirteen-clock span:nth-child(12){--r:305}.thirteen-clock span:nth-child(13){--r:333}
.clockwork { max-width: 620px; }

.veil-panel { margin-left: 45vw; }
.smoke-veil {
  left: 10vw; top: 8vh; width: 46vw; height: 80vh;
  background: radial-gradient(ellipse at center, rgba(185,216,230,.35), transparent 62%), repeating-linear-gradient(110deg, transparent 0 18px, rgba(232,216,181,.11) 19px 20px);
  clip-path: polygon(48% 0, 70% 100%, 16% 100%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: translateY(-2vh) scaleX(1.05); opacity: .65; } }
.scissors { position: absolute; left: 32vw; top: 42vh; font-size: 7rem; color: var(--tarnished-gold); transform: rotate(-28deg); }

.index-book { max-width: 820px; }
.promise-list { list-style: none; padding: 0; margin: 2rem 0 0; font-size: 1.35rem; }
.promise-list li { display: flex; justify-content: space-between; border-bottom: 1px dotted rgba(90,16,35,.35); padding: .7rem 0; }
.promise-list em { color: var(--blood-plum); font-family: var(--fraunces); }
.paper-swan {
  right: 12vw; bottom: 14vh; width: 260px; height: 180px; padding: 2rem;
  color: var(--curtain-black); background: var(--antique-parchment);
  clip-path: polygon(0 70%, 37% 39%, 51% 0, 61% 42%, 100% 28%, 77% 66%, 93% 100%, 47% 78%, 7% 100%);
  font-size: .8rem;
  transform: rotate(-12deg);
}

.mirror-card { margin-left: 16vw; }
.ticket { padding: 1rem 1.4rem; border-radius: 30px; text-transform: uppercase; letter-spacing: .1em; }
.cracked-mask {
  right: 15vw; top: 21vh; width: 260px; height: 360px;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(120deg, var(--antique-parchment), var(--ghost-blue));
  box-shadow: inset -20px 0 35px rgba(42,20,56,.35), 0 20px 50px rgba(0,0,0,.45);
}
.cracked-mask::before, .cracked-mask::after { content: ""; position: absolute; background: var(--curtain-black); }
.cracked-mask::before { width: 30px; height: 18px; border-radius: 50%; left: 65px; top: 130px; box-shadow: 100px 10px 0 var(--curtain-black); }
.cracked-mask::after { width: 2px; height: 210px; left: 140px; top: 40px; transform: rotate(18deg); box-shadow: 18px 80px 0 var(--blood-plum); }
.mirror-shards { right: 7vw; bottom: 11vh; width: 30vw; height: 30vh; }
.mirror-shards i { position: absolute; display: block; background: rgba(185,216,230,.22); border: 1px solid rgba(185,216,230,.4); }
.mirror-shards i:nth-child(1){inset:0 70% 35% 5%;clip-path:polygon(0 0,100% 20%,60% 100%)}.mirror-shards i:nth-child(2){inset:20% 42% 20% 34%;clip-path:polygon(40% 0,100% 100%,0 80%)}.mirror-shards i:nth-child(3){inset:42% 8% 0 62%;clip-path:polygon(0 20%,100% 0,70% 100%,10% 75%)}.mirror-shards i:nth-child(4){inset:0 12% 55% 70%;clip-path:polygon(30% 0,100% 60%,0 100%)}

@media (max-width: 760px) {
  body { overflow: auto; cursor: auto; }
  .cursor-glint { display: none; }
  .corridor { display: block; width: 100%; height: auto; transform: none !important; }
  .tableau { min-height: 100vh; }
  .seal-nav { right: .6rem; }
  .torn-page, .vellum-panel, .clockwork, .index-book, .mirror-card { max-width: 82vw; margin-left: 10vw; }
  .veil-panel { margin-left: 10vw; }
}