:root {
  /* Design typography tokens: Inter* Inter** labels */
  --espresso: #111827;
  --vanilla: #F7EFE2;
  --frost: #DDE7EA;
  --glass: #B7C8D6;
  --raspberry: #C94F6D;
  --caramel: #F2B66D;
  --flash: #FFFFFF;
  --cocoa: #6E4B3A;
  --jost: "Jost", "Trebuchet MS", system-ui, sans-serif;
  --fraunces: "Fraunces", Georgia, serif;
  --inter: "Inter", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--espresso);
  color: var(--vanilla);
  font-family: var(--inter);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 12%, rgba(201, 79, 109, .22), transparent 22rem),
    radial-gradient(circle at 18% 20%, rgba(183, 200, 214, .25), transparent 30rem),
    linear-gradient(145deg, rgba(17, 24, 39, .5), rgba(110, 75, 58, .2) 48%, rgba(17, 24, 39, .9));
  z-index: -3;
}

.night-counter { position: relative; min-height: 100vh; }

.glass-tabs {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: .4rem;
  padding: .45rem;
  border: 1px solid rgba(221, 231, 234, .28);
  border-radius: 999px;
  background: rgba(221, 231, 234, .12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22), 0 1rem 3rem rgba(0, 0, 0, .28);
  backdrop-filter: blur(20px);
}

.glass-tabs a {
  color: var(--frost);
  text-decoration: none;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .55rem .8rem;
  border-radius: 999px;
  transition: color .35s ease, background .35s ease;
}

.glass-tabs a:hover { color: var(--espresso); background: var(--caramel); }

.scene { min-height: 100vh; position: relative; padding: 7rem min(6vw, 5rem); }

.hero-window {
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.rain-grid, .hero-window::before {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
}

.rain-grid {
  background-image:
    linear-gradient(90deg, rgba(221, 231, 234, .06) 1px, transparent 1px),
    linear-gradient(rgba(221, 231, 234, .045) 1px, transparent 1px);
  background-size: 5rem 5rem;
  transform: perspective(900px) rotateX(58deg) translateY(18vh);
  transform-origin: bottom;
  opacity: .7;
}

.hero-window::before {
  background: radial-gradient(ellipse at center, rgba(183, 200, 214, .18), transparent 52%), linear-gradient(180deg, rgba(17, 24, 39, .2), #111827 95%);
  z-index: -2;
}

.frost-pane {
  width: min(82rem, 88vw);
  min-height: 68vh;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 2.2rem;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .2), rgba(221, 231, 234, .09) 42%, rgba(183, 200, 214, .15)),
    radial-gradient(circle at 18% 26%, rgba(247, 239, 226, .2), transparent 12rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2rem 5rem rgba(17, 24, 39, .25), 0 3rem 8rem rgba(0, 0, 0, .45);
  backdrop-filter: blur(22px) saturate(1.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 7rem);
  overflow: hidden;
}

.clearing-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .42) 0 .1rem, transparent .13rem),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, .25) 0 .12rem, transparent .15rem),
    linear-gradient(100deg, rgba(221, 231, 234, .72), rgba(221, 231, 234, .18), rgba(255, 255, 255, .5));
  animation: clearFrost 4s ease forwards;
  mix-blend-mode: screen;
}

.microtitle, .case-number, .chapter-kicker, .counter-sequence .receipt-title p, .steam-interlude p {
  margin: 0 0 1rem;
  color: var(--caramel);
  font: 800 .74rem/1 var(--inter);
  letter-spacing: .24em;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; }

h1 {
  font-family: var(--jost);
  font-size: clamp(4rem, 12vw, 12rem);
  line-height: .82;
  letter-spacing: -.06em;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 .2rem 2rem rgba(17, 24, 39, .45), 0 0 3rem rgba(183, 200, 214, .42);
  animation: wordReveal 2.6s ease .4s both;
}

.tagline {
  max-width: 46rem;
  margin: 1.6rem 0 0;
  color: var(--frost);
  font: 500 clamp(1.05rem, 2vw, 1.55rem)/1.55 var(--fraunces);
}

.pane-engraving {
  position: absolute;
  right: 2rem;
  bottom: 1.7rem;
  color: rgba(255, 255, 255, .46);
  font-size: .7rem;
  letter-spacing: .28em;
}

.diagonal-counter {
  position: absolute;
  left: -8vw;
  right: -8vw;
  bottom: 18vh;
  height: .18rem;
  background: linear-gradient(90deg, transparent, var(--caramel), var(--flash), transparent);
  transform: rotate(-8deg);
  box-shadow: 0 0 2rem rgba(242, 182, 109, .45);
}

.dessert-shadows { position: absolute; inset: 12vh 8vw; z-index: -1; filter: blur(14px); opacity: .5; }
.shadow { position: absolute; bottom: 18%; background: rgba(247, 239, 226, .28); }
.shadow.parfait { left: 18%; width: 8rem; height: 20rem; clip-path: polygon(25% 0,75% 0,62% 100%,38% 100%); }
.shadow.cake { left: 48%; width: 18rem; height: 9rem; transform: skewY(-8deg); border-radius: 1rem; background: rgba(201, 79, 109, .28); }
.shadow.cup { right: 15%; width: 14rem; height: 12rem; border-radius: 0 0 5rem 5rem; background: rgba(242, 182, 109, .22); }

.chapter {
  min-height: 55vh;
  display: grid;
  align-content: center;
  max-width: 66rem;
}

.chapter h2, .receipt-title h2, .steam-interlude h2, .house-special h2 {
  font-family: var(--jost);
  font-size: clamp(2.8rem, 6vw, 7rem);
  line-height: .88;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.chapter p:not(.chapter-kicker) { font: 500 1.25rem/1.7 var(--fraunces); color: var(--glass); max-width: 42rem; }

.display-case {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(9, minmax(4rem, 1fr));
  gap: 1.2rem;
  min-height: 118vh;
}

.sweet-card, .house-special, .taste-note {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .26);
  background: linear-gradient(145deg, rgba(221, 231, 234, .2), rgba(183, 200, 214, .1) 45%, rgba(17, 24, 39, .38));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1.4rem 3rem rgba(17, 24, 39, .25), 0 2.4rem 5.5rem rgba(0, 0, 0, .38);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.sweet-card { border-radius: 1.7rem; padding: 1.5rem; cursor: pointer; transition: filter .45s ease, transform .45s ease, border-color .45s ease; }
.sweet-card:hover, .sweet-card.active-note { filter: blur(0) saturate(1.15); transform: translateY(-.7rem) scale(1.015); border-color: rgba(242, 182, 109, .75); }
.soft-rear { filter: blur(1.8px); transform: translateY(2rem); }
.card-tall { grid-column: 2 / 6; grid-row: 1 / 8; }
.card-wide { grid-column: 5 / 12; grid-row: 3 / 7; }
.card-narrow { grid-column: 8 / 11; grid-row: 6 / 10; z-index: 3; }

.glass-rim, .sweet-card::before, .taste-note::before, .house-special::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glass-rim { border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,.48), transparent 18%, transparent 70%, rgba(242,182,109,.28)); opacity: .75; }
.sweet-card::before, .taste-note::before, .house-special::before { transform: translateX(-115%) skewX(-18deg); width: 45%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent); transition: transform .9s ease; }
.sweet-card:hover::before, .sweet-card.active-note::before, .taste-note:hover::before, .house-special::before { transform: translateX(250%) skewX(-18deg); }

.iso-icon { width: 9rem; height: 8rem; margin: 1rem auto 2rem; position: relative; transform: rotateX(58deg) rotateZ(-35deg); transform-style: preserve-3d; }
.iso-icon span, .iso-icon::before, .iso-icon::after { content: ""; position: absolute; border-radius: .7rem; box-shadow: 0 1.2rem 2rem rgba(0,0,0,.22); }
.parfait-icon span { inset: 1rem 3rem 0; background: linear-gradient(#DDE7EA, #C94F6D 48%, #F7EFE2); clip-path: polygon(20% 0,80% 0,65% 100%,35% 100%); }
.parfait-icon::before { left: 2rem; right: 2rem; bottom: -.6rem; height: 1rem; background: var(--glass); }
.cake-icon span { inset: 2.2rem .5rem 1.5rem; background: linear-gradient(135deg, #6E4B3A, #111827); }
.cake-icon::before { inset: 1.4rem 1.8rem 4.5rem; background: #F2B66D; }
.cake-icon::after { inset: 4.7rem 1.2rem .8rem; background: #C94F6D; opacity: .8; }
.tart-icon span { inset: 1.3rem; border-radius: 50%; background: radial-gradient(circle, #F7EFE2 0 35%, #F2B66D 36% 58%, #6E4B3A 59%); }
.cup-icon span { inset: 1.6rem 2rem; background: linear-gradient(#FFFFFF, #B7C8D6); border-radius: .5rem .5rem 2rem 2rem; }

.sweet-card h3 { font: 800 clamp(1.7rem, 3vw, 3.2rem)/.95 var(--jost); letter-spacing: -.04em; text-transform: uppercase; color: var(--flash); }
.sweet-card strong, .house-special strong { display: block; margin-top: .85rem; color: var(--caramel); font: 700 1.2rem/1.35 var(--fraunces); }
.scene-note { color: rgba(247, 239, 226, .82); font: 500 .95rem/1.55 var(--inter); max-height: 0; opacity: 0; transform: translateY(.8rem); transition: max-height .55s ease, opacity .55s ease, transform .55s ease; }
.active-note .scene-note, .sweet-card:hover .scene-note { max-height: 12rem; opacity: 1; transform: translateY(0); }
.mist-line { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.25rem; height: .12rem; background: linear-gradient(90deg, var(--frost), var(--raspberry), var(--caramel)); transform: scaleX(.16); transform-origin: left; transition: transform .55s ease; }
.sweet-card:hover .mist-line, .active-note .mist-line { transform: scaleX(1); }

.counter-sequence { display: grid; grid-template-columns: .8fr 1.2fr .7fr; gap: 2rem; align-items: center; }
.receipt-title { max-width: 29rem; }
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(13rem, 1fr)); gap: 1rem; }
.taste-note { text-align: left; color: var(--vanilla); min-height: 13rem; border-radius: 1.2rem; padding: 1.2rem; font-family: var(--inter); cursor: pointer; }
.taste-note span { color: var(--raspberry); font-weight: 900; letter-spacing: .2em; }
.taste-note b { display: block; margin: 1.2rem 0 .5rem; font: 800 1.35rem/1 var(--jost); text-transform: uppercase; }
.taste-note em { color: var(--glass); font: 500 1rem/1.35 var(--fraunces); }
.taste-note.selected { border-color: var(--caramel); box-shadow: 0 0 3rem rgba(242, 182, 109, .18), inset 0 0 2rem rgba(242, 182, 109, .08); }
.flavor-orbit { aspect-ratio: 1; border: 1px solid rgba(221,231,234,.25); border-radius: 50%; display: grid; place-items: center; position: relative; background: radial-gradient(circle, rgba(201,79,109,.22), transparent 58%); }
.flavor-orbit span { position: absolute; width: .7rem; height: .7rem; border-radius: 50%; background: var(--flash); animation: orbit 7s linear infinite; transform-origin: 6rem 0; }
.flavor-orbit span:nth-child(2) { background: var(--caramel); animation-duration: 9s; transform-origin: -5rem 0; }
.flavor-orbit span:nth-child(3) { background: var(--raspberry); animation-duration: 11s; transform-origin: 0 5rem; }
.flavor-orbit p { max-width: 10rem; text-align: center; font: 800 .8rem/1.35 var(--inter); text-transform: uppercase; letter-spacing: .18em; color: var(--frost); }

.steam-interlude { display: grid; place-items: center; text-align: center; overflow: hidden; }
.steam-interlude h2 { max-width: 70rem; color: var(--frost); }
.spoon-flash { position: absolute; width: 70vw; height: .18rem; background: linear-gradient(90deg, transparent, #FFFFFF, #F2B66D, transparent); transform: rotate(-18deg); box-shadow: 0 0 2.4rem #FFFFFF; animation: spoonSweep 4.8s ease-in-out infinite; }
.steam-ribbons span { position: absolute; bottom: 10vh; width: 7rem; height: 44rem; border-left: .2rem solid rgba(221, 231, 234, .24); border-radius: 50%; filter: blur(4px); animation: steam 7s ease-in-out infinite; }
.steam-ribbons span:nth-child(1) { left: 28%; }
.steam-ribbons span:nth-child(2) { left: 50%; animation-delay: -2s; }
.steam-ribbons span:nth-child(3) { left: 68%; animation-delay: -4s; }

.final-scene { display: grid; place-items: center; overflow: hidden; }
.dimmed-cards { position: absolute; inset: 10%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; opacity: .18; filter: blur(3px); }
.dimmed-cards span { border: 1px solid rgba(221,231,234,.15); border-radius: 1.3rem; background: rgba(221,231,234,.08); }
.house-special { width: min(43rem, 88vw); min-height: 34rem; border-radius: 2rem; padding: 2rem; text-align: center; background: radial-gradient(circle at 50% 0, rgba(242,182,109,.24), transparent 22rem), linear-gradient(145deg, rgba(221,231,234,.2), rgba(17,24,39,.62)); box-shadow: 0 0 5rem rgba(242, 182, 109, .22), 0 4rem 9rem rgba(0,0,0,.6); }
.house-special .scene-note { max-height: none; opacity: 1; transform: none; margin-inline: auto; }

.reveal-card { opacity: 0; transform: translateY(3rem) scale(.98); filter: blur(10px); transition: opacity 1s ease, transform 1s ease, filter 1s ease; }
.reveal-card.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.soft-rear.is-visible { filter: blur(1.8px); transform: translateY(2rem); }

@keyframes clearFrost { 0% { opacity: 1; filter: blur(8px); } 100% { opacity: .18; filter: blur(1px); } }
@keyframes wordReveal { from { opacity: 0; filter: blur(18px); transform: translateY(1rem); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes orbit { to { rotate: 360deg; } }
@keyframes spoonSweep { 0%, 100% { opacity: .18; translate: -20vw 12vh; } 50% { opacity: .75; translate: 20vw -8vh; } }
@keyframes steam { 0%,100% { opacity: .1; transform: translateY(3rem) skewX(-8deg); } 50% { opacity: .5; transform: translateY(-4rem) skewX(8deg); } }

@media (max-width: 900px) {
  .glass-tabs { max-width: calc(100vw - 1rem); overflow: auto; }
  .scene { padding-inline: 1rem; }
  .display-case, .counter-sequence { display: block; min-height: auto; }
  .sweet-card, .receipt-title, .flavor-orbit { margin: 1rem 0; }
  .note-grid { grid-template-columns: 1fr; }
  .card-tall, .card-wide, .card-narrow { min-height: 30rem; }
  .flavor-orbit { min-height: 18rem; }
}