/* ============================================================
   COZMO — Motion Language
   Reusable dynamic elements, site-wide.
   Requires: assets/css/brand.css (for --accent, --cyan, --teal,
   --accent-deep, --font-head, --font, --grad, --grad-brand, etc.)
   Namespace: .cz-*   ·   Keyframes: cz-*
   Optional enhancer: assets/js/motion.js (count-up on .cz-count)
   ============================================================ */

:root{
  --cz-magenta:#EC4899;
  --cz-ease:cubic-bezier(.4,0,.2,1);
}
@property --border-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

/* shared spin used by orb ring + spinner */
@keyframes cz-spin{ to{ --border-angle:360deg; } }

/* ── 01 · Cozmo Orb — living brand mark ─────────────────────
   <span class="cz-orb"><span class="cz-orb-face">
     <i class="cz-eye"></i><i class="cz-eye"></i></span></span>
   Size via font-size or width/height on .cz-orb (default 96px). */
.cz-orb{
  position:relative; width:96px; height:96px; border-radius:28px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  animation:cz-orb-pulse 3.6s ease-in-out infinite;
}
.cz-orb::before{
  /* thin gradient frame (site-wide) */
  content:''; position:absolute; inset:-2px; border-radius:30px;
  background:conic-gradient(from var(--border-angle),var(--accent),var(--cyan),var(--teal),var(--accent-soft),var(--accent));
  animation:cz-spin 5s linear infinite;
}
.cz-orb::after{
  content:''; position:absolute; inset:-24px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,rgba(99,102,241,.32),transparent 70%);
  animation:cz-halo 3.6s ease-in-out infinite;
}
.cz-orb-face{
  position:relative; z-index:1; width:90px; height:90px; border-radius:26px;
  background:linear-gradient(135deg,#5B4FE0,#6366F1 55%,#22D3EE);
  display:flex; align-items:center; justify-content:center; gap:12px;
  box-shadow:inset 0 2px 8px rgba(255,255,255,.25);
}
.cz-eye{ width:16px; height:16px; border-radius:50%; background:#fff; animation:cz-blink 4.2s infinite; }
/* small variant */
.cz-orb--sm{ width:56px; height:56px; border-radius:18px; }
.cz-orb--sm::before{ inset:-1.5px; border-radius:19px; }
.cz-orb--sm .cz-orb-face{ width:52px; height:52px; border-radius:16px; gap:8px; }
.cz-orb--sm .cz-eye{ width:10px; height:10px; }
@keyframes cz-orb-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
@keyframes cz-halo{ 0%,100%{ opacity:.5; } 50%{ opacity:.9; } }
@keyframes cz-blink{ 0%,92%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.12); } }

/* ── 02 · Thinking dots ─────────────────────────────────────
   <span class="cz-thinking">Cozmo is thinking
     <span class="cz-thinking-dots"><i></i><i></i><i></i></span></span> */
.cz-thinking{ display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-head); font-weight:600; color:var(--muted); }
.cz-thinking-dots{ display:inline-flex; gap:7px; }
.cz-thinking-dots i{ width:10px; height:10px; border-radius:50%; background:var(--grad);
  animation:cz-think 1.4s ease-in-out infinite; }
.cz-thinking-dots i:nth-child(2){ animation-delay:.2s; }
.cz-thinking-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes cz-think{ 0%,80%,100%{ transform:translateY(0); opacity:.4; } 40%{ transform:translateY(-9px); opacity:1; } }

/* ── 03 · Gradient spinner ──────────────────────────────────
   <span class="cz-spinner"></span>   (size via width/height) */
.cz-spinner{
  display:inline-block; width:56px; height:56px; border-radius:50%;
  background:conic-gradient(from var(--border-angle),transparent 0%,var(--accent) 55%,var(--cyan) 85%,transparent 100%);
  animation:cz-spin 1.1s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 8px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 8px));
}

/* ── 04 · Impact ring (progress + count-up) ─────────────────
   <span class="cz-ring">
     <svg viewBox="0 0 112 112"><circle class="cz-ring-track" .../>
       <circle class="cz-ring-fill" ... pathLength="100"/></svg>
     <span class="cz-ring-val"><b class="cz-count" data-to="18" data-suffix="%">0%</b>
       <small>Impact</small></span></span>
   Needs one <linearGradient id="czMagenta"> in an SVG <defs> on the page. */
.cz-ring{ position:relative; display:inline-block; width:112px; height:112px; }
.cz-ring svg{ transform:rotate(-90deg); width:100%; height:100%; }
.cz-ring-track{ stroke:rgba(236,72,153,.14); fill:none; }
.cz-ring-fill{ stroke:url(#czMagenta); fill:none; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; animation:cz-ringfill 4.5s ease-in-out infinite; }
.cz-ring-val{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cz-ring-val b{ font-family:var(--font-head); font-weight:700; font-size:26px; color:var(--cz-magenta); }
.cz-ring-val small{ font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
@keyframes cz-ringfill{ 0%,6%{ stroke-dashoffset:100; } 45%,88%{ stroke-dashoffset:24; } 97%,100%{ stroke-dashoffset:100; } }

/* ── 05 · Sentiment gauge (arc + needle) ────────────────────
   markup: see reference page. Needs <linearGradient id="czBlue">. */
/* height leaves a clear band BELOW the arc for the readout, so the
   needle/pivot never sit on top of the number */
.cz-gauge{ position:relative; display:inline-block; width:150px; height:120px; }
.cz-gauge svg{ overflow:visible; }
.cz-gauge-track{ stroke:rgba(99,102,241,.12); fill:none; }
.cz-gauge-fill{ stroke:url(#czBlue); fill:none; stroke-linecap:round;
  stroke-dasharray:126; stroke-dashoffset:126; animation:cz-gaugefill 5s ease-in-out infinite; }
.cz-gauge-needle{ transform-origin:75px 78px; animation:cz-needle 5s ease-in-out infinite; }
.cz-gauge-val{ position:absolute; left:0; right:0; bottom:2px; text-align:center; line-height:1;
  font-family:var(--font-head); font-weight:700; font-size:22px; color:var(--accent-deep); }
@keyframes cz-gaugefill{ 0%,6%{ stroke-dashoffset:126; } 48%,90%{ stroke-dashoffset:34; } 98%,100%{ stroke-dashoffset:126; } }
@keyframes cz-needle{ 0%,6%{ transform:rotate(-90deg); } 48%,90%{ transform:rotate(52deg); } 98%,100%{ transform:rotate(-90deg); } }

/* ── 06 · Trend sparkline ───────────────────────────────────
   Needs <linearGradient id="czArea"> + <linearGradient id="czBlue">. */
.cz-spark{ display:inline-block; width:170px; height:96px; }
.cz-spark-area{ fill:url(#czArea); opacity:0; animation:cz-sparkarea 5s ease infinite; }
.cz-spark-line{ fill:none; stroke:url(#czBlue); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:260; stroke-dashoffset:260; animation:cz-sparkdraw 5s ease infinite; }
.cz-spark-dot{ fill:var(--cyan); opacity:0; animation:cz-sparkdot 5s ease infinite; }
@keyframes cz-sparkdraw{ 0%{ stroke-dashoffset:260; } 40%,88%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:260; } }
@keyframes cz-sparkarea{ 0%,10%{ opacity:0; } 50%,88%{ opacity:.5; } 100%{ opacity:0; } }
@keyframes cz-sparkdot{ 0%,36%{ opacity:0; } 44%,88%{ opacity:1; } 100%{ opacity:0; } }

/* ── 07 · Signal flow wire ──────────────────────────────────
   <span class="cz-wire"><i class="cz-wire-node"></i>
     <i class="cz-wire-track"></i><i class="cz-wire-p"></i>×3
     <i class="cz-wire-node cz-wire-node--alt"></i></span> */
.cz-wire{ position:relative; display:inline-flex; align-items:center; justify-content:space-between; width:180px; height:44px; }
.cz-wire-node{ width:34px; height:34px; border-radius:11px; background:var(--grad); flex:none;
  box-shadow:0 8px 18px -8px rgba(99,102,241,.7); }
.cz-wire-node--alt{ background:linear-gradient(135deg,var(--teal),var(--cyan)); }
.cz-wire-track{ position:absolute; left:34px; right:34px; top:50%; height:3px; margin-top:-1.5px;
  background:rgba(99,102,241,.12); border-radius:3px; }
.cz-wire-p{ position:absolute; top:50%; margin-top:-4px; left:34px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); opacity:0; animation:cz-wireflow 2.2s linear infinite; }
.cz-wire-p:nth-of-type(2){ animation-delay:.7s; }
.cz-wire-p:nth-of-type(3){ animation-delay:1.4s; }
@keyframes cz-wireflow{ 0%{ opacity:0; transform:translateX(0); } 12%{ opacity:1; } 88%{ opacity:1; }
  100%{ opacity:0; transform:translateX(112px); } }

/* ── 08 · Experience Replay stages ──────────────────────────
   <span class="cz-replay"><i class="cz-stage"></i> ×6 </span> */
.cz-replay{ display:inline-flex; gap:7px; }
.cz-stage{ width:16px; height:56px; border-radius:8px; background:rgba(99,102,241,.14);
  animation:cz-rpulse 4.8s ease-in-out infinite; }
.cz-stage:nth-child(2){ animation-delay:.5s; }
.cz-stage:nth-child(3){ animation-delay:1s; }
.cz-stage:nth-child(4){ animation-delay:1.5s; }
.cz-stage:nth-child(5){ animation-delay:2s; }
.cz-stage:nth-child(6){ animation-delay:2.5s; }
@keyframes cz-rpulse{
  0%,100%{ background:rgba(99,102,241,.14); transform:scaleY(.7); }
  10%{ background:linear-gradient(180deg,var(--accent),var(--cyan)); transform:scaleY(1); }
  30%{ background:rgba(99,102,241,.14); transform:scaleY(.7); } }

/* ── 09 · Steps tracker (line draw + node pop) ──────────────
   <span class="cz-steps"><svg class="cz-steps-line">…</svg>
     <i class="cz-step">1</i> …</span>  Needs <linearGradient id="czBlue">. */
.cz-steps{ position:relative; display:inline-flex; justify-content:space-between; align-items:center; width:190px; }
.cz-steps-line{ position:absolute; left:16px; right:16px; top:16px; height:2px; overflow:visible; }
.cz-steps-line path{ stroke:url(#czBlue); stroke-width:2; fill:none;
  stroke-dasharray:160; stroke-dashoffset:160; animation:cz-stepdraw 4.5s ease infinite; }
.cz-step{ width:32px; height:32px; border-radius:50%; background:var(--grad); color:#fff; z-index:1;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:14px; }
.cz-step:nth-child(2){ animation:cz-nodepop 4.5s ease infinite .3s; }
.cz-step:nth-child(3){ animation:cz-nodepop 4.5s ease infinite 1s; }
.cz-step:nth-child(4){ animation:cz-nodepop 4.5s ease infinite 1.7s; }
@keyframes cz-stepdraw{ 0%{ stroke-dashoffset:160; } 45%,90%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:160; } }
@keyframes cz-nodepop{ 0%,100%{ box-shadow:none; transform:scale(1); }
  20%{ box-shadow:0 0 0 8px rgba(99,102,241,.18); transform:scale(1.18); }
  40%{ box-shadow:0 0 0 12px rgba(99,102,241,0); transform:scale(1); } }

/* ── 10 · Nebula aura (section background) ───────────────────
   <span class="cz-nebula"><i class="cz-nebula-b1"></i>
     <i class="cz-nebula-b2"></i><i class="cz-nebula-b3"></i></span>
   Position:absolute inside a positioned/overflow-hidden parent. */
.cz-nebula{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cz-nebula i{ position:absolute; border-radius:50%; filter:blur(22px); opacity:.6; mix-blend-mode:multiply; }
.cz-nebula-b1{ width:120px; height:120px; background:radial-gradient(circle,#6366F1,transparent 70%); top:20px; left:30px; animation:cz-drift 9s ease-in-out infinite; }
.cz-nebula-b2{ width:130px; height:130px; background:radial-gradient(circle,#22D3EE,transparent 70%); bottom:10px; right:34px; animation:cz-drift 12s ease-in-out infinite reverse; }
.cz-nebula-b3{ width:96px; height:96px; background:radial-gradient(circle,#2DD4BF,transparent 70%); top:60px; right:70px; animation:cz-drift 10s ease-in-out infinite; }
@keyframes cz-drift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(18px,-14px) scale(1.16); } }

/* ── 11 · Floating signals ──────────────────────────────────
   <span class="cz-signals"><span class="cz-signal cz-signal--indigo">
     <i></i>Survey</span> …</span>  (absolute inside a positioned parent) */
.cz-signals{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cz-signal{ position:absolute; bottom:-20px; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:700;
  backdrop-filter:blur(8px); opacity:0; animation:cz-floatup 5s ease-in-out infinite; }
.cz-signal i{ width:6px; height:6px; border-radius:50%; }
.cz-signal--indigo{ background:rgba(99,102,241,.12); color:var(--accent); border:1px solid rgba(99,102,241,.22); }
.cz-signal--indigo i{ background:var(--accent); }
.cz-signal--teal{ background:rgba(45,212,191,.12); color:#0d7a6e; border:1px solid rgba(45,212,191,.22); }
.cz-signal--teal i{ background:var(--teal); }
.cz-signal--cyan{ background:rgba(34,211,238,.12); color:#0369a1; border:1px solid rgba(34,211,238,.22); }
.cz-signal--cyan i{ background:var(--cyan); }
.cz-signal--amber{ background:rgba(245,158,11,.12); color:#92580a; border:1px solid rgba(245,158,11,.22); }
.cz-signal--amber i{ background:var(--amber); }
/* place & stagger via inline style or these helpers */
.cz-signal:nth-child(1){ left:8%;  animation-delay:0s; }
.cz-signal:nth-child(2){ left:36%; animation-delay:1.1s; }
.cz-signal:nth-child(3){ left:60%; animation-delay:.5s; }
.cz-signal:nth-child(4){ left:24%; animation-delay:2s; }
.cz-signal:nth-child(5){ left:70%; animation-delay:1.6s; }
@keyframes cz-floatup{ 0%{ opacity:0; transform:translateY(0); } 14%{ opacity:1; } 80%{ opacity:.5; }
  100%{ opacity:0; transform:translateY(-150px); } }

/* ── 12 · Live Action Card (assembles on a loop) ────────────
   See reference page for full markup. Distinct from static .acard. */
.cz-card{
  display:block; width:210px; border:2px solid transparent; border-radius:18px; overflow:hidden;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,#6366F1,#2DD4BF 55%,#22D3EE) border-box;
  box-shadow:0 20px 46px -24px rgba(99,102,241,.4); animation:cz-cardin 6s ease-in-out infinite;
}
@keyframes cz-cardin{ 0%{ opacity:0; transform:translateY(16px) scale(.94); } 12%{ opacity:1; transform:none; }
  86%{ opacity:1; transform:none; } 95%{ opacity:0; transform:translateY(-8px) scale(.97); }
  100%{ opacity:0; transform:translateY(16px) scale(.94); } }
.cz-card-hd{ display:flex; align-items:center; gap:8px; padding:9px 12px;
  background:rgba(63,61,86,.02); border-bottom:1px solid var(--line-soft); }
.cz-card-hd .cz-card-badge{ width:20px; height:20px; border-radius:6px; flex:none;
  background:linear-gradient(135deg,#6366F1,#22D3EE); color:#fff; display:flex; align-items:center; justify-content:center; }
.cz-card-hd .cz-card-badge svg{ width:11px; height:11px; }
.cz-card-hd .cz-card-tag{ font-size:10.5px; font-weight:700; letter-spacing:.04em; }
.cz-card-hd .cz-card-status{ margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:10px; color:var(--teal); font-weight:700; }
.cz-card-hd .cz-card-status i{ width:6px; height:6px; border-radius:50%; background:var(--teal); animation:cz-blinkdot 1.6s infinite; }
.cz-card-bd{ padding:12px; }
.cz-card-bd h5{ font-size:13px; font-family:var(--font-head); font-weight:600; margin-bottom:10px; line-height:1.25; }
.cz-card-impact{ border-radius:11px; padding:1.5px;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#EC4899,#F59E0B) border-box; }
.cz-card-impact .in{ padding:8px 10px; display:flex; align-items:center; justify-content:space-between; }
.cz-card-impact .lb{ font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-deep); }
.cz-card-impact .vl{ font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--cz-magenta); }

/* ── 12b · Action Card deck (variants cycle in one slot) ─────
   Several .cz-card scenarios stacked; each holds, then hands
   off to the next. Overrides the single-card cz-cardin loop. */
/* tilted stack (fan). JS toggles is-front/is-p1/is-p2/is-leaving;
   top card slides aside on hand-off. Tilt 5°, spread 44px, hold 4.2s. */
@property --cza{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes cz-bspin{ to{ --cza:360deg; } }
/* horizontal fan — front card on the right, cards fan left toward the text */
.cz-deck-wrap{ display:flex; justify-content:flex-start; }
.cz-deck{ position:relative; width:520px; max-width:100%; height:252px; }
.cz-deck .cz-card{ position:absolute; left:0; top:0; opacity:0;
  --cza:0deg;
  background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--cza),#6366F1,#22D3EE,#2DD4BF,#6366F1) border-box;
  box-shadow:10px 16px 30px -18px rgba(63,61,86,.5);
  animation:cz-bspin 9s linear infinite; transform-origin:50% 50%;
  transform:translate(304px,0) rotate(3.5deg);
  transition:transform .58s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
.cz-deck .cz-card:first-child{ opacity:1; transform:translate(0,36px) rotate(3.5deg); }
.cz-deck .cz-card.is-p4{ opacity:1; transform:translate(304px,0)    rotate(3.5deg); z-index:1; }
.cz-deck .cz-card.is-p3{ opacity:1; transform:translate(228px,9px)  rotate(3.5deg); z-index:2; }
.cz-deck .cz-card.is-p2{ opacity:1; transform:translate(152px,18px) rotate(3.5deg); z-index:3; }
.cz-deck .cz-card.is-p1{ opacity:1; transform:translate(76px,27px)  rotate(3.5deg); z-index:4; }
.cz-deck .cz-card.is-front{ opacity:1; transform:translate(0,36px)  rotate(3.5deg); z-index:5; }
.cz-deck .cz-card.is-leaving{ opacity:0; transform:translate(-58px,58px) rotate(3.5deg) scale(.98); z-index:6; }
/* uniform card size regardless of text length; impact anchored to the bottom */
.cz-deck .cz-card{ height:190px; display:flex; flex-direction:column; }
.cz-deck .cz-card .cz-card-bd{ flex:1; display:flex; flex-direction:column; }
.cz-deck .cz-card .cz-card-impact{ margin-top:auto; }
/* per-scenario impact accent */
.cz-card--svc .cz-card-impact{ background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#2DD4BF,#22D3EE) border-box; }
.cz-card--svc .cz-card-impact .vl{ color:var(--teal); }
.cz-card--exp .cz-card-impact{ background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#6366F1,#22D3EE) border-box; }
.cz-card--exp .cz-card-impact .vl{ color:var(--accent); }

/* ── Utilities used site-wide ───────────────────────────────*/
/* Ping — notification pulse dot: <span class="cz-ping"></span> */
.cz-ping{ position:relative; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--coral,#FF5A5F); }
.cz-ping::before{ content:''; position:absolute; inset:0; border-radius:50%; background:inherit; animation:cz-ping 1.8s ease-out infinite; }
@keyframes cz-ping{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.6); opacity:0; } }
/* blinking status dot: <span class="cz-dot"></span> */
.cz-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--teal); animation:cz-blinkdot 1.6s infinite; }
@keyframes cz-blinkdot{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
/* gradient progress bar: <span class="cz-progress"><i></i></span> */
.cz-progress{ display:block; width:100%; height:8px; border-radius:999px; background:rgba(99,102,241,.12); overflow:hidden; }
.cz-progress i{ display:block; height:100%; border-radius:999px; background:var(--grad); width:40%;
  animation:cz-progress 4s var(--cz-ease) infinite; }
@keyframes cz-progress{ 0%{ width:8%; } 60%,80%{ width:88%; } 100%{ width:8%; } }
/* animated gradient underline link: <a class="cz-link">…</a> */
.cz-link{ position:relative; color:var(--accent); font-weight:700; }
.cz-link::after{ content:''; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--cz-ease); }
.cz-link:hover::after{ transform:scaleX(1); }

/* ── Scroll-gated motion (driven by assets/js/motion.js) ─────
   motion.js adds .cz-io to <html>, which pauses every continuous
   animation below via --cz-play. As each component host scrolls
   ~30% into view, motion.js adds .cz-in to it → --cz-play:running
   cascades to the host, its children and pseudo-elements, so the
   animation starts on scroll-into-view (one-shot).
   Pages that load motion.css WITHOUT motion.js never get .cz-io,
   so var(--cz-play,running) falls back to running — unchanged. */
html.cz-io{ --cz-play:paused; }
.cz-in{ --cz-play:running; }
html.cz-io .cz-orb,
html.cz-io .cz-orb::before,
html.cz-io .cz-orb::after,
html.cz-io .cz-eye,
html.cz-io .cz-thinking-dots i,
html.cz-io .cz-spinner,
html.cz-io .cz-ring-fill,
html.cz-io .cz-gauge-fill,
html.cz-io .cz-gauge-needle,
html.cz-io .cz-spark-area,
html.cz-io .cz-spark-line,
html.cz-io .cz-spark-dot,
html.cz-io .cz-wire-p,
html.cz-io .cz-stage,
html.cz-io .cz-step,
html.cz-io .cz-steps-line path,
html.cz-io .cz-nebula i,
html.cz-io .cz-signal,
html.cz-io .cz-card,
html.cz-io .cz-card-status i,
html.cz-io .cz-ping::before,
html.cz-io .cz-dot,
html.cz-io .cz-progress i,
html.cz-io .iviz-tag .tee,
html.cz-io .iviz-tag .ptag,
html.cz-io .iviz-bag .item,
html.cz-io .iviz-bag .count,
html.cz-io .iviz-wave .w,
html.cz-io .iviz-coin .coinwrap,
html.cz-io .iviz-coin .chkbadge,
html.cz-io .iviz-pulse .ekg,
html.cz-io .iviz-bars .b,
html.cz-io .iviz-radar .sweep,
html.cz-io .iviz-radar .blip,
html.cz-io .iviz-heart svg,
html.cz-io .iviz-sec .draw,
html.cz-io .iviz-shield,
html.cz-io .iviz-globe .meridian,
html.cz-io .iviz-lock .keyhole,
html.cz-io .iviz-doc .lines,
html.cz-io .iviz-ai .big,
html.cz-io .iviz-ai .spark{
  animation-play-state:var(--cz-play,running);
}

/* Generic hook for page-level inline animations (not .cz-*/.iviz):
   mark any container with data-cz-io and every continuous
   animation inside it pauses until the container scrolls ~30%
   into view (motion.js then adds .cz-in and this rule stops
   applying). Under reduced-motion motion.js never adds .cz-io,
   so inline animations are left exactly as they were. */
html.cz-io [data-cz-io]:not(.cz-in) *,
html.cz-io [data-cz-io]:not(.cz-in) *::before,
html.cz-io [data-cz-io]:not(.cz-in) *::after{ animation-play-state:paused !important; }

/* ── Reduced motion — kill all Cozmo motion ─────────────────*/
@media (prefers-reduced-motion: reduce){
  .cz-orb,.cz-orb::before,.cz-orb::after,.cz-eye,.cz-thinking-dots i,.cz-spinner,
  .cz-ring-fill,.cz-gauge-fill,.cz-gauge-needle,.cz-spark-area,.cz-spark-line,.cz-spark-dot,
  .cz-wire-p,.cz-stage,.cz-step,.cz-nebula i,.cz-signal,.cz-card,.cz-card-status i,
  .cz-ping::before,.cz-dot,.cz-progress i{ animation:none !important; }
  .cz-ring-fill{ stroke-dashoffset:24; }
  .cz-gauge-fill{ stroke-dashoffset:34; }
  .cz-spark-line{ stroke-dashoffset:0; } .cz-spark-area,.cz-spark-dot{ opacity:1; }
  .cz-card,.cz-signal,.cz-wire-p{ opacity:1; transform:none; }
  .cz-deck{ height:auto; } .cz-deck .cz-card{ position:relative; transform:none !important; }
  .cz-deck .cz-card:not(:first-child){ display:none; }
  .cz-deck .cz-card .cz-card-bd{ opacity:1 !important; }
  .cz-progress i{ width:70%; }
}

/* ============================================================
   Industry page heroes — split hero + one bespoke icon each.
   Used on /industries/*  ·  brand palette only.
   Needs an inline <svg><defs> with #czBlue on the page.
   ============================================================ */
.hero-split .hero-ctas{ justify-content:flex-start; }
.ind-stage{ position:relative; padding:10px; min-height:300px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; }
.ind-cap{ font-size:13.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-align:center; }
.ind-vizwrap{ flex:1; display:flex; align-items:center; justify-content:center; min-height:150px; }
.ind-pill{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; background:var(--panel);
  box-shadow:0 12px 28px -16px rgba(99,102,241,.55); font-family:var(--font-head); font-weight:700; color:var(--accent-deep); font-size:14px; }
.ind-pill b{ color:var(--cz-magenta); }
.iviz{ position:relative; display:inline-flex; align-items:center; justify-content:center; }

/* retail & fashion — shirt (fashion) + swinging price tag (retail) */
.iviz-tag{ gap:12px; }
.iviz-tag .tee{ animation:czi-teebob 3.6s ease-in-out infinite; transform-origin:top center; }
.iviz-tag .ptag{ transform-origin:top left; animation:czi-tagswing 3.4s ease-in-out infinite; }
@keyframes czi-teebob{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-5px) rotate(2deg) } }
@keyframes czi-tagswing{ 0%,100%{ transform:rotate(-9deg) } 50%{ transform:rotate(9deg) } }

/* automotive — recovery-speed gauge (reuse .cz-gauge, sped up) */
.iviz-auto .cz-gauge-fill, .iviz-auto .cz-gauge-needle{ animation-duration:2.6s; }

/* e-commerce — bag with an add-to-cart count badge */
.iviz-bag{ position:relative; }
.iviz-bag .item{ position:absolute; left:31px; top:0; width:13px; height:13px; border-radius:4px;
  background:var(--grad); opacity:0; z-index:1; animation:czi-bagdrop 3.2s ease-in infinite; }
.iviz-bag .count{ position:absolute; right:2px; top:-2px; min-width:22px; height:22px; padding:0 5px; border-radius:999px;
  background:var(--cz-magenta); color:#fff; font-family:var(--font-head); font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px -3px rgba(236,72,153,.55);
  transform:scale(0); animation:czi-countpop 3.2s ease infinite; z-index:2; }
@keyframes czi-bagdrop{ 0%{ top:0; opacity:0 } 12%{ opacity:1 } 48%{ top:26px; opacity:1 } 56%,100%{ top:30px; opacity:0 } }
@keyframes czi-countpop{ 0%,46%{ transform:scale(0) } 56%{ transform:scale(1.3) } 64%,92%{ transform:scale(1) } 100%{ transform:scale(1) } }

/* telecom — call waveform, churn risk flagged */
.iviz-wave{ align-items:center; gap:6px; height:84px; }
.iviz-wave .w{ width:6px; border-radius:3px; background:var(--accent); height:50px; transform-origin:center; transform:scaleY(.35); animation:czi-wav 1.5s ease-in-out infinite; }
.iviz-wave .w.hot{ background:var(--cz-magenta); }
@keyframes czi-wav{ 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(1.25) } }

/* financial — dollar coin + compliance check */
.iviz-coin{ position:relative; }
.iviz-coin .coinwrap{ display:inline-flex; animation:czi-coinpulse 3.6s ease-in-out infinite; transform-origin:center; }
.iviz-coin .dollar{ font-family:var(--font-head); font-weight:700; fill:url(#czBlue); }
.iviz-coin .chkbadge{ position:absolute; right:-6px; top:-6px; width:28px; height:28px; border-radius:50%;
  background:var(--teal); color:#fff; font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 12px -3px rgba(45,212,191,.7); opacity:0; animation:czi-coinchk 3.6s ease infinite; }
@keyframes czi-coinpulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }
@keyframes czi-coinchk{ 0%,50%{ opacity:0; transform:scale(.3) } 62%,90%{ opacity:1; transform:scale(1) } 96%,100%{ opacity:0 } }

/* healthcare — patient pulse recovers */
.iviz-pulse{ position:relative; }
.iviz-pulse svg{ width:190px; height:76px; overflow:visible; }
.iviz-pulse .ekg{ fill:none; stroke:url(#czBlue); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:230; stroke-dashoffset:230; animation:czi-ekg 4.6s ease infinite; }
.iviz-pulse .flat{ fill:none; stroke:rgba(99,102,241,.30); stroke-width:2.8; stroke-linecap:round; }
.iviz-pulse .revive{ position:absolute; right:2px; top:10px; }
@keyframes czi-ekg{ 0%{ stroke-dashoffset:230 } 42%,86%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:230 } }

/* operational consistency — laggards rise past the benchmark */
.iviz-bars{ position:relative; align-items:flex-end; gap:13px; height:120px; }
.iviz-bars .b{ width:22px; height:104px; border-radius:6px 6px 3px 3px; transform-origin:bottom; transform:scaleY(.5);
  background:var(--grad); animation:czi-bar 4.2s var(--cz-ease) infinite; }
.iviz-bars .b.lo{ animation-name:czi-barlo; }
.iviz-bars .bench{ position:absolute; left:-8px; right:-8px; bottom:50px; border-top:2px dashed rgba(99,102,241,.55); }
@keyframes czi-bar{ 0%,10%{ transform:scaleY(.5) } 50%,92%{ transform:scaleY(1) } 100%{ transform:scaleY(.5) } }
@keyframes czi-barlo{ 0%,10%{ transform:scaleY(.3) } 44%{ transform:scaleY(.3) } 52%,92%{ transform:scaleY(.94) } 100%{ transform:scaleY(.3) } }

/* reputation protection — radar detects a risk signal early */
.iviz-radar{ position:relative; width:132px; height:132px; }
.iviz-radar .ring{ position:absolute; border:2px solid rgba(99,102,241,.20); border-radius:50%; }
.iviz-radar .r1{ inset:0; } .iviz-radar .r2{ inset:26px; border-color:rgba(99,102,241,.14); } .iviz-radar .r3{ inset:52px; border-color:rgba(99,102,241,.10); }
.iviz-radar .sweep{ position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(34,211,238,.30), rgba(99,102,241,.05) 70deg, transparent 92deg);
  animation:czi-radar 3s linear infinite; }
.iviz-radar .blip{ position:absolute; top:25%; left:62%; width:14px; height:14px; border-radius:50%; background:var(--cz-magenta);
  box-shadow:0 0 0 6px rgba(236,72,153,.18); animation:czi-blip 3s ease-in-out infinite; }
@keyframes czi-radar{ to{ transform:rotate(360deg) } }
@keyframes czi-blip{ 0%,18%{ opacity:0; transform:scale(.3) } 28%{ opacity:1; transform:scale(1.15) } 62%{ opacity:1; transform:scale(1) } 82%,100%{ opacity:0; transform:scale(.6) } }

/* retention — a beating heart (keep customers) */
.iviz-heart svg{ animation:czi-beat 2.2s ease-in-out infinite; transform-origin:center; }
@keyframes czi-beat{ 0%,100%{ transform:scale(1) } 12%{ transform:scale(1.16) } 26%{ transform:scale(1.02) } 40%{ transform:scale(1.11) } 56%{ transform:scale(1) } }

@media(max-width:860px){ .ind-stage{ min-height:230px; } }

/* ============================================================
   SECURITY CONTROL ICONS  (.iviz-sec-*)
   Same static SVGs as before, gently brought to life.
   Draw paths use pathLength="1" so dash maths stay simple.
   ============================================================ */
.iviz-sec svg{ overflow:visible; }
.iviz-sec .draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:czi-secdraw 4s ease-in-out infinite; }
@keyframes czi-secdraw{ 0%,28%{ stroke-dashoffset:1; } 52%,90%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:1; } }

/* ISO 27001 — shield breathes while the check writes itself in */
.iviz-shield{ animation:czi-secbreath 4s ease-in-out infinite; transform-origin:center; }
@keyframes czi-secbreath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

/* GDPR — the meridian sweeps, so the globe reads as turning */
.iviz-globe .meridian{ transform-box:fill-box; transform-origin:center; animation:czi-globe 5s ease-in-out infinite; }
@keyframes czi-globe{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.1); } }

/* Encryption — the keyhole pulses like it is actively sealing */
.iviz-lock .keyhole{ transform-box:fill-box; transform-origin:center; animation:czi-lockpulse 2.4s ease-in-out infinite; }
@keyframes czi-lockpulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.4); opacity:1; } }

/* Audit trail — lines scan/write in top-to-bottom */
.iviz-doc .lines{ stroke-dasharray:1; stroke-dashoffset:1; animation:czi-docscan 4.4s ease infinite; }
@keyframes czi-docscan{ 0%,14%{ stroke-dashoffset:1; } 60%,88%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:1; } }

/* Responsible AI — big star drifts round, small spark twinkles */
.iviz-ai .big{ transform-box:fill-box; transform-origin:center; animation:czi-airot 12s linear infinite; }
.iviz-ai .spark{ transform-box:fill-box; transform-origin:center; animation:czi-twinkle 2.6s ease-in-out infinite; }
@keyframes czi-airot{ to{ transform:rotate(360deg); } }
@keyframes czi-twinkle{ 0%,100%{ transform:scale(.6) rotate(0deg); opacity:.5; } 50%{ transform:scale(1.15) rotate(45deg); opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .iviz-tag .tee,.iviz-tag .ptag,.iviz-bag .item,.iviz-bag .count,.iviz-wave .w,
  .iviz-coin .coinwrap,.iviz-coin .chkbadge,.iviz-pulse .ekg,
  .iviz-bars .b,.iviz-radar .sweep,.iviz-radar .blip,.iviz-heart svg{ animation:none !important; }
  .iviz-pulse .ekg{ stroke-dashoffset:0; } .iviz-bag .count{ transform:scale(1); }
  .iviz-bars .b{ transform:scaleY(.85); } .iviz-radar .blip{ opacity:1; transform:scale(1); }

  .iviz-shield,.iviz-globe .meridian,.iviz-lock .keyhole,
  .iviz-ai .big,.iviz-ai .spark,.iviz-sec .draw,.iviz-doc .lines{ animation:none !important; }
  .iviz-sec .draw,.iviz-doc .lines{ stroke-dashoffset:0; }
  .iviz-globe .meridian{ transform:scaleX(1); }
}