/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E063-stippelroute/effect.css (04-10-2026), ongewijzigd. */
/* ==========================================================================
   E063 · Stippelroute die zich tekent
   Een route op een (schematische) kaart tekent zich stip voor stip terwijl je
   scrolt, met een busje voorop. Komt de route bij een dorp, dan licht het dorp op.
   Terug scrollen draait het terug. De stippen veranderen alleen van opacity en
   het busje alleen van transform: geen stroke-dashoffset en geen filter.
   Zonder JavaScript staat de hele route er als stippellijn.
   Instellen op .e063 met CSS-variabelen:
     --e063-kleur     kleur van de route en de bereikte dorpen (standaard #c2452d)
     --e063-dorp      kleur van een dorp dat nog niet bereikt is (standaard #8b8471)
   ========================================================================== */

.e063 { display: block; width: 100%; height: auto; overflow: visible; }
.e063-pad { fill: none; stroke: var(--e063-kleur, #c2452d); stroke-width: 4; stroke-linecap: round; stroke-dasharray: .1 11; }
.e063-dorp circle { fill: #fff; stroke: var(--e063-kleur, #c2452d); stroke-width: 3; }
.e063-dorp text { font: 600 15px/1 system-ui, sans-serif; fill: currentColor; paint-order: stroke; stroke: var(--e063-halo, #f3efe1); stroke-width: 5px; stroke-linejoin: round; }

/* ----- Met JavaScript ----- */
.e063-aan .e063-pad { stroke: var(--e063-kleur, #c2452d); stroke-dasharray: .1 11; opacity: .16; }
.e063-stip { fill: var(--e063-kleur, #c2452d); opacity: 0; }
.e063-stip.is-aan { opacity: 1; }
.e063-aan .e063-dorp circle { fill: #fff; stroke: var(--e063-dorp, #8b8471); }
.e063-aan .e063-dorp text { opacity: .55; }
.e063-aan .e063-dorp .e063-kern { fill: var(--e063-kleur, #c2452d); stroke: none; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.e063-aan .e063-dorp.is-bereikt circle { stroke: var(--e063-kleur, #c2452d); }
.e063-aan .e063-dorp.is-bereikt .e063-kern { transform: none; }
.e063-aan .e063-dorp.is-bereikt text { opacity: 1; }
.e063-bus { opacity: 0; }
.e063-aan .e063-bus { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e063-aan .e063-dorp .e063-kern { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
  html:not([data-rm]) .e063-aan .e063-dorp text { transition: opacity .4s ease; }
}