:root {
  --black: #09070B;
  --paper: #F4EBDD;
  --mirror: #8FA7A0;
  --plum: #3B1737;
  --vermillion: #E4413F;
  --nickel: #C9C4B8;
  --blue: #B9D7FF;
  --bodoni: "Bodoni Moda", Didot, "Bodoni 72", "Times New Roman", serif;
  --sans: "Instrument Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --mono: "Azeret Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 37% 16%, rgba(228,65,63,.12), transparent 28rem),
    linear-gradient(90deg, rgba(59,23,55,.62), transparent 19%, transparent 73%, rgba(59,23,55,.55)),
    var(--black);
  font-family: var(--sans);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  z-index: 30;
  background-image: repeating-linear-gradient(90deg, transparent 0 12px, rgba(244,235,221,.15) 13px), repeating-linear-gradient(0deg, transparent 0 9px, rgba(201,196,184,.12) 10px);
  mix-blend-mode: screen;
}

.stage-hardware { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.spine-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 37%;
  width: 1px;
  background: linear-gradient(var(--paper), var(--vermillion), var(--nickel));
  box-shadow: 0 0 0 1px rgba(9,7,11,.8), 0 0 18px rgba(228,65,63,.24);
}
.spine-seam::before {
  content: "";
  position: absolute;
  inset: 0 -3px;
  background: repeating-linear-gradient(180deg, transparent 0 14px, var(--nickel) 15px 18px, transparent 19px 32px);
  opacity: .7;
}
.selvage {
  position: absolute;
  top: 2rem;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: .18em;
  font: 700 .66rem var(--mono);
  color: rgba(244,235,221,.5);
}
.selvage-left { left: 1.15rem; }
.selvage-right { right: 1.15rem; }

.persistent-tag {
  position: absolute;
  left: calc(37% + 14px);
  top: 1.35rem;
  width: 142px;
  min-height: 78px;
  padding: 16px 14px 12px;
  background: var(--paper);
  color: var(--black);
  border: 1px solid var(--nickel);
  transform: rotate(-3deg);
  box-shadow: 0 18px 35px rgba(0,0,0,.45);
  transition: transform .55s ease, background .55s ease;
}
.persistent-tag::before {
  content: "";
  position: absolute;
  top: -31px;
  left: 22px;
  height: 31px;
  border-left: 1px solid var(--nickel);
}
.tag-eyelet { position: absolute; top: 7px; left: 17px; width: 8px; height: 8px; border: 1px solid var(--black); border-radius: 50%; }
.tag-label { display: block; margin: 13px 0 4px; font: 700 .52rem var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--plum); }
#tagWord { font: 600 1.25rem var(--bodoni); color: var(--vermillion); }

.room {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(201,196,184,.2);
}
.room::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0 34%, rgba(244,235,221,.04) 34.2% 35%, transparent 35.2%);
}

.hero-room { display: grid; place-items: center; background: radial-gradient(circle at 52% 48%, rgba(244,235,221,.08), transparent 35%), var(--black); }
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 54%;
  z-index: 3;
  background: repeating-linear-gradient(90deg, #09070B 0 22px, #170b18 23px 42px, #3B1737 43px 58px, #0e0910 59px 76px);
  box-shadow: inset 0 0 80px rgba(0,0,0,.75);
  animation: curtainDraw 1.9s cubic-bezier(.76,0,.24,1) .2s forwards;
}
.curtain-left { left: 0; transform-origin: left; }
.curtain-right { right: 0; transform-origin: right; }
@keyframes curtainDraw { to { width: 22%; filter: brightness(.68); } }
.label-patch {
  position: relative;
  z-index: 5;
  width: min(560px, 68vw);
  min-height: 230px;
  padding: 34px 46px;
  background:
    linear-gradient(90deg, rgba(9,7,11,.05) 50%, transparent 50%) 0 0/18px 18px,
    var(--paper);
  color: var(--black);
  border: 1px solid var(--nickel);
  transform: translateX(-7vw) rotate(-1.8deg);
  box-shadow: 0 38px 90px rgba(0,0,0,.62);
  animation: labelTug 4.2s ease-in-out infinite;
}
.label-patch h1 { margin: 5px 0; font: 700 clamp(3rem, 9vw, 7.8rem)/.82 var(--bodoni); letter-spacing: -.06em; color: var(--plum); }
.label-kana { margin: 0; color: var(--vermillion); font: 600 1rem var(--gothic); letter-spacing: .32em; }
.label-note, .chapter-number { font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.label-note { color: rgba(9,7,11,.65); }
.stitch { position: absolute; left: 16px; right: 16px; height: 8px; background: repeating-linear-gradient(90deg, var(--vermillion) 0 9px, transparent 10px 23px); }
.stitch-top { top: 13px; }
.stitch-bottom { bottom: 13px; }
@keyframes labelTug { 50% { transform: translateX(-7vw) rotate(-.5deg) translateY(5px); } }
.thread-line { position: absolute; z-index: 4; top: 58%; left: 37%; height: 28vh; border-left: 1px solid var(--nickel); animation: threadDraw 2.3s ease forwards; }
@keyframes threadDraw { from { height: 0; } }
.pull-thread { position: absolute; z-index: 5; left: calc(37% + 18px); bottom: 8vh; font: 700 .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--nickel); }
.hanger-line { position: absolute; left: 9vw; right: 8vw; top: 17vh; height: 1px; background: rgba(201,196,184,.4); }
.hanger-line span { position: absolute; width: 76px; height: 42px; border: 1px solid rgba(201,196,184,.45); border-bottom: 0; border-radius: 60px 60px 0 0; transform: rotate(8deg); }
.hanger-line span:nth-child(1) { left: 2%; top: 14px; } .hanger-line span:nth-child(2) { right: 14%; top: 9px; transform: rotate(-5deg); } .hanger-line span:nth-child(3) { left: 48%; top: 20px; }
.chapter-number { position: absolute; left: 5vw; bottom: 5vh; color: rgba(244,235,221,.62); }

.mirror-room { background: linear-gradient(90deg, var(--black), #151015 44%, var(--plum)); }
.door { position: absolute; top: 8vh; bottom: 7vh; width: 24vw; border: 1px solid rgba(201,196,184,.28); background: linear-gradient(120deg, rgba(244,235,221,.06), rgba(59,23,55,.45)); transition: transform 1s ease; }
.door-left { left: 8vw; transform-origin: left; } .door-right { right: 8vw; transform-origin: right; }
.room.in-view .door-left { transform: perspective(900px) rotateY(-18deg); } .room.in-view .door-right { transform: perspective(900px) rotateY(18deg); }
.mirror-frame { position: absolute; left: 13vw; top: 12vh; width: 36vw; min-width: 310px; height: 72vh; padding: 15px; border-radius: 52% 48% 46% 54%; border: 1px solid var(--nickel); background: rgba(201,196,184,.12); }
.mirror-glass { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: linear-gradient(135deg, rgba(143,167,160,.72), rgba(185,215,255,.22), rgba(9,7,11,.8)); box-shadow: inset 0 0 60px rgba(244,235,221,.16); }
.fog { position: absolute; inset: 0; background: radial-gradient(circle, rgba(244,235,221,.64), rgba(143,167,160,.35) 35%, transparent 67%); animation: fogClear 4s ease-in-out infinite alternate; }
@keyframes fogClear { to { opacity: .18; transform: translateX(18%) scale(1.1); } }
.glint { position: absolute; width: 2px; height: 130%; background: rgba(244,235,221,.55); transform: rotate(24deg); filter: blur(1px); }
.glint-one { left: 26%; top: -10%; } .glint-two { right: 18%; top: -20%; opacity: .45; }
.missing-outline { position: absolute; left: 31%; top: 20%; width: 36%; height: 54%; border: 1px solid rgba(9,7,11,.5); border-bottom: 0; border-radius: 48% 48% 12px 12px; }
.mirror-text { position: absolute; left: 18%; bottom: 17%; font: 700 .8rem var(--mono); text-transform: uppercase; letter-spacing: .22em; color: var(--vermillion); }
.artifact-copy { position: absolute; right: 8vw; top: 25vh; width: min(460px, 38vw); }
.eyebrow { margin: 0 0 1rem; font: 800 .72rem var(--mono); text-transform: uppercase; letter-spacing: .24em; color: var(--blue); }
h2 { margin: 0; font: 650 clamp(2.4rem, 6.4vw, 6.8rem)/.9 var(--bodoni); letter-spacing: -.045em; }
.artifact-copy p:last-child, .wardrobe-note, .perfume-index li { color: rgba(244,235,221,.7); line-height: 1.75; }
.lipstick-swipe { position: absolute; right: 20vw; bottom: 18vh; width: 150px; height: 18px; background: var(--vermillion); border-radius: 80% 30% 75% 25%; transform: rotate(-8deg); box-shadow: 0 0 22px rgba(228,65,63,.34); }

.wardrobe-room { background: radial-gradient(circle at 72% 44%, rgba(143,167,160,.22), transparent 28%), var(--black); }
.rack-arc { position: absolute; left: 10vw; top: 11vh; width: 74vw; height: 34vh; border-top: 2px solid var(--nickel); border-radius: 50%; }
.zipper-track { position: absolute; left: calc(37% - 9px); top: 12vh; bottom: 12vh; display: flex; flex-direction: column; gap: 14px; }
.zipper-track i { display: block; width: 18px; height: 24px; border: 1px solid var(--nickel); transform: skewY(-12deg); background: rgba(244,235,221,.07); }
.vertical-word { position: absolute; left: 8vw; top: 11vh; writing-mode: vertical-rl; font: 700 clamp(3rem, 8vw, 8rem)/.8 var(--bodoni); color: rgba(244,235,221,.88); }
.tag-cloud { position: absolute; left: 43%; top: 17vh; display: grid; gap: 22px; }
.alias-tag { width: 250px; padding: 18px 20px; background: var(--paper); color: var(--black); border: 1px solid var(--nickel); font: 800 .82rem var(--mono); letter-spacing: .12em; text-align: left; box-shadow: 0 18px 36px rgba(0,0,0,.32); transform: rotate(var(--r, -2deg)); transition: transform .35s ease, background .35s ease, color .35s ease; cursor: pointer; }
.alias-tag:nth-child(2) { --r: 2deg; margin-left: 40px; } .alias-tag:nth-child(3) { --r: -4deg; margin-left: 12px; } .alias-tag:nth-child(4) { --r: 3deg; margin-left: 58px; }
.alias-tag.selected, .alias-tag:hover { background: var(--vermillion); color: var(--paper); transform: rotate(0) translateX(-12px); }
.dress-form { position: absolute; right: 12vw; bottom: 10vh; width: 230px; height: 480px; opacity: .92; }
.neck { margin: 0 auto; width: 42px; height: 70px; border: 1px solid var(--nickel); border-bottom: 0; border-radius: 50% 50% 0 0; }
.torso { width: 210px; height: 270px; margin: 0 auto; border: 1px solid var(--nickel); border-radius: 44% 44% 24% 24%; background: linear-gradient(90deg, transparent, rgba(244,235,221,.08), transparent); }
.stand { margin: 0 auto; width: 2px; height: 140px; background: var(--nickel); box-shadow: -58px 138px 0 -1px var(--nickel), 58px 138px 0 -1px var(--nickel); }
.wardrobe-note { position: absolute; left: 43%; bottom: 12vh; width: 330px; font-family: var(--gothic); }

.perfume-room { background: linear-gradient(140deg, #100b11, var(--plum)); }
.blotter-stack { position: absolute; left: 8vw; top: 14vh; width: 46vw; height: 68vh; }
.blotter { position: absolute; width: min(420px, 34vw); height: 62vh; padding: 32px; background: var(--paper); color: var(--black); border: 1px solid var(--nickel); box-shadow: 0 30px 70px rgba(0,0,0,.35); transform-origin: top center; }
.blotter span { font: 800 .8rem var(--mono); color: var(--vermillion); } .blotter b { display: block; margin-top: 36vh; font: 650 2.2rem var(--bodoni); } .blotter em { font-family: var(--gothic); color: rgba(9,7,11,.65); }
.card-a { transform: rotate(-8deg); } .card-b { left: 120px; transform: rotate(4deg); background: #C9C4B8; } .card-c { left: 230px; transform: rotate(13deg); background: #F4EBDD; }
.perfume-index { position: absolute; right: 8vw; top: 22vh; width: min(520px, 40vw); }
.perfume-index ol { padding-left: 1.2rem; margin-top: 2rem; font-family: var(--mono); }
.pearls { position: absolute; right: 13vw; bottom: 12vh; display: flex; gap: 15px; }
.pearls span { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--paper), var(--nickel) 60%, #6d6860); }

.platform-room { background: linear-gradient(180deg, rgba(185,215,255,.12), var(--black) 56%); }
.tile-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(185,215,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(185,215,255,.13) 1px, transparent 1px); background-size: 86px 56px; transform: perspective(700px) rotateX(58deg) scale(1.5); transform-origin: bottom; opacity: .46; }
.train-window { position: absolute; left: 9vw; top: 18vh; width: 78vw; height: 58vh; overflow: hidden; border: 1px solid var(--blue); background: linear-gradient(100deg, rgba(185,215,255,.24), rgba(143,167,160,.18) 48%, rgba(9,7,11,.86)); box-shadow: inset 0 0 80px rgba(185,215,255,.08); }
.train-window p { margin: 28px; font: 800 .8rem var(--mono); color: var(--blue); letter-spacing: .18em; }
.train-window h2 { position: absolute; left: 28px; bottom: 28px; width: 74%; color: var(--paper); }
.passing-rack { position: absolute; top: 0; bottom: 0; width: 20%; background: linear-gradient(90deg, transparent, rgba(9,7,11,.5), transparent); animation: rackPass 8s linear infinite; }
.rack-two { animation-delay: -3.7s; width: 12%; }
@keyframes rackPass { from { transform: translateX(-30vw); } to { transform: translateX(105vw); } }
.ticket-punches { position: absolute; right: 8vw; bottom: 13vh; display: flex; gap: 18px; }
.ticket-punches span { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--blue); background: var(--black); }

.receipt-room { background: radial-gradient(circle at 80% 22%, rgba(228,65,63,.12), transparent 24rem), #0d090d; }
.receipt-roll { position: absolute; left: calc(37% - 120px); top: 0; width: min(520px, 54vw); min-height: 88vh; padding: 78px 46px 44px; background: var(--paper); color: var(--black); box-shadow: 0 32px 90px rgba(0,0,0,.48); transform: translateY(-6vh); animation: unfurl 1.8s ease both; }
@keyframes unfurl { from { clip-path: inset(0 0 82% 0); } to { clip-path: inset(0); } }
.receipt-code, .torn-edge { font: 800 .78rem var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--vermillion); }
.receipt-roll h2 { color: var(--plum); }
.receipt-roll ul { list-style: none; padding: 0; margin: 34px 0; font-family: var(--mono); }
.receipt-roll li { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px dashed rgba(9,7,11,.35); }
.receipt-roll span { color: var(--plum); } .receipt-roll b { font-weight: 700; }
.torn-edge { position: relative; padding-top: 22px; color: rgba(9,7,11,.62); }
.safety-pin { position: absolute; right: 18vw; top: 31vh; width: 170px; height: 54px; border: 2px solid var(--nickel); border-radius: 40px; transform: rotate(-18deg); }
.safety-pin::before { content: ""; position: absolute; right: 12px; top: 8px; width: 37px; height: 37px; border-radius: 50%; background: var(--nickel); }

.final-room { background: radial-gradient(circle at 66% 35%, rgba(228,65,63,.22), transparent 28rem), var(--black); }
.final-silhouette { position: absolute; left: 12vw; top: 14vh; width: 340px; height: 72vh; border: 1px solid rgba(201,196,184,.65); border-radius: 48% 48% 18% 18%; background: linear-gradient(90deg, rgba(244,235,221,.05), rgba(143,167,160,.12), rgba(244,235,221,.04)); }
.pin-target { position: absolute; left: 50%; top: 35%; width: 14px; height: 14px; border-radius: 50%; background: var(--vermillion); box-shadow: 0 0 0 8px rgba(228,65,63,.12); }
.final-name-tag { position: absolute; left: 48%; top: 39%; padding: 18px 22px; background: var(--paper); color: var(--vermillion); border: 1px solid var(--nickel); font: 700 1.2rem var(--bodoni); transform: rotate(8deg) translate(25px, 60px); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.final-room.pinned .final-name-tag { transform: rotate(-4deg) translate(-22px, -18px); }
.final-mirror { position: absolute; right: 8vw; top: 13vh; width: 42vw; height: 66vh; display: grid; place-items: center; border: 1px solid var(--mirror); background: linear-gradient(135deg, rgba(143,167,160,.3), rgba(185,215,255,.13), rgba(9,7,11,.75)); overflow: hidden; }
.final-mirror::before { content: ""; position: absolute; inset: -20%; background: linear-gradient(100deg, transparent 40%, rgba(244,235,221,.22), transparent 58%); animation: shimmer 3s ease-in-out infinite; }
@keyframes shimmer { 50% { transform: translateX(35%); } }
.final-mirror span { position: relative; font: 750 clamp(3.2rem, 9vw, 9rem)/.8 var(--bodoni); color: var(--vermillion); letter-spacing: -.07em; }
.final-copy { position: absolute; left: 43%; bottom: 9vh; width: 420px; }
.pin-button { margin-top: 24px; padding: 14px 18px; background: transparent; color: var(--paper); border: 1px solid var(--vermillion); font: 800 .72rem var(--mono); text-transform: uppercase; letter-spacing: .16em; cursor: pointer; transition: background .3s ease, color .3s ease; }
.pin-button:hover { background: var(--vermillion); color: var(--paper); }

.room.in-view .label-patch, .room.in-view .mirror-frame, .room.in-view .tag-cloud, .room.in-view .blotter-stack, .room.in-view .train-window, .room.in-view .receipt-roll, .room.in-view .final-silhouette { animation-play-state: running; }

@media (max-width: 760px) {
  .spine-seam { left: 28px; }
  .persistent-tag { left: 44px; transform: scale(.86) rotate(-3deg); transform-origin: top left; }
  .selvage-right { display: none; }
  .label-patch { width: 78vw; transform: translateX(3vw) rotate(-1.8deg); }
  .mirror-frame, .artifact-copy, .tag-cloud, .dress-form, .perfume-index, .train-window, .receipt-roll, .final-silhouette, .final-mirror, .final-copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 82vw; min-width: 0; margin: 12vh auto 0; }
  .room { padding: 8vh 0 12vh; }
  .door, .vertical-word, .blotter-stack { opacity: .35; }
  .final-copy { margin-top: 6vh; }
}