/* ==========================================================================
   Bewegung: Einblenden beim Scrollen, Seitenwechsel, Zahlenlauf
   --------------------------------------------------------------------------
   Grundsatz: Bewegung darf nie Voraussetzung dafür sein, dass man etwas
   sieht. Ohne JavaScript und bei prefers-reduced-motion ist alles sofort
   sichtbar - siehe der Block ganz unten.
   ========================================================================== */

/* --- Einblenden beim Scrollen -------------------------------------------- */

/* Erst wenn theme.js die Klasse setzt, wird überhaupt etwas versteckt.
   Ohne JavaScript greift die Regel nie. */
.wt-js .wt-auftritt {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--wt-ruhig) var(--wt-kurve),
              transform var(--wt-ruhig) var(--wt-kurve);
  transition-delay: var(--verzug, 0ms);
}

.wt-js .wt-auftritt.wt-da {
  opacity: 1;
  transform: none;
}

/* --- Seitenwechsel ------------------------------------------------------- */

/* Browser mit Unterstützung blenden die Seiten ineinander über. Alle
   anderen ignorieren die Regel - kein Ersatzweg nötig. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: wt-weg 180ms var(--wt-kurve-weich) both;
}
::view-transition-new(root) {
  animation: wt-her 320ms var(--wt-kurve) both;
}

@keyframes wt-weg {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes wt-her {
  from { opacity: 0; transform: translateY(10px); }
}

/* Die Kopfleiste bleibt beim Wechsel stehen, statt mitzuwandern. */
.wt-kopf { view-transition-name: wt-kopf; }

/* --- Zahlenlauf ---------------------------------------------------------- */

.wt-lauf { font-variant-numeric: tabular-nums; }

/* --- Ladebalken beim Seitenwechsel --------------------------------------- */

.wt-fortschritt {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--wt-accent), var(--wt-gut));
  opacity: 0;
  pointer-events: none;
  transition: width 240ms var(--wt-kurve), opacity 160ms;
}
.wt-fortschritt[data-laeuft="ja"] { opacity: 1; }

/* --- Sanftes Aufblenden beim ersten Laden -------------------------------- */

.wt-js .wt-inhalt { animation: wt-start 420ms var(--wt-kurve) both; }

@keyframes wt-start {
  from { opacity: 0; }
}

/* --- Wenn weniger Bewegung gewünscht ist --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .wt-js .wt-auftritt { opacity: 1; transform: none; }
  .wt-js .wt-inhalt { animation: none; }
  .wt-kopf-wert i { animation: none; }

  @view-transition { navigation: none; }
}