:root {
  /* DESIGN FONT TOKENS: Space Grotesk* Grotesk** for call-sheet labels */
  --black: #09070B;
  --magenta: #FF2E88;
  --blush: #F5C7D8;
  --cobalt: #315BFF;
  --spot: #F6D27A;
  --smoke: #ECE6DE;
  --oxide: #9B1D35;
  --serif: Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --grotesk: "Space Grotesk", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --jp: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
  --hand: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--black);
  color: var(--smoke);
  font-family: var(--grotesk);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 46, 136, .22), transparent 28%),
    radial-gradient(circle at 78% 14%, rgba(49, 91, 255, .18), transparent 30%),
    linear-gradient(115deg, rgba(155, 29, 53, .18), transparent 45%, rgba(246, 210, 122, .08));
  pointer-events: none;
  z-index: 0;
}

.grain {
  position: fixed;
  inset: 0;
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 10% 10%, rgba(236,230,222,.09) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(87deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 20;
  animation: grainDrift 1.8s steps(4) infinite;
}

.scrim {
  position: fixed;
  top: -8vh;
  bottom: -8vh;
  width: 34vw;
  z-index: 2;
  pointer-events: none;
  opacity: .26;
  filter: blur(.2px);
  background: repeating-linear-gradient(90deg, rgba(245,199,216,.04), rgba(245,199,216,.04) 2px, transparent 2px, transparent 14px);
  animation: curtainBreathe 7s ease-in-out infinite;
}

.scrim-a { left: -10vw; transform: skewX(-8deg); border-right: 1px solid rgba(245,199,216,.2); }
.scrim-b { right: -13vw; transform: skewX(7deg); border-left: 1px solid rgba(49,91,255,.2); animation-delay: -3s; }

.thread-map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 7;
  opacity: .86;
}

#threadPath {
  fill: none;
  stroke: var(--oxide);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1320;
  stroke-dashoffset: calc(1320 - (var(--thread-progress, .1) * 1320));
  filter: drop-shadow(0 0 9px rgba(255,46,136,.55));
  transition: stroke-dashoffset 900ms cubic-bezier(.22,.75,.12,1);
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 3;
}

.scene-track {
  display: flex;
  width: 500vw;
  height: 100vh;
  transform: translate3d(0,0,0);
  transition: transform 950ms cubic-bezier(.72,0,.16,1);
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  overflow: hidden;
  padding: clamp(26px, 5vw, 72px);
  isolation: isolate;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9,7,11,.64), transparent 24%, transparent 76%, rgba(9,7,11,.75));
  pointer-events: none;
  z-index: -1;
}

.floor-nav {
  position: fixed;
  left: 4vw;
  bottom: 4.2vh;
  z-index: 30;
  display: flex;
  gap: 12px;
  transform: rotate(-2deg);
}

.nav-tape {
  border: 0;
  padding: 9px 14px;
  color: var(--black);
  background: rgba(246,210,122,.78);
  font: 700 11px/1 var(--grotesk);
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(9,7,11,.28) inset, 0 8px 26px rgba(0,0,0,.32);
  clip-path: polygon(6% 0, 100% 9%, 94% 100%, 0 90%);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.nav-tape:nth-child(even) { transform: rotate(3deg); }
.nav-tape.active { background: var(--magenta); color: var(--smoke); transform: translateY(-8px) rotate(-1deg); }

.progress-rail {
  position: fixed;
  right: 3vw;
  top: 11vh;
  width: 2px;
  height: 70vh;
  z-index: 30;
  background: rgba(236,230,222,.18);
}

.progress-rail span {
  display: block;
  width: 100%;
  height: 20%;
  background: linear-gradient(var(--magenta), var(--spot));
  box-shadow: 0 0 18px rgba(255,46,136,.9);
  transition: height 800ms cubic-bezier(.22,.75,.12,1);
}

.call-sheet { background: radial-gradient(circle at 72% 46%, rgba(155,29,53,.22), transparent 26%), var(--black); }
.rose-beam { position: absolute; inset: -20vh -25vw; background: linear-gradient(112deg, transparent 39%, rgba(255,46,136,.0) 43%, rgba(255,46,136,.84) 48%, rgba(245,199,216,.2) 52%, transparent 58%); filter: blur(2px); opacity: .78; animation: gelSweep 8s ease-in-out infinite; }
.slate { position: absolute; left: 11vw; top: 17vh; width: min(720px, 68vw); min-height: 390px; padding: 30px 36px 42px; background: linear-gradient(140deg, rgba(236,230,222,.1), rgba(236,230,222,.025)); border: 1px solid rgba(236,230,222,.48); box-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 8px rgba(9,7,11,.36) inset; transform: rotate(-2deg); backdrop-filter: blur(3px); }
.slate::before { content: ""; position: absolute; left: 0; right: 0; top: 72px; height: 58px; background: repeating-linear-gradient(135deg, rgba(236,230,222,.86) 0 24px, rgba(9,7,11,.8) 24px 48px); border-block: 1px solid rgba(236,230,222,.38); }
.slate-top { display: flex; justify-content: space-between; margin-bottom: 92px; color: var(--spot); font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.slate h1, .final-mark h2, .scene h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.055em; }
.slate h1 { margin: 0; font-size: clamp(56px, 9vw, 136px); line-height: .86; text-shadow: 0 0 35px rgba(255,46,136,.32); }
.slate p { max-width: 430px; margin: 24px 0 0; color: var(--blush); font-size: clamp(16px, 1.6vw, 24px); }
.slate-lines { display: grid; gap: 16px; margin-top: 30px; }
.slate-lines span { height: 1px; background: linear-gradient(90deg, var(--smoke), transparent); opacity: .35; }
.hand-note { position: absolute; margin: 0; color: var(--blush); font-family: var(--hand); font-size: clamp(20px, 2.2vw, 34px); transform: rotate(-8deg); text-shadow: 0 0 14px rgba(255,46,136,.34); }
.note-one { right: 13vw; top: 23vh; }
.note-two { left: 16vw; bottom: 18vh; color: var(--spot); transform: rotate(7deg); }
.jp { font-family: var(--jp); color: rgba(245,199,216,.72); letter-spacing: .24em; }
.vertical { position: absolute; right: 9vw; bottom: 18vh; writing-mode: vertical-rl; font-size: clamp(44px, 8vw, 108px); opacity: .55; }
.chalk-x { position: absolute; width: 120px; height: 120px; }
.chalk-x::before, .chalk-x::after { content: ""; position: absolute; left: 50%; top: 0; width: 5px; height: 100%; background: rgba(246,210,122,.72); border-radius: 99px; filter: blur(.3px); }
.chalk-x::before { transform: rotate(45deg); } .chalk-x::after { transform: rotate(-45deg); }
.x-one { right: 22vw; bottom: 12vh; transform: rotate(10deg); opacity: .65; }

.fitting-room { background: linear-gradient(90deg, rgba(155,29,53,.22), transparent 30%), radial-gradient(circle at 70% 35%, rgba(49,91,255,.22), transparent 30%), var(--black); }
.curtain { position: absolute; top: 0; bottom: 0; width: 31vw; opacity: .42; background: repeating-linear-gradient(90deg, rgba(245,199,216,.16) 0 12px, rgba(155,29,53,.1) 12px 26px, transparent 26px 39px); filter: blur(.5px); animation: curtainBreathe 6s ease-in-out infinite; }
.curtain-left { left: -8vw; transform: skewX(-5deg); } .curtain-right { right: -12vw; transform: skewX(6deg); animation-delay: -2s; }
.fabric-panel { position: absolute; padding: 26px; border: 1px solid rgba(236,230,222,.35); background: linear-gradient(135deg, rgba(245,199,216,.17), rgba(9,7,11,.42)); box-shadow: 0 32px 84px rgba(0,0,0,.58); backdrop-filter: blur(5px); }
.fabric-panel::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(236,230,222,.035) 18px 19px), repeating-linear-gradient(90deg, transparent 0 18px, rgba(236,230,222,.03) 18px 19px); pointer-events: none; }
.fabric-panel span { display: block; color: var(--spot); font-size: 11px; font-weight: 800; letter-spacing: .2em; margin-bottom: 18px; }
.fabric-panel b { position: relative; display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5.6vw, 90px); line-height: .93; letter-spacing: -.05em; }
.fabric-panel em { display: block; max-width: 360px; margin-top: 18px; color: var(--blush); font-style: normal; font-size: 15px; }
.panel-a { left: 9vw; top: 13vh; width: 44vw; min-height: 48vh; transform: rotate(-3deg); }
.panel-b { right: 10vw; top: 24vh; width: 34vw; transform: rotate(4deg); color: var(--smoke); }
.panel-c { left: 39vw; bottom: 12vh; width: 28vw; transform: rotate(-1deg); background: linear-gradient(135deg, rgba(49,91,255,.18), rgba(9,7,11,.52)); }
.tug-thread { position: absolute; inset: 15vh 8vw 8vh 7vw; width: 85vw; height: 70vh; z-index: 4; pointer-events: none; overflow: visible; }
#tugThread { fill: none; stroke: var(--magenta); stroke-width: 2.5; stroke-dasharray: 12 10; filter: drop-shadow(0 0 8px rgba(255,46,136,.8)); }
.tug-thread circle { fill: var(--spot); filter: drop-shadow(0 0 8px rgba(246,210,122,.8)); }
.fitting-note { right: 15vw; bottom: 17vh; color: var(--spot); }
.pins i { position: absolute; width: 7px; height: 86px; background: linear-gradient(var(--spot), var(--oxide)); border-radius: 20px; box-shadow: 0 0 14px rgba(246,210,122,.45); }
.pins i::before { content: ""; position: absolute; top: -8px; left: -5px; width: 17px; height: 17px; border-radius: 50%; background: var(--smoke); }
.pins i:nth-child(1){ left: 22vw; top: 14vh; transform: rotate(16deg); } .pins i:nth-child(2){ left: 58vw; top: 20vh; transform: rotate(-24deg); } .pins i:nth-child(3){ right: 18vw; bottom: 25vh; transform: rotate(8deg); } .pins i:nth-child(4){ left: 46vw; bottom: 17vh; transform: rotate(-11deg); }

.lighting-test { background: radial-gradient(circle at 48% 66%, rgba(246,210,122,.16), transparent 24%), var(--black); }
.lighting-test h2 { position: absolute; left: 7vw; top: 10vh; margin: 0; font-size: clamp(66px, 12vw, 176px); line-height: .78; color: rgba(236,230,222,.82); z-index: 2; }
.gel { position: absolute; width: 38vw; height: 54vh; mix-blend-mode: screen; opacity: .62; filter: blur(.6px); animation: floatGel 9s ease-in-out infinite; }
.gel-magenta { left: 12vw; top: 21vh; background: linear-gradient(130deg, rgba(255,46,136,.86), transparent); transform: rotate(-13deg); }
.gel-cobalt { right: 15vw; top: 13vh; background: linear-gradient(38deg, rgba(49,91,255,.8), transparent); transform: rotate(9deg); animation-delay: -3s; }
.gel-amber { left: 47vw; bottom: 8vh; background: linear-gradient(120deg, rgba(246,210,122,.72), transparent); transform: rotate(18deg); animation-delay: -5s; }
.acetate { position: absolute; padding: 22px 26px; width: min(430px, 34vw); min-height: 130px; border: 1px solid rgba(236,230,222,.35); background: rgba(236,230,222,.09); color: var(--smoke); box-shadow: 0 0 46px rgba(255,46,136,.16); backdrop-filter: blur(8px); font-family: var(--serif); font-size: clamp(22px, 2.7vw, 46px); line-height: .98; opacity: .78; }
.a-one { left: 18vw; bottom: 18vh; transform: rotate(-5deg); } .a-two { right: 8vw; top: 32vh; transform: rotate(6deg); } .a-three { left: 52vw; top: 15vh; transform: rotate(-2deg); font-family: var(--jp); font-size: clamp(18px, 2vw, 34px); }
.mic { position: absolute; top: -30px; right: 29vw; width: 2px; height: 28vh; background: rgba(236,230,222,.38); }
.mic::after { content: ""; position: absolute; bottom: -54px; left: -20px; width: 42px; height: 62px; border-radius: 50% 50% 45% 45%; background: linear-gradient(var(--smoke), rgba(236,230,222,.18)); box-shadow: 0 12px 40px rgba(0,0,0,.7); }
.floor-arrow { position: absolute; right: 18vw; bottom: 10vh; color: var(--spot); font-weight: 800; letter-spacing: .28em; transform: rotate(-6deg); }

.take-seven { background: radial-gradient(circle at 50% 38%, rgba(245,199,216,.12), transparent 38%), var(--black); }
.take-title { position: absolute; left: 7vw; top: 8vh; z-index: 3; }
.take-title span { color: var(--spot); font-weight: 800; letter-spacing: .25em; font-size: 12px; }
.take-title h2 { margin: 10px 0 0; font-size: clamp(58px, 10vw, 144px); line-height: .8; }
.contact-wall { position: absolute; inset: 19vh 7vw 8vh; }
.frame { position: absolute; margin: 0; padding: 12px 12px 38px; background: rgba(236,230,222,.88); color: var(--black); box-shadow: 0 34px 70px rgba(0,0,0,.55); transform-origin: center; opacity: .92; filter: contrast(1.1) saturate(.78); }
.frame::before { content: ""; display: block; width: 100%; height: 100%; min-height: 180px; background: #09070B; }
.frame i { position: absolute; inset: 12px 12px 38px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(245,199,216,.28), transparent 38%), #09070B; }
.frame figcaption { position: absolute; left: 14px; bottom: 11px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.f1 { left: 6vw; top: 18vh; width: 24vw; height: 31vh; transform: rotate(-7deg); } .f2 { left: 29vw; top: 5vh; width: 25vw; height: 38vh; transform: rotate(3deg); } .f3 { right: 13vw; top: 16vh; width: 22vw; height: 30vh; transform: rotate(8deg); } .f4 { left: 18vw; bottom: 1vh; width: 27vw; height: 28vh; transform: rotate(5deg); } .f5 { right: 28vw; bottom: 5vh; width: 20vw; height: 34vh; transform: rotate(-4deg); }
.almost-hands::before, .almost-hands::after { content: ""; position: absolute; bottom: 18%; width: 42%; height: 26%; background: var(--blush); border-radius: 60% 40% 30% 70%; filter: blur(1px); opacity: .75; } .almost-hands::before{ left: -4%; transform: rotate(17deg); } .almost-hands::after{ right: -3%; transform: rotate(-18deg); }
.empty-chairs::before, .empty-chairs::after { content: ""; position: absolute; bottom: 18%; width: 25%; height: 42%; border: 2px solid rgba(236,230,222,.58); border-bottom: 11px solid rgba(236,230,222,.45); } .empty-chairs::before{ left: 19%; transform: skewX(-7deg); } .empty-chairs::after{ right: 21%; transform: skewX(7deg); }
.lip-glass::before { content: ""; position: absolute; left: 23%; top: 22%; width: 54%; height: 50%; border: 2px solid rgba(236,230,222,.55); border-radius: 45% 45% 16% 16%; } .lip-glass::after { content: ""; position: absolute; right: 24%; top: 25%; width: 58px; height: 24px; background: var(--oxide); border-radius: 60% 45% 55% 40%; transform: rotate(-18deg); filter: blur(2px); opacity: .8; }
.tape-mark::before, .tape-mark::after { content: ""; position: absolute; left: 42%; top: 20%; width: 16px; height: 65%; background: var(--spot); opacity: .78; } .tape-mark::before{ transform: rotate(45deg); } .tape-mark::after{ transform: rotate(-45deg); }
.mirror-slit::before { content: ""; position: absolute; inset: 18% 35%; background: linear-gradient(100deg, rgba(236,230,222,.75), rgba(49,91,255,.22), transparent); transform: skewX(-11deg); }
.take-note { right: 8vw; bottom: 8vh; color: var(--blush); }

.afterimage { background: radial-gradient(ellipse at 50% 55%, rgba(236,230,222,.07), transparent 30%), var(--black); }
.cyclorama-glow { position: absolute; left: 22vw; right: 14vw; bottom: 0; height: 44vh; background: radial-gradient(ellipse at 50% 100%, rgba(255,46,136,.25), transparent 64%); opacity: .65; }
.ribbon-loop { position: absolute; inset: 7vh 12vw; width: 76vw; height: 78vh; overflow: visible; }
.ribbon-loop path { fill: none; stroke: var(--oxide); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1500; stroke-dashoffset: 180; filter: drop-shadow(0 0 18px rgba(255,46,136,.65)); animation: ribbonPulse 5s ease-in-out infinite; }
.final-mark { position: absolute; left: 18vw; top: 31vh; }
.final-mark span { color: var(--spot); font-size: 12px; font-weight: 800; letter-spacing: .24em; }
.final-mark h2 { margin: 12px 0; font-size: clamp(62px, 11vw, 164px); line-height: .76; text-shadow: 0 0 42px rgba(155,29,53,.8); }
.final-mark p { max-width: 440px; color: var(--blush); font-size: clamp(16px, 1.7vw, 24px); }
.final-jp { position: absolute; right: 12vw; top: 14vh; writing-mode: vertical-rl; font-size: clamp(58px, 10vw, 140px); opacity: .22; }
.suspended-ribbon { position: absolute; right: 23vw; top: -4vh; width: 7px; height: 42vh; background: linear-gradient(var(--oxide), rgba(155,29,53,.08)); border-radius: 0 0 20px 20px; transform-origin: top; animation: ribbonSway 6s ease-in-out infinite; }

.scene:not(.active) .frame, .scene:not(.active) .acetate, .scene:not(.active) .fabric-panel, .scene:not(.active) .slate { opacity: .2; transform: translateY(20px) rotate(0deg) scale(.98); }
.scene.active .frame { animation: develop 1100ms both; }
.scene.active .frame:nth-child(2) { animation-delay: 120ms; } .scene.active .frame:nth-child(3) { animation-delay: 220ms; } .scene.active .frame:nth-child(4) { animation-delay: 320ms; } .scene.active .frame:nth-child(5) { animation-delay: 420ms; }

@keyframes grainDrift { 0%{ transform: translate(0,0); } 25%{ transform: translate(-1%,1%); } 50%{ transform: translate(1%,-1%); } 75%{ transform: translate(1%,1%); } 100%{ transform: translate(0,0); } }
@keyframes curtainBreathe { 0%,100%{ transform: translateX(0) skewX(var(--skew,0deg)); } 50%{ transform: translateX(18px) skewX(var(--skew,0deg)); } }
@keyframes gelSweep { 0%,100%{ transform: translateX(-4vw) rotate(0deg); opacity:.58; } 50%{ transform: translateX(5vw) rotate(2deg); opacity:.9; } }
@keyframes floatGel { 0%,100%{ translate: 0 0; } 50%{ translate: 3vw -2vh; } }
@keyframes develop { from { opacity: 0; filter: brightness(0) blur(8px); } to { opacity: .92; filter: contrast(1.1) saturate(.78); } }
@keyframes ribbonPulse { 0%,100%{ stroke-dashoffset: 180; } 50%{ stroke-dashoffset: 90; } }
@keyframes ribbonSway { 0%,100%{ transform: rotate(-3deg); } 50%{ transform: rotate(5deg); } }

@media (max-width: 780px) {
  .floor-nav { left: 3vw; right: 3vw; bottom: 2.3vh; overflow: hidden; gap: 6px; }
  .nav-tape { padding: 8px 9px; font-size: 9px; }
  .slate { left: 7vw; width: 84vw; }
  .panel-a, .panel-b, .panel-c { width: 76vw; left: 10vw; right: auto; }
  .panel-b { top: 42vh; } .panel-c { bottom: 15vh; }
  .acetate { width: 72vw; }
  .a-two { right: 12vw; top: 43vh; }
  .contact-wall { inset: 23vh 5vw 13vh; }
  .frame { width: 38vw; }
  .f3 { right: 4vw; } .f5 { right: 10vw; }
}