/* Profielpagina's — loopbaankadertje, beweging optie 5 (uit team-opties-4.css) plus toelichtingen en
 * detacheringen. Wordt door _bron/bouw-profielen.js na profiel.css ingevoegd; gegevens komen uit
 * _bron/profielen-goedgekeurd.json (goedgekeurde bron).
 *  - de stappen verschijnen vlot na elkaar; de laatste stap krijgt de gele markeerstift, die blijft staan;
 *  - zonder js of bij prefers-reduced-motion staat direct het eindbeeld er (markeerstift inbegrepen).
 */

/* toelichting onder een stap ("Ook voorzitter van de ondernemingsraad.") */
.p4-noot { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--zacht); }

/* detacheringen: ingesprongen sub-regels onder de Workx-stap waarin ze vielen */
.p4-dets { display: block; margin-top: 6px; }
.p4-det { display: block; position: relative; padding-left: 14px; font-size: 15px; line-height: 1.4; color: var(--zacht); }
.p4-det + .p4-det { margin-top: 3px; }
.p4-det::before { content: ""; position: absolute; left: 1px; top: .68em; width: 7px; height: 1.5px; background: currentColor; opacity: .7; }

/* lange bundelregels (studiebaantjes) netjes laten afbreken */
.p4-loop .p4-kop, .p4-loop .p4-uitleg, .p4-loop .p4-noot, .p4-loop .p4-det { overflow-wrap: anywhere; }

/* optie 5: de laatste stap met de gele markeerstift (ook in het eindbeeld) */
.p4-v5 li:last-child .p4-kop { display: inline-block; position: relative; z-index: 0; color: var(--inkt); }
.p4-v5 li:last-child .p4-kop::before { content: ""; position: absolute; left: -4px; right: -4px; bottom: .12em; height: .72em; z-index: -1; background: var(--geel); transform-origin: 0 50%; }

@media (prefers-reduced-motion: no-preference) {
  /* 5 · stappen verschijnen vlot na elkaar; de laatste krijgt de markeerstift als slot */
  .js .p4-v5 .p4-punt, .js .p4-v5 .p4-jaar, .js .p4-v5 .p4-tekst, .js .p4-v5 li::after { opacity: 0; transform: translateY(8px); }
  .js .p4-v5 li:last-child .p4-kop::before { transform: scaleX(0); }
  .js .p4-v5.speel .p4-punt, .js .p4-v5.speel .p4-jaar, .js .p4-v5.speel .p4-tekst, .js .p4-v5.speel li::after { opacity: 1; transform: none; transition: opacity .45s var(--ease) calc(var(--i) * .16s), transform .45s var(--ease) calc(var(--i) * .16s); }
  /* de stift start zodra de laatste stap staat (--n = aantal stappen) */
  .js .p4-v5.speel li:last-child .p4-kop::before { transform: none; transition: transform .8s var(--ease) calc((var(--n, 5) - 1) * .16s + .45s); }
}