/* ==========================================================================
   ANIMATIONS
   --------------------------------------------------------------------------
   Toutes les valeurs — durees, retards, deplacements, courbes — sont relevees
   dans le code de la page de reference, jamais estimees.
   Source : OYA/10_Documentation_Dev/05_References/site-vitrine/ANIMATIONS.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. APPARITIONS AU CHARGEMENT
   --------------------------------------------------------------------------
   Elles partent des le premier rendu, sans observateur : l'element est
   visible d'emblee dans le viewport. Le `both` conserve l'etat de depart
   pendant le retard, sinon l'element clignoterait a sa position finale.
   -------------------------------------------------------------------------- */

@keyframes oya-descend {
  from { opacity: 0.001; transform: translateY(-40px); }
  to   { opacity: 1;     transform: translateY(0); }
}

@keyframes oya-monte {
  from { opacity: 0.001; transform: translateY(40px); }
  to   { opacity: 1;     transform: translateY(0); }
}

@keyframes oya-monte-50 {
  from { opacity: 0.001; transform: translateY(50px); }
  to   { opacity: 1;     transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   2. APPARITION AU DEFILEMENT
   --------------------------------------------------------------------------
   L'etat de depart est pose ici ; la classe `.oya-vu`, ajoutee par
   l'observateur, ramene l'element a sa place. Le deplacement de depart se
   regle par --dy / --dx, pour n'avoir qu'une seule regle.
   -------------------------------------------------------------------------- */

/* L'apparition deplace par `translate`, PAS par `transform`.

   `transform` est une propriete entiere : l'ecrire ici effacerait tout ce que
   l'element y avait deja. Plusieurs en dependent pour leur simple position —
   l'illustration en verre des fiches Features est centree par
   `translate(-50%, -50%)`, et elle sautait de 177 px a gauche des qu'on lui
   posait une apparition.

   `translate` est une propriete distincte, que le navigateur compose avec
   `transform`. Elle ne s'ecrase donc avec rien. C'est la meme raison qui lui a
   fait porter la parallaxe des gommes du hero. Constate le 2026-09-10. */
[data-apparait] {
  opacity: 0.001;
  translate: var(--dx, 0px) var(--dy, 40px);
  transition:
    opacity   var(--duree, 1.5s) var(--e-ressort) var(--retard, 0s),
    translate var(--duree, 1.5s) var(--e-ressort) var(--retard, 0s);
  will-change: opacity, translate;
}

[data-apparait].oya-vu {
  opacity: 1;
  translate: 0 0;
}

/* Sans JavaScript, rien ne poserait `.oya-vu` et la page resterait vide.
   On annule donc l'etat de depart tant que le script n'a pas pris la main. */
html:not(.oya-js) [data-apparait] {
  opacity: 1;
  translate: none;
  transition: none;
}

/* --------------------------------------------------------------------------
   3. MARQUEES
   --------------------------------------------------------------------------
   La reference fait defiler les quatre marquees a 50 px/s, sans
   ralentissement au survol (son `hoverModifier` de 100 donne un facteur 1).

   La piste contient le contenu DUPLIQUE : on translate d'exactement la
   largeur d'une copie, ce qui rend la boucle invisible. La duree se calcule
   depuis cette largeur pour tenir la vitesse constante quel que soit le
   contenu — c'est le script qui la pose dans --duree-piste.
   -------------------------------------------------------------------------- */

/* `clip` plutot que `hidden` : pas de barre de defilement parasite.

   AUCUN voile de bord ici. Une version precedente adoucissait les deux bords
   de TOUS les marquees ; la reference n'en met sur aucun — releve le
   2026-09-10, les quatre conteneurs sont a `mask: none`. Le seul voile de la
   page est celui de Featured, et il ne borde pas : il TROUE le centre, de
   41 % a 58 %, pour que les logos s'effacent derriere la pastille. Il vit
   donc avec sa section, pas ici. */
.oya-marquee {
  overflow: clip;
  position: relative;
}

/* La piste porte l'ecart ENTRE COPIES, chaque copie l'ecart entre ses propres
   elements. Les deux different sur le bandeau — 20 dedans, 40 entre — et sur
   les avis — 20 dedans, 25 entre. */
.oya-marquee__piste {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--ecart-copies, var(--ecart, 0px));
  animation: oya-defile var(--duree-piste, 30s) linear infinite;
}

.oya-marquee__copie {
  display: flex;
  align-items: center;
  gap: var(--ecart, 0px);
}

/* Le decalage est pose en PIXELS par le script, jamais en pourcentage.
   Pourquoi : la piste porte deux copies separees par un `gap`. Translater
   de -50 % decale d'une demi-piste, soit une copie PLUS UN DEMI-ECART —
   alors qu'il faut une copie PLUS UN ECART ENTIER pour que la deuxieme
   copie tombe exactement ou etait la premiere.
   Mesure : -50 % donnait 1208 px la ou il en fallait 1220. Douze pixels
   d'erreur a chaque tour, qui se voyaient comme un saut. */

/* Le bandeau d'annonce defile vers la DROITE
   (`directionModifier:"reverse"` dans la reference). */
.oya-marquee--droite .oya-marquee__piste {
  animation-direction: reverse;
}

@keyframes oya-defile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--decalage, 50%)), 0, 0); }
}

/* La reference met les marquees en pause hors du viewport, avec 100 px de
   marge. Le script pose cette classe. */
.oya-marquee.oya-hors-champ .oya-marquee__piste {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   4. FLOTTEMENT CONTINU
   --------------------------------------------------------------------------
   Releve : loop {y:50}, tween 6s, ease lineaire, repeatType "mirror".
   `alternate` reproduit le mirror ; l'ease lineaire est bien celui d'origine
   ([0,0,1,1] est la courbe identite).
   -------------------------------------------------------------------------- */

@keyframes oya-flotte {
  from { transform: translateY(0); }
  to   { transform: translateY(50px); }
}

/* --------------------------------------------------------------------------
   5. MOUVEMENT REDUIT
   --------------------------------------------------------------------------
   La reference se contente de garder l'opacite et de sauter les
   transformations, mais laisse tourner ses marquees. On va plus loin : un
   defilement perpetuel est precisement ce qui gene, et rien ne le justifie.

   Ce qu'on garde : l'apparition en opacite, pour que rien ne surgisse
   brutalement, et les transitions de survol, tres courtes.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .oya-marquee__piste,
  .oya-flotte {
    animation: none !important;
  }

  [data-apparait] {
    transform: none !important;
    transition: opacity 200ms linear !important;
  }

  .oya-entete-fixe {
    animation: none !important;
  }
}


/* ---------------------------------------------------------------------- */
/* Le zoom d'entree.                                                        */
/*                                                                          */
/* Releve sur la page vivante, entree `1k1cdsc` (« Image (Change) ») :      */
/*                                                                          */
/*     depart     : echelle 1.2                                             */
/*     transition : ressort sans rebond, 5 s, sans delai                    */
/*     portees    : les trois, mobile compris                               */
/*                                                                          */
/* Deux precautions.                                                        */
/*                                                                          */
/* L'element ne change PAS d'opacite : c'est pourquoi il n'utilise pas      */
/* `data-apparait`, qui part de 0,001 et l'aurait fait apparaitre en fondu  */
/* alors que la reference le montre plein des le depart.                    */
/*                                                                          */
/* La propriete `scale`, separee, se COMPOSE avec `transform` au lieu de    */
/* l'ecraser. Ecrire `transform: scale(...)` effacerait le centrage ou le   */
/* ressort deja poses sur ces blocs -- le piege rencontre trois fois sur ce */
/* projet.                                                                  */

[data-zoom] {
  scale: var(--zoom-depart, 1.2);
  transition: scale var(--zoom-duree, 5s) var(--e-ressort-net);
}

[data-zoom].oya-vu { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-zoom] { scale: 1; transition: none; }
}