:root {
  /* Compliance vocabulary: Interactions should feel delicate and edible: hover over a pastry label to reveal a jam-colored underline that spreads like syrup. Playfair Display** sparingly for gilded monograms or cabinet plaque initials. */
  --cream: #FFF3DD;
  --espresso: #3A211A;
  --raspberry: #9E2444;
  --pistachio: #B7C978;
  --gold: #D89B42;
  --rose: #F4A8B6;
  --blue: #9FB8C9;
  --cherry: #4A1625;
  --title: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --flavor: "Fraunces", "Playfair Display", Georgia, serif;
  --plain: "Nunito Sans", Inter, system-ui, sans-serif;
  --play: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--espresso);
  background: var(--cream);
  font-family: var(--plain);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.36) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(216,155,66,.25) 0 1px, transparent 2px),
    repeating-linear-gradient(115deg, rgba(74,22,37,.035) 0 1px, transparent 1px 9px);
  mix-blend-mode: multiply;
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 49;
  opacity: .34;
  background-image:
    radial-gradient(circle at 30% 35%, rgba(58,33,26,.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 63% 52%, rgba(158,36,68,.1) 0 1px, transparent 1.5px);
  background-size: 18px 18px, 23px 23px;
}

.room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.lace {
  position: fixed;
  top: 0;
  width: 78px;
  height: 100vh;
  z-index: 40;
  pointer-events: none;
  opacity: .45;
  background:
    radial-gradient(circle at 50% 18px, transparent 0 13px, rgba(255,243,221,.9) 14px 22px, transparent 23px),
    repeating-linear-gradient(90deg, rgba(255,243,221,.86) 0 8px, transparent 8px 16px),
    linear-gradient(rgba(244,168,182,.22), rgba(159,184,201,.18));
  background-size: 48px 48px, 32px 100%, auto;
  filter: drop-shadow(0 0 12px rgba(255,243,221,.45));
  animation: curtainDrift 7s ease-in-out infinite;
}
.lace-left { left: 0; }
.lace-right { right: 0; transform: scaleX(-1); animation-delay: -3s; }
@keyframes curtainDrift { 50% { width: 92px; opacity: .58; } }

.spoon-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: grid;
  gap: 10px;
}
.nav-spoon {
  border: 0;
  background: transparent;
  color: var(--cream);
  font: 700 10px/1 var(--plain);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 4px var(--cherry);
}
.nav-spoon span {
  display: block;
  width: 8px;
  height: 32px;
  margin: 0 auto 3px;
  border-radius: 50% 50% 7px 7px;
  background: linear-gradient(var(--gold), #fff0b4 28%, var(--gold));
  box-shadow: inset 0 0 0 1px rgba(74,22,37,.35), 0 4px 12px rgba(74,22,37,.3);
  transform-origin: top center;
}
.nav-spoon.active span { transform: rotate(18deg); background: linear-gradient(var(--rose), var(--gold)); }

.fogged-window {
  background:
    radial-gradient(circle at 50% 105%, rgba(216,155,66,.26), transparent 42%),
    linear-gradient(150deg, #160d0b, var(--espresso) 52%, var(--cherry));
}
.storefront { width: min(1040px, 86vw); position: relative; }
.awning {
  height: 72px;
  border-radius: 24px 24px 0 0;
  background: repeating-linear-gradient(90deg, var(--raspberry) 0 70px, var(--cream) 70px 140px);
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
}
.window-pane {
  height: min(72vh, 720px);
  border: 16px solid rgba(216,155,66,.72);
  border-radius: 0 0 28px 28px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(255,243,221,.28), rgba(159,184,201,.46) 42%, rgba(255,243,221,.2)),
    radial-gradient(circle at 55% 60%, rgba(244,168,182,.3), transparent 40%);
  box-shadow: inset 0 0 70px rgba(255,243,221,.38), 0 30px 80px rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
}
.window-pane::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.74), transparent 22%),
    repeating-linear-gradient(100deg, rgba(255,255,255,.22) 0 2px, transparent 2px 16px);
  opacity: var(--fog, .92);
  transition: opacity .15s linear;
}
.glass-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  transform: scaleX(-1) rotate(-2deg);
  font-family: var(--title);
  font-size: clamp(64px, 11vw, 154px);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  text-shadow: 0 0 18px rgba(216,155,66,.7), 0 2px 0 var(--cream);
  z-index: 2;
}
.painted-flourish {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%) scaleX(-1);
  font-family: var(--play);
  color: rgba(216,155,66,.62);
  font-size: 36px;
  letter-spacing: .12em;
  z-index: 2;
}
.reverse-label, .scroll-hint {
  position: absolute;
  z-index: 3;
  font: 800 11px/1 var(--plain);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cream);
}
.reverse-label { left: 38px; top: 108px; opacity: .76; }
.scroll-hint { left: 50%; bottom: -38px; transform: translateX(-50%); color: var(--gold); }
.finger-wipe {
  position: absolute;
  left: 4%;
  top: 18%;
  width: var(--wipe, 0%);
  height: 48%;
  z-index: 4;
  border-radius: 999px 40px 999px 80px;
  background: radial-gradient(ellipse at left, rgba(255,255,255,.8), rgba(255,243,221,.16) 70%, transparent);
  filter: blur(7px);
  transform: rotate(-8deg);
  mix-blend-mode: screen;
}
.steam { position:absolute; width: 55%; height: 22%; border-radius:50%; border-top: 2px solid rgba(255,255,255,.48); filter: blur(7px); z-index:1; animation: steamFloat 10s linear infinite; }
.steam-one { left:-12%; top:22%; }
.steam-two { right:-20%; top:45%; animation-delay:-4s; }
.steam-three { left:15%; bottom:12%; animation-delay:-7s; }
@keyframes steamFloat { to { transform: translateX(28%) translateY(-18px) scale(1.2); opacity: .2; } }

.room-plaque {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  padding: 12px 26px;
  border: 1px solid rgba(216,155,66,.68);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,243,221,.84), rgba(216,155,66,.18));
  box-shadow: 0 8px 30px rgba(74,22,37,.18);
  font: 800 12px/1 var(--plain);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.room-plaque span { font-family: var(--flavor); color: var(--raspberry); margin-right: 14px; }

.cake-dome-salon {
  background:
    radial-gradient(circle at 20% 15%, rgba(244,168,182,.55), transparent 28%),
    radial-gradient(circle at 85% 55%, rgba(159,184,201,.44), transparent 32%),
    linear-gradient(135deg, var(--cream), #fff8ed 55%, rgba(183,201,120,.35));
}
.marble-counter {
  position: absolute;
  left: -8%; right: -8%; bottom: -8%; height: 38%;
  transform: rotate(-4deg);
  background:
    linear-gradient(110deg, rgba(58,33,26,.08), transparent 25% 32%, rgba(159,184,201,.18) 33%, transparent 48%),
    linear-gradient(var(--cream), #fff9ee);
  border-top: 2px solid rgba(216,155,66,.34);
}
.dome-scene { position: relative; width: min(980px, 88vw); height: 610px; }
.cloche { position: absolute; display:grid; place-items:end center; }
.cloche-large { left: 8%; bottom: 30px; width: 370px; height: 430px; }
.cloche-tall { right: 14%; bottom: 68px; width: 290px; height: 470px; }
.cloche-small { left: 42%; top: 80px; width: 250px; height: 310px; }
.glass-dome {
  position: absolute; inset: 0 0 58px;
  border-radius: 50% 50% 22px 22px / 58% 58% 20px 20px;
  border: 2px solid rgba(255,255,255,.82);
  background: radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.78), transparent 16%), linear-gradient(120deg, rgba(255,255,255,.16), rgba(159,184,201,.32), rgba(255,243,221,.12));
  box-shadow: inset 0 0 35px rgba(255,255,255,.45), 0 22px 38px rgba(74,22,37,.16);
}
.cake { position: relative; width: 62%; height: 105px; margin-bottom: 52px; border-radius: 50% 50% 12px 12px; box-shadow: 0 12px 0 rgba(74,22,37,.16); }
.cake-raspberry { background: linear-gradient(var(--rose) 0 26%, var(--raspberry) 26% 46%, var(--cream) 46% 67%, var(--raspberry) 67%); }
.tart-pistachio { height: 78px; background: radial-gradient(circle at 50% 0, var(--pistachio) 0 28%, transparent 29%), linear-gradient(var(--gold), var(--cream)); }
.macarons { position: relative; margin-bottom: 54px; width: 148px; height: 120px; }
.macarons i { display:block; height:36px; margin: -2px auto 0; border-radius: 45px; box-shadow: inset 0 -7px rgba(74,22,37,.12); }
.macarons i:nth-child(1){ width:118px; background:var(--rose); }
.macarons i:nth-child(2){ width:140px; background:var(--pistachio); }
.macarons i:nth-child(3){ width:104px; background:var(--gold); }
.pastry-label {
  position: absolute; bottom: 0;
  border: 0;
  padding: 12px 18px;
  border-radius: 4px;
  background: var(--cream);
  color: var(--cherry);
  font: 800 13px/1 var(--flavor);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 12px 22px rgba(74,22,37,.18);
  cursor: pointer;
}
.pastry-label::after { content:""; position:absolute; left:12px; right:12px; bottom:7px; height:3px; background:var(--raspberry); border-radius:999px; transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.pastry-label:hover::after, .pastry-label.syrup::after { transform:scaleX(1); }
.menu-card {
  position: absolute;
  z-index: 9;
  width: min(380px, 82vw);
  padding: 30px;
  background: linear-gradient(145deg, rgba(255,243,221,.96), rgba(255,255,255,.75));
  border: 1px solid rgba(216,155,66,.52);
  border-radius: 12px 42px 12px 42px;
  box-shadow: 0 24px 48px rgba(74,22,37,.18);
}
.menu-card b, .ticket b, .receipt b { color: var(--raspberry); font: 900 11px/1 var(--plain); letter-spacing:.26em; text-transform:uppercase; }
.menu-card h2, .receipt h2 { margin: 14px 0; font-family: var(--title); font-size: clamp(34px, 4vw, 56px); line-height:.92; color: var(--cherry); }
.menu-card p, .receipt p { font: 600 15px/1.7 var(--plain); }
.salon-card { right: 7%; bottom: 10%; transform: rotate(3deg); }
.floating-dome { position:absolute; right:-80px; top:18%; width:280px; height:280px; border-radius:50%; background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.65), transparent 17%), radial-gradient(circle, rgba(159,184,201,.18), transparent 64%); border:1px solid rgba(255,255,255,.7); filter: blur(.2px); }

.sugar-drawer {
  background: linear-gradient(105deg, var(--cherry), var(--raspberry) 52%, #6c1c34);
  color: var(--cream);
}
.sugar-drawer::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(45deg, rgba(255,243,221,.07) 0 20px, transparent 20px 40px); }
.drawer-box { width:min(1000px, 86vw); height: 500px; position:relative; border: 16px solid var(--gold); border-radius: 24px; background: linear-gradient(180deg, rgba(58,33,26,.74), rgba(74,22,37,.72)); box-shadow: inset 0 22px 50px rgba(0,0,0,.2), 0 35px 80px rgba(0,0,0,.35); }
.drawer-handle { position:absolute; left:50%; top:28px; transform:translateX(-50%); width:180px; height:22px; border-radius:999px; background:linear-gradient(#fff0b7, var(--gold)); box-shadow:0 8px 20px rgba(0,0,0,.28); }
.paper-tabs { position:absolute; inset: 86px 46px 28px; perspective:1000px; }
.ticket {
  position:absolute;
  width: 250px;
  min-height: 280px;
  padding: 24px;
  color: var(--espresso);
  background: linear-gradient(150deg, var(--cream), #fffaf0);
  border: 1px dashed rgba(74,22,37,.36);
  border-radius: 16px 16px 48px 16px;
  box-shadow: 0 22px 38px rgba(0,0,0,.22);
  transform-origin: 50% 120%;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.ticket h3 { font-family: var(--flavor); font-size: 27px; line-height:1; margin: 18px 0 10px; color: var(--cherry); }
.ticket p { line-height:1.55; font-weight:700; }
.tab-one { left: 5%; transform: rotate(-5deg) translateY(30px); }
.tab-two { left: 28%; transform: rotate(2deg) translateY(55px); }
.tab-three { left: 51%; transform: rotate(-2deg) translateY(35px); }
.tab-four { right: 4%; transform: rotate(5deg) translateY(62px); }
.sugar-drawer.in-view .tab-one { transform: rotate(-18deg) translate(-30px, -34px); }
.sugar-drawer.in-view .tab-two { transform: rotate(-5deg) translate(-8px, -70px); }
.sugar-drawer.in-view .tab-three { transform: rotate(8deg) translate(8px, -48px); }
.sugar-drawer.in-view .tab-four { transform: rotate(19deg) translate(28px, -24px); }
.ribbon { position:absolute; height:18px; width:46vw; background:linear-gradient(90deg, transparent, var(--rose), var(--gold), transparent); opacity:.7; }
.ribbon-a { top:20%; left:-8%; transform:rotate(-15deg); }
.ribbon-b { bottom:18%; right:-10%; transform:rotate(14deg); }
.sugar-cubes { position:absolute; bottom:44px; right:10%; display:flex; gap:12px; }
.sugar-cubes button { width:34px; height:34px; border:0; border-radius:7px; background:var(--cream); box-shadow: inset -5px -6px rgba(159,184,201,.25), 0 10px 18px rgba(0,0,0,.22); cursor:pointer; transition: transform .25s; }
.sugar-cubes button:hover { transform: translateY(-8px) rotate(10deg); }

.coffee-oracle {
  background:
    radial-gradient(circle at center, rgba(255,243,221,.9) 0 23%, transparent 24%),
    conic-gradient(from 45deg, rgba(58,33,26,.08), rgba(216,155,66,.18), rgba(74,22,37,.1), rgba(58,33,26,.08)),
    var(--blue);
}
.oracle-table { position:relative; width: min(680px, 80vw); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background: radial-gradient(circle, rgba(255,243,221,.75), rgba(216,155,66,.15) 58%, transparent 59%); }
.cup { width: min(460px, 68vw); aspect-ratio:1; border-radius:50%; position:relative; background: radial-gradient(circle, #22120e 0 34%, var(--espresso) 35% 48%, var(--cream) 49% 63%, #ffffff 64% 68%, rgba(159,184,201,.5) 69%); box-shadow:0 28px 65px rgba(58,33,26,.3), inset 0 0 0 12px rgba(255,255,255,.55); transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.cup.stirred { transform: rotate(240deg); }
.crema-ring { position:absolute; border-radius:50%; border: 4px solid rgba(216,155,66,.78); inset: 24%; opacity:.78; }
.ring-b { inset: 31%; border-color: rgba(244,168,182,.7); transform: translate(15px, -8px); }
.ring-c { inset: 39%; border-color: rgba(255,243,221,.78); transform: translate(-15px, 12px); }
.crumb { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(255,243,221,.25); }
.crumb-a { left:22%; top:42%; } .crumb-b { right:28%; top:24%; } .crumb-c { left:45%; bottom:22%; } .crumb-d { right:38%; bottom:34%; }
.spoon-stir { position:absolute; z-index:4; right: 4%; top: 17%; width:72px; height:210px; border:0; border-radius:50px 50px 18px 18px; background:linear-gradient(90deg, var(--gold), #fff0bd 40%, var(--gold)); color:var(--cherry); font:900 11px/1 var(--plain); letter-spacing:.2em; text-transform:uppercase; box-shadow:0 18px 35px rgba(58,33,26,.24); cursor:pointer; transform:rotate(34deg); }
.spoon-stir.stir { animation: spoonDip .9s ease; }
@keyframes spoonDip { 50% { transform: rotate(58deg) translate(16px, 48px); } }
.oracle-copy { left: 7%; bottom: 10%; transform: rotate(-3deg); }

.last-petit-four {
  background: radial-gradient(circle at 50% 58%, rgba(216,155,66,.35), transparent 24%), linear-gradient(145deg, var(--espresso), var(--cherry) 70%);
  color: var(--cream);
}
.booth-shadow { position:absolute; inset:auto -5% -12% -5%; height:48%; background: radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 62%); }
.chandelier { position:absolute; top:0; left:50%; transform:translateX(-50%); display:flex; gap:34px; }
.chandelier::before { content:""; position:absolute; top:0; left:50%; width:2px; height:110px; background:var(--gold); }
.chandelier i { width:10px; height:120px; background:linear-gradient(var(--gold), transparent); position:relative; opacity:.7; }
.chandelier i::after { content:""; position:absolute; bottom:-8px; left:50%; width:22px; height:22px; border-radius:50%; background:var(--gold); box-shadow:0 0 28px 8px rgba(216,155,66,.55); transform:translateX(-50%); animation: glint 3s infinite; animation-delay: calc(var(--n, 1) * .35s); }
.chandelier i:nth-child(2)::after { --n:2; } .chandelier i:nth-child(3)::after { --n:3; } .chandelier i:nth-child(4)::after { --n:4; } .chandelier i:nth-child(5)::after { --n:5; }
@keyframes glint { 50% { opacity:.25; transform:translateX(-50%) scale(.72); } }
.dessert-plate { position:relative; width:min(480px, 70vw); height:360px; display:grid; place-items:center; }
.plate { position:absolute; width:100%; height:58%; border-radius:50%; background:radial-gradient(ellipse, #fff 0 38%, var(--cream) 39% 58%, rgba(159,184,201,.5) 59% 66%, transparent 67%); box-shadow:0 32px 70px rgba(0,0,0,.45); }
.petit-four { position:relative; width:126px; height:96px; border-radius:18px 18px 10px 10px; background:linear-gradient(var(--pistachio), var(--cream) 46%, var(--rose) 47%); box-shadow:0 20px 25px rgba(74,22,37,.3); }
.petit-four::before { content:""; position:absolute; inset:-12px 20px auto; height:22px; border-radius:50%; background:var(--raspberry); }
.petit-four span { position:absolute; left:50%; top:-38px; width:28px; height:42px; border:4px solid var(--raspberry); border-left:0; border-bottom:0; border-radius:0 28px 0 0; transform:rotate(-22deg); }
.fork { position:absolute; right:3%; bottom:25%; width:15px; height:240px; border-radius:999px; background:linear-gradient(90deg, var(--gold), #fff0bd, var(--gold)); transform:rotate(72deg); box-shadow:0 12px 28px rgba(0,0,0,.3); }
.receipt { position:absolute; right:8%; bottom:11%; width:min(330px, 78vw); padding:28px; color:var(--espresso); background:linear-gradient(var(--cream), #fffaf0); border-radius:8px 8px 40px 8px; transform:rotate(4deg); box-shadow:0 26px 50px rgba(0,0,0,.35); }
.receipt::after { content:""; position:absolute; left:0; right:0; top:-12px; height:20px; background: radial-gradient(circle at 10px 12px, transparent 0 8px, var(--cream) 9px); background-size:20px 20px; }
.receipt a { color:var(--raspberry); font:900 15px/1 var(--flavor); text-decoration:none; border-bottom:2px solid var(--gold); }

@media (max-width: 820px) {
  .lace { width: 34px; }
  .spoon-nav { right: 6px; transform: translateY(-50%) scale(.75); }
  .dome-scene { height: 720px; }
  .cloche-large { left: 0; transform: scale(.78); transform-origin:left bottom; }
  .cloche-tall { right: -10%; transform: scale(.72); transform-origin:right bottom; }
  .cloche-small { left: 34%; top: 250px; transform: scale(.7); }
  .salon-card, .oracle-copy, .receipt { left: 50%; right: auto; bottom: 5%; transform: translateX(-50%) rotate(1deg); }
  .drawer-box { height: 680px; }
  .ticket { width: 210px; }
  .tab-one { left: 0; } .tab-two { left: 36%; } .tab-three { left: 4%; top: 270px; } .tab-four { right: 2%; top: 280px; }
}