/* ═══════════════════════════════════════════════════════════════════════════
   assets/css/tilefx.css — Hover-Effekte an Kacheln mit Großansicht.

   Welcher Effekt gilt, stellt der Betreiber im Bedienfeld ein (Tab „Bilder",
   Feld media.hoverfx aus schemaFieldsMedia()). renderGrid() hängt ihn als
   .mgrid--hfx plus .mgrid--hfx-<schlüssel> an das Raster — und nur an eines,
   das die Großansicht überhaupt kennt.

   EINE EIGENE DATEI, WEIL SIE ZWEI DOKUMENTE LÄDT: die Seite und das
   Bedienfeld, das die Effekte an drei Musterkacheln vorführt. Dieselbe
   Bauform wie slideshow.css. In layout.css könnte das Bedienfeld sie nicht
   lesen, ohne sich das ganze Seitenlayout mit einzuhandeln.

   WELCHE KACHEL REAGIERT, SAGT data-full. Das Attribut steht genau dann im
   Markup, wenn ein Klick die Großansicht öffnet — dieselbe Bedingung wie der
   Zeigefinger in layout.css und SEL in lightbox.js (DEV-LOG [47], [53]). Eine
   vierte Abschrift der :not()-Ausschlüsse wäre die, die beim nächsten
   Schalter vergessen wird.

   body:not(.ck-edit) aus demselben Grund wie beim Zeigefinger: im
   Bearbeitungsmodus öffnet der Klick den Editor, nicht die Großansicht — ein
   Effekt, der sie ankündigt, kündigte dort etwas an, das nicht passiert.

   (hover: hover): auf Touchgeräten bliebe der Effekt nach dem Antippen
   stehen, bis woanders hingetippt wird.

   Jeder Schlüssel aus schemaFieldsMedia() braucht hier eine Regel
   ('none' ausgenommen) — der Selbsttest prüft das.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) {

  /* Die Übergänge für alle Effekte. Gebündelt statt je Effekt, damit das
     Zurücknehmen beim Verlassen genauso weich läuft wie das Einsetzen. */
  body:not(.ck-edit) .mgrid--hfx .mtile[data-full] img {
    transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
                filter 0.4s ease, opacity 0.4s ease;
    /* EIN PIXEL UEBERSTAND nach rechts und unten. Solange transform, filter
       oder opacity laufen, zeichnet der Browser das Bild als eigene Ebene und
       rastet deren Ursprung auf ganze Geraetepixel ein — ABGERUNDET. Die
       Kachel hat aus aspect-ratio und fr-Spalten aber fast immer eine
       gebrochene Hoehe, und ihr Zuschnitt (overflow: hidden) bleibt, wo er
       ist: unten und rechts liegt dann ein Streifen unter 1 px frei, durch
       den der Kachelgrund (--sec-bg) als helle Linie scheint. Nur bei
       manchen Kacheln, weil es an der Lage im Raster haengt, und nur
       waehrend des Effekts, weil die Ebene danach wieder aufgeloest wird.
       Der Ueberstand wird von der Kachel abgeschnitten; object-fit: cover
       nimmt dafuer einen Bruchteil eines Pixels mehr vom Bild weg.
       max-width: none, weil base.css Medien auf 100 % deckelt. */
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    max-width: none;
  }
  body:not(.ck-edit) .mgrid--hfx .mtile[data-full] {
    transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.4s ease;
  }

  /* ── Aufhellen ────────────────────────────────────────────────────────── */
  body:not(.ck-edit) .mgrid--hfx-bright .mtile[data-full]:hover img,
  body:not(.ck-edit) .mgrid--hfx-zoombright .mtile[data-full]:hover img {
    filter: brightness(1.1) saturate(1.06);
  }

  /* ── Farbschleier und Passepartout: eine Fläche ÜBER dem Bild ────────────
     ::before und nicht ::after — ::after trägt im Bearbeitungsmodus die Lupe
     (admin.css). Der Effekt ist dort zwar aus, aber zwei Regeln auf demselben
     Pseudo-Element wären eine Abhängigkeit, die niemand sieht. */
  body:not(.ck-edit) .mgrid--hfx-tint .mtile[data-full]::before,
  body:not(.ck-edit) .mgrid--hfx-frame .mtile[data-full]::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, box-shadow 0.4s ease;
  }

  /* Die CI-Farbe als Token (Regel 2) — sie zieht nach, wenn der Betreiber
     CI 1 ändert. */
  body:not(.ck-edit) .mgrid--hfx-tint .mtile[data-full]::before {
    background: var(--ci-1);
    opacity: 0;
  }
  body:not(.ck-edit) .mgrid--hfx-tint .mtile[data-full]:hover::before { opacity: 0.18; }

  /* Ein Rand in der Sektionsfarbe wächst von außen herein — das Bild scheint
     sich ins Passepartout zurückzuziehen. --sec-bg und nicht Weiß: derselbe
     Grund, den auch die Kachel selbst hat (layout.css, DEV-LOG [55]). */
  body:not(.ck-edit) .mgrid--hfx-frame .mtile[data-full]::before {
    box-shadow: inset 0 0 0 0 var(--sec-bg, var(--ci-white));
  }
  body:not(.ck-edit) .mgrid--hfx-frame .mtile[data-full]:hover::before {
    box-shadow: inset 0 0 0 0.6rem var(--sec-bg, var(--ci-white));
  }

  /* ── Andere Bilder zurücknehmen ──────────────────────────────────────────
     Reagiert am RASTER, nicht an der Kachel: zurück treten die Nachbarn.
     Durch die Deckkraft scheint die Sektionsfarbe durch, die hinter jeder
     Kachel liegt — auf hellem wie auf dunklem Grund dasselbe Zurücktreten.
     Ohne :has() (sehr alte Browser) bleibt es schlicht aus. */
  body:not(.ck-edit) .mgrid--hfx-focus:has(.mtile[data-full]:hover) .mtile[data-full]:not(:hover) img {
    opacity: 0.6;
  }
}

/* Was sich BEWEGT, nur für Besucher ohne reduzierte Bewegung. Aufhellen,
   Schleier und Zurücknehmen bleiben dort erhalten — sie verschieben nichts. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  /* ── Sanft vergrößern ──────────────────────────────────────────────────
     Das BILD wächst, die Kachel nicht: .mtile schneidet mit overflow: hidden
     ab, das Raster bleibt stehen. */
  body:not(.ck-edit) .mgrid--hfx-zoom .mtile[data-full]:hover img,
  body:not(.ck-edit) .mgrid--hfx-zoombright .mtile[data-full]:hover img {
    transform: scale(1.045);
  }

  /* ── Anheben mit Schatten ──────────────────────────────────────────────
     Die Kachel selbst hebt sich. Der Schatten ist kein Farbwert aus den
     Einstellungen, sondern ein Abdunkeln — deshalb kein Token. */
  body:not(.ck-edit) .mgrid--hfx-lift .mtile[data-full]:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 0.9rem 1.6rem -0.7rem rgb(0 0 0 / 0.4);
  }
}