:root {
  /* IBM Plex Sans JP** bilingual house rules */
  --freezer-black: #090A10;
  --stainless-midnight: #1B2230;
  --frostbite-cyan: #A7F3FF;
  --bruised-violet: #4C2A70;
  --cherry-lacquer: #E51F52;
  --peach-apology: #FFB199;
  --custard-glow: #FFE7A8;
  --marker-white: #F8F3EA;
  --display: Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif;
  --jp: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--marker-white);
  background: var(--freezer-black);
  font-family: var(--jp);
}

button { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: overlay;
  background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,.8) 0 1px, transparent 1.5px), radial-gradient(circle at 80% 70%, rgba(167,243,255,.55) 0 1px, transparent 1.5px), linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.08) 49% 51%, transparent 52%);
  background-size: 17px 19px, 23px 29px, 9px 9px;
}

.temperature-meter {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 50;
  width: 8px;
  height: 42vh;
  transform: translateY(-50%);
  border: 1px solid rgba(248,243,234,.45);
  background: linear-gradient(to top, rgba(167,243,255,.22), rgba(229,31,82,.16));
}

.temperature-meter span {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 12%;
  background: linear-gradient(to top, var(--frostbite-cyan), var(--peach-apology), var(--cherry-lacquer));
  box-shadow: 0 0 24px var(--peach-apology);
  transition: height .7s cubic-bezier(.2,1.4,.24,1);
}

.house-rules {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 60;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  transform: rotate(-2deg);
}

.rule, .rude-ticket {
  border: 2px solid var(--freezer-black);
  color: var(--freezer-black);
  background: var(--marker-white);
  box-shadow: 5px 5px 0 var(--cherry-lacquer);
  padding: 9px 12px;
  text-transform: uppercase;
  font-family: var(--jp);
  font-size: 11px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}

.rule:nth-child(even) { transform: translateY(12px) rotate(3deg); }
.rule.active, .rule:hover { background: var(--custard-glow); transform: translateY(-3px) rotate(-4deg); }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 7rem 7vw;
}

.scene::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background: radial-gradient(circle at 30% 20%, rgba(167,243,255,.18), transparent 28%), radial-gradient(circle at 70% 70%, rgba(76,42,112,.35), transparent 32%), var(--freezer-black);
}

.shutter-scene { display: grid; place-items: center; text-align: center; }

.fluoro {
  position: absolute;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  padding: 10px 22px;
  border: 3px solid var(--frostbite-cyan);
  color: var(--frostbite-cyan);
  font-family: var(--display);
  letter-spacing: .12em;
  text-shadow: 0 0 8px var(--frostbite-cyan), 0 0 24px var(--frostbite-cyan);
  animation: flicker 3.2s infinite steps(1);
}

.wordmark {
  position: relative;
  z-index: 3;
  margin: 0;
  color: var(--marker-white);
  font-family: var(--display);
  font-size: clamp(4.8rem, 15vw, 13rem);
  line-height: .82;
  letter-spacing: -.07em;
  text-shadow: 8px 8px 0 var(--bruised-violet), -4px -4px 0 var(--cherry-lacquer);
  transform: rotate(-3deg);
}

.cold-copy {
  position: relative;
  z-index: 3;
  min-height: 1.6em;
  max-width: 560px;
  color: var(--frostbite-cyan);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-style: italic;
}

.warning-strip {
  position: absolute;
  z-index: 4;
  width: 130vw;
  padding: 12px;
  color: var(--freezer-black);
  background: repeating-linear-gradient(45deg, var(--custard-glow) 0 18px, var(--freezer-black) 18px 34px);
  font-family: var(--display);
  letter-spacing: .15em;
  -webkit-text-stroke: .5px var(--custard-glow);
}

.strip-one { top: 28%; transform: rotate(-13deg); }
.strip-two { bottom: 22%; transform: rotate(9deg); }

.opener { position: absolute; bottom: 12vh; z-index: 8; }

.frosted-shutter {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  background: linear-gradient(90deg, #202838, #88939f 16%, #2d3442 34%, #d7eff5 50%, #222938 72%, #111722);
  transform: translateY(0);
  transition: transform 1.25s cubic-bezier(.14,1.55,.3,1);
  opacity: .94;
}

.frosted-shutter span { border-bottom: 2px solid rgba(9,10,16,.85); box-shadow: inset 0 0 34px rgba(167,243,255,.25); }
.frosted-shutter.lifted { transform: translateY(-72%); animation: reluctant 1.4s both; }

.peek-glass { position: absolute; z-index: 2; right: 14vw; bottom: 16vh; }

.two-temp-glass {
  width: 160px;
  height: 240px;
  border: 4px solid rgba(248,243,234,.75);
  border-radius: 18px 18px 42px 42px;
  overflow: hidden;
  box-shadow: inset 0 0 26px rgba(255,255,255,.25), 0 22px 70px rgba(167,243,255,.22);
  transform-style: preserve-3d;
}

.glass-frost, .glass-syrup { position: absolute; inset: 0; }
.glass-frost { clip-path: polygon(0 0, 56% 0, 43% 100%, 0 100%); background: linear-gradient(140deg, rgba(167,243,255,.95), rgba(248,243,234,.9), rgba(27,34,48,.8)); }
.glass-syrup { clip-path: polygon(54% 0, 100% 0, 100% 100%, 41% 100%); background: linear-gradient(160deg, rgba(229,31,82,.9), var(--peach-apology), var(--custard-glow)); }
.ice-heart { position: absolute; left: 54px; bottom: 28px; width: 40px; height: 40px; transform: rotate(45deg); background: rgba(248,243,234,.7); box-shadow: 0 0 18px var(--frostbite-cyan); }
.ice-heart::before, .ice-heart::after { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; background: inherit; }
.ice-heart::before { left: -20px; } .ice-heart::after { top: -20px; }
.condensation { position: absolute; inset: 12px; background-image: radial-gradient(circle, rgba(248,243,234,.75) 0 2px, transparent 3px); background-size: 24px 29px; animation: drip 4s infinite linear; }

.ice-rail::before { background: linear-gradient(125deg, var(--freezer-black), var(--stainless-midnight) 45%, var(--bruised-violet)); }
.diagonal-rail { position: absolute; left: -12vw; top: 38%; width: 130vw; height: 25vh; transform: rotate(-14deg); background: linear-gradient(90deg, var(--stainless-midnight), var(--frostbite-cyan), var(--marker-white)); box-shadow: 0 16px 0 var(--freezer-black), 0 0 70px rgba(167,243,255,.45); }
.giant { position: absolute; top: 12vh; left: 8vw; font-family: var(--display); font-size: clamp(7rem, 19vw, 19rem); color: transparent; -webkit-text-stroke: 5px var(--cherry-lacquer); transform: rotate(-12deg); opacity: .8; }
.vertical-placard { position: absolute; right: 12vw; top: 13vh; writing-mode: vertical-rl; border: 2px solid var(--frostbite-cyan); padding: 16px 10px; color: var(--frostbite-cyan); background: rgba(9,10,16,.7); }
.rail-card, .crossed-note, .last-note { position: relative; z-index: 3; max-width: 520px; padding: 28px; background: rgba(9,10,16,.72); border: 2px solid rgba(248,243,234,.38); backdrop-filter: blur(8px); transform: rotate(-2deg); }
.rail-card { margin-top: 46vh; }
.label, .crossed-note span, .last-note span { color: var(--cherry-lacquer); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; }
h2 { margin: .1em 0; font-family: var(--display); font-size: clamp(3rem, 8vw, 8rem); line-height: .88; letter-spacing: -.05em; }
p { font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.55; }
.rail-glass { position: absolute; right: 23vw; top: 35vh; z-index: 4; transform: rotate(12deg); }
.sticker { position: absolute; z-index: 5; padding: 12px 20px; background: var(--marker-white); color: var(--freezer-black); border: 3px solid var(--freezer-black); box-shadow: 6px 6px 0 var(--cherry-lacquer); font-family: var(--display); text-transform: uppercase; animation: slap 1.6s both; }
.sticker-a { right: 8vw; bottom: 17vh; transform: rotate(11deg); }
.sticker-b { left: 9vw; top: 22vh; transform: rotate(-8deg); animation-delay: .4s; }
.speed-lines { position: absolute; right: 0; bottom: 0; width: 48vw; height: 46vh; background: repeating-linear-gradient(118deg, transparent 0 17px, rgba(248,243,234,.8) 18px 20px, transparent 21px 30px); opacity: .28; }

.booth-scene::before { background: radial-gradient(circle at 72% 35%, rgba(255,231,168,.32), transparent 25%), linear-gradient(135deg, var(--stainless-midnight), var(--freezer-black) 55%, var(--bruised-violet)); }
.booth-light { position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 45%, rgba(255,177,153,.35), transparent 38%); }
.reserved-ticket { position: absolute; z-index: 5; top: 15vh; right: 14vw; transform: rotate(7deg); font-family: var(--display); font-size: 1.4rem; text-align: center; }
.reserved-ticket em { display: block; color: var(--cherry-lacquer); font-family: var(--serif); text-transform: none; }
.booth-seat { position: absolute; right: 8vw; bottom: 12vh; width: min(58vw, 720px); height: 42vh; transform: skewX(-10deg); }
.seat-back { height: 54%; border-radius: 44px 44px 0 0; background: linear-gradient(120deg, var(--bruised-violet), var(--cherry-lacquer), var(--peach-apology)); box-shadow: inset 0 0 0 8px rgba(9,10,16,.45), 0 0 80px rgba(255,177,153,.25); }
.seat-base { height: 28%; margin-top: 12px; border-radius: 12px 12px 60px 60px; background: linear-gradient(90deg, #2a1627, var(--peach-apology)); }
.crossed-note { margin-top: 24vh; background: rgba(248,243,234,.88); color: var(--freezer-black); box-shadow: 10px 10px 0 var(--cherry-lacquer); }
.coaster { position: absolute; z-index: 5; width: 130px; height: 130px; display: grid; place-items: center; border-radius: 50%; background: var(--custard-glow); color: var(--freezer-black); text-align: center; font-family: var(--serif); box-shadow: 0 0 0 8px rgba(9,10,16,.6); }
.coaster-one { left: 12vw; bottom: 12vh; transform: rotate(-13deg); }
.coaster-two { right: 42vw; top: 16vh; transform: rotate(14deg); }

.shelf-scene::before { background: linear-gradient(145deg, var(--freezer-black), var(--bruised-violet) 48%, #5f2637), radial-gradient(circle at 76% 30%, var(--custard-glow), transparent 25%); }
.syrup-curve { position: absolute; left: -10vw; top: 8vh; width: 120vw; height: 60vh; border: 34px solid var(--peach-apology); border-top: 0; border-left: 0; border-radius: 0 0 58% 0; opacity: .5; filter: drop-shadow(0 0 28px var(--cherry-lacquer)); }
.shelf-title { position: relative; z-index: 2; max-width: 860px; color: var(--custard-glow); text-shadow: 8px 8px 0 var(--cherry-lacquer); transform: rotate(-2deg); }
.dessert-line { position: relative; z-index: 2; max-width: 590px; font-family: var(--serif); color: var(--peach-apology); }
.sweet-shelf { position: absolute; right: 5vw; bottom: 13vh; display: flex; gap: 22px; align-items: flex-end; padding: 28px 36px; border-bottom: 16px solid var(--marker-white); transform: rotate(-4deg); }
.jar { width: 120px; border: 3px solid var(--marker-white); border-radius: 50px 50px 14px 14px; padding: 80px 12px 20px; color: var(--freezer-black); text-align: center; font-family: var(--display); text-transform: uppercase; box-shadow: inset 0 18px rgba(255,255,255,.35), 0 22px 40px rgba(0,0,0,.35); }
.jar-cyan { height: 230px; background: var(--frostbite-cyan); }
.jar-peach { height: 280px; background: var(--peach-apology); }
.jar-custard { height: 205px; background: var(--custard-glow); }
.cherry-skewer { position: absolute; left: 12vw; bottom: 16vh; width: 290px; height: 12px; transform: rotate(-18deg); background: var(--marker-white); }
.cherry-skewer i { position: absolute; top: -28px; width: 58px; height: 58px; border-radius: 50%; background: var(--cherry-lacquer); box-shadow: inset -8px -8px rgba(9,10,16,.2); }
.cherry-skewer i:nth-child(1) { left: 20px; } .cherry-skewer i:nth-child(2) { left: 108px; } .cherry-skewer i:nth-child(3) { left: 200px; }
.pin-wall { position: absolute; top: 17vh; right: 15vw; display: grid; gap: 10px; }
.pin-wall span { padding: 9px 15px; background: var(--marker-white); color: var(--freezer-black); transform: rotate(var(--r, -4deg)); }
.pin-wall span:nth-child(2) { --r: 5deg; background: var(--frostbite-cyan); } .pin-wall span:nth-child(3) { --r: -7deg; background: var(--peach-apology); } .pin-wall span:nth-child(4) { --r: 4deg; background: var(--custard-glow); }

.apology-scene { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; }
.apology-scene::before { background: radial-gradient(circle at 52% 48%, rgba(255,231,168,.6), transparent 24%), linear-gradient(135deg, var(--bruised-violet), var(--freezer-black) 42%, #361321); }
.apology-glow { position: absolute; inset: auto 10vw 7vh 10vw; height: 32vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,177,153,.55), transparent 65%); filter: blur(12px); }
.final-glass { justify-self: center; width: clamp(180px, 24vw, 330px); height: clamp(280px, 38vw, 520px); animation: equalize 7s infinite alternate ease-in-out; }
.steam { position: absolute; top: -48px; width: 34px; height: 80px; border-left: 3px solid var(--custard-glow); border-radius: 50%; opacity: .7; animation: steam 3s infinite ease-in-out; }
.curl-one { left: 38%; } .curl-two { left: 58%; animation-delay: 1.2s; }
.last-note { background: rgba(255,231,168,.9); color: var(--freezer-black); box-shadow: -12px 12px 0 var(--peach-apology); }
.final-stamp { position: absolute; right: 5vw; bottom: 9vh; font-family: var(--display); color: var(--cherry-lacquer); font-size: clamp(2rem, 5vw, 6rem); transform: rotate(-9deg); opacity: .86; }
.restart { position: absolute; left: 8vw; bottom: 10vh; }

.scene.in-view .warm-reveal { animation: revealWarm .85s both cubic-bezier(.17,1.25,.31,1); }
.scene.in-view .tilt-object { transition: transform .2s ease; }

@keyframes flicker { 0%, 8%, 11%, 100% { opacity: 1; } 9%, 10% { opacity: .25; } 51% { color: var(--marker-white); } }
@keyframes reluctant { 0% { transform: translateY(0); } 28% { transform: translateY(-35%); } 45% { transform: translateY(-28%); } 100% { transform: translateY(-72%); } }
@keyframes slap { 0% { opacity: 0; scale: 2; } 55% { opacity: 1; scale: .85; } 70% { transform: rotate(18deg) translateX(8px); } 85% { transform: rotate(-12deg) translateX(-8px); } 100% { opacity: 1; } }
@keyframes drip { to { background-position: 0 58px; } }
@keyframes revealWarm { from { opacity: 0; transform: translateY(60px) rotate(5deg); filter: blur(6px); } to { opacity: 1; transform: translateY(0) rotate(-2deg); filter: blur(0); } }
@keyframes equalize { from { filter: hue-rotate(0deg) saturate(1.2); box-shadow: 0 0 70px rgba(167,243,255,.25); } to { filter: hue-rotate(-18deg) saturate(1.45); box-shadow: 0 0 110px rgba(255,177,153,.55); } }
@keyframes steam { 0% { transform: translateY(20px) scale(.7); opacity: 0; } 45% { opacity: .8; } 100% { transform: translateY(-28px) scale(1.1); opacity: 0; } }

@media (max-width: 800px) {
  .house-rules { max-width: calc(100vw - 70px); flex-wrap: wrap; }
  .rule { font-size: 9px; padding: 7px; }
  .scene { padding: 8rem 6vw 5rem; }
  .apology-scene { grid-template-columns: 1fr; }
  .sweet-shelf { position: relative; right: auto; bottom: auto; margin-top: 3rem; scale: .8; transform-origin: left top; }
  .rail-glass, .reserved-ticket, .pin-wall { opacity: .78; }
  .coaster-two { display: none; }
}