/* ============================================
   IAF — Page Transitions (View Transitions API)

   Recette copiée d'oora.ch : cross-document View Transitions
   natives du navigateur. Aucun JS, aucun htmx : le navigateur
   prend un screenshot visuel de la page courante avant de
   naviguer, puis anime en crossfade entre l'ancien et le nouveau
   snapshot.

   Support : Chrome/Edge 126+ (juin 2024), Safari 26+.
   Firefox : fallback navigation classique sans animation.

   Chaque navigation reste un full page load : les modules JS
   (landing intro, nav, page-bg-color, headings-orphans) sont
   ré-initialisés naturellement sur la nouvelle page, et la
   <video> du landing se charge normalement sans bug.
   ============================================ */

:root {
  --iaf-vt-duration: 950ms;
  --iaf-vt-easing: cubic-bezier(0.22, 1, 0.36, 1);
  /* Blur réduit de 200px à 80px : le rectangle IAF White (50vw × 50vh)
     du landing étale sa couleur sur blur-radius pixels dans toutes les
     directions. À 200px il dominait le viewport entier en mi-transition
     (flash blanc). À 80px il reste contenu. Idem pour les edges
     transparents qui laissaient le body #EEEEEE transparaître. */
  --iaf-vt-blur: 80px;
}

/* Opt-in `@view-transition { navigation: auto }` injecté en JS (head, avant
   paint) uniquement pour les navigateurs NON-Safari, cf.
   swissiaf_platform_head_snippet(). Safari ne déclenche donc pas de
   cross-document View Transition : la nav joue l'intro du hero comme un reload. */

@keyframes iaf-vt-out {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(var(--iaf-vt-blur));
  }
}

@keyframes iaf-vt-in {
  from {
    opacity: 0;
    filter: blur(var(--iaf-vt-blur));
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

::view-transition-old(root) {
  animation: var(--iaf-vt-duration) var(--iaf-vt-easing) both iaf-vt-out;
}

::view-transition-new(root) {
  animation: var(--iaf-vt-duration) var(--iaf-vt-easing) both iaf-vt-in;
}

/* Safari WebKit — filter: blur() on full-page VT snapshots is very costly
   and causes stutter / dropped frames. Use opacity crossfade only (class set
   inline + iaf-view-transition.js). Blending two full-page retina (dpr 2)
   snapshots for 950ms also drops frames on WebKit and overlaps the hero
   intro; shorten the crossfade on Safari to cut compositor load + overlap.
   Chrome keeps the 950ms design. */
html.iaf-safari {
  --iaf-vt-blur: 0px;
  --iaf-vt-duration: 450ms;
}

@keyframes iaf-vt-out-safari {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes iaf-vt-in-safari {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html.iaf-safari ::view-transition-old(root) {
  animation-name: iaf-vt-out-safari;
}

html.iaf-safari ::view-transition-new(root) {
  animation-name: iaf-vt-in-safari;
}

/* Mobile / touch — no cross-document VT inject (head snippet). Fallback if VT fires. */
html.iaf-mobile-vt-skip {
  --iaf-vt-blur: 0px;
  --iaf-vt-duration: 0ms;
}

html.iaf-mobile-vt-skip ::view-transition-old(root),
html.iaf-mobile-vt-skip ::view-transition-new(root) {
  animation: none !important;
  filter: none !important;
}

/* Accessibilité : pas de blur massif pour les utilisateurs qui
   ont demandé des animations réduites. On garde un crossfade très
   court à la place. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 150ms;
  }

  @keyframes iaf-vt-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  @keyframes iaf-vt-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}