/* ==========================================================================
   Blok — Diensten-route (template-parts/blok/diensten-route.php)

   De module zelf (route, stippen, puls, kolommen) is die van de homepage:
   assets/css/home/diensten.css, één bron. blokken/diensten-route/blok.php
   laadt dat bestand ook op subpagina's (vóór deze blok-CSS), en zonder
   Secure Custom Fields zet de template het vlak vóór het blok.

   Hier alleen wat het blok extra kan: banden, de actieve dienst en het
   eindpunt met de domeinvisual van de sector. Overschrijvingen van
   home/diensten.css zijn specifieker dan de regel die ze vervangen, zodat de
   volgorde van de bestanden niet uitmaakt.
   ========================================================================== */

/* --- Banden ----------------------------------------------------------------
   Op de homepage staat de module op wit. Als blok ook op grijs, roze en navy:
   de nummerstip neemt de kleur van de band aan (zoals in het blok stappen),
   het zachte vlak op tablet wordt wit op een gekleurde band, en de halo van
   het eindpunt blijft zichtbaar. Op wit verandert er niets. */
.b-diensten-route {
  --dr-band: var(--wit);
  --dr-vlak: var(--grijs-licht);
  --dr-halo: var(--roze-licht);
  --dr-rand: var(--blauw);
  --dr-nummer: var(--blauw);
  --dr-grond: var(--navy);              /* grondlijn van de scène (zoals --dv-lijn) */
  --dr-hier: var(--navy);               /* gevulde stip van de actieve dienst */
  --dr-hier-tekst: var(--wit);
  --dr-hier-halo: rgba(10, 125, 250, .14);
}
.b-diensten-route.band--grijs { --dr-band: var(--grijs-licht); --dr-vlak: var(--wit); }
.b-diensten-route.band--roze { --dr-band: var(--roze-licht); --dr-vlak: var(--wit); --dr-halo: var(--wit); }
.b-diensten-route.band--navy {
  --dr-band: var(--navy);
  --dr-vlak: var(--navy-90);
  --dr-halo: var(--navy-80);
  --dr-rand: var(--blauw-licht);
  --dr-nummer: var(--wit);
  --dr-grond: #dfe3ff;
  --dr-hier: var(--wit);
  --dr-hier-tekst: var(--navy);
  --dr-hier-halo: rgba(255, 255, 255, .16);
}
.b-diensten-route .s-diensten__nummer {
  border-color: var(--dr-rand);
  background: var(--dr-band);
  color: var(--dr-nummer);
}
@media (min-width: 720px) and (max-width: 1099.98px) {
  .b-diensten-route .s-diensten__vlak { background: var(--dr-vlak); }
}
/* Eindpunt: dezelfde puls als op de homepage, met de halo in de kleur van de band */
.b-diensten-route .s-diensten__route::after {
  box-shadow: 0 0 0 5px var(--dr-halo);
  animation-name: b-diensten-route-laadpaal;
}
@keyframes b-diensten-route-laadpaal {
  0%, 66%, 94%, 100% { background: var(--roze); box-shadow: 0 0 0 5px var(--dr-halo); }
  72%, 86% { background: var(--groen); box-shadow: 0 0 0 5px rgba(0, 242, 130, .25), 0 0 12px 3px rgba(0, 242, 130, .55); }
}

/* --- Actieve dienst (arg 'actief') -------------------------------------------
   Op een dienstpagina: de stip van die dienst is gevuld, met een zachte ring
   (zoals "je bent hier" op een routekaart), en "Je bent hier" staat op de
   plek van de link naar zichzelf. Gewone tekst, geen chip. */
.b-diensten-route .b-diensten-route__stap--actief .s-diensten__nummer {
  border-color: var(--dr-hier);
  background: var(--dr-hier);
  box-shadow: 0 0 0 5px var(--dr-hier-halo);
  color: var(--dr-hier-tekst);
}
.b-diensten-route__hier {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--tekst);
  font-weight: var(--fw-medium);
}
.b-diensten-route__hier::before {
  content: "";
  flex: none;
  width: .625rem;
  margin-left: 4px;                     /* de ring lijnt uit met de kolom */
  height: .625rem;
  border-radius: 50%;
  background: var(--dr-hier);
  box-shadow: 0 0 0 4px var(--dr-hier-halo);
}

/* --- Eindpunt met de domeinvisual van de sector (arg 'eindpunt') -------------
   Aan het eind van de route staat een compacte versie van de scène van de
   sector (inc/domeinvisual.php). De stippellijn eindigt op het niveau van
   de grond van de scène: het roze eindpunt staat aan de voet ervan, en de
   grondlijn loopt vanuit het eindpunt de scène in.
   - Mobiel en tablet (verticaal): de scène staat onderaan, in de
     inhoudskolom naast de lijn, als laatste halte; een dunne grondlijn
     verbindt het eindpunt met de scène.
   - Desktop (horizontaal): de scène staat rechts aan het eind van de lijn,
     op de lijn; de lijn houdt op aan de voet van de scène.
   Scènes met de lader rechts (auto, vrachtwagen, boot, bouw) staan
   gespiegeld: dan staat de lader vooraan en loopt de stroom van links naar
   rechts door, net als de route. Kantoorpand en huizen beginnen hun kabels
   al links.

   Maten per scène (uit de viewBox in inc/domeinvisual.php):
   --dr-ratio   hoogte / breedte
   --dr-basis   hoogte van de grond, als deel van de hoogte (van boven)
   --dr-start   begin van de grondlijn, als deel van de breedte (na spiegelen)
   --dr-spiegel -1 = gespiegeld */
.b-diensten-route--auto        { --dr-ratio: .425;  --dr-basis: .902;  --dr-start: .04;   --dr-spiegel: -1; }
.b-diensten-route--vrachtwagen { --dr-ratio: .4883; --dr-basis: .9147; --dr-start: .0333; --dr-spiegel: -1; }
.b-diensten-route--boot        { --dr-ratio: .475;  --dr-basis: .807;  --dr-start: 0;     --dr-spiegel: -1; } /* grond = de waterlijn */
.b-diensten-route--bouw        { --dr-ratio: .4272; --dr-basis: .8908; --dr-start: .0187; --dr-spiegel: -1; }
.b-diensten-route--kantoorpand { --dr-ratio: .6;    --dr-basis: .9167; --dr-start: .0333; --dr-spiegel: 1; }
.b-diensten-route--huizen      { --dr-ratio: .5167; --dr-basis: .9032; --dr-start: .0333; --dr-spiegel: 1; }

.b-diensten-route--eindpunt {
  --dr-duur: 4.2s;                                 /* = de cyclus van de puls en het eindpunt hierboven */
  --dr-inspring: calc(var(--stip) + 1rem);         /* = begin van de inhoudskolom */
  --dr-w: min(18rem, 100vw - 2 * var(--gutter) - var(--dr-inspring)); /* zonder container-eenheden */
}
@supports (width: 1cqw) {
  /* cqw = breedte van de baan (container hieronder); alleen binnen de baan gebruiken */
  .b-diensten-route--eindpunt { --dr-w: min(20rem, 100cqw - var(--dr-inspring)); }
}
.b-diensten-route--eindpunt .s-diensten__baan { container-type: inline-size; }

.b-diensten-route__eind {
  position: absolute;
  z-index: 1;                                      /* boven de lijn en de puls */
  width: var(--dr-w);
  pointer-events: none;
}
/* Het eindpunt ligt boven de scène (de grondlijn begint onder het eindpunt) */
.b-diensten-route--eindpunt .s-diensten__route::after { z-index: 2; }

/* De scène: gespiegeld waar nodig, met lijnen die op het kleine formaat even
   dik ogen als in de grote visual (ca. 1,1 px), en kabelpuntjes iets groter */
.b-diensten-route .b-diensten-route__eind .dv {
  --dv-sw: 2.4;
  transform: scaleX(var(--dr-spiegel, 1));
}
/* Smalle desktop (1100–1279px): de scène is daar het kleinst (ca. 200px) */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .b-diensten-route .b-diensten-route__eind .dv { --dv-sw: 3; }
}
.b-diensten-route .b-diensten-route__eind .dv .dv-kabel:not(.dv-kabel--kort),
.b-diensten-route .b-diensten-route__eind .dv .dv-stroom { stroke-dasharray: 0 10; }
.b-diensten-route .b-diensten-route__eind .dv .dv-kabel:not(.dv-kabel--kort) { stroke-width: 5; }
.b-diensten-route .b-diensten-route__eind .dv .dv-stroom { stroke-width: 5.6; }

/* Mobiel en tablet: de scène onderaan, als laatste halte */
@media (min-width: 720px) {
  .b-diensten-route--eindpunt { --dr-inspring: calc(var(--stip) + 1.25rem); }
}
@media (max-width: 1099.98px) {
  /* Ruimte onder de laatste dienst voor de scène; het eindpunt staat op de grond ervan */
  .b-diensten-route--eindpunt .s-diensten__baan .s-diensten__route {
    padding-bottom: calc(var(--eind) / 2 + var(--dr-basis) * var(--dr-ratio) * var(--dr-w) + 2.5rem);
  }
  .b-diensten-route__eind {
    left: var(--dr-inspring);
    bottom: calc(var(--eind) / 2 - (1 - var(--dr-basis)) * var(--dr-ratio) * var(--dr-w));
  }
  /* Grondlijn van het eindpunt (midden) tot het begin van de grond in de scène */
  .b-diensten-route__eind::before {
    content: "";
    position: absolute;
    top: calc(var(--dr-basis) * 100% - .5px);
    left: calc(var(--stip) / 2 - var(--dr-inspring));
    width: calc(var(--dr-inspring) - var(--stip) / 2 + var(--dr-start) * var(--dr-w));
    height: 1px;
    background: var(--dr-grond);
  }
}

/* Desktop: de scène rechts op de lijn; lijn, puls en eindpunt houden op aan
   de voet van de scène. De breedte past in de derde kolom, met ruimte
   tussen stip 03 en het eindpunt. */
@media (min-width: 1100px) {
  @supports (width: 1cqw) {
    .b-diensten-route--eindpunt { --dr-w: min(18rem, (100cqw - 2 * var(--gap-lg)) / 3 - var(--stip) - 3.25rem); }
  }
  @supports not (width: 1cqw) {
    .b-diensten-route--eindpunt { --dr-w: 14rem; }
  }
  .b-diensten-route--eindpunt .s-diensten__route::before,
  .b-diensten-route--eindpunt .s-diensten__stroom { right: calc((1 - var(--dr-start)) * var(--dr-w)); }
  .b-diensten-route--eindpunt .s-diensten__route::after { right: calc((1 - var(--dr-start)) * var(--dr-w) - var(--eind) / 2); }
  .b-diensten-route__eind {
    top: calc(var(--stip) / 2 - var(--dr-basis) * var(--dr-ratio) * var(--dr-w));
    right: 0;
  }

  /* De scène steekt boven de lijn uit, rechts naast de kop: de link "Alle
     diensten" staat daarom onder de lead (zoals op mobiel), en de lead
     blijft links van de scène. */
  .b-diensten-route--eindpunt .sectie-kop--met-actie { grid-template-columns: minmax(0, 1fr); }
  .b-diensten-route--eindpunt .sectie-kop .lead { max-width: min(60ch, 100% - 22rem); }
}

/* --- De stroom gaat door in de scène ------------------------------------------
   Eén cyclus met de puls op de route (--dr-duur): rond 70% komt de puls bij
   het eindpunt aan en licht dat op (keyframes hierboven). Daarna loopt de
   stroom door de kabel van de lader naar het voertuig, dat oplicht en
   rustig uitdooft in het begin van de volgende cyclus. Bij het kantoorpand
   lichten de laadpalen kort na elkaar op (--dv-fase per kabel); bij de
   huizen gaat de stroom eerst naar het trafohuisje en dan naar de laadpaal.
   De overige micro-animaties van de scène (lampjes, golven, deinen) lopen
   in hun eigen tempo. De scène pauzeert niet buiten beeld (domeinvisual.js),
   zodat hij gelijk blijft met de puls; diensten-route.js zet ze na een
   herstart (bijv. wisselen tussen mobiel en desktop) weer gelijk. */
.b-diensten-route__eind .dv:not(.is-actief),
.b-diensten-route__eind .dv:not(.is-actief) * { animation-play-state: running !important; }

.b-diensten-route .b-diensten-route__eind .dv .dv-puls,
.b-diensten-route .b-diensten-route__eind .dv .dv-eind__aan,
.b-diensten-route .b-diensten-route__eind .dv .dv-eind__halo {
  animation-duration: var(--dr-duur);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: calc((.6 - var(--dv-fase, .6)) * .3 * var(--dr-duur));
}
.b-diensten-route .b-diensten-route__eind .dv .dv-puls { animation-name: b-diensten-route-puls; }
.b-diensten-route .b-diensten-route__eind .dv .dv-eind__aan { animation-name: b-diensten-route-aan; }
.b-diensten-route .b-diensten-route__eind .dv .dv-eind__halo { animation-name: b-diensten-route-halo; }
.b-diensten-route .b-diensten-route__eind .dv .dv-heen .dv-puls { animation-name: b-diensten-route-heen; }
.b-diensten-route .b-diensten-route__eind .dv .dv-terug .dv-puls { animation-name: b-diensten-route-terug; }
.b-diensten-route .b-diensten-route__eind .dv .dv-eind--terug .dv-eind__aan { animation-name: b-diensten-route-aan-laat; }
.b-diensten-route .b-diensten-route__eind .dv .dv-eind--terug .dv-eind__halo { animation-name: b-diensten-route-halo-laat; }

@keyframes b-diensten-route-puls {
  0%, 72% { stroke-dashoffset: var(--dv-l); }
  88%, 100% { stroke-dashoffset: calc(var(--dv-l) - 132px); }
}
@keyframes b-diensten-route-aan {
  0% { opacity: 1; }
  6%, 83% { opacity: 0; }
  86%, 100% { opacity: 1; }
}
@keyframes b-diensten-route-halo {
  0% { opacity: .12; transform: scale(1.25); }
  8% { opacity: 0; transform: scale(1.35); }
  83% { opacity: 0; transform: scale(.4); }
  89% { opacity: .32; transform: scale(1); }
  100% { opacity: .12; transform: scale(1.25); }
}
/* Huizen: eerst naar het trafohuisje, dan naar de laadpaal */
@keyframes b-diensten-route-heen {
  0%, 72% { stroke-dashoffset: var(--dv-l); }
  84%, 100% { stroke-dashoffset: calc(var(--dv-l) - 132px); }
}
@keyframes b-diensten-route-terug {
  0%, 81% { stroke-dashoffset: var(--dv-l); }
  93%, 100% { stroke-dashoffset: calc(var(--dv-l) - 132px); }
}
@keyframes b-diensten-route-aan-laat {
  0% { opacity: 1; }
  8%, 90% { opacity: 0; }
  93%, 100% { opacity: 1; }
}
@keyframes b-diensten-route-halo-laat {
  0% { opacity: .2; transform: scale(1.15); }
  10% { opacity: 0; transform: scale(1.35); }
  90% { opacity: 0; transform: scale(.4); }
  96% { opacity: .32; transform: scale(1); }
  100% { opacity: .2; transform: scale(1.15); }
}

/* --- Minder beweging: alles staat stil in de eindtoestand -------------------
   De puls is weg (zoals op de homepage). Met een scène is de stroom
   aangekomen: het eindpunt is groen en de scène staat stil op het moment dat
   het voertuig oplicht (domeinvisual.css). Zonder scène blijft het eindpunt
   roze, zoals op de homepage. */
@media (prefers-reduced-motion: reduce) {
  .b-diensten-route .s-diensten__route::after { animation: none; }
  .b-diensten-route--eindpunt .s-diensten__route::after {
    background: var(--groen);
    box-shadow: 0 0 0 5px rgba(0, 242, 130, .25), 0 0 12px 3px rgba(0, 242, 130, .55);
  }
}