/* =========================================================
   SwadSathi — motion layer
   Two jobs:
     1. Warm food-themed decoration (steam, drifting spice, dish marquee)
     2. Make the product mockups LOOK ALIVE — counters, arriving orders,
        ticking kitchen timers, filling bars, tables changing state.
   Everything is transform/opacity only, and everything stops dead under
   prefers-reduced-motion.
   ========================================================= */

/* ---------------------------------------------------------
   1. Hero — drifting spice motes
   --------------------------------------------------------- */
.motes{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}
.motes i{
  position:absolute; bottom:-8%;
  width:7px; height:7px; border-radius:50%;
  opacity:0;
  filter:blur(.4px);
  animation:mote-rise var(--dur,17s) linear var(--del,0s) infinite;
}
@keyframes mote-rise{
  0%   { transform:translate3d(0,0,0) scale(.7);        opacity:0 }
  12%  { opacity:.75 }
  70%  { opacity:.5 }
  100% { transform:translate3d(var(--dx,20px),-108vh,0) scale(1.25); opacity:0 }
}

/* ---------------------------------------------------------
   2. Steam curls (used on the dish strip)
   --------------------------------------------------------- */
.steam{ overflow:visible }
.steam path{
  stroke-dasharray:34;
  stroke-dashoffset:34;
  animation:steam-up 3.4s ease-in-out infinite;
  opacity:0;
}
.steam path:nth-child(2){ animation-delay:.55s }
.steam path:nth-child(3){ animation-delay:1.15s }
@keyframes steam-up{
  0%  { stroke-dashoffset:34; opacity:0;   transform:translateY(4px) }
  25% { opacity:.85 }
  70% { opacity:.35 }
  100%{ stroke-dashoffset:0;  opacity:0;   transform:translateY(-9px) }
}

/* ---------------------------------------------------------
   3. Dish strip — the menu, scrolling, in three languages
   --------------------------------------------------------- */
.dishes{
  position:relative;
  background:var(--night-2, #1a1420);
  border-block:1px solid rgba(255,255,255,.08);
  padding:20px 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.dishes__track{
  display:flex; align-items:center; gap:14px;
  width:max-content;
  animation:dish-slide 46s linear infinite;
}
.dishes:hover .dishes__track{ animation-play-state:paused }
@keyframes dish-slide{ to{ transform:translateX(-50%) } }

.dish-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 17px; border-radius:99px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  font-size:14.5px; font-weight:600; color:rgba(255,255,255,.82);
  white-space:nowrap;
}
.dish-chip em{ font-style:normal; color:rgba(255,255,255,.4); font-weight:500 }
.dish-chip svg{ width:17px; height:17px; flex:none }
.dish-chip--hot{ border-color:rgba(232,80,42,.4); background:rgba(232,80,42,.13); color:#ffb99f }

/* ---------------------------------------------------------
   4. Live mockups — the persuasive part
   --------------------------------------------------------- */

/* 4a. chart bars grow when the block scrolls into view.
   The resting state is the FULL bar — the keyframe starts from zero. If the
   observer never fires (no JS, throttled tab, background iframe) the chart
   still renders correctly instead of collapsing to nothing. */
.ui-chart i{ transform-origin:bottom }
.is-live .ui-chart i{
  animation:bar-grow .85s var(--ease,cubic-bezier(.22,1,.36,1)) backwards;
}
.is-live .ui-chart i:nth-child(1){ animation-delay:.05s }
.is-live .ui-chart i:nth-child(2){ animation-delay:.11s }
.is-live .ui-chart i:nth-child(3){ animation-delay:.17s }
.is-live .ui-chart i:nth-child(4){ animation-delay:.23s }
.is-live .ui-chart i:nth-child(5){ animation-delay:.29s }
.is-live .ui-chart i:nth-child(6){ animation-delay:.35s }
.is-live .ui-chart i:nth-child(7){ animation-delay:.41s }
.is-live .ui-chart i:nth-child(8){ animation-delay:.47s }
@keyframes bar-grow{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }

/* 4b. queue meters fill — same "full at rest" rule as the chart */
.ui-meter .bar em{ transform-origin:left }
.is-live .ui-meter .bar em{ animation:meter-fill 1s var(--ease,cubic-bezier(.22,1,.36,1)) .2s backwards }
@keyframes meter-fill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* 4c. a new order arriving — slides in and flashes once */
.ui-row.is-arriving{
  animation:order-in .6s cubic-bezier(.22,1,.36,1);
}
@keyframes order-in{
  0%  { transform:translateX(-14px); opacity:0; background:rgba(232,80,42,.16) }
  60% { background:rgba(232,80,42,.10) }
  100%{ transform:none; opacity:1; background:transparent }
}

/* 4d. the "Live" chip already pulses; give delayed tickets a heartbeat */
.is-live .ui-kot--late{ animation:late-pulse 1.9s ease-in-out infinite }
@keyframes late-pulse{
  50%{ border-top-color:#ff6b6b; box-shadow:0 0 0 1px rgba(211,58,58,.35), 0 0 22px -6px rgba(211,58,58,.7) }
}

/* 4e. a table cycling free → running → ready, so the floor looks alive */
.ui-table--cycle::after{
  content:''; position:absolute; inset:0;
  pointer-events:none;
  animation:table-cycle 9s ease-in-out infinite;
}
@keyframes table-cycle{
  0%,26%   { background:transparent }
  34%,58%  { background:rgba(217,131,21,.16) }
  66%,90%  { background:rgba(18,128,92,.18) }
  100%     { background:transparent }
}

/* 4f. KPI values that count up are set by JS; keep the digits from jiggling */
.ui-kpi b{ font-variant-numeric:tabular-nums }

/* 4g. a soft sheen crossing a screenshot once it appears */
.shot{ position:relative }
.shot.is-live::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.30) 48%,transparent 60%);
  transform:translateX(-110%);
  animation:sheen 1.5s cubic-bezier(.22,1,.36,1) .25s;
}
@keyframes sheen{ to{ transform:translateX(110%) } }

/* ---------------------------------------------------------
   5. Icon tiles get a gentle lift on card hover
   --------------------------------------------------------- */
.card .ico{ transition:transform .4s cubic-bezier(.34,1.56,.64,1) }
.card--hover:hover .ico{ transform:translateY(-3px) rotate(-5deg) scale(1.06) }

/* ---------------------------------------------------------
   6. Respect the setting
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .motes,.steam path{ display:none }
  .dishes__track{ animation:none }
  .ui-chart i,.ui-meter .bar em{ transform:none !important; animation:none !important }
  .ui-row.is-arriving,.is-live .ui-kot--late,.ui-table--cycle::after,.shot.is-live::after{
    animation:none !important;
  }
  .card--hover:hover .ico{ transform:none }
}