/* cdt-anim.css: shared styles for the animated explainers on capital-tech.com (used with js/cdt-anim.js).
   Each explainer lives in partials/<name>.html and is inserted by build_site.py. Page-specific art styles stay in the partial. */
/* Layout: one navy "stage" card; 5 chapter segments on top, scenes stacked in one grid cell so height never jumps */
.hc{
  --hc-navy:#12304F; --hc-deep:#0C2440; --hc-steel:#2F6FA8; --hc-amber:#E0A12E; --hc-sky:#9CC3E8;
  --hc-ink:#F3F7FB; --hc-muted:#B3C6DA; --hc-line:rgba(156,195,232,.22); --hc-red:#E8705C; --hc-paper:#F7F9FC;
  --hc-display:"Sora","Segoe UI",system-ui,-apple-system,sans-serif;
  --hc-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  position:relative; color:var(--hc-ink); font-family:var(--hc-body); line-height:1.5;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(47,111,168,.45), transparent 60%),
    linear-gradient(var(--hc-line) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, var(--hc-line) 1px, transparent 1px) 0 0/32px 32px,
    var(--hc-navy);
  background-blend-mode:normal, soft-light, soft-light, normal;
  border-radius:18px; padding:clamp(16px,3.2vw,36px); overflow:hidden;
  box-shadow:0 18px 50px -20px rgba(12,36,64,.55);
}
.hc *,.hc *::before,.hc *::after{box-sizing:border-box}
.hc h3,.hc p,.hc ul,.hc ol{margin:0}
.hc ul,.hc ol{padding:0;list-style:none}

/* chapter segments */
.hc-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:clamp(14px,2.4vw,26px)}
.hc-chap{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:0;border-radius:6px}
.hc-chap:focus-visible{outline:2px solid var(--hc-amber);outline-offset:4px}
.hc-chap b{font:600 12px/1.2 var(--hc-display);color:var(--hc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.hc-chap small{font:500 11px/1 var(--hc-body);color:var(--hc-muted);opacity:.8}
.hc-chap[aria-current="step"] b{color:var(--hc-ink)}
.hc-chap[aria-current="step"] small{color:var(--hc-amber);opacity:1}
.hc-seg{height:4px;border-radius:4px;background:rgba(156,195,232,.22);overflow:hidden}
.hc-seg i{display:block;height:100%;width:0;background:var(--hc-amber);border-radius:inherit}

/* scenes */
.hc-scenes{display:grid}
.hc-scene{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .35s ease, visibility 0s .35s;min-width:0}
.hc-scene.is-on{visibility:visible;opacity:1;transition:opacity .35s ease}
.hc-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(16px,3vw,44px);align-items:center}
.hc-art svg{width:100%;height:auto;display:block;max-height:340px;overflow:visible}
.hc-copy{min-width:0;display:flex;flex-direction:column;gap:12px}
.hc-chip{align-self:flex-start;font:600 12px/1 var(--hc-display);letter-spacing:.06em;text-transform:uppercase;
  color:var(--hc-deep);background:var(--hc-amber);padding:7px 11px;border-radius:999px}
.hc-chip.alt{background:var(--hc-sky)}
.hc h3{font:700 clamp(22px,2.6vw,30px)/1.15 var(--hc-display);letter-spacing:-.01em;text-wrap:balance;color:#fff}
.hc-lede{color:var(--hc-muted);font-size:clamp(15px,1.4vw,16.5px);max-width:42ch}
.hc-list{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.hc-list li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:15px}
.hc-list li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:-1px;
  background:var(--hc-steel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.hc-list li.star::before{background-color:var(--hc-amber)}
.hc-note{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--hc-sky);
  border:1px dashed rgba(156,195,232,.5);border-radius:10px;padding:7px 11px;align-self:flex-start}
.hc-note svg{flex:none}

/* SVG art */
.hc .s-stroke{fill:none;stroke:var(--hc-sky);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hc .s-fill{fill:rgba(156,195,232,.12);stroke:var(--hc-sky);stroke-width:2.5;stroke-linejoin:round}
.hc .s-paper{fill:var(--hc-paper)}
.hc .s-lbl{fill:var(--hc-muted);font:500 11.5px var(--hc-body);text-anchor:middle}
.hc .s-lbl.strong{fill:#fff;font:600 13px var(--hc-display)}
.hc .s-perim{fill:none;stroke:var(--hc-sky);stroke-width:1.6;stroke-dasharray:5 7;opacity:.6}
.hc .s-ok circle{fill:#3FAE7A}.hc .s-warn circle{fill:var(--hc-amber)}
.hc .s-ok path,.hc .s-warn path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hc .s-bubble rect{rx:10}
.hc .s-bubble.g rect{fill:var(--hc-steel)} .hc .s-bubble.y rect{fill:rgba(243,247,251,.92)}
.hc .s-bubble text{font:500 11px var(--hc-body)} .hc .s-bubble.g text{fill:#fff} .hc .s-bubble.y text{fill:var(--hc-deep)}

/* fix list */
.hc-fixes{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.hc-fix{display:grid;grid-template-columns:86px 1fr auto;gap:10px;align-items:center;background:rgba(243,247,251,.07);
  border:1px solid var(--hc-line);border-radius:10px;padding:8px 10px;font-size:14px}
.hc-fix em{font:600 11px/1 var(--hc-display);font-style:normal;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:6px 0;border-radius:6px;color:var(--hc-deep)}
.hc-fix .u{background:var(--hc-red)} .hc-fix .s{background:var(--hc-amber)} .hc-fix .d{background:var(--hc-sky)}
.hc-fix span{min-width:0} .hc-fix small{color:var(--hc-muted);font-variant-numeric:tabular-nums;font-size:13px}

/* credit scene */
.hc-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.hc-center .hc-chip{align-self:center}
.hc-eq{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(8px,1.6vw,18px);align-items:center;width:100%;max-width:820px;margin-top:8px}
.hc-tile{background:rgba(243,247,251,.07);border:1px solid var(--hc-line);border-radius:14px;padding:clamp(12px,2vw,20px) 10px;min-width:0}
.hc-tile small{display:block;font-size:13px;color:var(--hc-muted);line-height:1.3}
.hc-tile strong{display:block;font:800 clamp(28px,4.4vw,46px)/1.1 var(--hc-display);font-variant-numeric:tabular-nums;margin:6px 0 2px;color:#fff}
.hc-tile.credit{border-color:rgba(224,161,46,.6);background:rgba(224,161,46,.12)}
.hc-tile.credit strong{color:var(--hc-amber)}
.hc-tile.result{background:var(--hc-paper);border-color:var(--hc-paper)}
.hc-tile.result small{color:#4A627C} .hc-tile.result strong{color:var(--hc-navy)}
.hc-op{font:700 clamp(24px,3.4vw,38px)/1 var(--hc-display);color:var(--hc-sky)}
.hc-sum{color:var(--hc-muted);max-width:56ch}
.hc-sum b{color:#fff;font-weight:600}

/* decide scene */
.hc-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:860px;margin-top:6px;text-align:left}
.hc-path{background:rgba(243,247,251,.07);border:1px solid var(--hc-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.hc-path .k{font:600 11.5px/1 var(--hc-display);letter-spacing:.06em;text-transform:uppercase;color:var(--hc-amber)}
.hc-path h4{margin:0;font:600 16px/1.25 var(--hc-display);color:#fff}
.hc-path p{font-size:13.5px;color:var(--hc-muted)}
.hc-path .keep{margin-top:auto;font-size:13px;color:var(--hc-sky);border-top:1px dashed var(--hc-line);padding-top:8px}
.hc-cta{display:inline-flex;align-items:center;gap:8px;background:var(--hc-amber);color:var(--hc-deep);font:700 15px/1 var(--hc-display);
  text-decoration:none;padding:14px 20px;border-radius:10px;margin-top:4px}
.hc-cta:hover{filter:brightness(1.06)} .hc-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* controls */
.hc-ctrl{display:flex;align-items:center;gap:10px;margin-top:clamp(14px,2.2vw,22px);flex-wrap:wrap}
.hc-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--hc-display);color:var(--hc-ink);
  border:1px solid var(--hc-line);border-radius:999px;padding:8px 13px;background:rgba(243,247,251,.06)}
.hc-btn:hover{background:rgba(243,247,251,.12)} .hc-btn:focus-visible{outline:2px solid var(--hc-amber);outline-offset:2px}
.hc-ctrl .hc-time{margin-left:auto;font-size:12.5px;color:var(--hc-muted)}
.hc-btn.hc-voice{background:var(--hc-amber);color:var(--hc-deep);border-color:var(--hc-amber)}
.hc-btn.hc-voice[aria-pressed="true"]{background:rgba(243,247,251,.06);color:var(--hc-ink);border-color:var(--hc-line)}
.hc-cap{margin:12px 0 0;min-height:3em;font-size:14.5px;line-height:1.45;color:var(--hc-ink);background:rgba(12,36,64,.55);
  border-radius:10px;padding:9px 13px;border-left:3px solid var(--hc-amber)}
.hc-cap[hidden]{display:none}

/* ---- motion: each element rests visible; animations only start it from hidden when its scene comes on ---- */
@keyframes hc-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes hc-fade{from{opacity:0}}
@keyframes hc-pop{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes hc-orbit{to{transform:rotate(360deg)}}
@keyframes hc-draw{from{stroke-dashoffset:var(--len,300)}}
@keyframes hc-scan{0%{transform:translateY(0);opacity:0}12%{opacity:.9}88%{opacity:.9}100%{transform:translateY(165px);opacity:0}}
@keyframes hc-glow{0%,100%{opacity:0}50%{opacity:1}}
@keyframes hc-slide{0%{opacity:0;transform:translateX(-40px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes hc-strike{from{transform:scaleX(0)}}
.hc-scene.is-on .a-rise{animation:hc-rise .6s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) * var(--k,1)) both}
.hc-scene.is-on .a-fade{animation:hc-fade .6s ease calc(var(--d,0s) * var(--k,1)) both}
.hc-scene.is-on .a-pop{animation:hc-pop .5s cubic-bezier(.3,.7,.3,1.2) calc(var(--d,0s) * var(--k,1)) both;transform-box:fill-box;transform-origin:center}
.hc-scene.is-on .a-draw{stroke-dasharray:var(--len,300);animation:hc-draw var(--t,1.2s) ease-in-out calc(var(--d,0s) * var(--k,1)) both}
.hc-scene.is-on .a-slide{animation:hc-slide .7s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) * var(--k,1)) both}
.hc-scene.is-on .a-strike{animation:hc-strike .5s ease calc(var(--d,0s) * var(--k,1)) both;transform-origin:left center}
.hc .s-mag{transform-box:view-box;transform-origin:200px 150px}
.hc-scene.is-on .s-mag{animation:hc-fade .4s ease .2s both, hc-orbit calc(4s * var(--k,1)) cubic-bezier(.45,.05,.55,.95) calc(.5s * var(--k,1)) both}
.hc .s-scan{opacity:0}
.hc-scene.is-on .s-scan{animation:hc-scan 1.8s ease-in-out calc(2.6s * var(--k,1)) 2 both}
.hc .s-ping{opacity:0}
.hc-scene.is-on .s-ping{animation:hc-glow .9s ease calc(var(--d,0s) * var(--k,1)) 1 both}
.hc.is-paused *{animation-play-state:paused!important}

@media (max-width:760px){
  .hc-split{grid-template-columns:1fr}
  .hc-art svg{max-height:210px;margin:0 auto}
  .hc-chap small{display:none}
  .hc-chap b{font-size:11px}
  .hc-paths{grid-template-columns:1fr}
  .hc-path{padding:11px 12px}
  .hc-path p{display:none}
  .hc-eq{grid-template-columns:1fr;gap:6px}
  .hc-op{font-size:22px}
  .hc-tile{padding:10px}
  .hc-ctrl .hc-time{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hc *{animation:none!important;transition:none!important}
}

/* ---- shared additions ---- */
.hc-center{justify-content:center}
.hc-chip.bad{background:var(--hc-red)}
.hc-chip.good{background:#4CC38A}
.hc-list li.bad::before{background:var(--hc-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7.5 7.5l7 7M14.5 7.5l-7 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat}
@keyframes hc-key{0%{opacity:0;transform:translateX(-46px)}25%{opacity:1}100%{transform:none}}
.hc-scene.is-on .a-key{animation:hc-key 1.3s cubic-bezier(.3,.6,.3,1) calc(var(--d,0s) * var(--k,1)) both}
@keyframes hc-out{to{opacity:0}}
.hc-scene.is-on .a-out{animation:hc-out .3s ease calc(var(--d,0s) * var(--k,1)) both}
@keyframes hc-fly{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(var(--fly,200px))}}
.hc .a-fly{opacity:0}
.hc-scene.is-on .a-fly{animation:hc-fly 1.6s ease-in-out calc(var(--d,0s) * var(--k,1)) both}
@keyframes hc-mark{from{background-size:0 100%}}
.hc-scene.is-on .a-mark{animation:hc-mark .6s ease calc(var(--d,0s) * var(--k,1)) both}
@media (prefers-reduced-motion:reduce){.hc .a-out{opacity:0}}