/* AcıkanVar website: the playful layer (motion and interaction).
   Loaded on every page except the legal texts, which stay calm.
   Rules of the house:
   - only transform and opacity move (no layout work while scrolling);
   - endless animations run only inside a [data-live] block that is on screen
     (play.js adds .live), so nothing ticks off screen;
   - anything hidden-until-revealed is hidden only when play.js is running
     (html.play) and the visitor has not asked for reduced motion;
   - with reduced motion everything is simply there, still and readable. */

[data-live]:not(.live) *, [data-live]:not(.live) *::before, [data-live]:not(.live) *::after { animation-play-state: paused !important; }

/* ---------- Time-of-day mood (set on <html data-mood> before first paint) ---------- */
.hero {
  --sun-x: 94%; --sun-y: 12%; --sun-c: #FFD43B; --ring: rgba(255, 212, 59, .16); --hero-bg: var(--field); --wash: rgba(255, 212, 59, .10);
  background-color: var(--hero-bg); transition: background-color 1.2s ease;
}
[data-mood="morning"] .hero { --sun-x: 55%; --sun-y: 97%; --sun-c: #FFDF6B; --hero-bg: #14584A; --wash: rgba(255, 223, 107, .14); }
[data-mood="lunch"] .hero { --sun-x: 94%; --sun-y: 12%; }
[data-mood="afternoon"] .hero { --sun-x: 98%; --sun-y: 50%; --sun-c: #FFC53B; --hero-bg: #10493A; --wash: rgba(255, 180, 59, .12); }
[data-mood="evening"] .hero { --sun-x: 88%; --sun-y: 99%; --sun-c: #FF9B4A; --ring: rgba(255, 140, 74, .16); --hero-bg: #0C3B32; --wash: rgba(232, 69, 44, .2); }
[data-mood="night"] .hero { --sun-x: 93%; --sun-y: 12%; --sun-c: #FBF6EC; --ring: transparent; --hero-bg: #08271F; --wash: rgba(127, 214, 166, .07); }
.sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70vmax circle at var(--sun-x) var(--sun-y), var(--wash), transparent 62%); }
.sun {
  position: absolute; left: var(--sun-x); top: var(--sun-y); width: clamp(64px, 8.5vw, 116px); aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%; background: var(--sun-c); box-shadow: 0 0 0 20px var(--ring), 0 0 0 52px var(--ring), 0 0 0 96px var(--ring);
  transition: left 1.4s cubic-bezier(.5, 0, .2, 1), top 1.4s cubic-bezier(.5, 0, .2, 1), background-color 1s ease, box-shadow 1s ease;
}
[data-mood="night"] .sun { background: transparent; box-shadow: inset -.34em .12em 0 0 var(--sun-c); font-size: clamp(64px, 8.5vw, 116px); rotate: -18deg; }
.stars {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #FBF6EC 50%, transparent 51%), radial-gradient(2px 2px at 31% 9%, #FBF6EC 50%, transparent 51%),
    radial-gradient(3px 3px at 47% 22%, #FFD43B 50%, transparent 51%), radial-gradient(2px 2px at 66% 7%, #FBF6EC 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 30%, #FBF6EC 50%, transparent 51%), radial-gradient(3px 3px at 5% 62%, #FBF6EC 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 84%, #FBF6EC 50%, transparent 51%), radial-gradient(2px 2px at 58% 58%, #C9E6D4 50%, transparent 51%),
    radial-gradient(2px 2px at 97% 70%, #FBF6EC 50%, transparent 51%), radial-gradient(2px 2px at 22% 44%, #C9E6D4 50%, transparent 51%);
}
[data-mood="night"] .stars { opacity: .9; }
.hero .doodles svg:nth-child(2), .hero .doodles svg:nth-child(3) { display: none; }
@media (max-width: 860px) {
  .hero { --sun-x: 89%; --sun-y: 92px; }
  [data-mood="morning"] .hero { --sun-x: 86%; --sun-y: 98px; }
  [data-mood="lunch"] .hero { --sun-x: 89%; --sun-y: 92px; }
  [data-mood="afternoon"] .hero { --sun-x: 92%; --sun-y: 95px; }
  [data-mood="evening"] .hero { --sun-x: 88%; --sun-y: 99px; }
  [data-mood="night"] .hero { --sun-x: 89%; --sun-y: 92px; }
  .sun { width: 52px; box-shadow: 0 0 0 12px var(--ring), 0 0 0 30px var(--ring); }
  [data-mood="night"] .sun { font-size: 52px; }
}

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mood-chip { min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; padding-left: 8px; transition: background-color .2s ease, transform .2s cubic-bezier(.2, .9, .3, 1.4); }
@media (hover: hover) { .mood-chip:hover { background: rgba(251, 246, 236, .2); } }
.mood-chip:active { transform: scale(.94); }
.mood-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--sun-c); box-shadow: 0 0 0 3px var(--ring); transition: background-color .6s ease; }
[data-mood="night"] .mood-ico { background: transparent; box-shadow: inset -5px 2px 0 0 #FBF6EC; }

/* ---------- Hero table: a toy ---------- */
.scene-col { min-width: 0; }
.scene { --tx: 0; --ty: 0; transform: perspective(1100px) rotateX(calc(var(--ty) * 1deg)) rotateY(calc(var(--tx) * 1deg)); transition: transform .25s ease-out; }
.scene .tabletop { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.scene .tabletop.grab { cursor: grabbing; }
.spin { position: relative; width: 100%; height: 100%; border-radius: 50%; }
.spin img { -webkit-user-drag: none; pointer-events: none; }
.steam { position: absolute; width: 13%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.steam i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .6) 34%, rgba(255, 255, 255, 0) 70%); opacity: 0; }

button.seat { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 50%; z-index: 2; }
button.seat .face { transition: transform .25s cubic-bezier(.2, .9, .3, 1.5), border-color .3s ease, background-color .3s ease; }
@media (hover: hover) { button.seat:hover .face { transform: scale(1.08); } }
button.seat:active .face { transform: scale(.94); }
@media (hover: hover) { button.seat.empty:hover .face { animation: none; transform: scale(1.12); background: rgba(127, 214, 166, .16); } }
.seat.me .face { background: var(--yolk); color: var(--ink); border-color: var(--cream); font-size: clamp(1.3rem, 5vw, 2.1rem); }
.seat.e .name { left: 50%; translate: -50% 0; }
.seat.empty::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 2px solid var(--mint); opacity: 0; pointer-events: none; }

.picker {
  position: absolute; z-index: 6; right: 0; top: 63%; width: min(316px, 92%); background: var(--cream); color: var(--ink);
  border-radius: 20px 6px 20px 20px; padding: 12px 14px 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); text-align: left;
}
.picker p { margin: 0 0 8px; font-weight: 900; font-size: .98rem; }
.picks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.picks button { aspect-ratio: 1; min-height: 44px; touch-action: manipulation; border: 0; border-radius: 12px; background: #F3EAD6; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0; transition: transform .18s cubic-bezier(.2, .9, .3, 1.6), background-color .15s ease; }
@media (hover: hover) { .picks button:hover { transform: scale(1.18) rotate(-6deg); background: var(--yolk); } }
.picker :focus-visible { outline-color: var(--pine); }
.picker label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-weight: 800; font-size: .88rem; color: #4A5B53; }
.picker input[type="text"] { width: 56px; min-height: 44px; padding: 4px; text-align: center; text-transform: uppercase; font-weight: 900; font-size: 1.1rem; border-radius: 12px; background: #FFFDF5; color: var(--ink); border-color: rgba(16, 35, 29, .25); }

.bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.bubble.say { max-width: 52%; white-space: normal; width: max-content; line-height: 1.25; }
.bubble.say.from-n { top: 5%; left: 62%; max-width: 40%; }
.bubble.say.from-w { top: 25%; left: -3%; border-radius: 16px 16px 16px 4px; }
.bubble.say.from-s { bottom: 4%; right: 62%; max-width: 40%; border-radius: 16px 16px 4px 16px; }
.bubble.say.from-e { top: 25%; right: -3%; border-radius: 16px 16px 4px 16px; background: var(--yolk); }
.bubble.say.from-w, .bubble.say.from-s { background: #DCF1E4; color: #0F4A3C; }
.bubble.say.out { opacity: 0; transform: translateY(-6px) scale(.96); transition: opacity .3s ease, transform .3s ease; }
.scene-note { margin: 34px 0 0; text-align: center; font-weight: 800; font-size: .95rem; color: var(--on-field-muted); min-height: 1.5em; }
.scene-note a { color: var(--yolk); }
.confetti { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 3px; pointer-events: none; z-index: 7; }
@media (max-width: 520px) { .scene-note { margin-top: 26px; font-size: .9rem; } .picker { left: 0; right: 0; width: auto; border-radius: 20px; } }

/* ---------- How it works: the slip that prints while you scroll ---------- */
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; gap: 0 56px; align-items: start; }
.story .section-head { margin-bottom: 28px; }
.story .roll { grid-column: 2; grid-row: 1 / span 2; }
.clock {
  position: sticky; top: 24px; align-self: start; display: flex; align-items: center; gap: 18px; width: fit-content; max-width: 100%;
  background: var(--field); color: var(--on-field); border-radius: 26px; padding: 16px 24px 16px 20px; box-shadow: 0 18px 40px rgb(var(--shadow) / .18);
}
.clock-time { font-weight: 900; font-size: 3.2rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--yolk); }
.clock-side { display: grid; gap: 8px; }
.clock-status { font-weight: 900; font-size: 1.1rem; line-height: 1.1; }
.clock-dots { display: flex; gap: 6px; }
.clock-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mint); transition: background-color .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.8); }
.clock-dots i.on { background: var(--mint); transform: scale(1.15); }
.clock.tick .clock-time { animation: tick .35s ease; }
@keyframes tick { 40% { transform: translateY(-4px) scale(1.04); } }
.roll { position: relative; }
.printer { position: relative; z-index: 2; height: 26px; margin: 0 -10px -8px; border-radius: 14px 14px 8px 8px; background: #10231D; box-shadow: inset 0 -9px 0 #060F0C, 0 8px 18px rgb(var(--shadow) / .2); }
.printer::after { content: ""; position: absolute; right: 18px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.roll .adisyon { border-radius: 0 0 6px 6px; padding-top: 34px; }
.rlines { list-style: none; margin: 0; padding: 0; }
.rline { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 0 16px; padding: 24px 0; border-bottom: 2px dashed var(--border); }
.rline:last-child { border-bottom: 0; }
.rline time { font-weight: 900; font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--subtle); padding-top: 4px; }
.rline h3 { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; margin-bottom: .5em; }
.rline .step-num { width: 38px; height: 38px; font-size: 1.1rem; margin: 0; flex-shrink: 0; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--pine); }
.rline p { color: var(--muted); margin-bottom: .6em; }
.rline p:last-child { margin-bottom: 0; }
.rline .rbig { font-weight: 900; font-size: 1.6rem; color: var(--text); margin-bottom: .2em; line-height: 1.15; }
.rline .demo { margin-top: 14px; max-width: 380px; }
.stamp {
  display: inline-block; margin: 0 0 12px !important; padding: 6px 16px; border: 3px solid var(--tomato); border-radius: 10px; color: var(--tomato) !important;
  font-weight: 900; font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase; rotate: -5deg; line-height: 1.1;
}
.arrive .go { cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform .15s ease, background-color .2s ease; }
.arrive .go:active { transform: scale(.96); }
.arrive.arrived .go { background: var(--mint); cursor: default; }
@media (max-width: 860px) {
  .story { display: block; }
  .clock { top: max(8px, env(safe-area-inset-top)); z-index: 5; gap: 12px; padding: 8px 16px 8px 14px; border-radius: 999px; margin: 0 0 16px auto; box-shadow: 0 10px 24px rgb(var(--shadow) / .28); }
  .clock-time { font-size: 1.5rem; }
  .clock-side { display: flex; align-items: center; gap: 10px; }
  .clock-status { font-size: .92rem; }
  .clock-dots i { width: 10px; height: 10px; }
  .printer { margin: 0 -6px -8px; }
  .rline { grid-template-columns: 52px minmax(0, 1fr); gap: 0 10px; padding: 20px 0; }
  .rline time { font-size: 1rem; }
  .rline h3 { font-size: 1.25rem; }
}

/* ---------- The map ---------- */
.map { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 16 / 8; background: var(--m-land); border: 1px solid var(--border); box-shadow: 0 20px 50px rgb(var(--shadow) / .12); cursor: pointer; -webkit-tap-highlight-color: transparent;
  --m-land: #EFE5CE; --m-block: #E6D9BC; --m-road: #FFFDF7; --m-park: #C4E5CF; --m-pond: #9FD3C7; --m-text: #8A7C5E; }
:root[data-theme="dark"] .map { --m-land: #12332B; --m-block: #173C33; --m-road: #24544A; --m-park: #1C5241; --m-pond: #2B7A6C; --m-text: #8FB3A5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map { --m-land: #12332B; --m-block: #173C33; --m-road: #24544A; --m-park: #1C5241; --m-pond: #2B7A6C; --m-text: #8FB3A5; } }
.map-inner { position: absolute; inset: 0; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.m-land { fill: var(--m-land); } .m-block rect { fill: var(--m-block); } .m-park { fill: var(--m-park); } .m-pond { fill: var(--m-pond); }
.m-swan { fill: #FFFDF7; } .m-tree circle { fill: #7FD6A6; opacity: .8; }
.m-road path { stroke: var(--m-road); stroke-width: 30; stroke-linecap: round; } .m-road2 path { stroke: var(--m-road); stroke-width: 15; stroke-linecap: round; }
.m-text text { fill: var(--m-text); font-family: Nunito, sans-serif; font-weight: 800; font-size: 17px; letter-spacing: .04em; }
.map-tag { position: absolute; left: 12px; bottom: 12px; background: var(--surface); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: .8rem; z-index: 4; }
.me-dot { position: absolute; translate: -50% -50%; z-index: 1; display: grid; justify-items: center; pointer-events: none; }
.me-dot i { width: 18px; height: 18px; border-radius: 50%; background: var(--pine); border: 3px solid #FFFDF7; box-shadow: 0 0 0 0 rgba(15, 74, 60, .45); }
.me-dot b { position: absolute; top: 22px; font-weight: 900; font-size: .78rem; background: var(--pine); color: var(--cream); border-radius: 999px; padding: 0 8px; }
.mpin { position: absolute; translate: -50% -50%; z-index: 2; display: grid; justify-items: center; cursor: pointer; }
.mring { position: relative; width: 56px; height: 56px; border-radius: 50%; display: block; transition: transform .3s cubic-bezier(.2, .9, .3, 1.6); }
@media (hover: hover) { .mpin:hover .mring { transform: scale(1.1); } }
.mring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #FFFDF7; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.mring .d { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #FFFDF7; border: 2.5px solid var(--pine); left: 50%; top: 50%; margin: -7.5px; transition: background-color .25s ease; }
.mring .d1 { transform: translateY(-34px); } .mring .d2 { transform: translateX(34px); } .mring .d3 { transform: translateY(34px); } .mring .d4 { transform: translateX(-34px); }
.mring .d.on { background: var(--yolk); }
.mlabel { position: absolute; top: calc(100% + 16px); white-space: nowrap; background: var(--surface); color: var(--text); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: .78rem; box-shadow: 0 4px 10px rgb(var(--shadow) / .18); border: 1px solid var(--border); }
.mpin.mine .mring img { border-color: var(--yolk); } .mpin.mine .mlabel { background: var(--yolk); color: var(--ink); border-color: var(--yolk); }
.mpin.full .mlabel { background: var(--pine); color: var(--cream); border-color: var(--pine); }
.mpin.bye { opacity: 0; transition: opacity .6s ease; }
@media (max-width: 860px) {
  .map { aspect-ratio: 1 / 1; border-radius: 22px; }
  .map-inner { inset: 0 -30%; }
  .mring { width: 48px; height: 48px; }
  .mring .d { width: 13px; height: 13px; margin: -6.5px; }
  .mring .d1 { transform: translateY(-29px); } .mring .d2 { transform: translateX(29px); } .mring .d3 { transform: translateY(29px); } .mring .d4 { transform: translateX(-29px); }
  .mlabel { top: calc(100% + 13px); font-size: .72rem; }
}

/* ---------- The lokanta window (stands in for a photo) ---------- */
.lokanta-wrap { margin-top: 44px; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgb(var(--shadow) / .18); }
.lokanta { width: 100%; height: auto; }
.lk-p > g, .lk-leaf, .lk-lamp, .lk-tail, .lk-eye, .lk-free circle { transform-box: fill-box; }

/* ---------- 404 ---------- */
.lost-set { display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 28px; }
.lost .cutlery { width: 34px; fill: none; stroke: var(--subtle); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lost button.plate { margin: 0; border: 0; padding: 0; font: inherit; cursor: pointer; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2, .9, .3, 1.5); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .lost button.plate:hover { transform: rotate(-4deg) scale(1.04); } }
.lost button.plate:active { transform: scale(.95); }
.lost .plate img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); border-radius: 50%; object-fit: cover; }
.lost-line { color: var(--muted); min-height: 1.6em; }
.lost-hint { font-weight: 800; color: var(--subtle); font-size: .95rem; margin-top: -8px; }

/* ---------- Small touches (no motion needed to read them) ---------- */
.trust article { position: relative; overflow: hidden; }
.trust article::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 212, 59, .16), transparent 70%); }
@media (hover: hover) { .trust article:hover::before { opacity: 1; } }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--yolk); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav a:hover::after { transform: scaleX(1); } }
.isnot span s { text-decoration: none; background: linear-gradient(var(--tomato), var(--tomato)) left 54% / 100% 2.5px no-repeat; }

/* ---------- Motion (only for visitors who have not asked for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* [data-reveal] only marks a block so play.js adds .in when it comes on screen; the
     block itself does not fade or slide. What happens inside is listed per block below. */

  /* Buttons and chips */
  .btn { transition: transform .2s cubic-bezier(.2, .9, .3, 1.5), background-color .15s ease, box-shadow .2s ease; }
  .btn-yolk, .btn-pine { box-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
  @media (hover: hover) { .btn-yolk:hover, .btn-pine:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .22); } }
  .btn-yolk:active, .btn-pine:active { transform: translateY(3px) scale(.99); box-shadow: 0 1px 0 rgba(0, 0, 0, .22); }
  .store { transition: transform .25s cubic-bezier(.2, .9, .3, 1.5); }
  @media (hover: hover) { .store:hover { transform: translateY(-2px) rotate(-1deg); } }
  .store:active .soon { animation: wiggle .5s ease; }
  @media (hover: hover) { .store:hover .soon { animation: wiggle .5s ease; } }
  .brand svg { transition: transform .5s cubic-bezier(.2, .9, .3, 1.5); }
  @media (hover: hover) { .brand:hover svg { transform: rotate(-14deg) scale(1.1); } }
  .chip-btn { transition: transform .2s cubic-bezier(.2, .9, .3, 1.5), background-color .15s ease; }
  .chip-btn:active { transform: scale(.9); }
  [data-theme-toggle] svg { transition: transform .6s cubic-bezier(.2, .9, .3, 1.3); }
  @media (hover: hover) { [data-theme-toggle]:hover svg { transform: rotate(60deg); } }
  .foot-grid li a { transition: transform .2s ease, color .15s ease; }
  @media (hover: hover) { .foot-grid li a:hover { transform: translateX(5px); } }
  .faq summary::after { transition: transform .3s cubic-bezier(.2, .9, .3, 1.5), background-color .2s ease; }
  .faq details[open] summary::after { transform: rotate(180deg); }
  .done.show { animation: pop .45s cubic-bezier(.2, .9, .3, 1.4) both; }

  /* Hero */
  .steam i { animation: steam 3.4s ease-out infinite; }
  .steam i:nth-child(2) { animation-delay: 1.1s; } .steam i:nth-child(3) { animation-delay: 2.2s; }
  [data-mood="night"] .stars { animation: twinkle 3.5s ease-in-out infinite alternate; }
  html.play .spin { animation: settle 1.5s cubic-bezier(.2, .8, .2, 1) both; }
  .seat.empty::after { animation: invite 2.8s ease-out infinite; }
  .seat.wave .face { animation: wave .6s ease; }
  .seat.pop .face { animation: land .6s cubic-bezier(.2, .9, .3, 1.5); }
  .picker:not([hidden]) { animation: pop .28s cubic-bezier(.2, .9, .3, 1.4) both; transform-origin: 90% 0; }
  .bubble.say { animation: pop .32s cubic-bezier(.2, .9, .3, 1.5) both; }
  html.play .hero h1 .hl { animation: rise .7s .15s cubic-bezier(.2, .8, .2, 1) both; }

  /* The slip */
  html.play .rline > * { opacity: 0; }
  html.play .rline.in > * { animation: print .7s steps(7, end) both; }
  html.play .rline.in > div { animation-delay: .12s; }
  html.play .rline.in .msg, html.play .rline.in .mini-card, html.play .rline.in .quick, html.play .rline.in .arrive { animation: pop .4s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: .7s; }
  html.play .rline.in .msg:nth-child(2), html.play .rline.in .mini-card:nth-child(2) { animation-delay: 1.2s; }
  html.play .rline.in .msg:nth-child(3) { animation-delay: 1.9s; }
  html.play .rline.in .quick { animation-delay: 2.3s; }
  html.play .rline.in .stamp { animation: stamp .45s .5s cubic-bezier(.3, 1.4, .5, 1) both; }
  html.play .adisyon-total { opacity: 0; transition: opacity .5s ease .4s; }
  html.play .adisyon.printed .adisyon-total { opacity: 1; }
  .printer::after { animation: blink 1.6s steps(2, jump-none) infinite; }
  .arrive.arrived .faces i { animation: wave .6s ease; }
  .arrive.arrived .faces i:nth-child(2) { animation-delay: .1s; } .arrive.arrived .faces i:nth-child(3) { animation-delay: .2s; }

  /* Map */
  .mpin { animation: drop .5s cubic-bezier(.2, .9, .3, 1.5) both; }
  .mring .d.on { animation: seat-in .4s cubic-bezier(.2, .9, .3, 1.8); }
  .mpin.poke .mring { animation: wiggle .5s ease; }
  .me-dot i { animation: here 2.4s ease-out infinite; }

  /* Lokanta */
  .lk-p > g { transform-origin: 50% 100%; animation: laugh 1.3s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .lk-lamp { transform-origin: 50% 0; animation: sway 4.5s ease-in-out infinite alternate; }
  .lk-glow { animation: glow 4.5s ease-in-out infinite alternate; }
  .lk-ha { animation: ha 1.3s steps(2, jump-none) infinite; }
  .lk-steam { animation: wisp 2.8s ease-out infinite; }
  .lk-steam:last-of-type { animation-delay: 1.3s; }
  .lk-leaf { transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite alternate; }
  .lk-tail { transform-origin: 0 100%; animation: tail 2.2s ease-in-out infinite alternate; }
  .lk-eye { transform-origin: 50% 50%; animation: blink-eye 4.2s infinite; }
  .lk-free circle { transform-origin: 50% 50%; animation: breathe 2.8s ease-in-out infinite; }
  .st-guest { transform-box: fill-box; transform-origin: 50% 50%; animation: arrive 9s cubic-bezier(.2, .9, .3, 1.4) infinite both; animation-delay: calc(var(--g) * 1.4s); }

  /* Why */
  .food-row img { transition: transform .35s cubic-bezier(.2, .9, .3, 1.6); }
  @media (hover: hover) { .food-row img:hover { transform: scale(1.25) rotate(14deg); } }
  html.play .food-row img { opacity: 0; }
  html.play .food-row.in img { animation: drop .5s cubic-bezier(.2, .9, .3, 1.5) both; animation-delay: calc(var(--n, 0) * 80ms); }
  html.play .manifesto blockquote em { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .8s cubic-bezier(.2, .8, .2, 1) .5s; }
  html.play .manifesto blockquote.in em { background-size: 100% 100%; }
  html.play .isnot span s { background-size: 0% 2.5px; transition: background-size .45s ease; transition-delay: calc(.4s + var(--n, 0) * .25s); }
  html.play .isnot.in span s { background-size: 100% 2.5px; }
  html.play .isnot.in .yes { animation: land .6s 1.3s cubic-bezier(.2, .9, .3, 1.5) both; }

  /* Safety */
  .trust article { transition: border-color .3s ease; }
  @media (hover: hover) { .trust article:hover { border-color: rgba(255, 212, 59, .5); } }
  html.play .trust .ico svg * { stroke-dasharray: 120; stroke-dashoffset: 120; }
  html.play .trust article.in .ico svg * { animation: draw 1.1s ease forwards; animation-delay: calc(.2s + var(--i, 0) * .25s); }
  html.play .trust article .tag { opacity: 0; }
  html.play .trust article.in .tag { animation: pop .4s cubic-bezier(.2, .9, .3, 1.5) both; animation-delay: calc(1.1s + var(--i, 0) * .25s); }

  /* Phones drift a little with the page (browsers with scroll-driven animation) */
  @supports (animation-timeline: view()) {
    .phone { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .phone:nth-child(2) { animation-name: drift-b; }
  }

  /* Footer */
  .foot-glass svg path:last-child { animation: wisp 3s ease-out infinite; }
  .lost-set .cutlery:first-child { animation: sway 3s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  .lost-set .cutlery:last-child { animation: sway 3s -1.5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  .lost .plate.served img { animation: land .5s cubic-bezier(.2, .9, .3, 1.5); }
}

@keyframes steam { 0% { opacity: 0; transform: scale(.25); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(30%, -55%) scale(2.2); } }
@keyframes twinkle { from { opacity: .45; } to { opacity: .95; } }
@keyframes settle { from { transform: rotate(-70deg); } to { transform: rotate(0); } }
@keyframes invite { 0% { opacity: .8; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes wave { 25% { transform: rotate(-14deg) scale(1.1); } 60% { transform: rotate(12deg) scale(1.1); } }
@keyframes land { 0% { transform: scale(.3) rotate(-30deg); } 100% { transform: none; } }
@keyframes wiggle { 20% { transform: rotate(-10deg); } 50% { transform: rotate(9deg); } 80% { transform: rotate(-5deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes print { from { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(-10px); } to { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; } }
@keyframes stamp { from { opacity: 0; transform: scale(2.4) rotate(12deg); } to { opacity: 1; transform: none; } }
@keyframes blink { from { opacity: 1; } to { opacity: .25; } }
@keyframes drop { from { opacity: 0; transform: translateY(-26px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes seat-in { from { scale: 0; } to { scale: 1; } }
@keyframes here { 0% { box-shadow: 0 0 0 0 rgba(15, 74, 60, .45); } 100% { box-shadow: 0 0 0 22px rgba(15, 74, 60, 0); } }
@keyframes arrive { 0%, 6% { opacity: 0; transform: scale(.4); } 12%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes laugh { 0%, 100% { transform: none; } 30% { transform: translateY(-5px) rotate(-2.5deg); } 60% { transform: translateY(1px) rotate(2deg); } }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes glow { from { opacity: .14; } to { opacity: .26; } }
@keyframes ha { from { opacity: 0; } to { opacity: 1; } }
@keyframes wisp { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes tail { from { transform: rotate(-12deg); } to { transform: rotate(20deg); } }
@keyframes blink-eye { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drift { from { transform: translateY(34px); } to { transform: translateY(-34px); } }
@keyframes drift-b { from { transform: translateY(-20px); } to { transform: translateY(26px); } }

/* ---------- Phone first: most visitors arrive on a phone ----------
   The table is the thing people remember, so on a phone it comes right under the
   headline, on the first screen; the explanation and the store buttons follow it. */
@media (max-width: 860px) {
  .hero { padding: 18px 0 44px; }
  .hero .wrap { gap: 0; }
  .hero .wrap > div:first-child { display: contents; }
  .hero .chips { order: 1; flex-wrap: nowrap; gap: 6px; }
  .hero .chips .live-chip { font-size: .8rem; padding: 4px 10px 4px 8px; white-space: nowrap; min-width: 0; }
  .hero .chips .mood-chip { padding-left: 7px; }
  .hero h1 { order: 2; margin: 12px 0 0; font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .hero .scene-col { order: 3; margin-top: 34px; }
  .hero .lead { order: 4; margin: 26px 0 22px; max-width: none; }
  .hero .stores { order: 5; }
  .hero .below { order: 6; margin-bottom: 0; }
  .hero .stores .store { flex: 1 1 150px; justify-content: center; }
  .scene-note { margin-top: 30px; }
  .foot-grid li a { padding: 11px 0; }
  .foot-grid ul { gap: 0; }
  .site-foot { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .rline .demo { max-width: none; }
  .map-tag { font-size: .74rem; }
}
@media (max-width: 380px) { .hero .chips { flex-wrap: wrap; } .hero .chips .live-chip { font-size: .76rem; padding: 4px 8px 4px 7px; gap: 6px; } }
@media (max-width: 350px) { .site-head .wrap { gap: 8px; } .wordmark { font-size: 1.3rem; } .brand svg { width: 28px; height: 28px; } .head-tools { gap: 4px; } .head-tools .chip-btn { padding: 0 6px; } }
.brand { min-height: 44px; }
/* Taps answer at once: no double-tap zoom wait, no grey flash on our own controls. */
.btn, .chip-btn, button.seat, .mpin, .arrive .go, .faq summary, .menu-panel a, .store { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.invite { min-height: calc(100svh - 68px); }