/* slideshow.css ─ Die Folien einer Diaschau.
   =========================================================================
   EINE Datei fuer ZWEI Orte: die Seite (templates/layout.php) und das
   Bedienfeld (settings.php, Reiter „Diaschauen"). Bis 2026-08-24 standen
   diese Regeln in layout.css; das Bedienfeld laedt layout.css nicht und
   konnte deshalb keine laufende Vorschau zeigen.

   Sie kommen NICHT nach admin.css: admin.css laedt die Seite zusaetzlich,
   und dann staenden sie dort zweimal.

   Gebaut wird das Markup dazu an drei Stellen, die dasselbe ausgeben:
   renderSlideshowBackground() (lib/render.php) fuer die Seite und
   CKShowPreview.render() (assets/js/showpreview.js) fuer beide Vorschauen.
   ========================================================================= */

/* ── Diaschau (E10) ────────────────────────────────────────────────────────
   ALLE ÜBERGÄNGE STEHEN HIER, nicht im JavaScript. slideshow.js schaltet nur
   Klassen um; Dauer, Zoomfaktor und Zoomdauer kommen als CSS-Variablen vom
   Renderer (ckStyle() auf die Blockklasse — ein style-Attribut verbietet die
   CSP, Regel 3).

   DREI ZUSTÄNDE, und der dritte ist der Grund, warum es sie gibt:
     .is-on    dieses Bild ist sichtbar (Opazität)
     .is-zoom  dieses Bild fährt auf seinen Zielmaßstab
     .is-prep  Übergänge AUS — für genau einen Frame

   Der Zoom hängt bewusst NICHT an .is-on: verlöre das abgehende Bild seinen
   Zielmaßstab beim Ausblenden, führe es während der Überblendung sichtbar
   zurück. Es behält .is-zoom, bis es selbst wieder an der Reihe ist — und
   dann setzt .is-prep es unsichtbar zurück (Mechanik aus Oliver-Nimz.com,
   js/main.js:193-207, dort mit Inline-Styles).                             */
.ss { position: absolute; inset: 0; }

.ss__s {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--ss-fade, 1200ms) ease-in-out;
}
.ss__s.is-on { opacity: 1; }

/* Der Zoom wächst aus dem Mittelpunkt DIESES Bildes heraus
   (slideshowItemProps(), --ss-ox/--ss-oy je Folie aus renderSlideshowBackground()).
   Animiert wird weiterhin nur scale() — die Drift entsteht allein aus dem
   Ursprung, genau wie in der Vorlage (Oliver-Nimz.com, js/main.js:184).
   Ohne eigenen Punkt steht hier der Rückfall, und im <head> steht nichts. */
.ss__s img {
  transform: scale(1);
  transform-origin: var(--ss-ox, 50%) var(--ss-oy, 50%);
  transition: transform var(--ss-zoomt, 7200ms) linear;
}
.ss__s.is-zoom img { transform: scale(var(--ss-zoom, 1)); }

/* Der eine Frame ohne Übergang. Er liegt immer auf einem unsichtbaren Bild —
   sichtbar wäre er ein Sprung. */
.ss__s.is-prep, .ss__s.is-prep img { transition: none; }

/* Wer Bewegung abbestellt hat, bekommt ein Standbild: slideshow.js plant dann
   gar nicht erst, und hier fällt auch der Rest der Bewegung weg. */
@media (prefers-reduced-motion: reduce) {
  .ss__s, .ss__s img { transition: none; }
  .ss__s img { transform: none; }
}