/* ==========================================================================
   CCX-VIDSWAP - Video-Ebene ueber einem bestehenden Bild.
   Gehoert zu assets/ccx-vidswap.js. Bewusst knapp gehalten: die Huelle darf
   die Kachel weder groesser noch kleiner machen als das Bild allein.
   ========================================================================== */

/* Huelle: uebernimmt exakt den Platz des Bildes. line-height und font-size
   auf 0, weil ein Bild als inline-block sonst auf der Textgrundlinie sitzt
   und darunter ein paar Punkte Luft entstehen - die Kachel wuerde beim
   Einbau minimal wachsen. */
.ccx-vidswap {
  display: block;
  position: relative;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
}

/* Am Bild selbst wird mit Absicht nichts gesetzt. Breite und Hoehe kommen
   weiter aus Theme und Bild-Widget - beide sind ueber Nachfahren-Selektoren
   gesetzt und greifen in der Huelle unveraendert weiter. Wuerde hier etwa
   height:auto erzwungen, aenderte sich die Darstellung ueberall dort, wo ein
   Bild bewusst auf eine feste Hoehe gezogen wird. Den Zeilenrest unter dem
   Bild faengt bereits line-height/font-size an der Huelle ab. */

/* Video deckungsgleich darueber. Startet unsichtbar und wird erst
   eingeblendet, wenn die Schleife wirklich laeuft. */
.ccx-vidswap__v {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border: 0;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.ccx-vidswap.is-ready > .ccx-vidswap__v { opacity: 1; }

/* Betriebsart 'screen': das Video wird aufgehellt darueber gerechnet, das
   Bild bleibt sichtbar. Schwarze Bereiche des Videos verschwinden dabei
   vollstaendig - so traegt die Schleife nur ihre Lichter bei, waehrend
   Linien und Logos die scharfe Bildfassung bleiben. */
.ccx-vidswap--screen > .ccx-vidswap__v {
  mix-blend-mode: screen;
}

/* Sicherheitsnetz: Wer reduzierte Bewegung eingestellt hat, bekommt die
   Video-Ebene nicht zu sehen. Das Skript startet sie dort ohnehin nicht -
   diese Regel faengt den Fall ab, dass die Einstellung erst nach dem
   Seitenaufbau umgestellt wird. */
@media (prefers-reduced-motion: reduce) {
  .ccx-vidswap__v { display: none !important; }
}