/* Srisha practice illustrations. Every selector is scoped to .viz. No JS: the page toggles .is-active. */
.viz{
  --v-line:rgba(184,196,214,.14);--v-text:#FFFFFF;--v-sec:#B8C4D6;
  --v-blue:#2F6FE0;--v-blue-s:rgba(47,111,224,.18);
  --v-gold:#E3A73F;--v-gold-s:rgba(227,167,63,.16);
  --v-warn:#F07A5A;--v-warn-s:rgba(240,122,90,.18);
  --v-ease:cubic-bezier(.16,1,.3,1);
  position:relative;display:block;width:100%;aspect-ratio:5/4;margin:0;overflow:hidden;
  border-radius:24px;color:var(--v-text);
  background-color:#0B1D38;
  background-image:radial-gradient(120% 100% at 0% 0%,#12284A 0%,#0B1D38 62%);
}
.viz svg{display:block;width:100%;height:100%}

/* ---------- Type ---------- */
.viz text{font-family:var(--f-body,"Hanken Grotesk",system-ui,sans-serif);font-size:12px;fill:var(--v-text)}
.viz .m{font-family:var(--f-mono,"IBM Plex Mono",ui-monospace,monospace);font-size:11px;letter-spacing:.08em;fill:var(--v-sec)}
.viz .m.s{font-size:10px;letter-spacing:.06em}
.viz .mid{text-anchor:middle}
.viz .end{text-anchor:end}
.viz .lab,.viz .nt{fill:var(--v-text)}
.viz .gold{fill:var(--v-gold)}
.viz .warn{fill:var(--v-warn)}
.viz .t{font-size:11px;fill:var(--v-sec)}
.viz .t.gold{fill:var(--v-gold);font-weight:600}
.viz .ct{font-size:11px;font-weight:500;fill:var(--v-gold);text-anchor:middle}
.viz .bang{font-family:var(--f-display,"Bricolage Grotesque",system-ui,sans-serif);font-size:19px;font-weight:700;fill:var(--v-warn);text-anchor:middle}

/* ---------- Shared shapes ---------- */
.viz .pill{fill:none;stroke:rgba(184,196,214,.38);stroke-width:1}
.viz .pill.pill--gold{fill:var(--v-gold-s);stroke:var(--v-gold)}
.viz .chip{fill:var(--v-gold-s);stroke:var(--v-gold);stroke-width:1}
.viz .chip.chip--warn{fill:var(--v-warn-s);stroke:var(--v-warn)}
.viz .gl{fill:none;stroke:var(--v-line);stroke-width:1}
.viz .band{fill:rgba(184,196,214,.045);stroke:none}

/* ---------- Motion primitives (pre-animation state, then .is-active plays) ---------- */
.viz .fade{opacity:0}
.viz .rise{opacity:0;transform:translateY(8px)}
.viz .slide{opacity:0;transform:translateX(-12px)}
.viz .pop{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center}
.viz .draw{stroke-dasharray:1 2;stroke-dashoffset:1}
.viz .day{opacity:0}
.viz.is-active .fade{animation:v-fade var(--t,.6s) var(--e,var(--v-ease)) var(--d,0s) both}
.viz.is-active .rise{animation:v-rise var(--t,.7s) var(--e,var(--v-ease)) var(--d,0s) both}
.viz.is-active .slide{animation:v-slide var(--t,.7s) var(--e,var(--v-ease)) var(--d,0s) both}
.viz.is-active .pop{animation:v-pop var(--t,.6s) var(--e,var(--v-ease)) var(--d,0s) both}
.viz.is-active .draw{animation:v-draw var(--t,.9s) var(--e,cubic-bezier(.45,0,.2,1)) var(--d,0s) both}
.viz.is-active .day{animation:v-fade .5s var(--v-ease) calc(var(--i,0) * .04s) both}
@keyframes v-fade{to{opacity:1}}
@keyframes v-rise{to{opacity:1;transform:none}}
@keyframes v-slide{to{opacity:1;transform:none}}
@keyframes v-pop{to{opacity:1;transform:scale(1)}}
@keyframes v-draw{to{stroke-dashoffset:0}}
@keyframes v-out{to{opacity:0}}

/* ---------- 0 Turnaround ---------- */
.viz .ref{fill:none;stroke:rgba(184,196,214,.3);stroke-width:1;stroke-dasharray:2 4;stroke-linecap:round}
.viz .ln-dash{fill:none;stroke:var(--v-sec);stroke-width:1.5;stroke-dasharray:5 6;stroke-linecap:round}
.viz .ln-gold{fill:none;stroke:var(--v-gold);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.viz .mk{fill:none;stroke:#fff;stroke-width:6}
.viz .area{fill:var(--v-gold-s);stroke:none}
.viz .dot{fill:var(--v-gold);stroke:#0B1D38;stroke-width:2;filter:drop-shadow(0 0 5px rgba(227,167,63,.45))}
.viz .ring{fill:none;stroke:var(--v-gold);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.viz.is-active .ring{animation:v-ring 2.4s cubic-bezier(.2,.6,.3,1) 2.1s infinite}
@keyframes v-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.6)}}
.viz .ld{fill:none;stroke:var(--v-gold);stroke-width:1;stroke-linecap:round}

/* ---------- 1 Organisation design ---------- */
.viz .node{transform:translate(var(--dx,0px),var(--dy,0px))}
.viz.is-active .node{animation:v-move var(--t,1s) var(--v-ease) var(--d,0s) both}
@keyframes v-move{from{transform:translate(var(--dx,0px),var(--dy,0px))}to{transform:translate(0,0)}}
.viz .nb{fill:#0B1D38;stroke:none}
.viz .nf{stroke-width:1.2}
.viz .nf--board{fill:rgba(184,196,214,.12);stroke:var(--v-sec)}
.viz .nf--ceo{fill:var(--v-gold-s);stroke:var(--v-gold)}
.viz .nf--fn{fill:var(--v-blue-s);stroke:var(--v-blue)}
.viz .nf--team{fill:rgba(184,196,214,.07);stroke:rgba(184,196,214,.42);stroke-width:1}
.viz .tangle{fill:none;stroke:var(--v-sec);stroke-width:1;opacity:.35}
.viz.is-active .tangle{animation:v-out .6s ease .15s both}
.viz.is-active .chip-b{animation:v-out .4s ease 1s both}
.viz .cn{fill:none;stroke-linecap:round;stroke-linejoin:round}
.viz .cn--b{stroke:var(--v-blue);stroke-width:1.5}
.viz .cn--g{stroke:var(--v-gold);stroke-width:2}

/* ---------- 2 ERP access review ---------- */
.viz .rl{font-size:12.5px}
.viz .cell{stroke-width:1}
.viz .cell--on{fill:var(--v-blue-s);stroke:var(--v-blue)}
.viz .cell--off{fill:none;stroke:rgba(184,196,214,.24)}
.viz .cell--warn{fill:var(--v-warn-s);stroke:var(--v-warn);stroke-width:1.2}
.viz .cell--ok{fill:var(--v-gold-s);stroke:var(--v-gold);stroke-width:1.2}
.viz .ck{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.viz .ck--blue{stroke:var(--v-blue)}
.viz .ck--gold{stroke:var(--v-gold)}
.viz .cf-warn,.viz .cf-ok{transform-box:fill-box;transform-origin:center}
.viz .cf-ok{opacity:0;transform:scale(.6)}
.viz.is-active .cf-warn{animation:v-flipout .35s ease-in var(--d,0s) both}
.viz.is-active .cf-ok{animation:v-flipin .55s var(--v-ease) calc(var(--d,0s) + .15s) both}
@keyframes v-flipout{to{opacity:0;transform:scale(.6)}}
@keyframes v-flipin{to{opacity:1;transform:scale(1)}}
.viz .chip-warn{opacity:0}
.viz.is-active .chip-warn{animation:v-chipw 1.95s ease .3s both}
@keyframes v-chipw{0%{opacity:0;transform:translateY(6px)}20%,79%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.viz .scan{opacity:0}
.viz .scan-band{fill:var(--v-gold-s)}
.viz .scan-line{fill:var(--v-gold)}
.viz.is-active .scan{animation:v-scan 1.3s linear .9s both}
@keyframes v-scan{0%{opacity:0;transform:translateY(0)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateY(234px)}}

/* ---------- 3 Monthly compliance ---------- */
.viz .dc{fill:rgba(184,196,214,.06);stroke:none}
.viz .dn{font-family:var(--f-mono,"IBM Plex Mono",ui-monospace,monospace);font-size:11px;fill:var(--v-sec);text-anchor:middle}
.viz .dn.dn--hl{fill:var(--v-text);font-weight:600}
.viz .hlr{fill:var(--v-gold-s);stroke:var(--v-gold);stroke-width:1.75}
.viz .ci-ring{fill:none;stroke:rgba(184,196,214,.5);stroke-width:1.25}
.viz .ci-fill{fill:var(--v-gold);stroke:none}
.viz .ci-ck{fill:none;stroke:#0B1D38;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.viz .ci-t{font-size:12.5px}

/* ---------- Reduced motion: final resting state, no animation ---------- */
@media (prefers-reduced-motion:reduce){
  .viz *{animation:none!important;transition:none!important}
  .viz .fade,.viz .rise,.viz .slide,.viz .pop,.viz .day,.viz .cf-ok{opacity:1;transform:none}
  .viz .draw{stroke-dashoffset:0}
  .viz .node{transform:none}
  .viz .tangle,.viz .chip-b,.viz .cf-warn,.viz .chip-warn,.viz .scan{opacity:0}
  .viz .ring{opacity:.3;transform:scale(2.4)}
}