/* =========================================================================
   WEBCRAFT — flux-hero-mouvement.css · 2026 · Hugo (développeur)
   MOUVEMENT du hero uniquement. Aucun dessin : Emma dessine (flux-hero.css),
   ce fichier ne fait que déplacer et estomper (transform / opacity).
   Chargé APRÈS flux-hero.css : il peut donc en corriger l'état figé.
   Règle d'or : sans JS, rien n'est masqué — on ne cache que si la mécanique
   a démarré (html.mvt-pret), et jamais sous prefers-reduced-motion.
   ========================================================================= */

/* ------------------------------------------------------ 1. ARRIVÉE (fond) */
/* Le fond matière part de scale(1.06) et d'une opacité 0, puis se pose.
   L'échelle est portée par une translation compensée : la parallaxe lisible
   en JS reste un translateY pur, sans écraser le scale d'arrivée. */
html.mvt-pret .hero__matiere{
  animation:hero-matiere 1.4s cubic-bezier(.22,.61,.36,1) both;
  will-change:transform,opacity;
}
@keyframes hero-matiere{
  from{opacity:0;transform:scale(1.06)}
  to{opacity:1;transform:scale(1)}
}

/* ------------------------------------------------- 2. TITRE, LIGNE À LIGNE */
/* Le h1 contient « Le digital,<br>coulé sur-mesure » : on anime ses deux
   lignes indépendamment (le <br> n'est pas animable, d'où le span). */
.hero__titre .hero__ligne{
  display:block;
  /* la découpe du dégradé reste sur les lettres : le mot métal continue de
     fonctionner puisque la découpe est peinte à l'intérieur du span */
}
html.mvt-pret .hero__titre .hero__ligne{
  animation:hero-ligne 900ms cubic-bezier(.22,.61,.36,1) both;
  will-change:transform,opacity;
}
html.mvt-pret .hero__titre .hero__ligne:nth-child(2){animation-delay:220ms}
@keyframes hero-ligne{
  from{opacity:0;transform:translate3d(0,26px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Le reflet du mot métal glisse UNE SEULE FOIS, sur la variable d'Emma. */
/* (--flux-reflet-x est aussi lue par le CTA en CSS : on ne l'anime donc que
   sur le mot, via une variable locale au mot.) */
html.mvt-pret .hero__titre .flux-mot{
  animation:hero-reflet-mot 2.2s cubic-bezier(.33,0,.2,1) 340ms both;
}
@keyframes hero-reflet-mot{
  from{--flux-reflet-x:30%}
  to{--flux-reflet-x:70%}
}

/* ------------------------------------------- 3. GOUTTE, PREMIER SCROLL */
/* La goutte reste accrochée à la couture tant qu'on n'a pas défilé ;
   au premier défilement elle chute de 42 px (rebond 1.4) puis s'efface. */
.hero__goutte{will-change:transform,opacity}
.hero .hero__couture.est-decrochee .hero__goutte{
  animation:hero-goutte 620ms cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes hero-goutte{
  0%{transform:translate3d(0,0,0);opacity:1}
  72%{transform:translate3d(0,42px,0);opacity:.9}
  100%{transform:translate3d(0,42px,0);opacity:0}
}

/* ------------------------------------------------ 4. SURVOLS (souris fine) */
/* Le CTA principal garde son fond métal ; on déplace seulement le reflet.
   Le secondaire s'éclaircit en verre fumé. */
@media (hover:hover) and (pointer:fine){
  .hero .bouton,
  .hero .bouton--ligne,
  .hero__titre .flux-mot{
    transition:
      --flux-reflet-x .6s cubic-bezier(.33,0,.2,1),
      background-color .6s cubic-bezier(.33,0,.2,1),
      border-color .6s cubic-bezier(.33,0,.2,1),
      box-shadow .6s cubic-bezier(.33,0,.2,1);
  }
  .hero .bouton{--flux-reflet-x:30%}
  .hero .bouton:hover,
  .hero .bouton:focus-visible{--flux-reflet-x:78%}
  .hero__titre .flux-mot:hover{--flux-reflet-x:86%}
  .hero .bouton--ligne:hover,
  .hero .bouton--ligne:focus-visible{
    background-color:rgba(220,229,242,.10)!important;
  }
}

/* ---------------------------------------------- 5. LUEUR QUI SUIT LA SOURIS */
/* .hero__lueur est déjà dessinée par Emma ; ici on la rend piloteable et
   on n'autorise AUCUNE transition (l'inertie est calculée en JS).          */
.hero__lueur{
  transform:translate3d(var(--flux-lueur-x,0px),var(--flux-lueur-y,0px),0);
  will-change:transform;
  transition:none!important;
}

/* ============================== 6. PRÉPARÉ, NON ACTIVÉ AILLEURS ============ */
/* Filet de métal entre sections et nappe de changement de page : posés pour
   la suite, ils ne s'appliquent que si le balisage apparaît (aucune autre
   section n'est modifiée ici).                                             */

/* Filet : un trait qui se déploie au défilement, une fois entré en vue. */
.flux-filet{
  transform-origin:0 50%;
  transform:scaleX(var(--flux-filet-x,1));
  will-change:transform;
}
html.mvt-pret .flux-filet{--flux-filet-x:0}
html.mvt-pret .flux-filet.est-tendu{
  --flux-filet-x:1;
  transition:--flux-filet-x 900ms cubic-bezier(.22,.61,.36,1);
}

/* Nappe de métal : elle couvre l'écran, on n'anime que son opacité. */
html .flux-nappe{
  opacity:0;
  will-change:opacity;
  transition:opacity 260ms linear;
}
html.nappe-active .flux-nappe{opacity:1}

/* ================================= 7. MOUVEMENT RÉDUIT : TOUT FIGÉ ========== */
/* Obligatoire : la goutte reste accrochée, aucun parallaxe, aucun reflet
   animé, aucun survol mobile. L'état final est posé d'emblée.              */
@media (prefers-reduced-motion:reduce){
  html.mvt-pret .hero__matiere,
  html.mvt-pret .hero__titre .hero__ligne,
  html.mvt-pret .hero__titre .flux-mot,
  .hero .hero__couture.est-decrochee .hero__goutte{
    animation:none!important;
  }
  .hero__matiere,
  html.mvt-pret .hero__matiere{opacity:1;transform:none!important}
  .hero__titre .hero__ligne,
  html.mvt-pret .hero__titre .hero__ligne{opacity:1;transform:none!important}
  .hero__titre .flux-mot{--flux-reflet-x:50%}
  .hero__goutte{transform:none!important;opacity:1!important}
  .hero__lueur{transform:none!important}
  .hero .bouton,
  .hero .bouton--ligne{transition:none!important}
  .hero .bouton:hover,
  .hero .bouton:focus-visible{--flux-reflet-x:30%}
  .hero__titre .flux-mot:hover{--flux-reflet-x:50%}
  html.mvt-pret .flux-filet{--flux-filet-x:1}
  html .flux-nappe{transition:none!important}
}