/* ==========================================================================
   Animation d'entrée (arrivée sur le site) — reconstruite d'après lecture
   DIRECTE du fichier Figma sur le découpage image par image fourni par
   Maxence (frames 45/50/51/52/54 à 63 + 3 états de "Accueil", nœuds Figma
   6930:xxx). Voir inc/site-preloader.php pour le détail complet du
   raisonnement et des mesures. Résumé :

   - Panneau diagonal (.avf-diag-shape) : rotation 0°, fill #FFFFFF,
     3944×1079.5px dans une frame 1920×1080, clip-path polygon(1.84% 0%,
     100% 0%, 100% 100%, 20.87% 100%) (bord diagonal mesuré dans Figma).
     Position couvrante x=-1080px (-56.25vw). Le "peek" révèle
     PROGRESSIVEMENT et PARTIELLEMENT la vraie page en dessous (celle-là
     même sur laquelle on arrive, pas un visuel factice) : le panneau
     glisse vers la droite en continu à travers les positions mesurées
     -620px, 0px, 490px (frames 50/52/45, tenue à 490px sur la frame 58)
     jusqu'à 1490px (frame 59, -56.25vw → 77.6vw). À CETTE position le bord
     diagonal du panneau est encore partiellement dans le viewport (calcul :
     point haut du bord à 1562px < 1920px) : l'écran n'est donc jamais
     totalement découvert pendant le peek, juste une bonne partie en haut à
     droite. (Frame 60, x=2680px, sort complètement l'écran — volontairement
     PAS reproduite : Pierre a confirmé que seules les frames 50/52/45/58/59
     font partie du peek.)
   - Le panneau revient ensuite directement à la position couvrante
     (.avf-phase-recover, Ease in back 400ms, relevé dans le prototype
     Figma) pour repasser en blanc plein écran avant l'apparition du logo.
   - Logo Valeri (.avf-preloader__logo) : n'est pas un simple fade. Sur les
     frames où il est visible (57 → 62), son calque Figma remonte de 80px
     (y=415 → 335) avant de disparaître (frame 63). Reproduit par un léger
     drift vertical : translateY(28px) avant apparition → translateY(-14px)
     une fois visible → translateY(-42px) en disparaissant (classe
     .is-hiding), dans le prolongement du reveal final qui, lui aussi,
     remonte.
   - Reveal final (#avf-preloader.avf-phase-leaving) : PAS diagonal. Un
     calque "Vector 3" indépendant dans les 3 états de la frame "Accueil"
     (les 3 dernières frames de la sélection de Pierre) reste à x fixe
     (-1080px, toujours en position couvrante horizontalement) mais son y
     remonte progressivement : -390 → -880 → -1120px sur une frame de
     1080px de haut, soit une sortie vers le HAUT un peu au-delà de 100% de
     la hauteur d'écran — une "fenêtre" qui s'ouvre verticalement, pas un
     panneau qui glisse sur le côté. D'où translateY(-105%) ci-dessous.

   Séquence (timing mesuré image par image sur la vidéo de référence de
   Pierre, détail dans assets/js/site-preloader.js) :
   1. Page démarre déjà recouverte de blanc.
   2. Peek : le panneau glisse pour révéler partiellement la vraie page en
      dessous, tenue brève, puis revient recouvrir en blanc plein écran.
   3. Logo Valeri : apparaît sur fond blanc, dérive vers le haut, disparaît.
   4. Reveal final : fenêtre qui s'ouvre verticalement vers le haut, révèle
      la page.

   Se joue UNE SEULE FOIS PAR SESSION NAVIGATEUR (voir inc/site-preloader.php
   pour la règle sessionStorage), jamais entre deux pages du site cliquées
   depuis le site (voir site-transition.js / site-transition.css : le clic
   interne ne pose plus qu'un voile de sortie léger, sans logo, séparé de
   cette séquence).
   ========================================================================== */

#avf-preloader {
  /* display géré par le CSS critique inline (inc/site-preloader.php) :
     none par défaut, flex seulement si avf-intro-active. Ne PAS redéclarer
     "display" ici, sinon ça écrase ce comportement (les deux règles ont la
     même spécificité, celle-ci arrive après en source et gagnerait,
     affichant l'overlay même quand il ne devrait pas).
     PAS de background ici non plus : le blanc vient UNIQUEMENT de
     .avf-diag-shape ci-dessous. Un fond blanc sur ce conteneur rendrait le
     panneau diagonal invisible (blanc sur blanc) pendant tout le peek. */
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Reveal final : translateY, pas clip-path (voir note ci-dessus). */
  transition: transform 0.35s cubic-bezier(0, 0, 0.58, 1);
}

#avf-preloader.avf-phase-leaving {
  /* Mesuré à ~-104% (-1120px / 1080px) dans Figma, arrondi à -105% pour
     garantir une sortie complète sans liseré résiduel. */
  transform: translateY(-105%);
  pointer-events: none;
}

/* Panneau diagonal partagé avec .avf-transition-panel (site-transition.css).
   Surdimensionné (205.42vw ≈ 3944/1920, 100vh ≈ 1079.5/1080) pour garantir
   une couverture totale quel que soit le ratio d'écran ; le clip-path
   définit le bord diagonal EXACT mesuré dans Figma, en %, donc il reste
   correct quelle que soit la taille réelle de l'élément. */
.avf-diag-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 205.42vw;
  height: 100vh;
  background: #fff;
  clip-path: polygon(1.84% 0%, 100% 0%, 100% 100%, 20.87% 100%);
  transform: translateX(-56.25vw); /* couvrant : position Figma (x=-1080px / 1920px) */
}

#avf-preloader.avf-phase-peek .avf-diag-shape {
  /* Position mesurée sur la frame 59 de Figma (x=1490px / 1920px), la
     dernière frame du peek confirmée par Pierre. Le bord diagonal est
     encore partiellement dans le viewport à cette position : révélation
     partielle de la vraie page, jamais un écran 100% découvert. */
  transform: translateX(77.6vw);
  transition: transform 0.32s cubic-bezier(0, 0, 0.58, 1);
}

#avf-preloader.avf-phase-recover .avf-diag-shape {
  /* Revient recouvrir l'écran en blanc plein écran avant le logo. Ease in
     back, 400ms (relevé dans le prototype Figma) — le "wind-up" négatif de
     cette courbe donne un effet de "claquement" au retour du panneau. */
  transform: translateX(-56.25vw);
  transition: transform 0.4s cubic-bezier(0.36, 0, 0.66, -0.56);
}

.avf-preloader__logo {
  position: relative;
  z-index: 1;
  width: 200px;
  height: auto;
  /* Asset en bleu de marque (#112236), assets/img/logo-valeri-bleu.svg. */
  opacity: 0;
  transform: translateY(28px) scale(0.92);
  /* Apparition : Ease out 350ms (mesuré ~336ms sur la vidéo). */
  transition: opacity 0.35s cubic-bezier(0, 0, 0.58, 1), transform 0.35s cubic-bezier(0, 0, 0.58, 1);
}

#avf-preloader.is-visible .avf-preloader__logo {
  opacity: 1;
  /* Milieu du drift mesuré dans Figma (logo remonte de 80px au total
     pendant qu'il est visible, y=415 → 335). */
  transform: translateY(-14px) scale(1);
}

#avf-preloader.is-hiding:not(.is-visible) .avf-preloader__logo {
  /* Fin du drift : continue de remonter en disparaissant, ~300ms (mesuré
     sur la vidéo). */
  opacity: 0;
  transform: translateY(-42px) scale(1.03);
  transition-duration: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  #avf-preloader,
  .avf-diag-shape,
  .avf-preloader__logo {
    transition: none !important;
  }
}