/* marquee.css: Home, sectie "marquee" (effect 04, lopende strook). Een rustmoment tussen twee hoofdmomenten.
   Basis = eindstaat: een gewone omlopende regelgroep (zonder JS, bij reduce, bij "Beweging uit", na een fout).
   De lus staat alleen aan als js/sections/marquee.js [data-modus="lus"] zet (dat gebeurt alleen met beweging aan);
   de animatie loopt als CSS-animatie op de compositor, JS zet alleen duur, tempo en kanteling.
   Nieuwe variabelen staan hier, onder de eigen klasse. */

.marquee {
  --mq-fs: clamp(3.25rem, 1.2rem + 7.2vw, 9rem);            /* lettergrootte van de lopende rijen */
  --mq-fs-stil: clamp(2rem, 1rem + 4.4vw, 5.25rem);         /* lettergrootte van de omlopende regelgroep */
  position: relative;
  padding-block: var(--s-32) var(--s-64);
  border-block: var(--haar) solid var(--lijn-fg);
  overflow-x: clip;                                          /* nooit hidden: de rijen lopen tot buiten beeld */
}

/* ---------- balk: uitleg en pauzeknop ---------- */
.marquee__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8) var(--s-24);
  margin-bottom: var(--s-24);
}
.marquee__meer {
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
}
.marquee__meer .pijl { transition: transform calc(var(--t-middel) * var(--m)) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .marquee__meer:hover .pijl { transform: translateX(3px); }
}
.marquee__meer:focus-visible .pijl { transform: translateX(3px); }

.marquee__pauze {
  gap: 0.625rem;
  min-width: 44px;
  min-height: 44px;
}
.marquee__ico { flex: none; }
.marquee__ico--speel { display: none; }
.marquee__pauze[aria-pressed="true"] .marquee__ico--pauze { display: none; }
.marquee__pauze[aria-pressed="true"] .marquee__ico--speel { display: block; }

/* ---------- eindstaat: een omlopende regelgroep ---------- */
.marquee__rijen { display: block; }
.marquee__rij--b,
.marquee__set + .marquee__set { display: none; }              /* het duplicaat voor de lus en de tweede rij bestaan alleen in de lus */
.marquee__spoor { display: block; }
.marquee__set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--rand);
  font-size: var(--mq-fs-stil);
}
.marquee__item {
  display: flex;
  align-items: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  line-height: 1.05;
  overflow-wrap: break-word;
  color: var(--fg);
}
.marquee__item::after {                                       /* scheiding: een klein accentpunt, in CSS */
  content: "";
  flex: none;
  width: 0.16em;
  height: 0.16em;
  margin-inline: 0.4em;
  border-radius: 50%;
  background: var(--accent);
}
.marquee__set > .marquee__item:last-child::after { display: none; }
/* Omlijnd: de rand wordt onder de vulling getekend (paint-order) en de vulling heeft de kleur van het papier. Zo verdwijnen de
   overlappende contouren van het variabele lettertype, die met alleen een rand als lijnen in de letters zichtbaar blijven. */
.marquee__set > .marquee__item:nth-child(even) {              /* afwisseling in de stilstaande groep: massief en omlijnd */
  color: var(--bg);
  -webkit-text-stroke: max(2px, 0.02em) var(--fg);
  paint-order: stroke fill;
  letter-spacing: 0.012em;
}
@supports not (paint-order: stroke fill) {
  .marquee__set > .marquee__item:nth-child(even) { color: var(--fg-dim); -webkit-text-stroke: 0; }
}

/* ---------- de lus (alleen met beweging aan) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .marquee[data-modus="lus"] .marquee__rijen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);                    /* de kolom is het venster breed, niet zo breed als de lus */
    gap: 0.14em;
    font-size: var(--mq-fs);
    transform-origin: 50% 50%;                                /* de kanteling (skewX, hooguit 8 graden) zet JS op deze wrapper */
    will-change: transform;                                   /* een eigen laag: de kanteling verandert alleen de laag, de tekst wordt niet opnieuw getekend */
  }
  .marquee[data-modus="lus"] .marquee__rij { overflow-x: clip; }
  .marquee[data-modus="lus"] .marquee__rij--b {
    display: block;
    font-size: 0.86em;
    font-stretch: 82%;                                        /* smaller, zodat de twee rijen ook in ritme verschillen */
    letter-spacing: 0.012em;                                  /* een omlijnde letter heeft lucht nodig: de randen raken elkaar anders */
  }
  .marquee[data-modus="lus"] .marquee__spoor {
    display: flex;
    width: max-content;
    animation: marquee-lus var(--duur, 240s) linear infinite; /* lineair: constante beweging (EM). Duur = breedte van een set / snelheid, door JS */
  }
  .marquee[data-modus="lus"] .marquee__rij--b .marquee__spoor { animation-direction: reverse; }
  .marquee[data-modus="lus"] .marquee__set,
  .marquee[data-modus="lus"] .marquee__set + .marquee__set {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    max-width: none;
    margin: 0;
    padding: 0.04em 0;
    font-size: inherit;
  }
  .marquee[data-modus="lus"] .marquee__item {
    flex: none;
    white-space: nowrap;
    font-size: 1em;
  }
  .marquee[data-modus="lus"] .marquee__set > .marquee__item:last-child::after { display: block; }   /* de lus sluit pas aan als de set ook achter de laatste naam een punt heeft */
  .marquee[data-modus="lus"] .marquee__rij--a .marquee__set > .marquee__item:nth-child(even) {   /* rij a is helemaal massief */
    color: var(--fg);
    -webkit-text-stroke: 0;
    letter-spacing: -0.012em;
  }
  .marquee[data-modus="lus"] .marquee__rij--b .marquee__item {   /* de tweede rij is omlijnd */
    color: var(--bg);
    -webkit-text-stroke: max(2px, 0.026em) var(--fg);
    paint-order: stroke fill;
    letter-spacing: inherit;
  }
  @supports not (paint-order: stroke fill) {
    .marquee[data-modus="lus"] .marquee__rij--b .marquee__item { color: var(--fg-dim); -webkit-text-stroke: 0; }
  }
  .marquee[data-state="paused"] .marquee__spoor { animation-play-state: paused; }

  @keyframes marquee-lus { to { transform: translateX(-50%); } }
}