/* ==========================================================================
   Visual (partials/visual.njk): donkere kaart met grafiek, witte checklist,
   KPI-chip en draaiende badge op een gekleurd vlak. Gebruikt bovenaan
   kennisbank-artikelen. Alle beweging met var(--ease) of ease-in-out.
   ========================================================================== */
.vz { position: relative; overflow: hidden; padding: 48px 0 0; border-radius: 36px; background: var(--c-blue); line-height: 1.3; isolation: isolate; }
.vz--wd { background: var(--c-navy); }

/* Decoratieve ringen */
.vz__ring { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); pointer-events: none; }
.vz__ring--a { width: 520px; height: 520px; right: -140px; top: -170px; }
.vz__ring--b { width: 300px; height: 300px; left: -110px; bottom: -150px; border-color: rgba(255, 255, 255, .12); }

.vz__scene { position: relative; max-width: 980px; margin: 0 auto; padding-bottom: 168px; }
/* Kaart in de flow; de checklist hangt aan de onderkant van de kaart (in de extra binnenruimte onder de chips) */
.vz__stapel { position: relative; margin-left: 16%; width: min(48%, 470px); }

/* Donkere kaart */
.vz__kaart { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 26px 26px 76px; border-radius: 26px; background: var(--c-navy); color: #fff; box-shadow: var(--sh-float); }
.vz--wd .vz__kaart { background: #17313d; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }
.vz__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vz__titel { font-size: 14px; color: rgba(255, 255, 255, .75); }
.vz__pil { font-size: 12px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); white-space: nowrap; }
.vz__chips { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.vz__chips span { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .25); }

/* Staven (ook mini-staven bij kpi) */
.vz__staven { display: flex; align-items: flex-end; gap: 12px; height: 140px; }
.vz__bar { flex: 1 1 0; border-radius: 10px; background: rgba(255, 255, 255, .22); transform-origin: 50% 100%; animation: vz-groei 1.6s var(--ease) both; }
.vz__bar.is-accent { background: var(--c-blue); }
.vz--wd .vz__bar.is-accent { background: var(--c-blue-light); }
@keyframes vz-groei { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Lijn */
.vz__lijn { display: block; width: 100%; height: 140px; overflow: visible; }
.vz__lijn-pad { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: vz-teken 1.8s var(--ease) .7s forwards; }
.vz__lijn-vlak { opacity: 0; animation: fd0 1.2s var(--ease) 1.4s forwards; }
.vz__lijn-punt { fill: var(--c-blue-light); stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; animation: vz-punt .7s var(--ease) 2.3s forwards; }
@keyframes vz-teken { to { stroke-dashoffset: 0; } }
@keyframes vz-punt { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* Trechter */
.vz__trechter { display: flex; flex-direction: column; gap: 10px; }
.vz__tr-rij { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 12px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.vz__tr-balk { display: block; width: var(--w); height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .22); transform-origin: 0 50%; animation: vz-breed 1.4s var(--ease) both; }
.vz__tr-balk.is-accent { background: var(--c-blue); }
.vz--wd .vz__tr-balk.is-accent { background: var(--c-blue-light); }
@keyframes vz-breed { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Donut */
.vz__donut { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.vz__donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vz__donut circle { fill: none; stroke-width: 14; }
.vz__donut-bg { stroke: rgba(255, 255, 255, .14); }
.vz__donut-v { stroke: var(--c-blue); stroke-linecap: round; stroke-dasharray: var(--p) 100; stroke-dashoffset: 0; animation: vz-donut 1.8s var(--ease) .7s both; }
.vz--wd .vz__donut-v { stroke: var(--c-blue-light); }
@keyframes vz-donut { from { stroke-dasharray: 0 100; } }
.vz__donut-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.vz__donut-txt b { font-size: 30px; letter-spacing: -.03em; }
.vz__donut-txt span { max-width: 96px; font-size: 11px; color: rgba(255, 255, 255, .7); }

/* KPI groot */
.vz__kpi-groot { display: flex; flex-direction: column; gap: 4px; }
.vz__kpi-groot b { font-size: 56px; line-height: 1; letter-spacing: -.05em; }
.vz__kpi-groot > span { font-size: 14px; color: rgba(255, 255, 255, .7); }
.vz__mini { display: flex; align-items: flex-end; gap: 8px; height: 62px; margin-top: 14px; }

/* Witte checklist */
.vz__lijst { position: absolute; z-index: 2; left: -20%; top: calc(100% - 52px); width: 290px; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 22px; background: #fff; color: var(--c-ink); border: 1px solid var(--c-line-soft); box-shadow: var(--sh-card); }
.vz__lijst-titel { font-size: 13px; font-weight: 600; color: var(--c-muted); }
.vz__item { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.vz__vink { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c-blue); color: #fff; display: grid; place-items: center; }
.vz__open { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-blue); }

/* KPI-chip */
.vz__kpi { position: absolute; right: 9%; bottom: 14%; display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-radius: 18px; background: #fff; color: var(--c-ink); box-shadow: var(--sh-card); }
.vz__kpi b { font-size: 28px; line-height: 1.05; letter-spacing: -.03em; color: var(--c-black); }
.vz__kpi span { font-size: 13px; color: var(--c-muted); }

/* Draaiende badge */
.vz__badge { position: absolute; top: 16%; right: 13%; width: 128px; height: 128px; border-radius: 50%; background: var(--c-navy); color: #fff; display: grid; place-items: center; box-shadow: 0 18px 40px -16px rgba(13, 34, 45, .55); }
.vz--wd .vz__badge { background: var(--c-blue); }
.vz__badge .spin { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 1080px) {
  .vz__stapel { margin-left: 12%; width: 56%; }
  .vz__badge { right: 6%; }
  .vz__kpi { right: 5%; }
}
@media (max-width: 760px) {
  .vz { padding-top: 20px; border-radius: 24px; }
  .vz__scene { padding-bottom: 150px; }
  .vz__stapel { margin-left: 5%; width: 82%; }
  .vz__kaart { gap: 16px; padding: 20px 20px 64px; border-radius: 20px; }
  .vz__staven, .vz__lijn { height: 104px; }
  .vz__donut { width: 116px; height: 116px; }
  .vz__kpi-groot b { font-size: 42px; }
  .vz__lijst { left: auto; right: -8%; top: calc(100% - 44px); width: min(250px, 80%); gap: 10px; padding: 16px; }
  .vz__item { font-size: 14px; }
  .vz__kpi { display: none; }
  .vz__badge { top: auto; bottom: 26px; right: auto; left: 4%; width: 76px; height: 76px; }
  .vz__badge > svg:last-child { width: 22px; height: 22px; }
  .vz__ring--a { width: 320px; height: 320px; right: -120px; top: -120px; }
}
@media (prefers-reduced-motion: reduce) {
  .vz__lijn-pad { stroke-dashoffset: 0; }
  .vz__lijn-vlak, .vz__lijn-punt { opacity: 1; }
}