/* Slot cycle grid (Truus §9 team grid image cycle, rewritten).
   Every [data-sc-slot] stacks its [data-sc-item]s; part.js walks the slots in a fixed order and, once per beat,
   ONE slot swaps to its next item. The incoming item fades in ON TOP over --sc-fade while the outgoing one stays
   fully opaque underneath and only fades after a --sc-fade delay, so the slot never dips to the background
   colour in between: a picture is always replaced, never blinked.
   Knobs: --sc-fade (.5s), --sc-ease (ease). The beat and the order live in part.js (data-interval, data-sc-slot). */
.slot-cycle { --sc-fade: .5s; --sc-ease: ease; }
.slot-cycle [data-sc-slot] { position: relative; overflow: hidden; }
.slot-cycle [data-sc-item] { position: absolute; inset: 0; }

/* before part.js runs (or without it): each slot shows its first item */
.slot-cycle:not(.is-ready) [data-sc-item] ~ [data-sc-item] { visibility: hidden; }

.slot-cycle [data-sc-state="active"] {
  opacity: 1; visibility: visible; z-index: 3;
  transition: opacity var(--sc-fade) var(--sc-ease) 0s, visibility 0s 0s;
}
.slot-cycle [data-sc-state="previous"] {          /* holds under the new one, then fades once it is covered */
  opacity: 0; visibility: visible; z-index: 2;
  transition: opacity var(--sc-fade) var(--sc-ease) var(--sc-fade), visibility 0s var(--sc-fade);
}
.slot-cycle [data-sc-state="not-active"] { opacity: 0; visibility: hidden; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .slot-cycle [data-sc-item] { transition: none !important; }
}