/* Level 4 motion layer. Switched on by "fx" on the root (next to "ui sh").
   Entrances play once; live loops stay small and slow so the screen still reads calm. */
.fx { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); position: relative; }

@keyframes fx-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fx-pop { 0% { opacity: 0; transform: scale(.3) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.14) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes fx-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fx-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fx-ping { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes fx-blink { 50% { opacity: .2; } }
@keyframes fx-dim { 50% { opacity: .5; } }
@keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fx-bob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-redraw { 0% { stroke-dashoffset: 1; } 30%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fx-swing { 0%, 55%, 100% { transform: rotate(0); } 8% { transform: rotate(18deg); } 16% { transform: rotate(-15deg); } 24% { transform: rotate(10deg); } 32% { transform: rotate(-6deg); } 40% { transform: rotate(3deg); } }
@keyframes fx-steam { 0% { opacity: 0; transform: translateY(3px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes fx-lid { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-3px) rotate(-8deg); } 80% { transform: translateY(0) rotate(0); } }
@keyframes fx-turn { 0% { transform: rotate(0); } 30%, 100% { transform: rotate(-360deg); } }
@keyframes fx-scan { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
@keyframes fx-dots { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }
@keyframes fx-plus { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes fx-shake { 0%, 84%, 100% { transform: translateX(0); } 87% { transform: translateX(-3px); } 90% { transform: translateX(3px); } 93% { transform: translateX(-2px); } 96% { transform: translateX(2px); } }
@keyframes fx-drip { 0% { opacity: 0; transform: translateY(-4px); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(3px); } }
@keyframes fx-print { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(1px); } }
@keyframes fx-glow { 0%, 100% { box-shadow: 0 0 0 3px var(--ring); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 12%, transparent); } }
@keyframes fx-sheen { 0% { transform: translateX(-120%) skewX(-20deg); } 55%, 100% { transform: translateX(320%) skewX(-20deg); } }
@keyframes fx-sheen-v { 0% { transform: translateY(120%); } 55%, 100% { transform: translateY(-320%); } }
@keyframes fx-toast { 0% { opacity: 0; transform: translateY(-16px) scale(.96); } 7%, 86% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes fx-toast-ico { 0%, 4% { transform: scale(.3); } 11% { transform: scale(1.18); } 15%, 100% { transform: scale(1); } }
@keyframes fx-rise { 0% { opacity: 0; transform: translateY(4px); } 15% { opacity: 1; transform: translateY(-6px); } 70% { opacity: 1; transform: translateY(-16px); } 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes fx-chip-in { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }

/* Entrances: put style="--i:N" on an element to stagger it. */
.fx .in { animation: fx-up .65s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
.fx .card.kpi, .fx .tcard { transition: transform .2s var(--ease-out), box-shadow .2s; }
.fx .card.kpi:hover, .fx .tcard:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .22); }

/* Icon boxes that pop in after their card. */
.fx .ibox { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--primary-soft); color: var(--primary); animation: fx-pop .6s var(--ease-pop) both; animation-delay: calc(var(--i, 0) * 80ms + 280ms); }
.fx .ibox svg { width: 18px; height: 18px; overflow: visible; }
.fx .ibox.sm { width: 28px; height: 28px; border-radius: 8px; }
.fx .ibox.sm svg { width: 15px; height: 15px; }
.fx .ibox.g { background: var(--ok-soft); color: var(--ok); }
.fx .ibox.a { background: var(--warn-soft); color: var(--warn); }
.fx .ibox.r { background: var(--bad-soft); color: var(--bad); }
.fx .ibox.wa { background: #ECFDF3; color: #15803D; }

/* Little lives inside icons. */
.fx .a-float { animation: fx-float 3s ease-in-out infinite; }
.fx .a-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fx-draw 1s .7s var(--ease-out) forwards; }
.fx .a-scan { animation: fx-scan 2.2s ease-in-out infinite; color: var(--accent); }
.fx .a-dots circle { animation: fx-dots 1.4s ease-in-out infinite; }
.fx .a-dots circle:nth-child(2) { animation-delay: .2s; }
.fx .a-dots circle:nth-child(3) { animation-delay: .4s; }
.fx .a-twinkle, .fx .a-plus { transform-box: fill-box; transform-origin: center; }
.fx .a-twinkle { animation: fx-twinkle 1.8s ease-in-out infinite; }
.fx .a-plus { animation: fx-plus 1.6s ease-in-out infinite; }
.fx .a-turn { animation: fx-turn 4s var(--ease-out) 1s infinite; }
.fx .a-bob { animation: fx-bob 1.2s ease-in-out infinite; }

/* Status icons inside chips and toasts. */
.fx .chip { gap: 5px; }
.fx .chip .si { width: 13px; height: 13px; flex: none; overflow: visible; }
.fx .si-new { transform-origin: 50% 8%; animation: fx-swing 2.4s ease-in-out infinite; }
.fx .si-cook .steam { transform-box: fill-box; animation: fx-steam 1.6s ease-out infinite; }
.fx .si-cook .steam:nth-of-type(2) { animation-delay: .5s; }
.fx .si-cook .steam:nth-of-type(3) { animation-delay: 1s; }
.fx .si-served .lid { transform-box: fill-box; transform-origin: 0% 100%; animation: fx-lid 2.6s ease-in-out infinite; }
.fx .si-bill .paper { animation: fx-print 1.4s ease-in-out infinite; }
.fx .si-paid .tick { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fx-redraw 2.8s var(--ease-out) infinite; }
.fx .si-staff .drop { animation: fx-drip 1.4s ease-in infinite; }
.fx .si-star { animation: fx-float 2.4s ease-in-out infinite; }
.fx .chip.pop { animation: fx-chip-in .5s var(--ease-pop) both; }
.fx .chip.blinky { animation: fx-dim 1.6s ease-in-out infinite; }
.fx .chip.alert { animation: fx-shake 4.5s ease-in-out infinite; }

/* Live dot with a radar ping. */
.fx .live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; position: relative; flex: none; display: inline-block; }
.fx .live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid currentColor; animation: fx-ping 1.6s ease-out infinite; }

/* Trend arrow next to a number. */
.fx .trend { display: inline-flex; align-items: center; gap: 3px; color: var(--ok); font-weight: 600; }
.fx .trend svg { width: 13px; height: 13px; }

/* Charts. Put --i on each bar. */
.fx .bars span { position: relative; overflow: hidden; transform-origin: 50% 100%; animation: fx-grow .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms + 350ms); }
.fx .bars .hi::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(0deg, transparent, rgba(255, 255, 255, .35), transparent); animation: fx-sheen-v 3.2s 1.6s ease-in-out infinite; }
.fx .bars .now::before { content: ''; position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; animation: fx-blink 1.2s ease-in-out infinite; z-index: 1; }
.fx .meter { display: block; height: 6px; border-radius: 999px; background: var(--subtle); overflow: hidden; }
.fx .meter i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transform-origin: 0 50%; animation: fx-fill 1.1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 120ms + 600ms); }

/* Shine on "New" badges. */
.fx .shine { position: relative; overflow: hidden; }
.fx .shine::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: fx-sheen 3s 1.2s ease-in-out infinite; }

/* The table that just ordered breathes. */
.fx .tcard.hot { animation: fx-glow 1.6s ease-in-out infinite; }

/* Live activity toast: one 3.6 s cycle per event (the screen's script changes the event between cycles). */
.fx .toast-wrap { position: absolute; z-index: 6; pointer-events: none; }
.fx .toast { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .3); animation: fx-toast 3.6s var(--ease-out) .9s infinite both; }
.fx .toast .ti { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--primary-soft); color: var(--primary); animation: fx-toast-ico 3.6s var(--ease-pop) .9s infinite both; }
.fx .toast .ti svg { width: 18px; height: 18px; display: none; overflow: visible; }
.fx .toast.k-pay .ti, .fx .toast.k-served .ti { background: var(--ok-soft); color: var(--ok); }
.fx .toast.k-cook .ti, .fx .toast.k-star .ti { background: var(--warn-soft); color: var(--warn); }
.fx .toast.k-wa .ti { background: #ECFDF3; color: #15803D; }
.fx .toast.k-pay .i-pay, .fx .toast.k-order .i-order, .fx .toast.k-cook .i-cook, .fx .toast.k-served .i-served, .fx .toast.k-star .i-star, .fx .toast.k-wa .i-wa { display: block; }
.fx .toast .tt { display: flex; flex-direction: column; min-width: 0; }
.fx .toast .tt .b { font-size: 14px; }

/* "+₹1,540" floating up from a total. */
.fx .amt-wrap { position: relative; display: inline-block; }
.fx .float-amt { position: absolute; left: 0; top: -6px; font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 1px 6px; border-radius: 6px; white-space: nowrap; animation: fx-rise 1.9s .15s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .fx *, .fx *::before, .fx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .fx .a-draw, .fx .si-paid .tick { stroke-dashoffset: 0; }
}

/* ---- Working prototype ----
   Screens re-render on every live update, so entrances only play when "enter" is on the root
   (first paint of a screen or tab). Live loops keep running either way. */
.fx:not(.enter) .in, .fx:not(.enter) .ibox, .fx:not(.enter) .bars span, .fx:not(.enter) .meter i { animation: none; }
.fx .tcard.hot.in { animation: fx-glow 1.6s ease-in-out infinite; }
.fx .idle svg, .fx .idle svg * { animation: none !important; }

/* Live feed on the owner home: newest event slides in once. */
@keyframes fx-feed { 0% { opacity: 0; transform: translateY(-12px) scale(.96); } 100% { opacity: 1; transform: none; } }
.fx .feed { display: flex; flex-direction: column; gap: 8px; }
.fx .feed .toast { animation: none; box-shadow: none; padding: 10px 12px; }
.fx .feed .toast .ti { animation: none; }
.fx .feed .toast.fresh { animation: fx-feed .55s var(--ease-pop) both; box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .3); }
.fx .feed .toast.fresh .ti { animation: fx-pop .6s .12s var(--ease-pop) both; }
.fx .toast.k-call .ti { background: var(--bad-soft); color: var(--bad); }
.fx .toast.k-bill .ti { background: var(--warn-soft); color: var(--warn); }
.fx .toast.k-call .i-call, .fx .toast.k-bill .i-bill { display: block; }
.fx .feed-empty { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; padding: 6px 2px; }
/* Table cards: a long status chip drops under the table number instead of spilling out. */
.fx .tcard .row { flex-wrap: wrap; gap: 4px 8px; }
.fx .toast.k-gift .ti { background: var(--primary-soft); color: var(--primary); }
.fx .toast.k-gift .i-gift { display: block; }