/* =========================================================
   Proces — één doorlopende tijdlijn

   Hiervoor stonden er vier losse strepen boven vier kolommen,
   met gaten ertussen. Dat leest niet als een proces maar als
   vier streepjes, en de sectie nam veel ruimte in zonder iets
   te zeggen.

   Nu: één lijn die van begin tot eind doorloopt, met een
   markering per stap. Een proces gaat over volgorde en
   voortgang — dat zegt een doorlopende lijn in één beeld. De
   lijn vult bij het scrollen in één beweging van links naar
   rechts; elke markering licht op zodra de lijn hem passeert.

   De kop staat erboven, want de tijdlijn heeft de volle
   breedte nodig om te werken.
========================================================= */

:root {
  /* Hoe lang de lijn erover doet om helemaal vol te lopen. */
  --proces-sweep: 1.5s;

  /* Dikte van de lijn en grootte van de markeringen erop. */
  --proces-lijn: 2px;
  --proces-punt: 11px;
}


/* =========================================================
   Kop

   Titel links, lead rechts op dezelfde regel. Dat houdt het
   kopblok laag, zodat de tijdlijn de sectie draagt en niet
   de kop.
========================================================= */

.ls-proces__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-2xl);
  margin-bottom: clamp(44px, 5vw, 72px);
}

@media (max-width: 900px) {
  .ls-proces__head {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.ls-proces__head .kicker {
  margin-bottom: var(--space-md);
}

.ls-proces__title {
  font-size: var(--fs-h2-sm);
  max-width: 16ch;
  margin: 0;
}

.ls-proces__title em {
  font-style: normal;
  color: var(--color-accent);
}

.ls-proces__lead {
  max-width: 36ch;
  margin: 0;
  font-size: var(--fs-base);
  color: var(--color-muted);
}


/* =========================================================
   De tijdlijn

   Het spoor ligt over de volle breedte van het grid, dwars
   door de kolomgaten heen. Dat is het verschil met vier losse
   strepen: de lijn stopt niet bij elke kolomrand.
========================================================= */

.ls-proces__tijdlijn {
  position: relative;
  padding-top: calc(var(--proces-punt) + var(--space-lg));
}

.ls-proces__spoor {
  position: absolute;
  top: calc(var(--proces-punt) / 2);
  left: 0;
  right: 0;
  height: var(--proces-lijn);
  background: rgba(207, 181, 59, .18);
  overflow: hidden;
  border-radius: var(--radius-full);
}

.ls-proces__spoor-vulling {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* Vullen zodra de tijdlijn in beeld komt (class van proces.js).
   Lineair: een afremmende curve maakt van één doorlopende lijn
   alsnog een beweging met een begin en een eind per stuk. */
.ls-proces__tijdlijn.is-lines-in .ls-proces__spoor-vulling {
  transform: scaleX(1);
  transition: transform var(--proces-sweep) linear;
}

/* Zonder JS staat de lijn gewoon vol — geen halve tijdlijn. */
.no-js .ls-proces__spoor-vulling,
html:not(.js) .ls-proces__spoor-vulling {
  transform: scaleX(1);
}


/* =========================================================
   Stappen
========================================================= */

.ls-proces__grid {
  display: grid;
  grid-template-columns: repeat(var(--stappen, 4), 1fr);
  gap: var(--space-gap);

  list-style: none;
  margin: 0;
  padding: 0;
}

.ls-proces__step {
  position: relative;
  margin: 0;
}


/* =========================================================
   Markering op de lijn

   Staat op de linkerrand van elke kolom, precies op het spoor.
   Licht op wanneer de vulling hem passeert: de vertraging is
   de positie van de stap maal de looptijd van de hele lijn.
========================================================= */

.ls-proces__punt {
  position: absolute;
  top: calc((var(--proces-punt) + var(--space-lg)) * -1);
  left: 0;

  width: var(--proces-punt);
  height: var(--proces-punt);
  border-radius: 50%;

  background: var(--color-bg);
  box-shadow: inset 0 0 0 var(--proces-lijn) rgba(207, 181, 59, .35);
}

.ls-proces__tijdlijn.is-lines-in .ls-proces__punt {
  background: var(--color-accent);
  box-shadow: inset 0 0 0 var(--proces-lijn) var(--color-accent);

  transition: background .25s var(--ease-out), box-shadow .25s var(--ease-out);
  transition-delay: calc(
    var(--step-i, 0) / var(--stappen, 4) * var(--proces-sweep)
  );
}


/* =========================================================
   Tekst in de stap
========================================================= */

.ls-proces__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.ls-proces__step-title {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--color-text);
  margin: 0 0 var(--space-2xs);
}

.ls-proces__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-muted);
  margin: 0;
  max-width: 34ch;
}

/* De inhoud komt op terwijl de lijn eroverheen loopt. */
.ls-proces__tijdlijn.is-lines-armed .ls-proces__step > *:not(.ls-proces__punt) {
  opacity: 0;
  transform: translateY(10px);
}

.ls-proces__tijdlijn.is-lines-in .ls-proces__step > *:not(.ls-proces__punt) {
  opacity: 1;
  transform: none;
  transition:
    opacity   .5s var(--ease-out),
    transform .5s var(--ease-out);
  transition-delay: calc(
    var(--step-i, 0) / var(--stappen, 4) * var(--proces-sweep)
  );
}


/* =========================================================
   Smaller — de lijn kantelt mee naar verticaal

   Onder elkaar blijft de tijdlijn kloppen: het spoor loopt
   dan langs de linkerkant naar beneden in plaats van over de
   breedte. Bij vier stappen wordt een kolom onder 900px te
   smal voor een leesbare regel, vandaar die grens.
========================================================= */

/* Vanaf hier verticaal. Grens op 900 en niet op 760: op een tablet
   in portret (768px) bleven het vier kolommen van 159px, en daar
   past geen leesbare zin in. */
@media (max-width: 900px) {

  .ls-proces__tijdlijn {
    padding-top: 0;
    padding-left: calc(var(--proces-punt) + var(--space-lg));
  }

  /* Let op het verschil in ophangpunt: de punt hangt aan de stap
     (die begint ná de padding van de tijdlijn), het spoor hangt aan
     de tijdlijn zelf (die begint ervóór). De punt trekt zichzelf met
     een negatieve marge terug naar links; het spoor hoeft dat juist
     niet te doen. Deed het dat wel, dan schoof de lijn de hele
     padding nog een keer naar links en stond hij buiten beeld. */
  .ls-proces__spoor {
    top: 0;
    bottom: 0;
    left: calc(var(--proces-punt) / 2 - var(--proces-lijn) / 2);
    right: auto;
    width: var(--proces-lijn);
    height: auto;
  }

  .ls-proces__spoor-vulling {
    transform: scaleY(0);
    transform-origin: top;
  }

  .ls-proces__tijdlijn.is-lines-in .ls-proces__spoor-vulling {
    transform: scaleY(1);
  }

  .ls-proces__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .ls-proces__punt {
    top: 4px;
    left: calc((var(--proces-punt) + var(--space-lg)) * -1);
  }

  .ls-proces__text {
    max-width: none;
  }
}


/* =========================================================
   Beperkte beweging — alles staat er meteen
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ls-proces__spoor-vulling {
    transform: scaleX(1);
    transition: none;
  }

  .ls-proces__tijdlijn .ls-proces__step > *:not(.ls-proces__punt) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ls-proces__punt {
    background: var(--color-accent);
    box-shadow: inset 0 0 0 var(--proces-lijn) var(--color-accent);
  }
}