/* Motion is an enhancement: content stays readable without JavaScript. */
:root { --table-ease: cubic-bezier(.19, 1, .22, 1); }
.hero-photo img { animation-duration: 2.2s; transform-origin: 58% 55%; }
@keyframes heroPhoto {
  from { transform: scale(1.095); filter: brightness(.82); }
  to { transform: scale(1); filter: brightness(1); }
}
@keyframes heroText {
  from { opacity: 0; transform: translateY(32px); filter: blur(2px); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); clip-path: inset(-10% -3% -10% -3%); }
}
.hero-arrived:not(.is-bouncing) { animation: none; }
/* The second invitation follows the menu button, without moving the layout. */
.hero-actions > :nth-child(2):not(.hero-arrived):not(.is-bouncing) { animation: heroText 1.1s var(--table-ease) 1s both; }
button, a, summary, .check-item { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, summary, .check-item { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
button:focus-visible, a:focus-visible, summary:focus-visible, .check-item:has(input:focus-visible) {
  outline: 3px solid #aa8042;
  outline-offset: 5px;
}
.is-pressing {
  transform: translateY(3px) scale(.975) !important;
  filter: brightness(.96);
  transition: transform 85ms ease-out, filter 85ms ease-out !important;
}
.button.is-pressing, .btn.is-pressing, button.is-pressing, .check-item.is-pressing {
  box-shadow: inset 0 2px 6px #17220e26 !important;
}
.motion-ready .control-arrival:not(.is-visible) { opacity: 0; }
.is-control-entering { animation: control-appearance 600ms var(--table-ease) both; }
@keyframes control-appearance {
  from { opacity: 0; transform: translateY(10px) scale(.97); filter: brightness(.9); }
  70% { opacity: 1; }
  to { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}
.is-bouncing { animation: button-return 350ms var(--table-ease); }
@keyframes button-return {
  0% { transform: translateY(3px) scale(.975); }
  55% { transform: translateY(-1px) scale(1.008); }
  100% { transform: translateY(0) scale(1); }
}
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms var(--table-ease), transform 1.1s var(--table-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready [data-reveal="image"] {
  transform: translateY(28px) scale(.965);
  clip-path: inset(0 0 22% 0);
  transition: opacity 900ms var(--table-ease), transform 1.5s var(--table-ease), clip-path 1.5s var(--table-ease);
}
.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
.motion-ready [data-reveal="image"].is-visible { clip-path: inset(-40px -80px -50px -40px); }
.motion-ready [data-reveal="heading"] {
  transform: translateY(38px);
  filter: blur(2px);
  transition: opacity 900ms var(--table-ease), transform 1.25s var(--table-ease), filter 1.1s var(--table-ease);
}
.motion-ready [data-reveal="heading"].is-visible { filter: blur(0); }
#interaction-fx, #celebration-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1100;
  contain: strict;
}
#celebration-layer { z-index: 1110; }
.dialog-interaction-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
  contain: strict;
}
.touch-flourish { position: absolute; width: 1px; height: 1px; }
.touch-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: -20px;
  border: 1px solid #cbb17ac7;
  border-radius: 50%;
  animation: dish-ring 560ms ease-out both;
}
.touch-ring-rim {
  width: 32px;
  height: 32px;
  margin: -16px;
  border-color: #d7c695a8;
  animation-delay: 85ms;
  animation-duration: 620ms;
}
.touch-leaf {
  position: absolute;
  width: 6px;
  height: 12px;
  margin: -6px -3px;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(130deg, #e0c38e, #849c68);
  animation: olive-spark 620ms var(--table-ease) both;
}
@keyframes dish-ring {
  from { opacity: .85; transform: scale(.2); }
  to { opacity: 0; transform: scale(1.5); }
}
@keyframes olive-spark {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.4); }
  20% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--leaf-x), var(--leaf-y)) rotate(var(--leaf-r)) scale(.7); }
}
.table-confetti {
  position: absolute;
  width: 8px;
  height: 17px;
  margin: -8px -4px;
  border-radius: 1px 100% 1px 100%;
  background: linear-gradient(145deg, #d9c18b, #98783f);
  animation: table-celebrate var(--confetti-duration) var(--confetti-delay) cubic-bezier(.12, .63, .39, 1) both;
  will-change: transform, opacity;
}
.confetti-1 { background: linear-gradient(145deg, #a8bf8a, #516e3f); width: 10px; height: 20px; }
.confetti-2 { background: linear-gradient(145deg, #f8edda, #b7a077); width: 6px; height: 6px; border-radius: 50%; }
@keyframes table-celebrate {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  8% { opacity: 1; }
  62% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--confetti-x), calc(var(--confetti-y) + 190px)) rotate(var(--confetti-r)) scale(.8); }
}
#check-progress { transition: width 600ms var(--table-ease); }
.taste-plate svg [data-taste-token] {
  opacity: .18;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 380ms ease, color 380ms ease;
}
.taste-plate svg [data-taste-token].is-selected { opacity: 1; }
.taste-section [data-taste-token].is-just-selected { animation: taste-on-the-plate 650ms var(--table-ease); }
@keyframes taste-on-the-plate {
  0% { transform: translateY(12px) scale(.72) rotate(-9deg); }
  60% { transform: translateY(-3px) scale(1.1) rotate(3deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
.taste-section[data-selected-count="5"] .taste-plate { filter: drop-shadow(0 6px 15px #9d8b6120); }
.check-item { transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease; }
.check-item .check-mark, .check-item .check-icon, .check-item .check-box { transition: transform 420ms var(--table-ease), background 220ms ease; }
.check-item.is-checked .check-mark, .check-item.is-checked .check-icon, .check-item.is-checked .check-box { animation: check-serve 450ms var(--table-ease); }
@keyframes check-serve {
  0% { transform: scale(.78) rotate(-16deg); }
  60% { transform: scale(1.16) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.taste-section.is-completion-pending #taste-result { opacity: 0; }
.taste-section.is-celebrating #taste-result { animation: result-arrival 850ms var(--table-ease) both; }
.taste-result-emblem { display: none; color: var(--green); }
.taste-result-emblem svg { display: block; width: 100%; height: auto; overflow: visible; }
#taste-advice {
  margin-top: 18px;
  padding: 22px 20px;
  border-top: 1px solid #9d8b6170;
  border-bottom: 1px solid #9d8b6140;
  background: radial-gradient(ellipse at 100% 0, #9d8b6115, transparent 70%), linear-gradient(120deg, #fffaf199, #e8e8df55);
}
#taste-advice .eyebrow { margin: 0 0 9px; font-size: 11px; color: #626c4e; }
#taste-advice h3 { color: var(--green); font: 23px/1.7 var(--serif); letter-spacing: .025em; }
#taste-advice-copy { margin-top: 10px; color: #495341; font: 12px/1.95 var(--sans); }
#taste-advice .text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 9px; font: 11px/1.6 var(--sans); gap: 18px; }
@keyframes result-arrival {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cloche-bell { transform-origin: 50% 70%; }
.taste-section.is-celebrating .cloche-bell { animation: cloche-open 1.4s 200ms var(--table-ease) both; }
.cloche-steam { opacity: 0; }
.taste-section.is-celebrating .cloche-steam { animation: steam-rise 2.2s 600ms ease-out both; }
@keyframes cloche-open {
  0%, 18% { transform: translate(0, 0) rotate(0); }
  100% { transform: translate(10px, -16px) rotate(16deg); }
}
@keyframes steam-rise {
  0% { opacity: 0; transform: translateY(10px); }
  35% { opacity: .7; }
  100% { opacity: .35; transform: translateY(-6px); }
}
/* Saved or interrupted completion rests in its finished pose. New choices
   restore the show, without replaying it when the page becomes visible. */
.taste-section[data-restored-complete] #taste-result,
.taste-section[data-restored-complete] #check-progress,
.taste-section[data-restored-complete] [data-taste-token],
.taste-section[data-restored-complete] .check-item,
.taste-section[data-restored-complete] .check-item .check-box {
  animation: none;
  transition: none;
}
.taste-section[data-restored-complete] #taste-result { opacity: 1; transform: none; }
.taste-section[data-restored-complete] .cloche-bell { animation: none; transform: translate(10px, -16px) rotate(16deg); }
.taste-section[data-restored-complete] .cloche-steam { animation: none; opacity: .35; transform: translateY(-6px); }
#mobile-nav.is-open { animation: navigation-arrival 320ms var(--table-ease) both; }
@keyframes navigation-arrival { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
details[open] > :not(summary) { animation: answer-arrival 420ms var(--table-ease); }
@keyframes answer-arrival { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
html.menu-viewer-is-open { scroll-behavior: auto !important; }
#image-dialog[open] { display: flex; flex-direction: column; overflow: hidden; animation: image-arrival 350ms var(--table-ease); }
#image-dialog .dialog-toolbar { flex: 0 0 auto; flex-wrap: wrap; gap: 12px; }
#image-dialog .dialog-toolbar > p { flex: 1 1 130px; margin: 0; }
.dialog-toolbar-actions { display: flex; align-items: center; gap: 8px; }
#image-dialog [data-menu-zoom]:not(.menu-image-toggle) {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #9d8b6177;
  background: linear-gradient(135deg, #fffdf6, #e8e8df);
  color: var(--green);
  box-shadow: 0 2px 0 #9d8b613a;
  font: 11px/1.5 var(--sans);
  white-space: nowrap;
}
#image-dialog [data-menu-zoom][aria-pressed="true"]:not(.menu-image-toggle) {
  background: linear-gradient(135deg, #526c43, #32442d);
  color: var(--paper);
}
#image-dialog .dialog-image-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: 64svh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  scrollbar-width: thin;
  scrollbar-color: #9d8b61 #e8e8df;
  border: 1px solid #9d8b613d;
  background: #fff;
}
#image-dialog .menu-image-toggle {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  touch-action: pan-y pinch-zoom;
  transform-origin: top left;
}
#image-dialog .dialog-image-wrap img {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
#image-dialog.is-menu-zoomed .dialog-image-wrap { overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
#image-dialog.is-menu-zoomed .menu-image-toggle { width: max(100%, 1522px); cursor: zoom-out; touch-action: pan-x pan-y pinch-zoom; }
#image-dialog .menu-image-toggle:focus-visible { outline-offset: -5px; }
#image-dialog .dialog-image-wrap:focus-visible { outline: 3px solid #aa8042; outline-offset: 3px; }
#image-dialog .menu-image-toggle.is-pressing { transform: none !important; filter: brightness(.97); }
#image-dialog .menu-image-toggle.is-bouncing, #image-dialog .menu-image-toggle.is-control-entering { animation: none; }
#image-dialog .dialog-note, #image-dialog > .text-link { flex: 0 0 auto; }
#image-dialog > .text-link { align-self: flex-start; min-height: 32px; }
#image-dialog::backdrop { background: #10190fe0; backdrop-filter: blur(7px); }
@keyframes image-arrival { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  #image-dialog .dialog-toolbar { gap: 9px; }
  #image-dialog .dialog-toolbar > p { flex-basis: 100%; }
  #image-dialog .dialog-toolbar-actions { width: 100%; justify-content: space-between; }
  #image-dialog .dialog-image-wrap { max-height: 57svh; }
  #image-dialog .dialog-note { margin-top: 11px; line-height: 1.7; }
  #taste-advice { padding: 18px 15px; }
  #taste-advice h3 { font-size: 21px; }
  #taste-result { scroll-margin-top: 12px; }
  .taste-result-emblem { display: block; width: 150px; margin: -5px auto 8px; }
}
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; clip-path: none; filter: none; }
  .motion-ready .control-arrival:not(.is-visible) { opacity: 1; }
  .is-pressing { transform: none !important; filter: brightness(.92); }
  .taste-section.is-complete .cloche-bell { animation: none !important; transform: translate(10px, -16px) rotate(16deg); }
  .taste-section.is-complete .cloche-steam { animation: none !important; opacity: .35; transform: translateY(-6px); }
  #interaction-fx, #celebration-layer, .dialog-interaction-fx { display: none; }
}
@media print {
  .motion-ready [data-reveal] { opacity: 1; transform: none; clip-path: none; filter: none; }
  .motion-ready .control-arrival:not(.is-visible) { opacity: 1; }
  #interaction-fx, #celebration-layer, .dialog-interaction-fx { display: none; }
}