/* loop.css — sömlös oändlig loop i sidled: sponsorloggor, kundloggor, nyhetsrader. Kräver loop.js.

   Byggt för Vårkullas framsida 2026-10-16 (sponsorremsan direkt under heron, Sami: "sponsorer med
   logos behöver ligga tidigt så de syns"). Golv och smak ur animation-skillen:
   - karuseller loopar utan att blinka vid varvet (golv 6, 2026-10-01): loop.js klonar gruppen tills
     spåret är minst två skärmbredder, och spåret flyttas exakt en grupps bredd per varv
   - stannar under pekaren och vid tangentbordsfokus, så att en logga går att läsa och klicka
   - ingen rörelse vid prefers-reduced-motion: raden står still och bryts i stället
   - konstant fart (linjärt) är rätt här: en kurva per varv blir ett ryck vid varvet

   Markup:
   <div class="loop" data-loop>
     <ul class="loop__grupp"> <li>…</li> <li>…</li> </ul>
   </div>
   Kopiorna får aria-hidden och tabindex=-1, så att skärmläsare och tabb bara möter originalen.

   --loop-fart (px per sekund) och --loop-lucka är byggets val [OMÄTT]. */

.loop { --loop-fart: 40; --loop-lucka: 12px; position: relative; overflow: hidden; }
.loop__spar { display: flex; width: max-content; gap: var(--loop-lucka); }
.loop__grupp { display: flex; flex: none; gap: var(--loop-lucka); margin: 0; padding: 0; list-style: none; }
.loop.loopar .loop__spar { animation: loop-varv var(--loop-tid, 30s) linear infinite; }
.loop.loopar:hover .loop__spar, .loop.loopar:focus-within .loop__spar { animation-play-state: paused; }
@keyframes loop-varv { to { transform: translateX(calc(-1 * var(--loop-steg, 50%))); } }

/* Kanterna tonar ut i stället för att klippa en logga mitt itu. */
.loop.loopar { -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .loop.loopar .loop__spar { animation: none; }
}
/* Utan loop (för få eller lugnt läge): gruppen bryts och står still. */
.loop:not(.loopar) .loop__spar, .loop:not(.loopar) .loop__grupp { width: auto; flex-wrap: wrap; }
.loop:not(.loopar) [data-loop-kopia] { display: none; }