/* ==========================================================================
   motion layer — Amir-style scroll animations (vanilla, additive)
   Everything is scoped under html.has-motion, which motion.js only sets when
   JS runs AND prefers-reduced-motion is not requested. No JS / reduced motion
   → this file is inert and the page renders exactly like the original.
   ========================================================================== */

/* --- neutralize the template's simpler data-reveal so nothing double-fires */
html.has-motion [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* --- split headlines: word masks ---------------------------------------- */
html.has-motion .m-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
html.has-motion .m-word-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--m-i, 0) * 70ms);
  will-change: transform;
}
html.has-motion .m-in .m-word-inner {
  transform: translateY(0);
}

/* --- generic rise-in items (cards, rows, list items, blocks) ------------- */
html.has-motion .m-rise {
  opacity: 0;
  transform: translateY(42px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--m-i, 0) * 90ms);
  will-change: opacity, transform;
}
html.has-motion .m-rise.m-in {
  opacity: 1;
  transform: translate(0, 0);
}

/* side-fly variants: same rise mechanics, horizontal entry ---------------- */
html.has-motion .m-rise.m-from-left {
  transform: translateX(-64px);
}
html.has-motion .m-rise.m-from-right {
  transform: translateX(64px);
}
html.has-motion .m-rise.m-from-left.m-in,
html.has-motion .m-rise.m-from-right.m-in {
  transform: translateX(0);
}

/* --- image wipe reveal (curtain slides away + settle from a slight zoom) --
   Deliberately NOT clip-path: clip-path transitions repaint on the main
   thread every frame in Chromium, and 10 tiles at once froze scrolling on
   retina displays. A transform-driven curtain overlay is GPU-composited. */
html.has-motion .m-wipe {
  position: relative;
  overflow: hidden;
}
html.has-motion .m-wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--m-i, 0) * 90ms);
  pointer-events: none;
}
html.has-motion .m-wipe img {
  transform: scale(1.14);
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--m-i, 0) * 90ms);
}
html.has-motion .m-wipe.m-in::after {
  transform: scaleY(0);
}
html.has-motion .m-wipe.m-in img {
  transform: scale(1);
}

/* --- hero entrance + slow Ken Burns drift on the background -------------- */
html.has-motion .hero__bg {
  will-change: transform;
  animation: m-kenburns 18s ease-in-out infinite alternate;
}
@keyframes m-kenburns {
  from { scale: 1; }
  to   { scale: 1.08; }
}
/* hero children get the same rise treatment on load (delays set by JS) */
html.has-motion .hero .m-rise {
  transform: translateY(34px);
}

/* --- parallax elements: JS drives --m-y ---------------------------------- */
html.has-motion .m-parallax {
  transform: translateY(var(--m-y, 0));
  will-change: transform;
}
/* the hero bg needs headroom so parallax never exposes edges */
html.has-motion .hero__bg.m-parallax {
  height: 100%;
  top: 0;
}

/* --- section titles get a small accent underline that draws in ----------- */
html.has-motion .section__title {
  position: relative;
  /* the underline hangs 0.35em below the text — reserve room so it never
     touches the content beneath */
  margin-bottom: 1.15em;
}
html.has-motion .section__title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  bottom: -0.35em;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
  transform-origin: center;
}
html.has-motion .section__title[style*="text-align:left"]::after {
  left: 0;
  transform: translateX(0) scaleX(0);
  transform-origin: left;
}
html.has-motion .m-in.section__title::after,
html.has-motion .m-in .section__title::after {
  transform: translateX(-50%) scaleX(1);
}
html.has-motion .m-in.section__title[style*="text-align:left"]::after {
  transform: translateX(0) scaleX(1);
}

/* --- smooth anchor scrolling --------------------------------------------- */
html.has-motion {
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (max-width: 719px) {
  html.has-motion { scroll-behavior: auto; }
}

/* side-fly elements overhang the viewport until they land — clip, don't scroll */
html.has-motion body {
  overflow-x: clip;
}

/* --- floating food medallions (JS-injected, behind section content) ------ */
html.has-motion .m-float {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
  filter: drop-shadow(0 22px 34px rgba(24, 15, 10, 0.28));
  animation: m-bob 9s ease-in-out infinite alternate;
  /* parallax composes via the translate/rotate properties, not transform */
}
html.has-motion .m-float--tr { top: -40px; right: -60px; }
html.has-motion .m-float--bl { bottom: -50px; left: -70px; }
html.has-motion .m-float--br { bottom: -40px; right: -50px; }
@keyframes m-bob {
  from { translate: 0 -10px; rotate: -4deg; }
  to   { translate: 0 12px;  rotate: 5deg; }
}
/* content must sit above the floats */
html.has-motion #signature_dishes > .container,
html.has-motion #about > .container,
html.has-motion #faq > .container {
  position: relative;
  z-index: 1;
}
@media (max-width: 760px) {
  html.has-motion .m-float { display: none; }
}

/* --- gentle lift on cards while hovering (matches the animated feel) ----- */
html.has-motion .card {
  transition-property: opacity, transform, box-shadow;
}
html.has-motion .card.m-in:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(24, 15, 10, 0.14);
}