/* kit/image-mask — MIT, siehe LICENSE im selben Ordner. 0 Abhaengigkeiten.

   Weiche Bild-Maske: das Bild schiebt sich beim Eintreten aus einer
   angeschnittenen Kante frei. Einmalig, persistent, per
   IntersectionObserver — nicht scroll-gebunden.

   Der Vorher-Zustand ist absichtlich mild: 18% angeschnitten und 3% zu gross.
   Bleibt ein Element aus irgendeinem Grund in "pending" haengen, sieht man ein
   leicht beschnittenes Bild — nicht ein fehlendes. Ein Reveal ueber opacity
   haette an derselben Stelle eine leere Flaeche hinterlassen. */

/* Masse aus Variablen, Fallback = Stufe "normal". Die Uebergroesse ist hier
   ANDERS als bei parallax-media und ken-burns zu bewerten: sie steht nur
   waehrend der Bewegung, der RUHEZUSTAND ist scale(1) und inset(0). Das
   Geraete-Raster misst den Ruhezustand nach dem Durchscrollen — deshalb kostet
   ein groesserer Wert hier keine einzige Zahl, waehrend er bei den beiden
   anderen dauerhaft eine bewegt. Genau deshalb darf diese Komponente Kraft
   bekommen und die beiden anderen bleiben auf auto:false. */
[data-kit-mask="pending"] {
  clip-path: inset(0 0 var(--kit-mask-cut, 26%) 0);
  transform: scale(var(--kit-mask-s, 1.05));
  will-change: clip-path, transform;
}

[data-kit-mask="in"] {
  clip-path: inset(0 0 0 0);
  transform: none;
  /* Langsamer als ein Reveal, weil die Kante die Bewegung sichtbar traegt.
     clip-path animiert im Compositor nur eingeschraenkt — bei einem Bild pro
     Sektion ist das der Preis fuer die Optik, bewusst bezahlt. */
  transition: clip-path var(--kit-mask-dur, 820ms) cubic-bezier(.2, .7, .3, 1),
              transform var(--kit-mask-dur, 820ms) cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-kit-mask] {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}