/* Gekopieerd uit NorthByte Lab, effect E055 (lab/effecten/E055-tijdlijn-vult, 04-10-2026). */
/* ==========================================================================
   E055 · Tijdlijn die vult terwijl je scrolt
   Een verticale lijn langs de stappen vult zich mee met je scroll. Komt de vulling
   bij een stap, dan vult het bolletje zich en komt de tekst helemaal naar voren.
   Terug scrollen draait het terug. Alleen transform (scaleY, scale) en opacity.
   Zonder JavaScript staat de lijn er helemaal gevuld en zijn alle stappen gewoon leesbaar.
   Instellen op .e055 met CSS-variabelen:
     --e055-kleur    kleur van de vulling en de bolletjes (standaard #d9a441)
     --e055-baan     kleur van de lege lijn                (standaard rgba(0,0,0,.14))
     --e055-x        midden van de lijn vanaf links        (standaard 15px)
     --e055-punt     doorsnede van een bolletje            (standaard 18px)
   ========================================================================== */

.e055 {
  position: relative; list-style: none; margin: 0;
  padding: 0 0 0 calc(var(--e055-x, 15px) * 2 + 20px);
}
/* De lijn: zonder JavaScript helemaal gevuld */
.e055::before {
  content: ""; position: absolute; left: calc(var(--e055-x, 15px) - 1.5px); width: 3px;
  top: var(--e055-lijn-top, 12px); height: var(--e055-lijn-hoogte, calc(100% - 24px));
  border-radius: 3px; background: var(--e055-kleur, #d9a441);
}
.e055-stap { position: relative; }
.e055-punt {
  position: absolute; top: .35em;
  left: calc((var(--e055-x, 15px) * 2 + 20px) * -1 + var(--e055-x, 15px) - var(--e055-punt, 18px) / 2);
  width: var(--e055-punt, 18px); height: var(--e055-punt, 18px); border-radius: 50%;
  border: 3px solid var(--e055-kleur, #d9a441); background: var(--e055-kleur, #d9a441);
}
.e055-punt::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--e055-kleur, #d9a441);
}

/* ----- Met JavaScript: de lijn vult zich ----- */
.e055-aan::before { background: var(--e055-baan, rgba(0, 0, 0, .14)); }
.e055-vulling {
  position: absolute; left: calc(var(--e055-x, 15px) - 1.5px); width: 3px;
  top: var(--e055-lijn-top, 12px); height: var(--e055-lijn-hoogte, 0px);
  border-radius: 3px; background: var(--e055-kleur, #d9a441);
  transform-origin: 50% 0; transform: scaleY(0);
}
.e055-aan .e055-punt { background: var(--e055-punt-achter, #fff); }
.e055-aan .e055-punt::after { transform: scale(0); }
.e055-aan .e055-stap.is-bereikt .e055-punt::after { transform: none; }
.e055-aan .e055-inhoud { opacity: .42; transform: translate3d(8px, 0, 0); }
.e055-aan .e055-stap.is-bereikt .e055-inhoud { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e055-aan .e055-punt::after { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
  html:not([data-rm]) .e055-aan .e055-inhoud { transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
}
/* Bij beperkte beweging geen verschuiving, wel de kleur van de voortgang */
@media (prefers-reduced-motion: reduce) { .e055-aan .e055-inhoud { transform: none; } }
html[data-rm] .e055-aan .e055-inhoud { transform: none; }