/* Thai Panda motion layer.
 *
 * Everything here is optional polish. Delete this file's <link> and the
 * animations.js <script> and the site works exactly as before.
 *
 * All rules are scoped to html.anim, a class assets/boot.js adds only when
 * the visitor has not asked for reduced motion. No .anim, no animation.
 *
 * Only opacity and transforms are animated. Reveals use the individual
 * `translate` and `scale` properties so they never fight with the hover
 * `transform` rules in style.css.
 */

:root {
  /* Tweak timing here. */
  --anim-ease: cubic-bezier(.22, .61, .36, 1);     /* soft ease-out */
  --anim-ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* slight overshoot, for small pops */
  --anim-fast: .2s;
  --anim-medium: .45s;
  --anim-slow: .7s;
  --anim-distance: 22px;   /* how far revealed elements travel up */
  --anim-hero-zoom: 1.08;  /* starting scale of the hero photo */
}

/* ---------- Page load fade-in ---------- */
html.anim body { animation: tp-fade var(--anim-medium) var(--anim-ease) both; }

@keyframes tp-fade { from { opacity: 0; } }
@keyframes tp-rise { from { opacity: 0; translate: 0 var(--anim-distance); } }
@keyframes tp-pop  { from { opacity: 0; scale: .9; } }

/* ---------- Scroll progress bar ---------- */
.tp-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 3px; background: var(--gold);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- Scroll reveal (animations.js adds .reveal, then .is-in) ---------- */
html.anim .reveal {
  opacity: 0;
  translate: 0 var(--anim-distance);
  transition:
    opacity var(--anim-slow) var(--anim-ease),
    translate var(--anim-slow) var(--anim-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.anim .reveal.is-in { opacity: 1; translate: 0 0; }

/* Menu photo rows: the row reveals as one unit, its photos follow one after another. */
html.anim .photo-strip.reveal { translate: 0 0; }
html.anim .photo-strip.reveal figure {
  opacity: 0; translate: 24px 0;
  transition: opacity var(--anim-slow) var(--anim-ease), translate var(--anim-slow) var(--anim-ease);
}
html.anim .photo-strip.reveal.is-in figure { opacity: 1; translate: 0 0; }
html.anim .photo-strip.reveal.is-in figure:nth-child(2) { transition-delay: 70ms; }
html.anim .photo-strip.reveal.is-in figure:nth-child(3) { transition-delay: 140ms; }
html.anim .photo-strip.reveal.is-in figure:nth-child(4) { transition-delay: 210ms; }
html.anim .photo-strip.reveal.is-in figure:nth-child(n+5) { transition-delay: 280ms; }

/* Photos settle from a slight zoom inside their frame. */
html.anim .reveal-zoom img {
  scale: 1.08;
  transition: scale 1.1s var(--anim-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.anim img.reveal-zoom {
  scale: 1.04;
  transition:
    opacity var(--anim-slow) var(--anim-ease),
    translate var(--anim-slow) var(--anim-ease),
    scale 1.1s var(--anim-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.anim .reveal-zoom.is-in img,
html.anim img.reveal-zoom.is-in { scale: 1; }

/* ---------- Hero: load sequence, slow zoom, parallax ---------- */
html.anim .hero-card { animation: tp-rise var(--anim-slow) var(--anim-ease) .1s both; }
html.anim .hero-card > * { animation: tp-rise var(--anim-slow) var(--anim-ease) both; }
html.anim .hero-card > .hero-logo { animation-name: tp-pop; animation-delay: .25s; }
html.anim .hero-card > .eyebrow    { animation-delay: .4s; }
html.anim .hero-card > .hero-lead  { animation-delay: .5s; }
html.anim .hero-card > .status     { animation-delay: .6s; }
html.anim .hero-card > .actions    { animation-delay: .8s; }

html.anim .hero picture { will-change: transform; }   /* parallax, set by JS */
html.anim .hero-img { animation: tp-hero-zoom 12s var(--anim-ease) both; }
@keyframes tp-hero-zoom { from { scale: var(--anim-hero-zoom); } }

/* Menu page header gets the same entrance. */
html.anim .menu-head .mural-card > * { animation: tp-rise var(--anim-slow) var(--anim-ease) both; }
html.anim .menu-head .mural-card > :nth-child(2) { animation-delay: .15s; }

/* ---------- Buttons ---------- */
html.anim .btn {
  position: relative;
  transition:
    background-color var(--anim-fast) ease, color var(--anim-fast) ease,
    border-color var(--anim-fast) ease, transform var(--anim-fast) var(--anim-ease);
}
/* Soft glow: a shadow on a pseudo-element, faded with opacity. */
html.anim .btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 8px 22px rgba(21, 75, 41, .28);
  opacity: 0; transition: opacity var(--anim-medium) var(--anim-ease);
}
@media (hover: hover) {
  html.anim .btn:hover { transform: translateY(-2px); }
  html.anim .btn:hover::before { opacity: 1; }
}
html.anim .btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }

/* Gentle pulse on the main call to action. */
html.anim .btn-pulse::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--green);
  animation: tp-pulse 3.2s var(--anim-ease) 1.6s infinite;
  opacity: 0;
}
html.anim .btn-pulse:hover::after { animation: none; }
@keyframes tp-pulse {
  0%   { opacity: .55; transform: scale(1); }
  35%  { opacity: 0;   transform: scale(1.14, 1.3); }
  100% { opacity: 0;   transform: scale(1.14, 1.3); }
}

/* Click ripple. animations.js adds a .tp-ripple-host span to clickable things. */
.tp-ripple-host {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.tp-ripple {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: currentColor; opacity: .22;
  animation: tp-ripple .6s var(--anim-ease) forwards;
}
@keyframes tp-ripple { to { transform: scale(var(--ripple-scale, 20)); opacity: 0; } }
html.anim .order-card, html.anim .chips a { position: relative; }

/* ---------- Cards and photos ---------- */
html.anim .dish-card img { transition: transform var(--anim-slow) var(--anim-ease); }
@media (hover: hover) {
  html.anim .dish-card a:hover img { transform: scale(1.05); }
}
html.anim .order-card:active, html.anim .dish-card a:active { transform: scale(.98); }

/* Menu photo strip: clickable, opens the lightbox. */
html.anim .photo-strip figure { cursor: zoom-in; }
html.anim .photo-strip img { transition: transform var(--anim-medium) var(--anim-ease), opacity var(--anim-medium); }
@media (hover: hover) {
  html.anim .photo-strip figure:hover img { transform: translateY(-3px); }
}

/* ---------- Header ---------- */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(rgba(35, 63, 39, .10), rgba(35, 63, 39, 0));
  opacity: 0; transition: opacity var(--anim-medium) var(--anim-ease);
}
.site-header.is-scrolled::after { opacity: 1; }
html.anim .brand img, html.anim .brand-name {
  transform-origin: 0 50%; transition: transform var(--anim-medium) var(--anim-ease);
}
html.anim .site-header.is-scrolled .brand img { transform: scale(.86); }
html.anim .site-header.is-scrolled .brand-name { transform: translateX(-4px) scale(.94); }

/* Animated underline on desktop nav links. */
@media (min-width: 861px) {
  html.anim .site-nav a:not(.btn):not(.lang) { position: relative; }
  html.anim .site-nav a:not(.btn):not(.lang)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: var(--gold); border-radius: 2px;
    transform: scaleX(0); transform-origin: 100% 50%;
    transition: transform var(--anim-medium) var(--anim-ease);
  }
  html.anim .site-nav a:not(.btn):not(.lang):hover::after,
  html.anim .site-nav a[aria-current]::after { transform: scaleX(1); transform-origin: 0 50%; }
}

/* Mobile menu slides and fades instead of popping. */
@media (max-width: 860px) {
  html.anim .site-nav {
    display: flex;
    opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none;
    transition: opacity var(--anim-fast) ease, transform var(--anim-medium) var(--anim-ease), visibility 0s linear var(--anim-medium);
  }
  html.anim .site-nav.open {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity var(--anim-medium) var(--anim-ease), transform var(--anim-medium) var(--anim-ease), visibility 0s;
  }
  html.anim .site-nav > * { opacity: 0; transform: translateY(-6px); transition: opacity .3s var(--anim-ease), transform .3s var(--anim-ease); }
  html.anim .site-nav.open > * { opacity: 1; transform: none; }
  html.anim .site-nav.open > :nth-child(2) { transition-delay: .04s; }
  html.anim .site-nav.open > :nth-child(3) { transition-delay: .08s; }
  html.anim .site-nav.open > :nth-child(4) { transition-delay: .12s; }
  html.anim .site-nav.open > :nth-child(5) { transition-delay: .16s; }
  html.anim .site-nav.open > :nth-child(6) { transition-delay: .2s; }
}

/* ---------- Menu category chips: sliding underline ---------- */
html.anim .chips { position: relative; }
.tp-chip-line {
  position: absolute; left: 0; bottom: 5px; width: 100px; height: 2px;
  background: var(--gold); border-radius: 2px;
  transform-origin: 0 50%; pointer-events: none; opacity: 0;
  transition: transform var(--anim-medium) var(--anim-ease), opacity var(--anim-fast);
}

/* ---------- Lightbox ---------- */
.tp-lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 16px;
  visibility: hidden; pointer-events: none;
}
.tp-lightbox.is-open { visibility: visible; pointer-events: auto; }
.tp-lightbox.is-closing { visibility: visible; }
.tp-lightbox-backdrop {
  position: absolute; inset: 0; background: rgba(28, 36, 28, .78);
  opacity: 0; transition: opacity var(--anim-medium) var(--anim-ease);
}
.tp-lightbox.is-open .tp-lightbox-backdrop { opacity: 1; }
.tp-lightbox figure { position: relative; margin: 0; max-width: min(92vw, 900px); }
.tp-lightbox img {
  width: 100%; max-height: 78vh; object-fit: contain; border-radius: 12px;
  transform-origin: 0 0;
}
.tp-lightbox figcaption {
  color: var(--cream); text-align: center; margin-top: 10px; font-size: 1rem;
  opacity: 0; transition: opacity var(--anim-medium) var(--anim-ease);
}
.tp-lightbox.is-open figcaption { opacity: 1; transition-delay: .2s; }
.tp-lightbox-close {
  position: absolute; top: 12px; right: 12px; width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: var(--cream); color: var(--green-ink);
  font-size: 28px; line-height: 1; cursor: pointer;
  opacity: 0; transform: scale(.8);
  transition: opacity var(--anim-medium) var(--anim-ease), transform var(--anim-medium) var(--anim-ease-spring);
}
.tp-lightbox.is-open .tp-lightbox-close { opacity: 1; transform: none; }

/* Visitors who prefer reduced motion still get the lightbox, without movement. */
@media (prefers-reduced-motion: reduce) {
  .tp-lightbox *, .tp-lightbox { transition: none !important; }
}

/* Invisible button covering each menu photo; opens the lightbox. Outside html.anim
   because the lightbox also works for visitors who prefer reduced motion. */
.photo-strip figure { position: relative; }
.tp-zoom {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: 10px;
  background: transparent; cursor: zoom-in;
}