/* Ingredient explosions for the menu (tap a can). Namespaced xp- so nothing clashes with the page. */
:root { --xu: min(1vmin, 8.5px); --glow: rgba(255, 214, 120, .22); --blast: cubic-bezier(.08, .82, .17, 1); --suck: cubic-bezier(.65, 0, .85, .3); }
body.xp-lock { overflow: hidden; }
/* ── stage ── */
.xp-stage { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; visibility: hidden; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--glow), transparent 38%), radial-gradient(ellipse 85% 75% at 50% 50%, var(--maroon-soft), var(--maroon-deep) 78%);
  opacity: 0; transition: opacity .45s ease, visibility 0s linear .9s; }
.xp-stage.is-active { visibility: visible; pointer-events: auto; opacity: 1; transition: opacity .3s ease, visibility 0s; }
.xp-stage.is-active.is-closing { opacity: 0; transition: opacity .4s ease .5s, visibility 0s linear 1s; }

.xp-close, .xp-replay { position: absolute; z-index: 30; top: calc(16px + env(safe-area-inset-top, 0px)); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(37, 5, 7, .35); display: grid; place-items: center; transition: background .3s, transform .3s; }
.xp-close { right: max(16px, env(safe-area-inset-right, 0px)); }
.xp-replay { right: calc(max(16px, env(safe-area-inset-right, 0px)) + 54px); }
.xp-close:hover { background: rgba(246,237,225,.12); transform: rotate(90deg); }
.xp-replay:hover { background: rgba(246,237,225,.12); transform: rotate(-180deg); }
.xp-close svg, .xp-replay svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }

.xp-burst { position: relative; width: 1px; height: 1px; }

.xp-flash { position: absolute; left: 50%; top: 50%; width: calc(var(--xu) * 60); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 9; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 246, 220, .95), rgba(255, 220, 140, .35) 35%, transparent 65%); opacity: 0; transform: scale(.2); }
.xp-stage.is-open .xp-flash { animation: xp-flash .7s ease-out; }
@keyframes xp-flash { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }

.xp-can { position: absolute; left: 50%; top: 50%; width: calc(var(--xu) * 24); translate: -50% -50%; z-index: 8; transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .4s ease, filter .4s ease; }
.xp-can img { width: 100%; display: block; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); }
.xp-stage.is-shaking .xp-can { animation: xp-shake .34s ease-in-out; }
.xp-stage.is-open .xp-can { transform: scale(1.6); opacity: 0; filter: blur(16px); transition: transform .35s ease-out, opacity .25s ease, filter .25s ease; }
.xp-stage.is-landed .xp-can { animation: xp-land .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes xp-shake { 0%,100% { rotate: 0deg; scale: 1; } 20% { rotate: -7deg; } 40% { rotate: 6deg; scale: 1.04; } 60% { rotate: -5deg; } 80% { rotate: 3deg; scale: 1.08; } }
@keyframes xp-land { 0% { transform: scale(.78); } 100% { transform: scale(1); } }

/* base liquids */
.xp-liquid { position: absolute; left: 50%; top: 50%; width: calc(var(--xu) * var(--lw)); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; z-index: var(--lz);
  opacity: 0; transform: scale(.05) rotate(var(--lr)); transition: transform .5s var(--suck), opacity .35s ease .15s; }
.xp-liquid img { width: 100%; height: 100%; display: block; }
.xp-stage.is-open .xp-liquid { opacity: var(--lo); transform: scale(1) rotate(var(--lr)); transition: transform 1.3s var(--blast) .05s, opacity .25s ease .05s; }
.xp-stage.is-open .xp-liquid img { animation: xp-breathe 9s ease-in-out infinite 1.3s; }
@keyframes xp-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.06) rotate(4deg); } }

/* ingredient pieces */
.xp-piece { position: absolute; left: 0; top: 0; width: calc(var(--xu) * var(--w)); pointer-events: none; z-index: var(--zi);
  transform: translate(-50%, -50%) translate(0, 0) rotate(calc(var(--r) - 200deg)) scale(.08); opacity: 0;
  transition: transform .55s var(--suck) calc(var(--o) * .015s), opacity .2s ease calc(var(--o) * .025s + .38s); }
.xp-stage.is-open .xp-piece { opacity: 1;
  transform: translate(-50%, -50%) translate(calc(var(--xu) * var(--x)), calc(var(--xu) * var(--y))) rotate(var(--r)) scale(1);
  transition: transform 1.25s var(--blast) calc(var(--o) * .012s), opacity .12s ease calc(var(--o) * .012s); }
.xp-px { transform: translate(calc(var(--px, 0) * var(--d) * 1px), calc(var(--py, 0) * var(--d) * 1px)); transition: transform .5s ease-out; }
.xp-drift { animation: xp-drift var(--t) ease-in-out infinite alternate; animation-play-state: paused; }
.xp-stage.is-open .xp-drift { animation-play-state: running; }
.xp-piece img { width: 100%; height: auto; display: block; filter: var(--f); }
@keyframes xp-drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(calc(var(--xu) * var(--x) * .07), calc(var(--xu) * var(--y) * .07)) rotate(var(--s)); } }

.xp-close, .xp-replay { color: var(--cream); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .xp-stage *, .xp-stage { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}