:root {
  --cabinet-black: #07040D;
  --milk-glass: #FFF7E8;
  --alarm-cherry: #FF4A3D;
  --mint-repair: #51FFB0;
  --sour-cyan: #15F4EE;
  --lemon-denial: #F7FF3C;
  --electric-blush: #FF2F8B;
  --grape-shadow: #5B2BFF;
  --arcade: "Arial Black", Impact, Haettenschweiler, sans-serif;
  --rounded: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --mono-pixel: "Courier New", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;
  background: var(--cabinet-black);
}

body {
  margin: 0;
  color: var(--milk-glass);
  background: var(--cabinet-black);
  font-family: var(--rounded);
  overflow-x: hidden;
}

button { font: inherit; }

.engine { width: 100%; }

.room {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.room::before,
.room::after {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  z-index: -2;
}

.room::before {
  background:
    radial-gradient(circle at 18% 25%, color-mix(in srgb, var(--electric-blush), transparent 55%) 0 9%, transparent 10%),
    radial-gradient(circle at 82% 66%, color-mix(in srgb, var(--sour-cyan), transparent 58%) 0 11%, transparent 12%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 247, 232, .04) 19px 21px);
  animation: roomDrift 12s linear infinite;
}

.room::after {
  background-image: radial-gradient(circle, rgba(255, 247, 232, .2) 1px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: .18;
  mix-blend-mode: screen;
}

.cursor-orb {
  position: fixed;
  width: 34px;
  height: 34px;
  left: 0;
  top: 0;
  border: 2px solid var(--mint-repair);
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 22px var(--mint-repair), inset 0 0 18px var(--sour-cyan);
  opacity: .75;
}

.beat-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  display: grid;
  gap: 13px;
}

.beat-rail span {
  width: 10px;
  height: 34px;
  border: 1px solid var(--milk-glass);
  background: var(--cabinet-black);
  box-shadow: 0 0 14px var(--grape-shadow);
  animation: beatLight 1.6s steps(2, end) infinite;
}

.beat-rail span:nth-child(2) { animation-delay: .15s; border-color: var(--electric-blush); }
.beat-rail span:nth-child(3) { animation-delay: .3s; border-color: var(--sour-cyan); }
.beat-rail span:nth-child(4) { animation-delay: .45s; border-color: var(--lemon-denial); }
.beat-rail span:nth-child(5) { animation-delay: .6s; border-color: var(--mint-repair); }

.cabinet-shell {
  position: relative;
  width: min(82vw, 820px);
  min-height: 74vh;
  border: 8px solid var(--milk-glass);
  border-radius: 34px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .08), transparent 26%),
    linear-gradient(180deg, #120923, var(--cabinet-black) 48%, #10051c);
  box-shadow: 0 0 0 12px var(--cabinet-black), 0 0 60px var(--grape-shadow), inset 0 0 90px rgba(91, 43, 255, .35);
  transform: rotate(-1.4deg);
  padding: clamp(22px, 4vw, 46px);
}

.cabinet-shell.knocked { animation: cabinetKnock .35s cubic-bezier(.2, 1.7, .3, 1) 2; }
.cabinet-shell.opening .shutter-heart .blade { transform: translate(0, 0) rotate(var(--open-rot)); opacity: .42; }
.cabinet-shell.opening .tube-sign { color: var(--mint-repair); text-shadow: 0 0 12px var(--mint-repair), 0 0 34px var(--sour-cyan); }

.screws i,
.screws::before {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(var(--milk-glass), var(--grape-shadow), var(--cabinet-black), var(--milk-glass));
  box-shadow: inset 0 0 0 4px var(--cabinet-black), 0 0 15px var(--sour-cyan);
}
.screws i:nth-child(1) { left: 18px; top: 18px; }
.screws i:nth-child(2) { right: 18px; top: 18px; }
.screws i:nth-child(3) { left: 18px; bottom: 18px; }
.screws i:nth-child(4) { right: 18px; bottom: 18px; }

.diagnostic-strip,
.rhythm-microcopy,
.knock-count {
  font-family: var(--mono-pixel);
  color: var(--sour-cyan);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(.65rem, 1.2vw, .9rem);
}

.acrylic-window {
  position: relative;
  margin: 7vh auto 3vh;
  width: min(90%, 650px);
  border: 4px solid var(--sour-cyan);
  border-radius: 28px;
  background: rgba(255, 247, 232, .05);
  overflow: hidden;
  transform: skew(-7deg);
  box-shadow: 0 0 35px var(--sour-cyan), inset 0 0 35px rgba(21, 244, 238, .24);
}

.tube-sign {
  font-family: var(--arcade);
  font-size: clamp(2.4rem, 10vw, 7.7rem);
  letter-spacing: -.08em;
  line-height: 1.05;
  padding: .18em .22em .24em;
  color: var(--electric-blush);
  text-shadow: 4px 4px 0 var(--grape-shadow), -2px -2px 0 var(--lemon-denial), 0 0 24px var(--electric-blush);
  animation: tubeBlink 4.4s steps(1, end) infinite;
}

.scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.12) 8px 9px);
  mix-blend-mode: overlay;
}

.shutter-heart {
  --heart-size: clamp(180px, 30vw, 310px);
  position: relative;
  margin: 1vh auto;
  width: var(--heart-size);
  height: var(--heart-size);
  filter: drop-shadow(0 0 30px var(--electric-blush));
}

.shutter-heart b {
  position: absolute;
  inset: 20%;
  background: var(--electric-blush);
  clip-path: path("M 50 88 C 15 60 0 42 0 22 C 0 7 13 0 25 0 C 37 0 45 7 50 16 C 55 7 63 0 75 0 C 87 0 100 7 100 22 C 100 42 85 60 50 88 Z");
  box-shadow: 0 0 35px var(--electric-blush);
  opacity: .48;
}

.blade {
  position: absolute;
  inset: 15%;
  background: linear-gradient(45deg, var(--cabinet-black), var(--grape-shadow));
  border: 2px solid var(--sour-cyan);
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
  transform-origin: 50% 50%;
  transition: transform .45s cubic-bezier(.2, 1.4, .2, 1), opacity .3s;
}
.blade-a { --open-rot: -32deg; transform: rotate(0deg) translateX(7%); }
.blade-b { --open-rot: 58deg; transform: rotate(90deg) translateX(7%); }
.blade-c { --open-rot: 148deg; transform: rotate(180deg) translateX(7%); }
.blade-d { --open-rot: 238deg; transform: rotate(270deg) translateX(7%); }

.cabinet-warning,
.orbit-label,
.warning-stack b,
.denial-stamp {
  font-family: var(--arcade);
  text-transform: uppercase;
}

.cabinet-warning {
  margin: 2vh auto;
  width: fit-content;
  background: var(--lemon-denial);
  color: var(--cabinet-black);
  padding: 9px 18px;
  transform: rotate(2deg);
  box-shadow: 7px 7px 0 var(--alarm-cherry);
}

.knock-panel { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 4vh; }
.machine-button {
  border: 3px solid var(--milk-glass);
  border-radius: 999px;
  color: var(--milk-glass);
  background: var(--electric-blush);
  padding: 13px 20px;
  text-transform: uppercase;
  font-weight: 900;
  box-shadow: 0 7px 0 var(--cabinet-black), 0 0 18px var(--electric-blush);
  cursor: pointer;
  transition: transform .18s, filter .18s;
}
.machine-button:hover { transform: translateY(5px); filter: saturate(1.6); }
.machine-button.alt { background: var(--alarm-cherry); }
.machine-button.cyan { background: var(--sour-cyan); color: var(--cabinet-black); }
.knock-count { text-align: center; margin-top: 22px; color: var(--mint-repair); }

.orbit-label { position: absolute; padding: 12px 18px; border: 3px solid currentColor; background: var(--cabinet-black); }
.label-one { left: 4vw; top: 18vh; color: var(--alarm-cherry); transform: rotate(-18deg); animation: orbitA 9s ease-in-out infinite; }
.label-two { right: 9vw; bottom: 18vh; color: var(--mint-repair); transform: rotate(12deg); animation: orbitB 8s ease-in-out infinite; }
.sticker-peel { position: absolute; right: 10vw; top: 12vh; background: var(--milk-glass); color: var(--cabinet-black); padding: 18px 24px; transform: rotate(20deg); border-radius: 0 18px 18px 18px; box-shadow: -10px 10px 0 var(--grape-shadow); }

.room-look { background: radial-gradient(circle at 40% 45%, rgba(91,43,255,.42), transparent 34%), var(--cabinet-black); }
.emotion-core, .bloom-core { position: absolute; left: 44%; top: 47%; width: min(46vw, 420px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.core-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--electric-blush), var(--lemon-denial), var(--sour-cyan), var(--grape-shadow), var(--electric-blush)); animation: spin 7s linear infinite; box-shadow: 0 0 55px var(--grape-shadow); }
.core-ring::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--cabinet-black); border: 4px dashed var(--milk-glass); }
.core-heart { position: absolute; inset: 29%; display: grid; place-items: center; font: 900 clamp(2rem, 7vw, 5rem)/1 var(--arcade); color: var(--lemon-denial); background: var(--electric-blush); clip-path: polygon(50% 92%, 6% 48%, 12% 16%, 38% 10%, 50% 28%, 62% 10%, 88% 16%, 94% 48%); text-shadow: 3px 3px 0 var(--cabinet-black); }
.jagged-copy { position: relative; z-index: 2; max-width: 520px; margin-left: 22vw; padding: 30px; background: var(--milk-glass); color: var(--cabinet-black); clip-path: polygon(0 8%, 92% 0, 100% 26%, 94% 100%, 8% 92%); transition: transform .28s cubic-bezier(.2,1.6,.2,1), box-shadow .28s; box-shadow: 18px 18px 0 var(--electric-blush); }
.jagged-copy.flinch { transform: translate(var(--flinch-x, 20px), var(--flinch-y, -20px)) rotate(-4deg); box-shadow: 18px 18px 0 var(--mint-repair); }
.jagged-copy span { display: block; font-family: var(--arcade); font-size: clamp(2.2rem, 7vw, 5.6rem); line-height: .9; color: var(--grape-shadow); }
.jagged-copy p { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 800; }
.warning-stack { position: absolute; right: 10vw; top: 12vh; display: grid; gap: 14px; transform: rotate(8deg); }
.warning-stack b { background: var(--alarm-cherry); color: var(--milk-glass); padding: 10px 18px; box-shadow: 6px 6px 0 var(--cabinet-black); }
.warning-stack .crossed { text-decoration: line-through .18em var(--lemon-denial); color: var(--mint-repair); }
.zipper-hatch { position: absolute; left: 8vw; bottom: 9vh; display: flex; gap: 6px; transform: rotate(-10deg); }
.zipper-hatch i { width: 26px; height: 50px; background: var(--lemon-denial); clip-path: polygon(0 0, 100% 10%, 82% 100%, 16% 92%); }
.mint-trail { position: absolute; left: 14vw; top: 28vh; opacity: 0; color: var(--mint-repair); font-family: var(--mono-pixel); text-transform: uppercase; transition: opacity .3s; }
.mint-trail.on { opacity: 1; text-shadow: 0 0 18px var(--mint-repair); }

.room-compliment { background: radial-gradient(circle at 72% 38%, rgba(255,47,139,.34), transparent 28%), radial-gradient(circle at 25% 70%, rgba(21,244,238,.28), transparent 26%), var(--cabinet-black); }
.capsule-wheel { position: absolute; left: 6vw; top: 11vh; width: min(44vw, 420px); aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--electric-blush) 0 22deg, var(--sour-cyan) 22deg 44deg, var(--lemon-denial) 44deg 66deg, var(--grape-shadow) 66deg 88deg); border: 9px solid var(--milk-glass); box-shadow: 0 0 45px var(--sour-cyan); animation: spin 18s linear infinite; }
.capsule-wheel span { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translate(0, -46%) rotate(calc(-1 * var(--a))); transform-origin: 0 0; background: var(--cabinet-black); color: var(--milk-glass); padding: 9px 12px; border-radius: 999px; font-weight: 900; }
.wheel-center { position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%; background: var(--cabinet-black); color: var(--lemon-denial); font-family: var(--arcade); z-index: 2; border: 4px solid var(--milk-glass); }
.thermal-ticket { position: relative; z-index: 3; width: min(82vw, 610px); margin-left: 18vw; background: var(--milk-glass); color: var(--cabinet-black); padding: clamp(28px, 5vw, 58px); box-shadow: -16px 16px 0 var(--alarm-cherry), 16px -16px 0 var(--sour-cyan); transform: rotate(2deg); }
.thermal-ticket h2, .static-burst h2, .hatch-door h2 { margin: .1em 0; font-family: var(--arcade); font-size: clamp(2.4rem, 6vw, 5.7rem); line-height: .86; }
.thermal-ticket small { font-family: var(--mono-pixel); color: var(--electric-blush); }
.thermal-ticket p, .static-burst p, .hatch-door p, .final-copy p { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.35; }
.vending-bank { position: absolute; right: 6vw; bottom: 9vh; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 13px; }
.vending-bank button { border: 4px solid var(--milk-glass); background: var(--grape-shadow); color: var(--milk-glass); border-radius: 20px; padding: 18px; text-transform: uppercase; font-weight: 900; box-shadow: 0 8px 0 var(--cabinet-black); cursor: pointer; transition: transform .2s, background .2s; }
.vending-bank button.active { background: var(--mint-repair); color: var(--cabinet-black); transform: translateY(6px); }

.room-static { background: linear-gradient(115deg, rgba(247,255,60,.14), transparent 30%), var(--cabinet-black); }
.static-burst { position: relative; width: min(84vw, 800px); padding: clamp(32px, 7vw, 70px); border: 5px solid var(--lemon-denial); background: rgba(7,4,13,.84); box-shadow: 0 0 60px var(--lemon-denial), inset 0 0 40px rgba(255,47,139,.28); transform: rotate(-3deg); }
.halftone-cloud { position: absolute; inset: -20%; z-index: -1; background: radial-gradient(circle, var(--electric-blush) 2px, transparent 3px); background-size: 24px 24px; filter: blur(.2px); animation: staticJump .5s steps(2,end) infinite; }
.vent-grid { position: absolute; right: 9vw; top: 11vh; display: grid; gap: 12px; }
.vent-grid span { width: 190px; height: 16px; background: var(--sour-cyan); box-shadow: 0 0 18px var(--sour-cyan); transform: skew(-24deg); animation: ventPulse 1.8s ease-in-out infinite; }
.vent-grid span:nth-child(odd) { background: var(--electric-blush); animation-delay: .2s; }
.foil-wrapper { position: absolute; left: 7vw; bottom: 12vh; color: var(--cabinet-black); background: linear-gradient(90deg, var(--sour-cyan), var(--milk-glass), var(--electric-blush)); padding: 22px 32px; font-family: var(--arcade); transform: rotate(13deg); box-shadow: 8px 8px 0 var(--grape-shadow); }
.rhythm-microcopy { position: absolute; bottom: 5vh; right: 8vw; color: var(--lemon-denial); }

.room-maintenance { background: radial-gradient(circle at 25% 30%, rgba(81,255,176,.28), transparent 28%), var(--cabinet-black); }
.hatch-door { width: min(86vw, 740px); padding: clamp(34px, 6vw, 68px); color: var(--cabinet-black); background: var(--mint-repair); border: 7px solid var(--milk-glass); box-shadow: 18px 18px 0 var(--grape-shadow), inset 0 0 0 10px rgba(7,4,13,.16); clip-path: polygon(6% 0, 100% 4%, 94% 100%, 0 94%); transform: perspective(900px) rotateY(0deg) rotate(-2deg); transition: transform .7s cubic-bezier(.2,1.4,.2,1); }
.hatch-door.open { transform: perspective(900px) rotateY(-13deg) rotate(2deg); }
.hatch-handle { width: 90px; height: 26px; border-radius: 999px; background: var(--cabinet-black); box-shadow: 0 0 0 7px var(--lemon-denial); margin-bottom: 20px; }
.robot-row { position: absolute; bottom: 8vh; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.robot { width: 170px; padding: 18px; border-radius: 24px; background: var(--milk-glass); color: var(--cabinet-black); font-family: var(--mono-pixel); text-transform: uppercase; box-shadow: 8px 8px 0 var(--alarm-cherry); animation: robotSweep 2.6s ease-in-out infinite; }
.robot i { display: block; width: 54px; height: 38px; margin: 0 auto 12px; border-radius: 14px 14px 6px 6px; background: var(--grape-shadow); box-shadow: 20px 0 0 var(--sour-cyan), -20px 0 0 var(--electric-blush); }
.robot.pink { animation-delay: .4s; box-shadow: 8px 8px 0 var(--electric-blush); }
.robot.cyan { animation-delay: .8s; box-shadow: 8px 8px 0 var(--sour-cyan); }
.apology-label { position: absolute; right: 7vw; top: 13vh; background: var(--alarm-cherry); padding: 14px 20px; font-family: var(--mono-pixel); transform: rotate(8deg); }

.room-final { background: var(--cabinet-black); }
.bloom-core { left: 50%; top: 50%; width: min(88vmin, 720px); }
.bloom-core span { position: absolute; inset: 34%; border-radius: 999px; background: var(--electric-blush); transform: rotate(calc(var(--i, 0) * 60deg)) translateY(-48vmin); transform-origin: center; box-shadow: 0 0 40px currentColor; animation: bloomPulse 2.2s ease-in-out infinite; }
.bloom-core span:nth-child(1) { --i:0; background: var(--electric-blush); }
.bloom-core span:nth-child(2) { --i:1; background: var(--sour-cyan); }
.bloom-core span:nth-child(3) { --i:2; background: var(--lemon-denial); }
.bloom-core span:nth-child(4) { --i:3; background: var(--alarm-cherry); }
.bloom-core span:nth-child(5) { --i:4; background: var(--mint-repair); }
.bloom-core span:nth-child(6) { --i:5; background: var(--grape-shadow); }
.bloom-core strong { position: absolute; inset: 27%; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--cabinet-black); color: var(--milk-glass); font-family: var(--arcade); font-size: clamp(1.5rem, 4vw, 4rem); line-height: .92; border: 5px solid var(--milk-glass); box-shadow: 0 0 70px var(--electric-blush); }
.final-copy { position: relative; z-index: 2; width: min(90vw, 980px); text-align: center; transform: rotate(-1deg); }
.final-copy h1 { font-family: var(--arcade); font-size: clamp(3rem, 9vw, 9rem); line-height: .82; margin: 0; color: var(--milk-glass); text-shadow: 5px 5px 0 var(--electric-blush), -5px -5px 0 var(--sour-cyan), 0 0 35px var(--lemon-denial); }
.denial-stamp { position: absolute; right: 8vw; bottom: 12vh; color: var(--alarm-cherry); border: 8px solid var(--alarm-cherry); padding: 14px 24px; font-size: clamp(1.4rem, 4vw, 4rem); transform: rotate(-18deg) scale(.92); mix-blend-mode: screen; animation: denyStamp 2s steps(2,end) infinite; }

@keyframes roomDrift { to { transform: rotate(360deg); } }
@keyframes beatLight { 50% { background: currentColor; box-shadow: 0 0 28px currentColor; } }
@keyframes tubeBlink { 0%, 8%, 10%, 14%, 100% { opacity: 1; } 9%, 13% { opacity: .2; } 62% { color: var(--lemon-denial); } }
@keyframes cabinetKnock { 50% { transform: rotate(1.5deg) translateX(14px); } }
@keyframes orbitA { 50% { transform: translate(26px, 42px) rotate(10deg); } }
@keyframes orbitB { 50% { transform: translate(-30px, -28px) rotate(-16deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes staticJump { 50% { transform: translate(10px, -8px); } }
@keyframes ventPulse { 50% { transform: skew(-24deg) translateX(-28px); opacity: .35; } }
@keyframes robotSweep { 50% { transform: translateX(22px) rotate(4deg); } }
@keyframes bloomPulse { 50% { transform: rotate(calc(var(--i, 0) * 60deg)) translateY(-42vmin) scale(1.28); } }
@keyframes denyStamp { 50% { opacity: .32; transform: rotate(-14deg) scale(1.05); } }

@media (max-width: 760px) {
  .cursor-orb { display: none; }
  .cabinet-shell { width: 92vw; min-height: 78vh; }
  .jagged-copy, .thermal-ticket { margin-left: 0; width: 86vw; }
  .emotion-core { left: 50%; opacity: .45; }
  .warning-stack, .vent-grid, .beat-rail { display: none; }
  .capsule-wheel { opacity: .45; width: 70vw; left: -12vw; }
  .vending-bank { position: relative; right: auto; bottom: auto; margin-top: 54vh; width: 86vw; }
  .robot-row { position: relative; bottom: auto; margin-top: 28px; }
  .foil-wrapper, .rhythm-microcopy, .apology-label { display: none; }
}