/* =========================================================================
   ZEN Z — "How ZEN Z works" animated diagram.

   One hand-drawn inline SVG (viewBox 0 0 1000 420): the cloud kitchen on the
   left, seven concept trolleys in the middle, and the three ways a customer
   meets the food on the right — web app, Android app, delivery rider.

   Everything animated lives here, never in a style="" attribute: the host
   serves `style-src 'self'`, so an inline style is dropped before the browser
   reads it. Animations start when the existing reveal observer in
   zenz-order.js adds `.in` to the `.z-flow` wrapper, and run only under
   `html.zjs` (JavaScript present). Without JS the diagram renders complete and
   still; under prefers-reduced-motion it does the same.
   ========================================================================= */

.z-flow{max-width:1080px;margin:0 auto}
.z-flow-svg{width:100%;height:auto;display:block;overflow:visible}

/* ------------------------------------------------------------------- type */
.zf-t{fill:#0E1210;font-family:'Sora','Inter',system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em}
.zf-s{fill:#8A7A6C;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14px}
.zf-s--c{fill:#4B4038;font-size:13px}
/* Trolley names sit over the order lines; a cream halo keeps them legible. */
.zf-trolley .zf-s{paint-order:stroke;stroke:#FFFBF5;stroke-width:5;stroke-linejoin:round}
.zf-kitchen,.zf-trolleys,.zf-customers{isolation:isolate}
.zf-tag{fill:#D4A94E;font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:640px){
  .zf-s,.zf-tag{display:none}
  .zf-t{font-size:30px}
}

/* ---------------------------------------------------------------- kitchen */
.zf-kit-body{fill:#0E1210}
.zf-kit-roof{fill:#D4A94E}
.zf-kit-win{fill:#FFFBF5}
.zf-kit-door{fill:#D4A94E}
.zf-kit-glow{fill:#D4A94E;opacity:.12}
.zf-steam{fill:none;stroke:#D4A94E;stroke-width:3;stroke-linecap:round;opacity:.55;transform-box:fill-box;transform-origin:50% 100%}
.zjs .z-flow.in .zf-steam{animation:zfSteam 2.8s ease-in-out infinite}
.zjs .z-flow.in .zf-steam:nth-child(2){animation-delay:.7s}
.zjs .z-flow.in .zf-steam:nth-child(3){animation-delay:1.4s}
@keyframes zfSteam{
  0%{opacity:0;transform:translateY(6px) scale(.9)}
  35%{opacity:.7}
  100%{opacity:0;transform:translateY(-16px) scale(1.15)}
}

/* --------------------------------------------------------------- trolleys
   Each trolley sets its concept colour as `color`; canopy and body use
   currentColor so one class per concept is the whole palette. */
.zf-trolley{transform-box:fill-box;transform-origin:50% 100%}
.zf-c1{color:#2E6B44}  /* health */
.zf-c2{color:#C97A2B}  /* breakfast */
.zf-c3{color:#B23A2E}  /* food */
.zf-c4{color:#6B4226}  /* tea */
.zf-c5{color:#7A3F9E}  /* beauty */
.zf-c6{color:#1E5FA8}  /* dairy */
.zf-c7{color:#7A1F2B}  /* non-veg */
.zf-canopy{fill:currentColor}
.zf-canopy-edge{fill:none;stroke:#0E1210;stroke-width:1.5;stroke-linejoin:round}
.zf-body{fill:currentColor}
.zf-body-shade{fill:#0E1210;opacity:.18}
.zf-counter{fill:#0E1210}
.zf-pole{fill:#0E1210}
.zf-stripe{fill:#FFFBF5;opacity:.85}
.zf-wheel{transform-box:fill-box;transform-origin:center}
.zf-wheel circle{fill:#0E1210;stroke:#D4A94E;stroke-width:2}
.zf-wheel path{stroke:#D4A94E;stroke-width:1.6;stroke-linecap:round;fill:none}
.zjs .z-flow.in .zf-wheel{animation:zfSpin 7s linear infinite}
@keyframes zfSpin{to{transform:rotate(360deg)}}

.zjs .z-flow .zf-trolley{opacity:0;transform:translateY(10px) scale(.86)}
.zjs .z-flow.in .zf-trolley{animation:zfPop .6s cubic-bezier(.2,.8,.2,1) both}
.zjs .z-flow.in .zf-row:nth-child(1) .zf-trolley{animation-delay:.45s}
.zjs .z-flow.in .zf-row:nth-child(2) .zf-trolley{animation-delay:.54s}
.zjs .z-flow.in .zf-row:nth-child(3) .zf-trolley{animation-delay:.63s}
.zjs .z-flow.in .zf-row:nth-child(4) .zf-trolley{animation-delay:.72s}
.zjs .z-flow.in .zf-row:nth-child(5) .zf-trolley{animation-delay:.81s}
.zjs .z-flow.in .zf-row:nth-child(6) .zf-trolley{animation-delay:.90s}
.zjs .z-flow.in .zf-row:nth-child(7) .zf-trolley{animation-delay:.99s}
@keyframes zfPop{
  0%{opacity:0;transform:translateY(10px) scale(.86)}
  70%{opacity:1;transform:translateY(-2px) scale(1.03)}
  100%{opacity:1;transform:none}
}

/* ------------------------------------------------------------------ lines
   The geometry is defined once in <defs>; two <use>s draw it — a solid line
   that draws itself in, and a dotted overlay whose dashes travel along it. */
.zf-line{fill:none;stroke:#D4A94E;stroke-width:2;stroke-linecap:round;opacity:.55}
.zf-dots{fill:none;stroke:#0E1210;stroke-width:5;stroke-linecap:round;stroke-dasharray:0 18}
.zjs .z-flow .zf-line{stroke-dasharray:720;stroke-dashoffset:720}
.zjs .z-flow.in .zf-line{animation:zfDraw 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.zjs .z-flow.in .zf-lines>.zf-line:nth-of-type(2){animation-delay:.06s}
.zjs .z-flow.in .zf-lines>.zf-line:nth-of-type(3){animation-delay:.12s}
.zjs .z-flow.in .zf-lines>.zf-line:nth-of-type(4){animation-delay:.18s}
.zjs .z-flow.in .zf-lines>.zf-line:nth-of-type(5){animation-delay:.24s}
.zjs .z-flow.in .zf-lines>.zf-line:nth-of-type(6){animation-delay:.30s}
.zjs .z-flow.in .zf-lines>.zf-line:nth-of-type(7){animation-delay:.36s}
.zjs .z-flow.in .zf-lines--out .zf-line{animation-delay:.9s}
@keyframes zfDraw{to{stroke-dashoffset:0}}
.zjs .z-flow .zf-dots{opacity:0}
.zjs .z-flow.in .zf-dots{opacity:1;transition:opacity .5s 1.2s;animation:zfFlow 1.4s linear infinite}
@keyframes zfFlow{to{stroke-dashoffset:-18}}

/* --------------------------------------------------------------- customers */
.zf-node{fill:#fff;stroke:#E2D3C2;stroke-width:1.5}
.zf-node-ink{fill:#0E1210}
.zf-screen{fill:#FFFBF5;stroke:#0E1210;stroke-width:3}
.zf-screen-bar{fill:#D4A94E}
.zf-screen-line{fill:#E2D3C2}
.zf-screen-btn{fill:#0E1210}
.zf-android{fill:#2E6B44}
.zf-android-eye{fill:#FFFBF5}
.zf-house{fill:#0E1210}
.zf-house-roof{fill:#D4A94E}
.zf-house-door{fill:#D4A94E}
.zf-badge{fill:#0E1210}
.zf-badge-t{fill:#D4A94E;font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:11px;letter-spacing:.08em}

/* The rider. Drawn centred on its own origin so the wheels ride the path;
   the path itself is relative to the group that positions the rider at its
   start, so a browser without offset-path still shows a rider standing at the
   first stop instead of one parked in the top-left corner. */
.zf-ride{fill:none;stroke:#0E1210;stroke-width:2;stroke-dasharray:7 9;stroke-linecap:round;opacity:.5}
.zjs .z-flow.in .zf-ride{animation:zfDash 1.2s linear infinite}
@keyframes zfDash{to{stroke-dashoffset:-16}}
.zf-rider-wheel{fill:#0E1210;stroke:#D4A94E;stroke-width:2}
.zf-rider-frame{fill:none;stroke:#0E1210;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.zf-rider-box{fill:#D4A94E}
.zf-rider-head{fill:#D4A94E}
.zf-rider-body{fill:none;stroke:#0E1210;stroke-width:3.2;stroke-linecap:round}
.zf-rider{offset-path:path("M0 0 C 70 -34, 150 34, 262 0");offset-rotate:0deg;offset-distance:0%}
.zjs .z-flow.in .zf-rider{animation:zfRide 6.5s cubic-bezier(.45,.05,.55,.95) 1.4s infinite}
@keyframes zfRide{
  0%{offset-distance:0%;opacity:0}
  6%{opacity:1}
  86%{offset-distance:100%;opacity:1}
  92%{offset-distance:100%;opacity:0}
  100%{offset-distance:0%;opacity:0}
}

/* ------------------------------------------------------------ caption row */
.z-flow-steps{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:zf}
.z-flow-steps li{position:relative;background:#fff;border:1px solid #EFE4D8;border-radius:16px;padding:16px 16px 16px 54px;font-size:13.5px;line-height:1.45;color:#4B4038;box-shadow:0 1px 2px rgba(23,18,14,.06)}
.z-flow-steps li b{display:block;color:#0E1210;font-family:'Sora','Inter',sans-serif;font-size:14px;margin-bottom:3px}
.z-flow-steps li::before{counter-increment:zf;content:counter(zf);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:9px;background:#0E1210;color:#D4A94E;font-family:'Sora','Inter',sans-serif;font-weight:800;font-size:13px;display:grid;place-items:center}
@media(max-width:980px){.z-flow-steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.z-flow-steps{grid-template-columns:1fr;gap:9px}.z-flow-steps li{padding:13px 14px 13px 52px}}

/* ---------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
  .zjs .z-flow .zf-trolley,.zjs .z-flow.in .zf-trolley{opacity:1;transform:none;animation:none}
  .zjs .z-flow .zf-line,.zjs .z-flow.in .zf-line{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .zjs .z-flow .zf-dots,.zjs .z-flow.in .zf-dots{opacity:1;animation:none;transition:none}
  .zjs .z-flow.in .zf-wheel,.zjs .z-flow.in .zf-steam,.zjs .z-flow.in .zf-ride{animation:none}
  .zjs .z-flow.in .zf-rider{animation:none;offset-distance:100%}
  .zf-steam{opacity:.45}
}