/* Effect: bewegende fotostrook (strook) — v0.1.0
   Foto's schuiven traag horizontaal voorbij in een naadloze lus (strook.js verdubbelt de reeks).
   Pauzeert bij aanwijzen/focus en buiten beeld. Bij minder beweging: gewone horizontale rij om
   zelf te scrollen. Kost: laag (één transform-animatie op de compositor). */
.strook {
  --strook-h: 200px; --strook-gat: 10px;
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
@media (min-width: 768px) { .strook { --strook-h: 290px; --strook-gat: 14px; } }
.strook-baan { display: flex; gap: var(--strook-gat); width: max-content; animation: strook-lus var(--strook-duur, 60s) linear infinite; will-change: transform; }
.strook:hover .strook-baan, .strook:focus-within .strook-baan, .strook.is-gepauzeerd .strook-baan { animation-play-state: paused; }
@keyframes strook-lus { to { transform: translate3d(calc(-50% - var(--strook-gat) / 2), 0, 0); } }
.strook-item { margin: 0; flex: none; height: var(--strook-h); border-radius: 16px; overflow: hidden; position: relative; border: 1px solid rgba(255, 255, 255, 0.1); background: #0b0910; }
.strook-item img { height: 100%; width: auto; max-width: none; filter: saturate(0.8) brightness(0.86); transition: filter 0.5s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.strook-item:hover img { filter: none; transform: scale(1.04); }
.strook-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(5, 4, 7, 0.45)); }
@media (prefers-reduced-motion: reduce) {
  .strook { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .strook-baan { animation: none; }
  .strook-baan [aria-hidden="true"] { display: none; }
}