/* =====================================================================
   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.
     ------------------------------------------------------------------- */
  @keyframes wf-reveal {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* -------------------------------------------------------------------
     Les grands titres voyagent
     C'est la signature du genre : le titre entre par la gauche et
     continue sa course pendant qu'on lit la section. Le mouvement est
     lie a la position de scroll, pas a une horloge — il s'arrete quand
     le doigt s'arrete, et il repart en arriere si on remonte.
     Ce n'est pas de la parallaxe : rien ne bouge a une vitesse
     differente d'un fond, c'est l'element lui-meme qui parcourt sa
     plage d'entree.
     ------------------------------------------------------------------- */
  /* Une seule animation, une seule plage : deux animations avec deux
     plages sur la meme declaration sont rejetees par le navigateur —
     la liste de `animation-range` ne se marie pas avec la liste de
     `animation-timeline`. On fusionne donc volet et voyage. */
  .wf-h2,
  .wf-h2-contact {
    animation: wf-titre-entree linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 60%;
  }

  /* Plus aucun deplacement horizontal.
     Le titre occupe toute la largeur de son conteneur, et la section porte
     `overflow-x: clip` : tout `translateX`, dans un sens ou dans l'autre,
     ampute le titre de ses premieres ou de ses dernieres lettres. Le
     defaut se voyait d'autant mieux que la langue allonge le texte — il a
     ete signale sur la version espagnole.
     `clip-path` decouvre de haut en bas, pas de gauche a droite : le titre
     est donc deja partiellement visible pendant qu'il se deplacerait.
     On garde le volet de la charte, seul, et il ne peut plus rien couper. */
  @keyframes wf-titre-entree {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* Les colonnes de gauche tiennent pendant qu'on lit la droite.
     `position: sticky` : natif, aucun detournement du defilement. */
  @media (min-width: 1080px) {
    .wf-studio-grille > div:first-child,
    .wf-methode-grille > div:first-child {
      position: sticky;
      top: clamp(90px, 12vh, 150px);
      align-self: start;
    }
  }

  /* Les cartes arrivent de plus loin et se redressent en chemin. */
  .wf-offre,
  .wf-projet {
    animation: wf-arrivee linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 34%;
  }
  .wf-offres > *:nth-child(2),
  .wf-travaux > *:nth-child(2) { animation-range: entry 2% cover 42%; }
  .wf-offres > *:nth-child(3),
  .wf-travaux > *:nth-child(3) { animation-range: entry 2% cover 50%; }
  .wf-travaux > *:nth-child(4) { animation-range: entry 2% cover 58%; }

  @keyframes wf-arrivee {
    from { transform: translateY(64px) rotate(-1.4deg); }
    to   { transform: none; }
  }

  /* -------------------------------------------------------------------
     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); }
  }

  /* -------------------------------------------------------------------
     Compteurs des chiffres clés
     La charte les interdit partout SAUF ici : « seule exception à
     l'interdiction des compteurs : les chiffres de résultats ».
     Quatre paliers, courbe cubic-bezier(.22,1,.36,1), comme prescrit.
     ------------------------------------------------------------------- */
  .wf-chiffre-val {
    overflow: hidden;
    display: block;
  }
  .wf-chiffre-val > span {
    display: block;
    animation: wf-count var(--wf-c-compteur) both;
    animation-timeline: view();
    animation-range: entry 20% cover 38%;
  }
  @keyframes wf-count {
    from { transform: translateY(105%); }
    to   { transform: translateY(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,
  .wf-bandeau-coco,
  .wf-bandeau-ambre {
    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); }
  }

  /* -------------------------------------------------------------------
     wf-wipe — le volet de transition entre deux sections
     Un rideau de braise qui traverse la bordure entre deux fonds. La
     charte le décrit en 550 ms sur cubic-bezier(.76,0,.24,1) ; ici il
     suit le scroll, donc il avance et recule avec le doigt.
     Il est posé sur les sections qui changent de fond : le passage
     coco -> jungle et jungle -> coco.
     ------------------------------------------------------------------- */
  #offres,
  #contact,
  #questions { position: relative; }

  #offres::before,
  #contact::before,
  #questions::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 100%;
    z-index: 0;
    background: var(--wf-braise);
    transform-origin: center top;
    animation: wf-wipe linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
    pointer-events: none;
  }
  /* Le contenu passe devant le rideau. */
  #offres > *,
  #contact > *,
  #questions > * { position: relative; z-index: 1; }

  @keyframes wf-wipe {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0); }
  }

  /* -------------------------------------------------------------------
     Le mot en italique se souligne
     wf-highlight de la charte : trait qui se déploie depuis la gauche.
     `currentColor` plutôt qu'une couleur fixe — l'italique est braise sur
     le coco et ambre sur le jungle, le filet suit sans second sélecteur.
     ------------------------------------------------------------------- */
  .wf-h2 .wf-italique,
  .wf-h2-contact .wf-italique { position: relative; }

  .wf-h2 .wf-italique::after,
  .wf-h2-contact .wf-italique::after {
    content: "";
    position: absolute;
    left: 0;
    right: .04em;
    bottom: .04em;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    animation: wf-highlight linear both;
    animation-timeline: view();
    animation-range: entry 34% cover 58%;
  }

  @keyframes wf-highlight {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* -------------------------------------------------------------------
     Les titres d'étape se découvrent
     Enfin un emploi pour wf-reveal, le volet de la charte : le titre de
     chaque étape de méthode se dévoile de haut en bas quand on l'atteint.
     ------------------------------------------------------------------- */
  .wf-etape h3 {
    animation: wf-reveal linear both;
    animation-timeline: view();
    animation-range: entry 14% cover 34%;
  }

  /* -------------------------------------------------------------------
     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-apparait,
  .wf-etape h3,
  .wf-h2 .wf-italique::after,
  .wf-h2-contact .wf-italique::after,
  .wf-h2,
  .wf-h2-contact,
  .wf-projet-image img,
  .wf-chiffres > div,
  .wf-etape::before,
  .wf-chiffre-val > span,
  #offres::before,
  #contact::before,
  #questions::before,
  .wf-offre,
  .wf-projet,
  .wf-bandeau-braise,
  .wf-bandeau-jungle,
  .wf-bandeau-coco,
  .wf-bandeau-ambre {
    animation: none !important;
    animation-timeline: auto !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .wf-h2 .wf-italique::after,
  .wf-h2-contact .wf-italique::after { transform: none; }
  .wf-etape h3 { clip-path: none; }
  .wf-section .wf-num,
  .wf-studio-grille > div:first-child,
  .wf-methode-grille > div:first-child { position: static; }
}