:root {
  /* Design tokens retained: JP** compact Interpret **yami** with pulse **.bar** ritual where poured */
  --lacquer: #030208;
  --plum: #16051F;
  --violet: #8D4CFF;
  --magenta: #FF2EA6;
  --cyan: #33E6FF;
  --lime: #B8FF4D;
  --amber: #D88939;
  --paper: #F2DEC0;
  --progress: 0;
  --scene: 0;
  --mx: 50vw;
  --my: 50vh;
  --mincho: "Yu Mincho", "Hiragino Mincho ProN", "Times New Roman", serif;
  --tech: "Chakra Petch", "Rajdhani", "Arial Narrow", monospace;
  --jp: "IBM Plex Sans JP", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
  --bebas: "Bebas Neue", "Impact", "Arial Black", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(141, 76, 255, .16), transparent 25rem),
    radial-gradient(circle at 78% 68%, rgba(255, 46, 166, .13), transparent 28rem),
    linear-gradient(180deg, var(--lacquer), var(--plum) 42%, var(--lacquer));
  font-family: var(--jp);
  overflow-x: hidden;
}

.grain, .scanlines, .smoke { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.grain {
  opacity: .24;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(242, 222, 192, .15) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(51, 230, 255, .12) 0 1px, transparent 1px);
  background-size: 7px 9px, 11px 13px;
  mix-blend-mode: screen;
}
.scanlines {
  opacity: .28;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  animation: scan 7s linear infinite;
}
.smoke { z-index: 3; filter: blur(16px); opacity: .22; }
.smoke::before, .smoke::after {
  content: ""; position: absolute; width: 34rem; height: 8rem; border: 2px solid rgba(255, 46, 166, .34);
  border-color: rgba(255,46,166,.22) transparent transparent rgba(51,230,255,.16); border-radius: 50%; transform: rotate(-18deg);
}
.smoke-one::before { left: 8%; top: 24%; animation: drift 18s ease-in-out infinite; }
.smoke-one::after { right: 3%; top: 48%; animation: drift 22s ease-in-out infinite reverse; }
.smoke-two::before { left: 43%; bottom: 15%; border-color: rgba(141,76,255,.24) transparent transparent rgba(216,137,57,.16); animation: drift 25s ease-in-out infinite; }

.experience { position: relative; z-index: 1; }
.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 7vh 7vw 16vh;
  isolation: isolate;
}
.scene::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(circle at 50% 90%, rgba(255,46,166,.15), transparent 38%), linear-gradient(180deg, transparent, rgba(3,2,8,.86));
}
.counter-line {
  position: absolute; left: 5vw; bottom: 13vh; height: 2px; width: calc(18vw + var(--progress) * 76vw);
  background: linear-gradient(90deg, transparent, var(--violet), var(--magenta), var(--cyan), transparent);
  box-shadow: 0 0 18px var(--violet), 0 0 38px rgba(255,46,166,.45);
  transform-origin: left center;
}
.counter-line::after {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 5vh;
  background: linear-gradient(180deg, rgba(255,46,166,.28), transparent);
  filter: blur(8px); transform: skewX(-18deg);
}
.bent { transform: rotate(-1.8deg); }
.final { width: 86vw; background: linear-gradient(90deg, transparent, var(--amber), var(--magenta), transparent); }

.track { margin: 0 0 .7rem; color: var(--cyan); font-family: var(--tech); letter-spacing: .24em; font-size: clamp(.68rem, 1.1vw, .9rem); text-transform: uppercase; text-shadow: 0 0 12px var(--cyan); }
h1, h2 { margin: 0; font-family: var(--mincho); font-weight: 400; line-height: .92; }
h1 { font-size: clamp(4rem, 13vw, 12rem); max-width: 7ch; text-shadow: 0 0 24px rgba(141,76,255,.5); }
h2 { font-size: clamp(2.2rem, 6vw, 6.5rem); }
p { line-height: 1.65; }
.scene-copy, .menu-transparency, .receipt-slip, .coaster, .last-note { position: relative; z-index: 4; }

.cropped-word { position: absolute; font-family: var(--bebas); font-size: clamp(9rem, 25vw, 24rem); letter-spacing: -.04em; color: rgba(255,46,166,.09); line-height: .75; pointer-events: none; text-shadow: 0 0 55px rgba(255,46,166,.28); }
.word-yami { left: -4vw; top: 5vh; }
.word-last { right: -7vw; top: 2vh; color: rgba(51,230,255,.08); }

.street-door { width: min(43rem, 68vw); height: 78vh; position: relative; display: grid; grid-template-columns: 1fr auto 1fr; filter: drop-shadow(0 0 45px rgba(0,0,0,.9)); }
.door-panel { background: linear-gradient(90deg, #05030a, var(--plum), #05030a); border: 1px solid rgba(242,222,192,.05); }
.door-seam { width: calc(3px + var(--progress) * 26px); background: linear-gradient(180deg, transparent, var(--violet), var(--magenta), var(--violet), transparent); box-shadow: 0 0 24px var(--violet), 0 0 70px var(--magenta); }
.vertical-sign { position: absolute; right: -2.2rem; top: 13%; writing-mode: vertical-rl; font-family: var(--tech); letter-spacing: .3em; color: var(--paper); text-shadow: 0 0 12px var(--magenta), 0 0 26px var(--violet); }
.dark-drop, .traveler-drop { border-radius: 50% 50% 54% 46%; background: radial-gradient(circle at 35% 28%, var(--cyan), var(--violet) 38%, var(--lacquer) 70%); box-shadow: 0 0 12px var(--cyan), 0 0 28px var(--violet); }
.knob { position: absolute; width: 18px; height: 18px; right: 45%; top: 52%; }
.door-copy { position: absolute; left: 7vw; bottom: 17vh; max-width: 44rem; }
.door-copy p:last-child { color: rgba(242,222,192,.72); max-width: 30rem; }

.scene-stair { background: radial-gradient(circle at 68% 24%, rgba(141,76,255,.23), transparent 28rem), var(--lacquer); }
.stair-shadows { position: absolute; inset: 12vh -10vw 20vh 8vw; transform: skewY(-18deg); opacity: .8; }
.stair-shadows span { display: block; height: 11vh; margin: 2vh 0; background: linear-gradient(90deg, rgba(141,76,255,.42), transparent 65%); box-shadow: 0 0 34px rgba(141,76,255,.25); }
.neon-dust { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--cyan) 0 1px, transparent 2px), radial-gradient(circle, var(--magenta) 0 1px, transparent 2px); background-size: 91px 67px, 53px 79px; opacity: .2; transform: translateY(calc(var(--progress) * -120px)); }
.menu-transparency { justify-self: end; align-self: end; width: min(36rem, 76vw); padding: 2rem; margin-bottom: 8vh; background: linear-gradient(135deg, rgba(242,222,192,.11), rgba(141,76,255,.13)); border: 1px solid rgba(51,230,255,.35); backdrop-filter: blur(8px); box-shadow: 0 0 48px rgba(51,230,255,.13); transform: rotate(-3deg); }
.tube-mark { position: absolute; left: 16vw; top: 18vh; width: 10rem; height: 14rem; border: 10px solid var(--magenta); border-right-color: transparent; border-radius: 45% 0 0 45%; filter: drop-shadow(0 0 18px var(--magenta)); opacity: .75; }

.scene-counter { background: radial-gradient(ellipse at 50% 78%, rgba(255,46,166,.22), transparent 44%), var(--lacquer); }
.bottle-row { position: absolute; left: 7vw; bottom: 18vh; display: flex; gap: clamp(1.2rem, 4vw, 4rem); transform: translateX(calc((var(--progress) - .45) * -140px)); }
.bottle { width: clamp(3.2rem, 7vw, 6rem); height: clamp(13rem, 30vh, 22rem); position: relative; border-radius: 1.5rem 1.5rem .4rem .4rem; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02), rgba(255,255,255,.12)); border: 1px solid rgba(242,222,192,.14); box-shadow: inset 0 -6rem 4rem rgba(0,0,0,.45), 0 0 28px currentColor; color: var(--violet); }
.bottle::before { content: ""; position: absolute; left: 34%; top: -25%; width: 32%; height: 28%; background: inherit; border: inherit; border-radius: .5rem .5rem 0 0; }
.bottle span { position: absolute; left: 12%; right: 12%; bottom: 12%; height: 28%; background: currentColor; filter: blur(14px); opacity: .45; }
.bottle-amber { color: var(--amber); } .bottle-magenta { color: var(--magenta); } .bottle-cyan { color: var(--cyan); }
.receipt-slip { justify-self: end; width: min(25rem, 72vw); padding: 2rem 1.6rem; color: var(--plum); background: var(--paper); box-shadow: 0 18px 60px rgba(0,0,0,.55); transform: rotate(2.4deg); }
.receipt-slip::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(3,2,8,.08) 0 1px, transparent 1px 16px); pointer-events: none; }
.receipt-slip h2 { font-size: clamp(2rem, 4vw, 4rem); color: var(--plum); }
.receipt-slip ul { padding-left: 1.2rem; font-family: var(--tech); letter-spacing: .08em; }
.matchbook { position: absolute; left: 52vw; bottom: 20vh; padding: 1rem 1.4rem; background: var(--magenta); color: var(--lacquer); font-family: var(--tech); transform: rotate(-11deg); box-shadow: 0 0 26px rgba(255,46,166,.55); }
.matchbook span { color: var(--paper); }
.lacquer-reflection { position: absolute; bottom: 7vh; left: 33vw; font-family: var(--mincho); font-size: clamp(3rem, 9vw, 9rem); color: rgba(141,76,255,.25); transform: scaleY(-1) skewX(-18deg); filter: blur(2px); }

.scene-ice { background: radial-gradient(circle at 35% 60%, rgba(51,230,255,.18), transparent 25rem), var(--lacquer); }
.ice-well { position: absolute; left: 7vw; bottom: 16vh; width: 48vw; height: 50vh; }
.glass { position: absolute; bottom: 0; width: 11rem; height: 15rem; border: 2px solid rgba(242,222,192,.24); border-top: 6px solid rgba(242,222,192,.4); border-radius: .8rem .8rem 2.2rem 2.2rem; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.02)); overflow: hidden; }
.glass::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 8%; height: calc(34% + var(--progress) * 20%); background: linear-gradient(180deg, rgba(3,2,8,.2), rgba(22,5,31,.9)); box-shadow: inset 0 0 32px rgba(255,46,166,.3); border-radius: 0 0 1.6rem 1.6rem; }
.glass i, .glass b { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(51,230,255,.36); opacity: 0; transition: opacity .5s; z-index: 3; }
.glass:hover i, .glass:hover b { opacity: 1; }
.glass i { right: 18%; top: 24%; } .glass b { left: 20%; top: 44%; }
.glass-two { left: 14rem; width: 8rem; height: 12rem; transform: rotate(4deg); }
.ice-cube { position: absolute; width: 5rem; height: 5rem; border: 1px solid rgba(51,230,255,.55); background: radial-gradient(circle, var(--cyan), rgba(51,230,255,.13) 45%, rgba(242,222,192,.08)); box-shadow: 0 0 25px var(--cyan); transform: rotate(12deg); }
.cube-one { left: 18rem; bottom: 10rem; animation: float 6s ease-in-out infinite; }
.cube-two { left: 5rem; bottom: 17rem; width: 3.6rem; height: 3.6rem; animation: float 7s ease-in-out infinite reverse; }
.cube-three { left: 27rem; bottom: 4rem; width: 4.2rem; height: 4.2rem; animation: float 8s ease-in-out infinite; }
.pour { position: absolute; left: 35vw; top: 4vh; width: 18rem; height: 68vh; overflow: visible; filter: drop-shadow(0 0 12px var(--magenta)); }
.pour path { fill: none; stroke: url(#none); stroke: var(--magenta); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 760; stroke-dashoffset: calc(760 - var(--progress) * 760); opacity: .75; }
.coaster { justify-self: end; align-self: center; width: min(30rem, 72vw); padding: 2.2rem; border-radius: 50%; aspect-ratio: 1; display: grid; align-content: center; background: repeating-radial-gradient(circle, rgba(51,230,255,.18) 0 2px, rgba(3,2,8,.88) 2px 12px); border: 1px solid rgba(51,230,255,.45); box-shadow: 0 0 44px rgba(51,230,255,.25); }

.scene-train { background: radial-gradient(circle at 50% 22%, rgba(216,137,57,.14), transparent 20rem), var(--lacquer); }
.vinyl { position: absolute; left: 7vw; bottom: 17vh; width: clamp(16rem, 35vw, 34rem); aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #090611 0 8px, #030208 8px 12px, rgba(141,76,255,.22) 12px 13px); box-shadow: 0 0 55px rgba(141,76,255,.28); animation: spin 22s linear infinite; }
.vinyl::after { content: ""; position: absolute; inset: 39%; border-radius: 50%; background: radial-gradient(circle, var(--amber), var(--magenta)); box-shadow: 0 0 24px var(--amber); }
.train-window { position: absolute; right: 8vw; top: 15vh; width: 42vw; height: 22vh; border: 1px solid rgba(216,137,57,.42); border-radius: 2rem; background: linear-gradient(90deg, rgba(216,137,57,.08), rgba(141,76,255,.13)); box-shadow: inset 0 0 34px rgba(216,137,57,.12), 0 0 42px rgba(216,137,57,.12); overflow: hidden; }
.city-lights { width: 160%; height: 100%; background: linear-gradient(90deg, transparent, var(--amber) 2px, transparent 4px), linear-gradient(90deg, transparent, var(--magenta) 2px, transparent 5px); background-size: 82px 100%, 137px 100%; animation: train 7s linear infinite; opacity: .75; }
.last-note { align-self: end; justify-self: end; margin-bottom: 6vh; width: min(34rem, 76vw); padding: 2rem; background: rgba(22,5,31,.72); border-left: 3px solid var(--amber); box-shadow: 0 0 45px rgba(216,137,57,.12); }

.drop-nav { position: fixed; z-index: 30; left: 50%; bottom: 4vh; transform: translateX(-50%); display: flex; gap: clamp(.8rem, 2vw, 1.6rem); padding: .7rem 1rem; border-top: 1px solid rgba(242,222,192,.18); background: rgba(3,2,8,.48); backdrop-filter: blur(8px); }
.drop { width: 18px; height: 18px; border: 0; border-radius: 50% 50% 58% 42%; background: rgba(242,222,192,.16); color: var(--paper); cursor: pointer; position: relative; box-shadow: 0 0 8px rgba(242,222,192,.08); }
.drop span { position: absolute; top: -1.4rem; left: 50%; transform: translateX(-50%); font-family: var(--tech); font-size: .62rem; color: rgba(242,222,192,.5); }
.drop.active { background: var(--magenta); box-shadow: 0 0 16px var(--magenta), 0 0 26px var(--violet); }
.traveler-drop { position: absolute; width: 10px; height: 10px; left: 1.25rem; bottom: -.25rem; transition: transform .55s ease; }
.tiltable { transition: transform .25s ease, box-shadow .25s ease; }

@keyframes scan { to { transform: translateY(16px); } }
@keyframes drift { 50% { transform: translate(8vw, -4vh) rotate(8deg) scale(1.12); } }
@keyframes float { 50% { transform: translateY(-22px) rotate(-8deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes train { to { transform: translateX(-37%); } }

@media (max-width: 760px) {
  .scene { padding: 6vh 6vw 18vh; place-items: end start; }
  .street-door { width: 82vw; height: 70vh; margin: 0 auto; }
  .door-copy { left: 6vw; bottom: 18vh; }
  .bottle-row { opacity: .62; }
  .ice-well { width: 90vw; left: 0; opacity: .7; }
  .train-window { width: 72vw; right: 6vw; }
  .coaster, .receipt-slip, .menu-transparency, .last-note { width: 86vw; }
}