/* ============================================================
   Yolk & Gold — design tokens, layout, choreography
   Warm artisanal editorial. Restraint is the default.
   ============================================================ */

:root {
  /* —— Palette: paper + ink + gold leaf —— */
  --paper:        #F4ECDC;
  --paper-2:      #EADFC4;
  --paper-3:      #E1D2AE;
  --shell:        #FBF4E6;
  --ink:          #2A1F12;
  --ink-soft:     #5B4528;
  --smoke:        #8C7350;
  --gold:         #C8A24A;
  --gold-bright:  #E5C57A;
  --gold-deep:    #9A7A2E;
  --yolk:         #E8B247;
  --yolk-deep:    #C9871C;
  --rust:         #9C5A2B;
  --wax:          #8C2E25;
  --wax-deep:     #5B1A14;

  /* Sets a single source of truth for the "page" hue */
  --bg:           var(--paper);
  --fg:           var(--ink);

  /* —— Type —— */
  --f-display: "Cormorant Garamond", "Newsreader", Georgia, serif;
  --f-body:    "Newsreader", Georgia, "Times New Roman", serif;

  /* —— Rhythm (4px) —— */
  --r-1: 4px;  --r-2: 8px;  --r-3: 12px; --r-4: 16px;
  --r-5: 24px; --r-6: 32px; --r-7: 48px; --r-8: 64px;
  --r-9: 96px; --r-10: 128px;

  --max:  1280px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* —— Palette alternates (swapped by the Tweaks panel) —— */
[data-palette="sunlit"] {
  --paper:   #FBF3DF;
  --paper-2: #F3E7C9;
  --paper-3: #ECDDA9;
  --shell:   #FFFAEC;
  --ink:     #3A2A14;
  --ink-soft:#6B5230;
  --smoke:   #9B815B;
  --gold:    #D9B25E;
  --gold-bright:#F0D589;
  --gold-deep:#A88331;
  --yolk:    #F1BD53;
  --rust:    #B26A33;
}
[data-palette="dusk"] {
  --paper:   #1E1810;
  --paper-2: #261E14;
  --paper-3: #322715;
  --shell:   #2A2014;
  --ink:     #F4ECDC;
  --ink-soft:#D9C6A0;
  --smoke:   #A98E63;
  --gold:    #E5C57A;
  --gold-bright:#F4D996;
  --gold-deep:#B89344;
  --yolk:    #F0BE53;
  --rust:    #D4905A;
  --wax:     #B0382C;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Paper grain — extremely subtle, page-wide */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(rgba(120,86,40,.06) 1px, transparent 1.2px),
    radial-gradient(rgba(60,40,12,.05) 1px, transparent 1.2px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}
[data-palette="dusk"] body::before { mix-blend-mode: screen; opacity: .18; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

::selection { background: var(--gold-bright); color: var(--ink); }

/* ============================================================
   Typography system
   ============================================================ */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.serif-italic { font-style: italic; }
.eyebrow {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--smoke);
}
.body-lede {
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Ornament — a tiny gilded star/dot used between things */
.ornament {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
  margin: 0 12px 4px;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(200,162,74,.25);
}
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .55;
}

/* ============================================================
   Page frame
   ============================================================ */
.page {
  position: relative;
  min-height: 100vh;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============================================================
   Header — wordmark + slow light sweep + hamburger. THREE things only.
   ============================================================ */
.site-header {
  position: sticky; top: 0;
  z-index: 50;
  padding: 18px 0 14px;
  background: linear-gradient(to bottom, var(--bg) 65%, color-mix(in oklab, var(--bg), transparent) 100%);
  overflow: hidden;
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
}
.site-header__spacer { /* keeps wordmark dead-centered */ }

/* The wordmark */
.wordmark {
  position: relative;
  justify-self: center;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  isolation: isolate;
}
.wordmark .amp {
  font-style: italic;
  color: var(--gold-deep);
  transform: translateY(0.05em);
}
.wordmark .yolk-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE39A, var(--yolk) 60%, var(--yolk-deep));
  align-self: center;
  margin: 0 4px;
  box-shadow: 0 0 10px rgba(232, 178, 71, .55);
}

/* The single slow atmospheric layer: a golden-hour light sweeping across.
   ~22s cycle. Premium because slow. Stays behind the wordmark. */
.header-light {
  position: absolute;
  inset: -40px 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 360px 120px at var(--lx, 30%) 50%,
      rgba(245, 210, 130, .45),
      rgba(245, 210, 130, .12) 40%,
      transparent 70%);
  filter: blur(2px);
  animation: light-sweep 22s ease-in-out infinite;
  mix-blend-mode: screen;
  z-index: -1;
}
[data-palette="dusk"] .header-light {
  background: radial-gradient(ellipse 360px 120px at var(--lx, 30%) 50%,
      rgba(245, 210, 130, .35),
      rgba(245, 210, 130, .08) 40%,
      transparent 70%);
  mix-blend-mode: screen;
}
@keyframes light-sweep {
  0%   { --lx: 12%;  opacity: .65; }
  50%  { --lx: 88%;  opacity: 1;   }
  100% { --lx: 12%;  opacity: .65; }
}
@property --lx { syntax: "<percentage>"; inherits: false; initial-value: 30%; }

/* Hamburger — right column */
.hamburger {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--ink);
  transition: background .25s ease;
}
.hamburger:hover { background: color-mix(in oklab, var(--gold) 16%, transparent); }
.hamburger__bars {
  display: inline-block;
  width: 22px; height: 12px;
  position: relative;
}
.hamburger__bars::before,
.hamburger__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.2px;
  background: currentColor;
}
.hamburger__bars::before { top: 2px; }
.hamburger__bars::after  { bottom: 2px; }
.hamburger__label {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* Menu sheet (hamburger) */
.menu-sheet {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--bg) 92%, var(--ink));
  z-index: 80;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.menu-sheet.is-open { opacity: 1; pointer-events: auto; }
.menu-sheet__close {
  position: absolute; top: 22px; right: var(--gutter);
  font-family: var(--f-display); font-size: 12px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-soft);
}
.menu-sheet__list {
  list-style: none; margin: 0; padding: 0;
  text-align: center;
}
.menu-sheet__list li {
  font-family: var(--f-display);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}
.menu-sheet__list li.italic { font-style: italic; color: var(--gold-deep); }
.menu-sheet__list a:hover { color: var(--gold-deep); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(40px, 8vh, 96px) 0 clamp(20px, 4vh, 56px);
  text-align: center;
  isolation: isolate;
}

/* Static golden tint wash beneath the egg — NOT animated */
.hero__wash {
  position: absolute;
  left: 50%; top: 50%;
  width: min(1100px, 95vw);
  height: min(720px, 78vh);
  transform: translate(-50%, -45%);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%,
      color-mix(in oklab, var(--yolk) 26%, transparent),
      transparent 65%),
    radial-gradient(ellipse 80% 70% at 50% 40%,
      color-mix(in oklab, var(--gold-bright) 22%, transparent),
      transparent 70%);
  filter: blur(8px);
}
[data-palette="dusk"] .hero__wash {
  background:
    radial-gradient(ellipse 55% 45% at 50% 60%,
      color-mix(in oklab, var(--yolk) 30%, transparent),
      transparent 65%),
    radial-gradient(ellipse 80% 70% at 50% 40%,
      color-mix(in oklab, var(--gold) 18%, transparent),
      transparent 70%);
}

.hero__eyebrow {
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.hero__eyebrow::before, .hero__eyebrow::after {
  content: ""; width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--smoke), transparent);
}

.hero__title {
  font-size: clamp(48px, 8.4vw, 132px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.018em;
  margin: 0 auto;
  max-width: 16ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--gold-deep);
}
.hero__sub {
  margin: 28px auto 0;
  max-width: 38ch;
  text-wrap: pretty;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
}

/* Egg stage — the ONE animated layer of the hero */
.hero__stage {
  position: relative;
  margin: clamp(36px, 6vh, 64px) auto 0;
  width: min(440px, 80vw);
  height: min(520px, 60vh);
  display: grid; place-items: center;
}

/* ============================================================
   Pointer — single wayfinding visual between hero and body.
   NOT a button. ~4.5s cycle.
   ============================================================ */
.pointer {
  display: grid; justify-items: center; gap: 14px;
  padding: 16px 0 clamp(40px, 6vh, 72px);
  color: var(--smoke);
  background: none; cursor: pointer;
  user-select: none;
  width: 100%;
}
.pointer:focus { outline: none; }
.pointer__label {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  animation: pointer-fade 4.5s ease-in-out infinite;
}
.pointer__line {
  position: relative;
  width: 1px; height: 64px;
  background: linear-gradient(180deg, transparent, var(--gold-deep) 30%, var(--gold) 80%);
  overflow: visible;
}
.pointer__line::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(200,162,74,.7);
  animation: pointer-bead 4.5s ease-in-out infinite;
}
@keyframes pointer-fade {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes pointer-bead {
  0%, 100% { transform: translate(-50%, 0); opacity: .55; }
  50%      { transform: translate(-50%, 10px); opacity: 1; }
}

/* ============================================================
   The Spread — typographic editorial menu, 4 dishes
   ============================================================ */
.section { padding: clamp(80px, 12vh, 160px) 0; position: relative; }
.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: clamp(40px, 6vh, 80px);
  text-align: center;
}
.section__head .eyebrow { letter-spacing: 0.42em; }
.section__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.section__title em { font-style: italic; color: var(--gold-deep); }

.spread__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  gap: clamp(36px, 5vh, 56px);
  max-width: 980px;
  margin: 0 auto;
}
.dish {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(16px, 2vw, 28px);
  padding-bottom: clamp(28px, 4vh, 44px);
  border-bottom: 1px solid color-mix(in oklab, var(--smoke) 22%, transparent);
}
.dish:last-child { border-bottom: 0; }
.dish__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--gold-deep);
  letter-spacing: 0.06em;
  padding-top: 8px;
}
.dish__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
.dish__name em { font-style: italic; color: var(--gold-deep); }
.dish__desc {
  margin: 10px 0 0;
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--ink-soft);
  max-width: 56ch;
  line-height: 1.55;
}
.dish__price {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--ink-soft);
  white-space: nowrap;
  padding-top: 10px;
}
.dish__price::before {
  content: "·"; margin-right: 14px; color: var(--gold);
}

/* ============================================================
   Our Mornings — story with offset layout
   ============================================================ */
.mornings {
  background: color-mix(in oklab, var(--paper-2), var(--paper) 30%);
  position: relative;
  overflow: hidden;
}
[data-palette="dusk"] .mornings {
  background: color-mix(in oklab, var(--paper-2), var(--paper) 50%);
}
.mornings__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.mornings__copy { max-width: 38ch; }
.mornings__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 12px 0 24px;
}
.mornings__title em { font-style: italic; color: var(--gold-deep); }
.mornings__body {
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.mornings__body p + p { margin-top: 1em; }

/* The "sun" — a static golden disc, NOT animated (ambient rationing) */
.mornings__sun {
  position: relative;
  aspect-ratio: 1;
  width: min(440px, 100%);
  justify-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 35%,
      #FFE9A8 0%,
      var(--gold-bright) 30%,
      var(--gold) 55%,
      var(--gold-deep) 80%,
      color-mix(in oklab, var(--gold-deep) 60%, var(--ink) 40%) 100%);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--gold-deep) 60%, transparent),
    0 30px 80px -20px color-mix(in oklab, var(--gold-deep) 50%, transparent),
    inset -30px -40px 80px color-mix(in oklab, var(--rust) 30%, transparent);
}
.mornings__sun::before {
  /* horizon line */
  content: "";
  position: absolute; left: -20%; right: -20%;
  top: 72%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
  opacity: .6;
}
.mornings__sun::after {
  /* slow halo — one of our rationed ambient motions */
  content: "";
  position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--gold-bright) 40%, transparent) 0%,
    transparent 60%);
  filter: blur(6px);
  z-index: -1;
  animation: sun-breath 9s ease-in-out infinite;
}
@keyframes sun-breath {
  0%, 100% { transform: scale(1);    opacity: .8; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* ============================================================
   Visit / Reserve
   ============================================================ */
.visit__inner {
  display: grid;
  gap: clamp(36px, 6vh, 64px);
  justify-items: center;
  text-align: center;
}
.visit__detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 56px);
  width: 100%;
  max-width: 820px;
  margin-top: 8px;
}
.visit__detail {
  display: grid; gap: 10px; justify-items: center;
}
.visit__detail .eyebrow { font-size: 11px; letter-spacing: 0.38em; }
.visit__detail-value {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.3;
  color: var(--ink);
  max-width: 18ch;
}
.visit__detail-value .muted { color: var(--smoke); font-style: italic; }

/* Reserve CTA */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 38px;
  font-family: var(--f-display);
  font-size: clamp(17px, 1.3vw, 20px);
  letter-spacing: 0.08em;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
  isolation: isolate;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .25s ease;
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--ink) 80%, var(--gold) 20%) inset,
    0 18px 40px -16px color-mix(in oklab, var(--ink) 70%, transparent);
}
[data-palette="dusk"] .cta { color: var(--ink); background: var(--gold-bright); }
.cta::before {
  /* ambient breath — one of our rationed motions, 5s cycle */
  content: "";
  position: absolute; inset: -6px;
  border-radius: 999px;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--gold-bright) 40%, transparent), transparent 60%);
  z-index: -1;
  animation: cta-breath 5s ease-in-out infinite;
}
@keyframes cta-breath {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.cta:hover  { transform: translateY(-2px); }
.cta:active { transform: translateY(0) scale(.98); }
.cta__arrow {
  display: inline-block;
  width: 22px; height: 1.2px;
  background: currentColor;
  position: relative;
  transform-origin: right center;
}
.cta__arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.2px solid currentColor;
  border-top: 1.2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.cta:hover .cta__arrow { transform: translateX(3px); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  padding: clamp(40px, 6vh, 72px) 0;
  border-top: 1px solid color-mix(in oklab, var(--smoke) 20%, transparent);
}
.site-footer__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.site-footer__legal {
  color: var(--smoke);
  font-size: 13px;
  font-family: var(--f-display);
  letter-spacing: 0.04em;
}
.site-footer__wordmark {
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ============================================================
   EGG component  —  the whole point
   ============================================================ */
.egg-stage {
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.egg-floor {
  /* The soft golden ground shadow under the nest */
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: 70%; height: 36px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse,
    color-mix(in oklab, var(--rust) 40%, transparent),
    transparent 65%);
  filter: blur(6px);
  pointer-events: none;
}

.egg-nest {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

/* Egg button: comfortable, generous tap target. 44px min on smallest mobile. */
.egg-button {
  position: relative;
  display: grid; place-items: center;
  width: 64%; max-width: 280px;
  aspect-ratio: 0.78 / 1;
  background: none; border: 0; cursor: pointer; padding: 0;
  z-index: 2;
  transform-origin: 50% 80%;
  /* Drop shadow handled inside SVG; this is just the spring carrier */
  transition: filter .25s ease;
  outline: none;
}
.egg-button:focus-visible {
  filter: drop-shadow(0 0 0 2px var(--gold-bright));
}
.egg-button.is-hatching { pointer-events: none; }

/* Idle wiggle — every ~5s, ~600ms duration. Skipped while hatching. */
@keyframes egg-idle-wiggle {
  0%,  85% { transform: rotate(0deg) scaleY(1) scaleX(1); }
  88%      { transform: rotate(-2.8deg) scaleY(.94) scaleX(1.06); }
  91%      { transform: rotate( 3.2deg) scaleY(1.04) scaleX(.96); }
  94%      { transform: rotate(-1.6deg) scaleY(.98) scaleX(1.02); }
  97%      { transform: rotate( 0.6deg); }
  100%     { transform: rotate(0deg) scaleY(1) scaleX(1); }
}
.egg-svg-shell {
  width: 100%; height: 100%;
  display: block;
  filter: drop-shadow(0 18px 24px rgba(120, 60, 12, .22));
  animation: egg-idle-wiggle 5.2s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.is-hatching .egg-svg-shell { animation: none; }

/* Per-tap spring response — applied as inline transform via JS for max responsiveness.
   We use a CSS class burst to layer a quick scale pop. */
.egg-button.is-tapping .egg-svg-shell {
  animation: egg-tap 360ms cubic-bezier(.2, 1.5, .3, 1);
}
@keyframes egg-tap {
  0%   { transform: scale(1); }
  18%  { transform: scaleX(1.12) scaleY(.88); }
  45%  { transform: scaleX(.94) scaleY(1.07); }
  72%  { transform: scaleX(1.03) scaleY(.97); }
  100% { transform: scale(1); }
}

/* As the egg nears hatching it trembles a bit more during idle */
.egg-button.is-fragile .egg-svg-shell {
  animation: egg-tremble 1.2s ease-in-out infinite;
}
@keyframes egg-tremble {
  0%, 100% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(-.6px, .2px) rotate(-.4deg); }
  40% { transform: translate(.5px, -.3px) rotate(.5deg); }
  60% { transform: translate(-.4px, .3px) rotate(-.3deg); }
  80% { transform: translate(.4px, -.2px) rotate(.4deg); }
}

/* The "psst — give the egg a tap" hint — appears only after ~8s of idle */
.egg-hint {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  color: var(--smoke);
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
  pointer-events: none;
  white-space: nowrap;
}
.egg-hint.is-visible {
  opacity: .85;
  transform: translateX(-50%) translateY(0);
}
.egg-hint::before {
  content: "↑";
  display: inline-block;
  margin-right: 8px;
  font-style: normal;
  color: var(--gold-deep);
}

/* Micro-feedback bubble that floats up on certain taps */
.egg-flash {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, 0);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  background: color-mix(in oklab, var(--shell) 95%, var(--gold) 5%);
  border: 1px solid color-mix(in oklab, var(--gold) 60%, transparent);
  border-radius: 999px;
  padding: 6px 16px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  box-shadow: 0 6px 16px -4px rgba(120, 60, 12, .25);
  animation: flash-rise 1100ms cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes flash-rise {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.92); }
  18%  { opacity: 1; transform: translate(-50%, -8px) scale(1.02); }
  72%  { opacity: 1; transform: translate(-50%, -30px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(.96); }
}

/* The hatch burst — golden flash + shell shards */
.hatch-flash {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  background: radial-gradient(circle at 50% 52%,
    rgba(255, 240, 200, 1) 0%,
    rgba(245, 210, 130, .9) 12%,
    rgba(232, 178, 71, .5) 24%,
    rgba(232, 178, 71, 0) 50%);
}
.hatch-flash.is-on { animation: hatch-flash 900ms ease-out forwards; }
@keyframes hatch-flash {
  0%   { opacity: 0; transform: scale(.6); }
  18%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* Shards container */
.shards {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
}
.shard {
  position: absolute;
  top: 46%; left: 50%;
  width: 26px; height: 30px;
  background:
    linear-gradient(150deg,
      var(--shell) 0%,
      color-mix(in oklab, var(--shell) 70%, var(--paper-3) 30%) 60%,
      color-mix(in oklab, var(--paper-3) 50%, var(--smoke) 50%) 100%);
  border: 0.5px solid color-mix(in oklab, var(--smoke) 30%, transparent);
  border-radius: 30% 60% 50% 40% / 50% 40% 60% 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: drop-shadow(0 4px 4px rgba(80, 50, 12, .25));
  --tx: 0px; --ty: 0px; --r: 0deg; --d: 0ms;
  animation: shard-fly 1100ms cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: var(--d);
}
@keyframes shard-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.6); }
  10%  { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
      rotate(var(--r))
      scale(.9);
  }
}

/* Sparkles — a few tiny golden particles around the burst */
.sparkle {
  position: absolute;
  top: 48%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF0BD, var(--gold-bright));
  transform: translate(-50%, -50%);
  opacity: 0;
  --tx: 0px; --ty: 0px; --d: 0ms;
  animation: sparkle-fly 900ms ease-out forwards;
  animation-delay: var(--d);
  filter: drop-shadow(0 0 4px rgba(245, 210, 130, .8));
}
@keyframes sparkle-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.4); }
}

/* ============================================================
   COUPON  —  the multi-step reveal
   ============================================================ */
.coupon-stage {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 6;
  perspective: 1400px;
}

.coupon-card {
  position: relative;
  width: min(440px, 86%);
  background: var(--shell);
  background-image:
    radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--gold-bright) 18%, transparent), transparent 60%),
    radial-gradient(circle at 80% 90%, color-mix(in oklab, var(--gold-deep) 8%, transparent), transparent 60%);
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--gold-deep) 40%, transparent);
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--shell) 50%, white) inset,
    0 30px 80px -20px rgba(60, 30, 8, .35),
    0 8px 24px -8px rgba(120, 80, 20, .25);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(40px) scale(.6);
  transform-origin: 50% 100%;
  pointer-events: auto;
  overflow: hidden;
}
.coupon-card::before {
  /* deckled gold trim */
  content: "";
  position: absolute; inset: 8px;
  border: 1px dashed color-mix(in oklab, var(--gold-deep) 70%, transparent);
  border-radius: 3px;
  pointer-events: none;
}
.coupon-card::after {
  /* paper grain */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(120,86,40,.07) 1px, transparent 1.2px);
  background-size: 4px 4px;
  opacity: .45;
}

.coupon-card.s-rise { animation: coupon-rise 700ms cubic-bezier(.22,1.2,.32,1) forwards; }
@keyframes coupon-rise {
  0%   { opacity: 0; transform: translateY(40px) scale(.6); }
  60%  { opacity: 1; transform: translateY(-14px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.coupon-inner {
  position: relative;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px) clamp(24px, 3.5vw, 36px);
  text-align: center;
  z-index: 1;
}

/* The header band — folds open downward like a card flap */
.coupon-flap {
  position: relative;
  margin: -6px -8px 18px;
  padding: 18px 24px 14px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--gold-bright) 60%, var(--shell)) 0%,
      color-mix(in oklab, var(--gold) 30%, var(--shell)) 100%);
  border-bottom: 1px dashed color-mix(in oklab, var(--gold-deep) 80%, transparent);
  transform-origin: 50% 0%;
  transform: rotateX(-92deg);
  opacity: 0;
}
.coupon-flap.s-open { animation: flap-open 600ms cubic-bezier(.22,1.2,.32,1) forwards; animation-delay: 350ms; }
@keyframes flap-open {
  0%   { transform: rotateX(-92deg); opacity: 0; }
  60%  { transform: rotateX(8deg);   opacity: 1; }
  100% { transform: rotateX(0);      opacity: 1; }
}
.coupon-eyebrow {
  font-family: var(--f-display);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: 0.9;
}
.coupon-headline {
  margin: 6px 0 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.05;
  color: var(--ink);
}

/* The percentage + offer — stamped in after the flap opens */
.coupon-offer {
  display: grid; gap: 8px;
  margin: 18px 0 8px;
  opacity: 0; transform: translateY(8px);
}
.coupon-offer.s-in { animation: coupon-in 500ms ease-out forwards; animation-delay: 800ms; }
@keyframes coupon-in { to { opacity: 1; transform: translateY(0); } }
.coupon-percent {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(58px, 8vw, 90px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.coupon-percent .sup {
  display: inline-block;
  font-size: .42em;
  vertical-align: top;
  margin-top: .35em;
  color: var(--gold-deep);
  font-style: italic;
}
.coupon-body {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.3vw, 18px);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 28ch;
  margin: 0 auto;
  line-height: 1.4;
}

/* Wax seal — stamps in last with a brief overshoot */
.wax-seal {
  position: absolute;
  bottom: -22px; right: -22px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      color-mix(in oklab, var(--wax) 60%, #ffd3b1) 0%,
      var(--wax) 35%,
      var(--wax-deep) 80%),
    var(--wax);
  box-shadow:
    inset -8px -10px 16px rgba(0,0,0,.4),
    inset 8px 10px 16px rgba(255,180,140,.18),
    0 6px 14px -4px rgba(60, 20, 12, .55);
  display: grid; place-items: center;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  color: color-mix(in oklab, var(--wax) 30%, #2a0808);
  text-shadow: 0 1px 0 rgba(255,200,160,.2);
  transform: scale(0) rotate(-30deg);
  opacity: 0;
  z-index: 2;
}
.wax-seal.s-stamp { animation: wax-stamp 520ms cubic-bezier(.2, 1.5, .3, 1) forwards; animation-delay: 1100ms; }
@keyframes wax-stamp {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(-8deg); opacity: 1; }
  100% { transform: scale(1) rotate(-12deg); opacity: 1; }
}
.wax-seal::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,180,140,.5);
}

/* CTA inside coupon */
.coupon-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(20px, 3vh, 28px);
  padding: 14px 28px;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--shell);
  background: var(--ink);
  border-radius: 999px;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .25s ease;
  opacity: 0;
}
.coupon-cta.s-in { animation: coupon-in 500ms ease-out forwards; animation-delay: 1200ms; }
.coupon-cta:hover { transform: translateY(-2px); background: var(--gold-deep); }
.coupon-cta__arrow {
  display: inline-block;
  width: 18px; height: 1.2px;
  background: currentColor;
  position: relative;
}
.coupon-cta__arrow::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.2px solid currentColor;
  border-top: 1.2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* "Re-open coupon" pill — once hatched, sits unobtrusively below */
.coupon-reopen {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px;
  padding: 8px 14px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 13px;
  color: var(--smoke);
  border: 1px dashed color-mix(in oklab, var(--smoke) 40%, transparent);
  border-radius: 999px;
  transition: color .2s ease, border-color .2s ease;
  opacity: 0;
  pointer-events: none;
}
.coupon-reopen.s-show { opacity: 1; pointer-events: auto; animation: coupon-in 600ms ease-out forwards; animation-delay: 1500ms; }
.coupon-reopen:hover { color: var(--gold-deep); border-color: var(--gold); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px) {
  .mornings__inner { grid-template-columns: 1fr; }
  .mornings__sun { width: min(280px, 70%); order: -1; }
  .dish { grid-template-columns: 1fr auto; }
  .dish__num { grid-column: 1 / -1; padding-top: 0; }
  .dish__desc { grid-column: 1 / -1; }
  .visit__detail-grid { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(44px, 11vw, 84px); }
  .hero__stage { height: 50vh; }
  .section { padding: 80px 0; }
  .menu-sheet__list li { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .egg-svg-shell, .cta::before, .pointer__label, .pointer__line::after,
  .mornings__sun::after, .header-light {
    animation: none !important;
  }
}