/* Warten mit Regenbogen (js/components/loading.js, Idee I4): Solange etwas lädt, läuft der
   Regenbogen der Pille als Schimmer durch; erst nach einer kurzen Weile, damit schnelles Laden
   nicht aufblitzt. Danach blendet das Bild weich ein. Bewegt wird nur transform und opacity. */
.loads :is(img, video) {
  transition: opacity 700ms var(--ease-out);
}

.is-loading :is(img, video) {
  opacity: 0;
}

.is-loading::after,
.site-nav.is-waiting::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--rainbow);
  content: '';
  pointer-events: none;
  animation:
    loading-in 300ms var(--ease-in-out) 150ms both,
    loading-shimmer 1.4s var(--ease-in-out) 150ms infinite;
}

/* Ohne Bewegung: nur eine ruhige Fläche */
:root[data-motion='still'] :is(.is-loading, .site-nav.is-waiting)::after {
  background: rgb(255 255 255 / 0.08);
  animation: none;
}

@keyframes loading-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.5;
  }
}

@keyframes loading-shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}