/* =========================================================
   OPDRACHTGEVERS - de logoloop, herontworpen in de taal van
   deze site (30-07): één rij, een mono-label met lijntje
   zoals de eyebrows van de hero, geen harde randen maar
   uitfadende zijkanten, logo's licht gedempt en vol wit zodra
   je muis op de rij staat. De loop-motor (pauze op hover,
   slepen met uitloop, trackpad) komt van de huidige site.
   Staat sinds 13-08 vast onderin het multiviewerframe (Willems
   vraag: paneel en loop samen in één beeld na de dip); zodra
   het logo van onderen komt lost de loop op in een defocus.
   home.js stuurt dekking en klikbaarheid.
   ========================================================= */

/* de ruimte die de loop onderin het frame claimt; multiviewer.css
   haalt dit van de paneelhoogte af en schuift het paneel een halve
   loophoogte omhoog. Zo krap als kan (13-08, Willems vraag: het
   paneel werd te klein): elke rem hier kost het paneel bijna twee
   rem breedte. De logorij zit net boven het mixerblok en het gaatje
   naar het paneel is 8-12px; wordt een van de maten hieronder
   ruimer, meet dan beide na. */
.home {
  --opdr-ruimte: 4.8rem;
}

.opdr {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* boven de glogo (37): de loop blijft zichtbaar terwijl de
     letters er van onderen achterlangs omhoog schuiven */
  z-index: 40;
  /* de 1.1rem houdt de logorij nét vrij van het mixerblok
     rechtsonder (top van dat blok is pad*0.85 + ~15px) */
  padding-bottom: calc(var(--pad) * 0.85 + 1.1rem);
  opacity: 0; /* home.js fadet dit in zodra het frame staat */
  pointer-events: none;
}

.opdr.is-on { pointer-events: auto; }

/* ---------- het label ----------
   klein mono-microlabel (zelfde register als de timecode en de
   eyebrows), gecentreerd boven de rij; de grote sectiekop stond
   hier eerder half over de logo's en is afgekeurd (30-07) */
.opdr-label {
  margin: 0 0 0.7rem;
  text-align: center;
  color: var(--ink-soft);
}

/* ---------- de rij ---------- */

.ticker {
  overflow: clip;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* verticaal scrollen blijft van de pagina, horizontaal slepen van ons */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker:active { cursor: grabbing; }

/* JS pakt de items in herhaalde .tick-set-kopieën en drijft de loop.
   De padding-right van een set is meteen de naadruimte: één set is
   precies één periode. */
.ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.tick-set {
  display: flex;
  align-items: center;
  gap: clamp(2.8rem, 6.5vw, 5.5rem);
  padding-right: clamp(2.8rem, 6.5vw, 5.5rem);
}

/* logocanvas is 192px hoog (6x), optisch genormaliseerd; licht
   gedempt zodat de rij niet met het logo concurreert, maar wel
   goed leesbaar, en vol wit zodra de muis erop staat (dan
   pauzeert de loop toch al) */
img.tick-item {
  height: 2.15rem;
  width: auto;
  opacity: 0.78;
  transition: opacity 0.45s var(--ease), transform 0.28s var(--ease);
}

.ticker:hover img.tick-item { opacity: 1; }

/* het logo waar je op staat komt naar voren: de rij pauzeert
   toch al bij hover, dus dit leest als één logo oppakken
   (01-08, Willems keuze voor "fysiek en tastbaar") */
.ticker img.tick-item:hover {
  transform: translateY(-3px) scale(1.06);
  transition-duration: 0.12s; /* direct aanslaan, rustig loslaten */
}

/* telefoon: het mixerblok bestaat daar niet, dus de extra
   onderrand kan terug naar het paneel; elke pixel minder reserve
   gaat rechtstreeks naar de bronvakjes */
@media (max-width: 700px) {
  .home { --opdr-ruimte: 4.2rem; }
  .opdr { padding-bottom: calc(var(--pad) * 0.9); }
  .opdr-label { margin-bottom: 0.7rem; }
  img.tick-item { height: 1.7rem; }
  .tick-set { gap: 2.2rem; padding-right: 2.2rem; }
}

/* lage vensters (liggende telefoon, half scherm): de loop een
   maat compacter, anders houdt het paneel erboven geen hoogte
   over. De extra onderrand voor het mixerblok blijft hier staan,
   want boven 700px breed is dat blok gewoon in beeld. */
@media (max-height: 620px) {
  .home { --opdr-ruimte: 4.2rem; }
  .opdr-label { margin-bottom: 0.5rem; }
  img.tick-item { height: 1.5rem; }
}

/* allebei tegelijk (de allerkleinste telefoons): nog een maat af */
@media (max-width: 700px) and (max-height: 620px) {
  .home { --opdr-ruimte: 3.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* geen loop: de rij wordt een gewone schuifstrook */
  .ticker { overflow-x: auto; cursor: default; }

  /* wel oplichten, niet bewegen */
  .ticker img.tick-item:hover { transform: none; }
}