/* ============================================================
   automatisering.css · Ai-Automatisering (Custom Project)
   Drie bespoke infographics, na lux.css geladen:
     1. flow-console in de hero   (een werkstroom die draait)
     2. jaarraster                (wat herhaling per jaar kost)
     4. eigenaarschap-panelen     (waar de automatisering woont)
   Nummer 3 was de overdracht-keten: acht genummerde stappen van een
   factuurproces. Die legde hetzelfde uit als de flow-console hierboven, met
   een ander voorbeeld, en is verwijderd; de nummers 1, 2 en 4 blijven staan
   zoals ze in de JS heten.
   plus de platformstrip en het rekenblok bij de investering.
   Additief: zonder JS of met motion-off staat alles in de eindstand.
   ============================================================ */

/* ---------- 1. Flow-console (hero) ----------
   De partnership-hero toont een KPI-dashboard; hier is het product de
   werkstroom zelf, dus die tekenen we: trigger, stappen, resultaat, met
   een puls die er doorheen loopt en een teller die meeloopt. */
.flow {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.flow__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.flow__dots { display: inline-flex; gap: 0.3rem; }
.flow__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}
.flow__title {
  margin-left: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.35em 0.75em;
  border-radius: var(--r-pill);
  color: var(--accent-ink);
  background: var(--grad-accent);
  white-space: nowrap;
}
.flow__badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}
[data-motion="on"] .flow__badge i { animation: flow-blink 2s var(--ease-in-out) infinite; }
@keyframes flow-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* de pijplijn: verticale rail met knopen ernaast */
.flow__pipe {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-left: 2.4rem;
}
.flow__rail {
  position: absolute;
  left: 1.15rem;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
/* de puls die door de leiding zakt; hij tekent de rail achter zich in */
.flow__rail i {
  position: absolute;
  left: -1px;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  transform-origin: top;
  transform: scaleY(var(--run, 1));
  background: var(--grad-accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.flow__node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.85rem;
  background: color-mix(in srgb, var(--bg-3) 34%, transparent);
  transition: border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.flow__node::before {
  content: "";
  position: absolute;
  left: calc(-1.25rem - 4px);
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg);
  transition: border-color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.flow__node.is-on {
  border-color: color-mix(in srgb, var(--accent-deep) 40%, var(--line));
  background: color-mix(in srgb, var(--accent-deep) 9%, transparent);
}
/* De bol krijgt een ring in de achtergrondkleur, anders smelt hij samen met
   de opgelichte rail eronder en verdwijnt de knoop-metafoor. */
.flow__node.is-on::before {
  border-color: transparent;
  background: var(--grad-switch);
  box-shadow: 0 0 0 3px var(--bg-2), 0 0 12px var(--accent-glow);
}
.flow__ic {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 12%, transparent);
}
.flow__ic svg { width: 15px; height: 15px; }
.flow__label {
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink);
}
.flow__meta {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
/* de stap waar een mens beslist: blijft bewust neutraal, ook als hij aan staat */
.flow__node--human .flow__ic {
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.flow__node--human.is-on {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.flow__node--human.is-on::before {
  background: var(--bg);
  border-color: var(--line-strong);
  box-shadow: none;
}
.flow__foot {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding-top: 0.2rem;
  border-top: 1px solid var(--line);
  margin-top: 0.2rem;
}
.flow__stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-top: 0.8rem;
}
.flow__stat b {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: filter 0.3s var(--ease-out);
}
.flow__stat b.is-pulse { filter: drop-shadow(0 0 14px var(--accent-glow)); }
.flow__stat span {
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.flow__note {
  position: absolute;
  right: 1rem;
  bottom: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  opacity: 0.75;
}

/* ---------- Traject-scene: scrollafstand naar vier stappen ----------
   pages.css pint de traject-scene over 620vh; dat is afgestemd op de zes fases
   van het partnership (ruim 100vh per fase). Hier zijn het vier stappen, en
   dezelfde afstand betekent 155vh per stap: je scrolt de helft langer voor
   dezelfde kaart, wat als traag en leeg leest. Vier stappen in hetzelfde tempo
   als daar. keuzehulp.css doet dit met dezelfde regel voor zijn eigen scene. */
.journey-scene.is-pinned .journey-scroller {
  height: 420vh;
}

/* ---------- 2. Jaarraster ----------
   .featrow__media dwingt standaard 4:3 af met overflow:hidden; het raster
   plus de uitkomst is hoger dan dat, dus daar knipt de figuur zijn eigen
   conclusie af. Deze variant laat de figuur op zijn inhoud uitkomen. */
.featrow__media--tall {
  display: block;            /* pages.css zet hier place-items:center, waardoor
                                de figuur naar zijn inhoud krimpt in plaats van
                                de kolom te vullen */
  aspect-ratio: auto;
  overflow: visible;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
}

/* Het raster zelf: 260 tegels, één per werkdag. De tegels die opgaan aan
   een taak van twintig minuten per dag lichten op: dat zijn er ruim elf. */
.yearfig {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
}
.yearfig__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.yeargrid {
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  gap: clamp(2px, 0.45vw, 4px);
}
.yeargrid i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 13%, transparent);
  transition: background 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.yeargrid i.is-hot {
  background: var(--grad-accent);
  box-shadow: 0 0 7px var(--accent-glow);
}
.yearfig__legend {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.yearfig__legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.yearfig__legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 24%, transparent);
}
.yearfig__legend .is-accent { color: var(--accent-deep); }
.yearfig__legend .is-accent::before { background: var(--grad-accent); }
.yearfig__readout { border-top: 1px solid var(--line); padding-top: 1rem; }
.yearfig__stat {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  font-weight: 660;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* NIET op een kale `span` selecteren: grad-words.js splitst dit element in
   geneste .lw/.lw__in-spans, en een descendant-regel vermenigvuldigt zich dan
   door die nesting heen (0.5em wordt 0.125em). Vandaar een eigen klasse. */
.yearfig__unit {
  font-size: 0.5em;
  font-style: normal;
  letter-spacing: -0.02em;
}
.yearfig__sub {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* ---------- 4. Eigenaarschap-panelen ----------
   Twee manieren waarop een automatisering kan wonen. Links de gehuurde
   variant, rechts de onze. Op scroll knipt de navelstreng naar het
   bureau door en blijft het kader van de klant branden. */
.owner {
  display: grid;
  gap: clamp(1.1rem, 0.8rem + 1.6vw, 2rem);
}
@media (min-width: 880px) {
  .owner { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.ownercard {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--r-lg);
}
.ownercard__tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.ownercard--ours .ownercard__tag { color: var(--accent-deep); }
.ownercard h3 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.ownerviz { width: 100%; height: auto; display: block; }
.ownerviz__box {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
}
.ownerviz__box--host {
  fill: color-mix(in srgb, var(--ink) 5%, transparent);
  stroke-dasharray: 5 4;
}
.ownerviz__box--own {
  fill: color-mix(in srgb, var(--accent-deep) 8%, transparent);
  stroke: color-mix(in srgb, var(--accent-deep) 55%, transparent);
  stroke-width: 1.8;
}
.ownerviz__lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--ink-faint);
}
/* Labels die tussen twee kaders moeten passen, plus de merknaam: geen
   kapitalen (dat maakt "Ai" tot "AI") en geen extra letterspatiëring,
   anders lopen ze dwars door de kaders heen. */
.ownerviz__lbl--free {
  text-transform: none;
  letter-spacing: 0.01em;
}
.ownerviz__name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink);
}
.ownerviz__bot {
  fill: color-mix(in srgb, var(--ink) 16%, transparent);
  stroke: var(--line-strong);
  stroke-width: 1.4;
}
.ownerviz__bot--live {
  fill: color-mix(in srgb, var(--accent-deep) 30%, transparent);
  stroke: var(--accent-deep);
}
.ownerviz__wire {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.6;
  stroke-dasharray: 4 4;
}
.ownerviz__wire--fee { stroke: color-mix(in srgb, var(--ink) 40%, transparent); }
/* de doorgeknipte draad: standaard al kort (statische eindstand), en met
   motion animeert hij dicht zodra het paneel in beeld komt */
.ownerviz__wire--cut {
  stroke: var(--line-strong);
  stroke-dasharray: 3 5;
  opacity: 0.5;
}
.ownerviz__scissor { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; }
[data-motion="on"] .ownerviz__wire--cut {
  transition: opacity 0.8s var(--ease-out), stroke-dashoffset 1s var(--ease-out);
}
.ownercard__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ownercard__points li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.ownercard__points li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 10%, transparent) center / 9px 9px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a95a2' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.ownercard--ours .ownercard__points li { color: var(--ink); }
.ownercard--ours .ownercard__points li::before {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304181b' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5L19 7'/%3E%3C/svg%3E"),
    linear-gradient(118deg, #c6faff, #4f93ff);
  background-size: 9px 9px, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* ---------- Platformstrip ---------- */
.buildon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.buildon__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55em 1em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg-3) 40%, transparent);
  font-size: 0.88rem;
  color: var(--ink);
}
.buildon__chip svg { width: 15px; height: 15px; color: var(--accent-deep); }
.buildon__rest {
  font-size: 0.88rem;
  color: var(--ink-faint);
  padding-left: 0.3rem;
}

/* ---------- Rekenblok bij de investering ---------- */
.calc {
  display: grid;
  gap: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  border-radius: var(--r-lg);
}
@media (min-width: 860px) {
  .calc { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
}
.calc__controls { display: flex; flex-direction: column; gap: 1.5rem; }
.calc__field { display: flex; flex-direction: column; gap: 0.6rem; }
.calc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.calc__label { font-size: 0.92rem; color: var(--ink); }
.calc__val {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
}
.calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent-deep) 0%,
    var(--accent-deep) var(--pct, 40%),
    var(--line) var(--pct, 40%),
    var(--line) 100%
  );
  outline: none;
  cursor: pointer;
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 2px solid var(--accent-deep);
  box-shadow: 0 2px 10px var(--glass-shadow);
  cursor: grab;
}
.calc__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 2px solid var(--accent-deep);
  box-shadow: 0 2px 10px var(--glass-shadow);
  cursor: grab;
  border-color: var(--accent-deep);
}
.calc__range:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }
.calc__out {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--bg-3) 45%, transparent);
  text-align: center;
}
.calc__out-lbl {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.calc__out-num {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.6rem + 3vw, 3.8rem);
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.calc__out-sub {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Fijnafstemming klein scherm ---------- */
@media (max-width: 560px) {
  .flow__meta { display: none; }
  .yeargrid { grid-template-columns: repeat(20, 1fr); }
  .flow__note { position: static; align-self: flex-end; }
}