/* =========================================================================
   View Transition - „Reinzoom in den Steckbrief"

   Der EINZIGE Seitenübergang der Website: beim Klick auf einen Fisch in der
   Übersicht morpht die angeklickte Tafel-Kachel museal in die große Held-Tafel
   des Steckbriefs. Alle anderen Navigationen werden per view-transitions.js
   übersprungen und laufen klassisch (instant) - ganz bewusst kein Blättern,
   kein Rauszoom, keine site-weite Überblendung.

   Bewusst EIGENE, NICHT minifizierte Datei (läuft nicht durch NUglify):
   die @view-transition / ::view-transition-* Syntax ist neu. --ease stammt aus
   dem :root von site.css. Ohne Support oder bei Reduced Motion navigiert der
   Browser klassisch weiter (reines Progressive Enhancement).
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* Beide Dokumente müssen opt-in geben; view-transitions.js überspringt dann
     jede Navigation außer Übersicht -> Steckbrief. */
  @view-transition { navigation: auto; }

  /* Reinzoom: die Held-Tafel morpht (museal, langsam). */
  ::view-transition-group(fish-hero) {
    animation-duration: 540ms;
    animation-timing-function: var(--ease);
  }
  ::view-transition-old(fish-hero),
  ::view-transition-new(fish-hero) {
    animation-duration: 540ms;
    animation-timing-function: var(--ease);
    /* Illustration formatfüllend, damit Kachel (16/10, object-fit:contain) und
       volle Tafel sauber ineinander auffalten. */
    height: 100%;
    object-fit: contain;
  }

  /* Sanfte Grund-Überblendung des restlichen Inhalts während des Zooms.
     (Läuft ausschließlich beim Reinzoom, da alle anderen Übergänge übersprungen
     werden. Kopf/Fuß sind seitengleich und blenden dabei unsichtbar über.) */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: var(--ease);
  }
}

/* Held-Tafel-Name: Detailseite trägt ihn immer nur GENAU EINMAL (der Held-
   „picture"-Block, nicht das optionale zweite Foto) - rein per CSS, ohne die
   16 Steckbrief-Views anzufassen. Übersicht: view-transitions.js setzt den
   Namen auf die angeklickte Kachel. */
.fish-plate:not(.fish-plate--secondary) picture {
  view-transition-name: fish-hero;
}

/* Hart-Stop: falls ein Browser trotz Reduced-Motion doch animiert. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}