/* ============================================================
   CAPABILITY CARD BACKS — inline-SVG visualisations
   Light, premium, enterprise. CSS animations only (no JS, no
   raster, no iframe). The "player" recurs across all five cards.
   ============================================================ */

/* Light surface that covers the dark .cap-card__back */
.cap-viz{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:16px 16px 14px;
  border-radius:inherit;
  background:linear-gradient(160deg,#f6faff 0%,#e9f1fc 100%);
  color:#0a1330;
  overflow:hidden;
}
/* subtle dot grid for technical texture */
.cap-viz::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(17,107,248,.06) 1px,transparent 1px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 25%,#000 50%,transparent 90%);
          mask-image:radial-gradient(120% 90% at 50% 25%,#000 50%,transparent 90%);
}
.cap-viz__svg{position:relative;z-index:1;flex:1;width:100%;height:auto;min-height:0;display:block;}

/* ---- Shared labels (max 3) ---- */
.cap-viz__labels{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin-top:10px;
}
.cap-viz__label{
  font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.02em;
  color:#274a86;background:#ffffff;border:1px solid #d3e1f5;
  border-radius:var(--r-pill);padding:4px 9px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(10,19,48,.05);
}
.cap-viz__label--cyan{color:#0b7fa8;border-color:rgba(33,188,238,.5);background:#eefbff;}
.cap-viz__label--ok{color:#1d8a4e;border-color:rgba(22,192,96,.45);background:#effbf4;}
.cap-viz__label--warn{color:#c0392b;border-color:rgba(255,95,87,.4);background:#fff1f0;}

/* ---- Shared SVG primitives ---- */
.cv-node{fill:#ffffff;stroke:#cdddf2;stroke-width:1.4;}
.cv-node-lbl{fill:#5b6b86;font-family:var(--font-mono);font-size:8px;font-weight:600;letter-spacing:.04em;text-anchor:middle;}
.cv-player-box{fill:#ffffff;stroke:#116BF8;stroke-width:1.6;}
.cv-player-play{fill:#116BF8;}
.cv-player-track{fill:#dbe7f8;}
.cv-player-bar{fill:#21BCEE;}
.cv-line{stroke:#c4d5ee;stroke-width:1.6;fill:none;}
.cv-line-dim{stroke:#cfdcf0;stroke-width:1.6;fill:none;stroke-dasharray:3 4;}
.cv-flow{stroke:#21BCEE;stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:5 7;}
.cv-flow-blue{stroke:#116BF8;stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:5 7;}
.cv-flow-ok{stroke:#16c060;stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:5 7;animation:cv-dash 1.3s linear infinite;}
.cv-val{font-family:var(--font-mono);font-size:8px;font-weight:700;text-anchor:middle;}
.cv-log text{font-family:var(--font-mono);}

/* ============================================================
   ANIMATIONS (subtle, looping)
   ============================================================ */
@keyframes cv-dash      { to { stroke-dashoffset:-48; } }
@keyframes cv-dash-slow  { to { stroke-dashoffset:-24; } }
@keyframes cv-travel{
  0%   { transform:translate(0,0); opacity:0; }
  12%  { opacity:1; }
  82%  { opacity:1; }
  100% { transform:translate(var(--tx,0),var(--ty,0)); opacity:0; }
}
@keyframes cv-fade      { 0%,100%{opacity:.25;} 50%{opacity:1;} }
@keyframes cv-fade-soft { 0%,100%{opacity:.85;} 50%{opacity:.35;} }
@keyframes cv-barDown   { 0%{transform:scaleY(1);} 50%{transform:scaleY(.32);} 100%{transform:scaleY(1);} }
@keyframes cv-barUp     { 0%{transform:scaleY(.32);} 50%{transform:scaleY(1);} 100%{transform:scaleY(.32);} }
@keyframes cv-fill      { 0%{transform:scaleX(0);} 70%{transform:scaleX(1);} 100%{transform:scaleX(1);} }
@keyframes cv-pop       { 0%{transform:scale(0);opacity:0;} 60%{transform:scale(1.12);opacity:1;} 100%{transform:scale(1);opacity:1;} }
@keyframes cv-rise      { 0%{transform:translateY(6px);opacity:0;} 30%{opacity:1;} 80%{opacity:1;} 100%{transform:translateY(-10px);opacity:0;} }
@keyframes cv-pulse     { 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }
@keyframes cv-blink     { 0%,100%{opacity:1;} 50%{opacity:.2;} }
@keyframes cv-block     {
  0%   { transform:translateX(0); opacity:0; }
  20%  { opacity:1; }
  55%  { transform:translateX(var(--bx,-40px)); opacity:1; }
  62%  { transform:translateX(calc(var(--bx,-40px) + 3px)); }
  100% { transform:translateX(var(--bx,-40px)); opacity:0; }
}
@keyframes cv-route { 0%,28%{opacity:1;} 40%,100%{opacity:0;} }

/* packet helpers */
.cv-packet{transform-box:fill-box;}
.cv-packet--p1{animation:cv-travel 2.4s var(--ease,ease-in-out) infinite;}
.cv-packet--p2{animation:cv-travel 2.4s var(--ease,ease-in-out) .5s infinite;}
.cv-packet--p3{animation:cv-travel 2.4s var(--ease,ease-in-out) 1s infinite;}
.cv-cdn-packet{transform-box:fill-box;animation:cv-travel 3.2s ease-in infinite;opacity:.5;}

/* flow line speeds */
.cv-flow{animation:cv-dash 1.1s linear infinite;}
.cv-flow-blue{animation:cv-dash 1.3s linear infinite;}
.cv-line-dim{animation:cv-dash-slow 2.6s linear infinite;opacity:.7;}

/* bars */
.cv-bar{transform-box:fill-box;transform-origin:50% 100%;}
.cv-bar--down{animation:cv-barDown 5s ease-in-out infinite;}
.cv-bar--up{animation:cv-barUp 5s ease-in-out infinite;}

/* card 3 routes */
.cv-route-hi{stroke:#21BCEE;stroke-width:2.4;fill:none;stroke-linecap:round;opacity:0;}
.cv-route-hi--a{animation:cv-route 6s ease-in-out infinite;}
.cv-route-hi--b{animation:cv-route 6s ease-in-out 2s infinite;}
.cv-route-hi--c{animation:cv-route 6s ease-in-out 4s infinite;}
.cv-node--active-a{animation:cv-fade 6s ease-in-out infinite;}
.cv-node--active-b{animation:cv-fade 6s ease-in-out 2s infinite;}
.cv-node--active-c{animation:cv-fade 6s ease-in-out 4s infinite;}
.cv-log{opacity:0;animation:cv-fade 4s ease-in-out infinite;}

/* card 4 */
.cv-valid-flow{animation:cv-dash 1.3s linear infinite;}
.cv-block-packet{transform-box:fill-box;animation:cv-block 3s ease-in-out infinite;}
.cv-block-x{transform-box:fill-box;transform-origin:center;animation:cv-pulse 3s ease-in-out infinite;}
.cv-shield-glow{transform-box:fill-box;transform-origin:center;animation:cv-pulse 4s ease-in-out infinite;}

/* card 5 */
.cv-fillbar{transform-box:fill-box;transform-origin:0% 50%;animation:cv-fill 4s ease-in-out infinite;}
.cv-coin{transform-box:fill-box;transform-origin:center;}
.cv-coin--1{animation:cv-rise 4s ease-in-out infinite;}
.cv-coin--2{animation:cv-rise 4s ease-in-out 1s infinite;}
.cv-coin--3{animation:cv-rise 4s ease-in-out 2s infinite;}
.cv-badge{transform-box:fill-box;transform-origin:center;opacity:0;animation:cv-pop 4s ease-in-out 2.6s infinite;}
.cv-share{transform-box:fill-box;animation:cv-travel 2.6s ease-in-out infinite;}

/* generic pulsing accent dot */
.cv-livedot{transform-box:fill-box;transform-origin:center;animation:cv-blink 1.4s ease-in-out infinite;}

/* ============================================================
   REDUCED MOTION — hold a clean static state
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .cap-viz *{animation:none !important;}
  .cv-bar--down{transform:scaleY(.55);}
  .cv-bar--up{transform:scaleY(.85);}
  .cv-fillbar{transform:scaleX(.7);}
  .cv-route-hi--a{opacity:1;}
  .cv-badge,.cv-coin{opacity:1;}
  .cv-packet,.cv-cdn-packet,.cv-share,.cv-block-packet{opacity:0;}
}

/* Small cards: shrink labels a touch */
@media (max-width:640px){
  .cap-viz__label{font-size:.58rem;padding:3px 8px;}
  .cap-viz{padding:14px 12px 12px;}
}