/* Interaction-only styles. Content and controls stay usable without JavaScript. */
:where(a[href], button, summary, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:where(a[href], button, summary, [role="button"]):focus-visible {
  outline: 2px solid #bc9555;
  outline-offset: 5px;
}

:where(a[href], button, summary, [role="button"]).is-arriving:not(.is-pressing):not(.is-releasing) {
  animation: kitchen-control-arrive 520ms cubic-bezier(.18,.75,.25,1) both;
}

:where(a[href], button, summary, [role="button"]).is-pressing {
  translate: 0 3px;
  scale: .972;
  filter: brightness(.96);
}

:where(a[href], button, summary, [role="button"]).is-releasing {
  animation: kitchen-release 400ms cubic-bezier(.2,.8,.25,1) both;
}

@keyframes kitchen-control-arrive {
  from { opacity: .3; translate: 0 7px; scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes kitchen-release {
  0% { translate: 0 3px; scale: .972; }
  50% { translate: 0 -1px; scale: 1.015; }
  100% { translate: 0 0; scale: 1; }
}

#interaction-fx,
#celebration {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 10000;
  pointer-events: none;
}

.kitchen-tap-ring {
  position: absolute;
  width: 38px;
  height: 15px;
  margin: -7.5px 0 0 -19px;
  border: 1.5px solid #c7a86d;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #f6f1e527;
  animation: kitchen-saucer-ring 650ms ease-out both;
}

.kitchen-tap-steam {
  position: absolute;
  bottom: 7px;
  left: calc(6px + var(--steam-index) * 9px);
  width: 7px;
  height: 21px;
  border-left: 1.5px solid #e2c58e;
  border-radius: 50%;
  transform-origin: bottom;
  animation: kitchen-steam 700ms ease-out both;
  animation-delay: calc(var(--steam-index) * 25ms);
}

@keyframes kitchen-saucer-ring {
  0% { opacity: .95; transform: scale(.5); }
  40% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.7) translateY(-3px); }
}

@keyframes kitchen-steam {
  0% { opacity: 0; transform: translateY(4px) scaleY(.4) rotate(-12deg); }
  30% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-24px) scaleY(1.3) rotate(12deg); }
}

#mobile-menu[hidden],
.scene-panel[hidden],
#gallery-dialog:not([open]),
#wish-picked[hidden],
#wish-result-jump[hidden],
#wish-complete-note[hidden],
#wish-photo-status[hidden],
#gallery-status[hidden],
.menu-category[hidden],
.menu-item[hidden],
#menu-empty[hidden] {
  display: none !important;
}

.scene-panel.is-entering,
#wish-complete-note:not([hidden]) {
  animation: kitchen-panel-in 550ms cubic-bezier(.2,.7,.2,1) both;
}

@keyframes kitchen-panel-in {
  from { opacity: .2; transform: translateY(10px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* A new recommendation never inherits the previous recommendation's photograph. */
#wish-photo-status {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 25px;
  color: var(--navy);
  background: radial-gradient(ellipse at 25% 15%, #fffdf3 0, transparent 75%), linear-gradient(145deg, #e7e0cf, #d9e4d8);
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.95;
  text-align: center;
  pointer-events: none;
}

#wish-photo-status > .cup-icon { width: 38px; height: 38px; color: var(--green); }
.wish-photo-status-text { max-width: 260px; }
.is-photo-pending #wish-photo-status > .cup-icon { animation: kitchen-photo-wait 1500ms ease-in-out 3; }

@keyframes kitchen-photo-wait {
  0%, 100% { opacity: .65; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* The picture itself moves; captions and controls remain still and readable. */
.gallery-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: zoom-in;
  touch-action: pan-y pinch-zoom;
  background: #0b1725;
  --photo-scale: 1;
  --photo-pan-x: 0px;
  --photo-pan-y: 0px;
}

#gallery-image {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transform: translate(var(--photo-pan-x), var(--photo-pan-y)) scale(var(--photo-scale));
  transition: transform 380ms cubic-bezier(.2,.7,.2,1), opacity 180ms ease;
}

.gallery-stage:not(.has-photo) #gallery-image,
.gallery-stage.photo-has-error #gallery-image { opacity: 0; }
.gallery-stage.is-loading.has-photo #gallery-image { opacity: .45; }
.gallery-stage.is-zoomed { cursor: grab; touch-action: none; }
.gallery-stage.is-panning { cursor: grabbing; }
.gallery-stage.is-panning #gallery-image { transition: none; }

#gallery-image.is-entering,
#wish-result-photo.is-photo-changing {
  animation: kitchen-photo-in 650ms cubic-bezier(.16,.75,.2,1) both;
}

.gallery-fade-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  animation: kitchen-photo-out 650ms cubic-bezier(.2,.7,.2,1) both;
}

@keyframes kitchen-photo-in {
  from { opacity: .2; transform: scale(1.065); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes kitchen-photo-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.025); }
}

#gallery-zoom { width: auto; min-width: 88px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
.gallery-status { text-align: center; font-size: 12px; line-height: 1.7; margin: 8px 0; }

#wish-fill { transition: width 500ms cubic-bezier(.2,.7,.15,1); }
#wish-stamps [data-stamp-key].is-stamping { animation: kitchen-stamp 560ms cubic-bezier(.16,.8,.25,1) both; }
#wish-complete-note:not([hidden]) svg { animation: kitchen-cup-finish 1000ms cubic-bezier(.2,.75,.25,1) both; }
#wish-board.is-complete { animation: kitchen-complete-glow 1250ms ease-out both; }

@keyframes kitchen-stamp {
  0% { scale: 1.45; rotate: -15deg; opacity: .4; }
  45% { scale: .9; rotate: 4deg; opacity: 1; }
  100% { scale: 1; rotate: 0deg; opacity: 1; }
}

@keyframes kitchen-cup-finish {
  0% { transform: translateY(8px) rotate(-9deg); opacity: .3; }
  45% { transform: translateY(-4px) rotate(4deg); opacity: 1; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}

@keyframes kitchen-complete-glow {
  0% { box-shadow: 0 0 0 0 #c7a86d00; }
  35% { box-shadow: 0 0 0 10px #c7a86d30, 0 20px 60px #142d2530; }
  100% { box-shadow: 0 0 0 0 #c7a86d00; }
}

.kitchen-celebration-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70vw,620px);
  aspect-ratio: 1;
  border: 1px solid #d2b277;
  border-radius: 50%;
  box-shadow: 0 0 0 12px #d2b27715, inset 0 0 0 10px #d2b27710;
  animation: kitchen-joy-ring 1300ms cubic-bezier(.1,.65,.25,1) both;
}

.kitchen-celebration-leaf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 15px;
  background: var(--leaf-color);
  border-radius: 2px 10px;
  box-shadow: 0 1px 2px #102f2820;
  animation: kitchen-joy-leaf 1450ms cubic-bezier(.15,.7,.3,1) both;
  animation-delay: var(--leaf-delay);
}

@keyframes kitchen-joy-ring {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  25% { opacity: .65; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }
}

@keyframes kitchen-joy-leaf {
  0% { opacity: 0; transform: translate(0,0) rotate(0); }
  10% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--leaf-x),var(--leaf-y)) rotate(var(--leaf-spin)); }
}

.motion-ready [data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 850ms cubic-bezier(.2,.65,.2,1), translate 850ms cubic-bezier(.2,.65,.2,1);
  transition-delay: var(--reveal-delay,0ms);
}

.motion-ready [data-reveal].is-visible { opacity: 1; translate: 0 0; }

.motion-ready [data-reveal].is-visible .section-title,
.motion-ready .section-title[data-reveal].is-visible,
.motion-ready :is(.scene-copy,.owner-content)[data-reveal].is-visible h3 {
  animation: kitchen-heading-arrive 620ms cubic-bezier(.2,.75,.2,1);
}

.motion-ready [data-reveal].is-visible img.is-image-ready:not(.hero-photo):not(#wish-result-photo):not(#gallery-image),
.motion-ready img[data-reveal].is-visible.is-image-ready:not(.hero-photo) {
  animation: kitchen-picture-arrive 760ms cubic-bezier(.2,.75,.2,1);
}

details[open] > :not(summary) { animation: kitchen-details-enter 260ms ease-out; }

@keyframes kitchen-heading-arrive {
  from { clip-path: inset(0 0 55% 0); opacity: .5; transform: translateY(8px); }
  to { clip-path: inset(0); opacity: 1; transform: translateY(0); }
}

@keyframes kitchen-picture-arrive {
  from { clip-path: inset(2% 0 5% 0); opacity: .6; transform: scale(1.045); }
  to { clip-path: inset(0); opacity: 1; transform: scale(1); }
}

@keyframes kitchen-details-enter {
  from { opacity: .15; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero.is-ready .hero-title { animation: kitchen-hero-title 1250ms cubic-bezier(.16,.7,.22,1) both; }

@keyframes kitchen-hero-title {
  from { opacity: .15; transform: translateY(28px); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  :where(a[href], button, summary, [role="button"]).is-pressing { translate: none; scale: 1; filter: brightness(.94); }
  :where(a[href], button, summary, [role="button"]).is-arriving,
  :where(a[href], button, summary, [role="button"]).is-releasing,
  .scene-panel.is-entering,
  #gallery-image.is-entering,
  #wish-result-photo.is-photo-changing,
  #wish-stamps [data-stamp-key].is-stamping,
  #wish-complete-note:not([hidden]),
  #wish-complete-note:not([hidden]) svg,
  .is-photo-pending #wish-photo-status > .cup-icon,
  #wish-board.is-complete,
  .motion-ready [data-reveal].is-visible .section-title,
  .motion-ready .section-title[data-reveal].is-visible,
  .motion-ready :is(.scene-copy,.owner-content)[data-reveal].is-visible h3,
  .motion-ready [data-reveal].is-visible img.is-image-ready,
  .motion-ready img[data-reveal].is-visible.is-image-ready,
  details[open] > :not(summary),
  .hero.is-ready .hero-title { animation: none; }
  .motion-ready [data-reveal] { opacity: 1; translate: none; transition: none; }
  #wish-fill, #gallery-image { transition: none; }
  .gallery-fade-photo, #interaction-fx, #celebration { display: none; }
}