/* ============================================================
   TAVDI — motion.
   One idea, animated everywhere: a griddle that never stops
   cooking. Flame, fat, wobble, steam, garnish. Everything here
   is CSS on SVG nodes — no per-frame JavaScript, so 28 running
   stoves cost almost nothing.
   ============================================================ */

/* ---------------- The burner ---------------- */
@keyframes flame-lick {
  0%, 100% { transform: scaleY(1)    scaleX(1)    translateY(0);    opacity: .92; }
  22%      { transform: scaleY(1.26) scaleX(.9)   translateY(-3px); opacity: 1; }
  47%      { transform: scaleY(.86)  scaleX(1.09) translateY(1px);  opacity: .8; }
  71%      { transform: scaleY(1.16) scaleX(.95)  translateY(-2px); opacity: .97; }
}
@keyframes flame-sway {
  0%, 100% { transform: translateX(0) skewX(0deg); }
  33%      { transform: translateX(2.5px) skewX(-5deg); }
  66%      { transform: translateX(-2px) skewX(4deg); }
}
@keyframes ember-glow {
  0%, 100% { opacity: .5;  transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.09); }
}

/* ---------------- Fat, heat and wobble ---------------- */
@keyframes yolk-wobble {
  0%, 100% { transform: scale(1, 1)       translateY(0); }
  30%      { transform: scale(1.055, .94) translateY(1.2px); }
  60%      { transform: scale(.955, 1.06) translateY(-1.4px); }
}
@keyframes scramble-jiggle {
  0%, 100% { transform: translate(0, 0)        rotate(0deg); }
  25%      { transform: translate(.9px, -1.3px) rotate(2.2deg); }
  50%      { transform: translate(-.7px, .8px)  rotate(-1.8deg); }
  75%      { transform: translate(1.1px, .5px)  rotate(1.2deg); }
}
@keyframes butter-melt {
  0%   { transform: scale(.5);  opacity: .95; }
  70%  { transform: scale(1.5); opacity: .35; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes pan-sheen {
  0%, 100% { opacity: .18; transform: translateX(-14%); }
  50%      { opacity: .42; transform: translateX(14%); }
}
@keyframes sizzle-pop {
  0%   { transform: translateY(0) scale(.2); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(-26px) scale(1); opacity: 0; }
}

/* ---------------- Steam ---------------- */
@keyframes steam-rise {
  0%   { transform: translateY(6px)   scaleX(.75) scaleY(.6); opacity: 0; }
  22%  { opacity: .55; }
  60%  { opacity: .35; }
  100% { transform: translateY(-58px) scaleX(1.5) scaleY(1.3); opacity: 0; }
}

/* ---------------- Curry, gravy, liquid ---------------- */
@keyframes bubble-up {
  0%   { transform: translateY(4px) scale(.35); opacity: 0; }
  25%  { opacity: .85; }
  100% { transform: translateY(-16px) scale(1.15); opacity: 0; }
}
@keyframes gravy-swirl {
  0%, 100% { transform: rotate(0deg)   scale(1); }
  50%      { transform: rotate(2.5deg) scale(1.018); }
}

/* ---------------- The last-second garnish ---------------- */
@keyframes garnish-fall {
  0%   { transform: translateY(-34px) rotate(0deg)   scale(.7); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateY(4px)   rotate(240deg) scale(1);  opacity: 0; }
}
@keyframes cheese-drip {
  0%   { transform: scaleY(.25); opacity: .35; }
  55%  { transform: scaleY(1);   opacity: .95; }
  100% { transform: scaleY(1.1); opacity: .7; }
}

/* ---------------- Glass, ice, cold drinks ---------------- */
@keyframes fizz-up {
  0%   { transform: translateY(0) scale(.5);  opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateY(-40px) scale(1); opacity: 0; }
}
@keyframes condensate {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50%      { opacity: .7; transform: translateY(3px); }
}

/* ---------------- Sweets: ghee sheen ---------------- */
@keyframes ghee-sheen {
  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  40%  { opacity: .8; }
  100% { transform: translateX(120%)  skewX(-18deg); opacity: 0; }
}
@keyframes sparkle {
  0%, 100% { transform: scale(0) rotate(0deg);    opacity: 0; }
  50%      { transform: scale(1) rotate(180deg);  opacity: 1; }
}
/* A dyed thread does not blink out of existence. The ikat motifs
   breathe instead, so the cloth stays whole. */
@keyframes weave-pulse {
  0%, 100% { opacity: .5;  transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* ---------------- Page furniture ---------------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes slide-up-sheet {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgb(212 20 90 / .55); }
  70%  { box-shadow: 0 0 0 14px rgb(212 20 90 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(212 20 90 / 0); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes draw-thread {
  from { stroke-dashoffset: var(--dash, 400); }
  to   { stroke-dashoffset: 0; }
}
@keyframes count-flash {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ============================================================
   Scroll reveal — the weft threading across the warp.
   JS adds .in when the element enters the viewport.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="weave"] { transform: translateY(0) scaleX(.4); transform-origin: left center; }
[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* Stagger children by index without writing 12 rules */
[data-stagger] > * { --reveal-delay: calc(var(--i, 0) * 70ms); }

/* ============================================================
   Motion classes used by the SVG art layer
   ============================================================ */
.anim-flame   { animation: flame-lick 780ms ease-in-out infinite; transform-origin: 50% 100%; }
.anim-sway    { animation: flame-sway 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.anim-ember   { animation: ember-glow 2.1s ease-in-out infinite; transform-origin: 50% 50%; }
.anim-yolk    { animation: yolk-wobble 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
.anim-jiggle  { animation: scramble-jiggle 1.9s ease-in-out infinite; transform-origin: 50% 50%; }
.anim-butter  { animation: butter-melt 3.4s ease-out infinite; transform-origin: 50% 50%; }
.anim-sheen   { animation: pan-sheen 4.2s ease-in-out infinite; }
.anim-steam   { animation: steam-rise 3.2s ease-out infinite; transform-origin: 50% 100%; }
.anim-bubble  { animation: bubble-up 2.4s ease-out infinite; }
.anim-swirl   { animation: gravy-swirl 4.6s ease-in-out infinite; transform-origin: 50% 50%; }
.anim-garnish { animation: garnish-fall 4.2s linear infinite; }
.anim-cheese  { animation: cheese-drip 3s ease-out infinite; transform-origin: 50% 0%; }
.anim-fizz    { animation: fizz-up 3.6s ease-out infinite; }
.anim-drop    { animation: condensate 2.8s ease-in-out infinite; }
.anim-ghee    { animation: ghee-sheen 3.8s ease-in-out infinite; }
.anim-spark   { animation: sparkle 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
.anim-weave   { animation: weave-pulse 4s ease-in-out infinite; transform-origin: 50% 50%; }
.anim-sizzle  { animation: sizzle-pop 1.6s ease-out infinite; }
.anim-bob     { animation: bob 3.4s ease-in-out infinite; }

/* Phase offsets so nothing marches in lockstep */
.d1 { animation-delay: -.2s }  .d2 { animation-delay: -.45s }
.d3 { animation-delay: -.7s }  .d4 { animation-delay: -1.05s }
.d5 { animation-delay: -1.4s } .d6 { animation-delay: -1.8s }
.d7 { animation-delay: -2.3s } .d8 { animation-delay: -2.9s }

/* The spatula working the ghotala, hero only */
@keyframes spatula-sweep {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30%      { transform: translate(120px, -14px) rotate(-9deg); }
  55%      { transform: translate(210px, 10px)  rotate(4deg); }
  80%      { transform: translate(70px, 18px)   rotate(-3deg); }
}
.hero-spatula { animation: spatula-sweep 6.5s ease-in-out infinite; }

/* Animated SVG nodes need a box to rotate and scale about, or
   `transform-origin` resolves against the whole canvas and the
   food flies off the pan.
   Scoped to animated nodes only: applying it to every element
   would also re-base the `rotate(angle cx cy)` attributes that
   position the static scenery, throwing that off instead. */
svg [class*="anim-"],
svg .map-pin,
svg .garba-ring,
svg .hero-spatula { transform-box: fill-box; }

/* ============================================================
   Pause anything off-screen. IntersectionObserver toggles
   .stove-idle on the scene wrapper.
   ============================================================ */
.stove-idle * { animation-play-state: paused !important; }

/* Hover heats the pan up */
.dish-card:hover .stove .anim-flame  { animation-duration: 520ms; }
.dish-card:hover .stove .anim-steam  { animation-duration: 2.3s; }
.dish-card:hover .stove .anim-sizzle { animation-duration: 1.1s; }

/* ============================================================
   Reduced motion: freeze to a composed still frame.
   The scenes are designed to look good stopped.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .stove .anim-steam,
  .stove .anim-garnish,
  .stove .anim-sizzle,
  .stove .anim-fizz { opacity: .5 !important; }
  .ticker__track { animation: none !important; }
}

/* Manual override from the motion toggle in the footer */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] .stove .anim-steam,
html[data-motion="off"] .stove .anim-garnish,
html[data-motion="off"] .stove .anim-sizzle,
html[data-motion="off"] .stove .anim-fizz { opacity: .5 !important; }