/* =====================================================================
   Webfaya — animations pilotées par le défilement
   Ce fichier n'ajoute aucune animation nouvelle : il rebranche celles
   de la charte (section 12) sur la position de scroll au lieu d'une
   horloge.

   Pourquoi en CSS natif et pas avec une bibliothèque : la charte
   interdit le scroll détourné. Une bibliothèque comme Lenis prend la
   main sur la molette ; `animation-timeline` ne touche à rien — le
   défilement reste celui du navigateur, il sert juste d'axe de lecture.

   La règle « aucune animation au-delà de 600 ms » ne s'applique pas
   ici : une animation de scroll n'a pas de durée, elle avance et
   recule avec le doigt. Rien ne peut « durer » trop longtemps.

   Tout est sous @supports : les navigateurs sans `animation-timeline`
   (Firefox à ce jour) gardent l'apparition pilotée par le script, qui
   reste en place et inchangée.
   ===================================================================== */

@supports (animation-timeline: view()) {

  /* wf-progress — repris tel quel de la charte (section 12).
     Il sert deux fois : la barre de lecture et le filet des etapes. */
  @keyframes wf-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* -------------------------------------------------------------------
     Barre de progression de lecture
     wf-progress (scaleX 0 → 1) branchée sur le scroll du document.
     Trois pixels de braise, l'accent « signer » de la charte.
     ------------------------------------------------------------------- */
  .wf-progression {
    position: fixed;
    /* Etat par defaut invisible : si la timeline ne s'active pas,
       l'animation n'applique rien et la barre resterait pleine largeur. */
    transform: scaleX(0);
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 70;
    background: var(--wf-braise);
    transform-origin: left center;
    pointer-events: none;
    animation: wf-progress linear both;
    animation-timeline: scroll(root block);
  }

  /* L'apparition des blocs reste pilotee par le script.
     Raison : une timeline de scroll peut etre declaree supportee et ne
     jamais s'activer (onglet non compose, moteur partiel). Dans ce cas
     l'animation n'applique aucun effet — le contenu reste visible, mais
     il n'y a plus d'apparition du tout. Le script, lui, marche partout.
     Cette feuille ne porte donc que des effets purement additifs :
     s'ils ne s'appliquent pas, il ne manque rien d'essentiel. */

  /* -------------------------------------------------------------------
     Titres de section : le volet de la charte
     wf-reveal découvre le titre de haut en bas au fil du scroll.
     ------------------------------------------------------------------- */
  .wf-h2,
  .wf-h2-contact {
    animation: wf-volet linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }

  @keyframes wf-volet {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* -------------------------------------------------------------------
     Les captures de Travaux se découvrent en volet latéral
     ------------------------------------------------------------------- */
  .wf-projet-image img {
    animation: wf-volet-lateral linear both;
    animation-timeline: view();
    animation-range: entry 6% cover 34%;
  }

  @keyframes wf-volet-lateral {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* -------------------------------------------------------------------
     Les étapes de la méthode : le filet se dessine de gauche à droite
     wf-highlight / wf-sweep de la charte (scaleX 0 → 1).
     ------------------------------------------------------------------- */
  .wf-etape { position: relative; }
  .wf-etape::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--wf-braise-foncee);
    transform-origin: left center;
    animation: wf-progress linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 30%;
  }

  /* -------------------------------------------------------------------
     Le bandeau braise se remplit en traversant l'écran
     Le contenu défile déjà ; la bande, elle, s'ouvre à l'arrivée.
     ------------------------------------------------------------------- */
  .wf-bandeau-braise,
  .wf-bandeau-jungle {
    animation: wf-ouverture-bande linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }

  @keyframes wf-ouverture-bande {
    from { clip-path: inset(50% 0 50% 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* -------------------------------------------------------------------
     Numéro de section collé pendant la lecture du bloc
     `position: sticky` : natif, aucun détournement, et il se décolle
     tout seul à la fin de la section.
     ------------------------------------------------------------------- */
  @media (min-width: 1080px) {
    .wf-section .wf-num {
      position: sticky;
      top: calc(var(--wf-e-5) + 20px);
    }
  }
}

/* =====================================================================
   Mouvement réduit — la charte l'exige, bandeaux et scroll compris.
   `animation-timeline: auto` remet l'animation sur une horloge, et
   `animation: none` la supprime : les deux ensemble garantissent que
   plus rien ne bouge, quel que soit l'ordre de cascade.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wf-progression { display: none; }
  .wf-reveal,
  .wf-h2,
  .wf-h2-contact,
  .wf-projet-image img,
  .wf-chiffres > div,
  .wf-etape::before,
  .wf-bandeau-braise,
  .wf-bandeau-jungle {
    animation: none !important;
    animation-timeline: auto !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .wf-section .wf-num { position: static; }
}