/* ==========================================================================
   Imagineerz — bibliotheque d'animations reutilisable
   --------------------------------------------------------------------------
   Recree, sans jQuery ni Webflow IX2, les animations concues dans le Designer
   Webflow pour la homepage imagineerz.fr :

     - defilement anime vers les sections (liens de la navbar)
     - apparition des blocs au scroll (slideInLeft / slideInBottom / ...)
     - effets de survol des cartes (fonctionnement, services, etudes de cas)
     - navbar qui se retracte au scroll, bouton flottant "Prendre RDV"

   Les durees, distances et courbes sont celles relevees dans les donnees IX2
   du site publie, pour que le rendu soit identique a l'original.

   S'utilise avec assets/js/imagineerz-animations.js. Le CSS seul ne suffit
   pas : c'est le JS qui pose la classe .is-inview et l'attribut data-anim-ready.

   Voir le mode d'emploi en tete de imagineerz-animations.js.
   ========================================================================== */

:root {
  /* Distance parcourue par un bloc qui apparait (Webflow : 100px). */
  --anim-distance: 100px;
  /* Duree d'apparition (Webflow : 1000ms). */
  --anim-duration: 1000ms;
  /* Duree des effets de survol (Webflow : 300 a 500ms). */
  --anim-hover-duration: 500ms;

  /* Courbes d'acceleration Webflow, converties en cubic-bezier CSS. */
  --anim-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);  /* outQuart */
  --anim-ease-in: cubic-bezier(0.42, 0, 1, 1);                /* easeIn   */
  --anim-ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* inCubic */
}

/* ==========================================================================
   1. Apparition au scroll
   --------------------------------------------------------------------------
   L'etat initial (invisible/decale) n'est applique que si le JS a demarre :
   sans lui, la page reste parfaitement lisible.
   ========================================================================== */

[data-anim-ready] [data-anim] {
  opacity: 0;
}

/* Les transitions ne sont armees qu'une fois l'etat initial peint. Sans cette
   seconde etape, les blocs seraient d'abord affiches puis s'effaceraient
   lentement avant d'entrer : on verrait l'animation a l'envers. */
[data-anim-armed] [data-anim] {
  transition:
    opacity var(--anim-duration) var(--anim-ease-out-quart),
    transform var(--anim-duration) var(--anim-ease-out-quart);
  transition-delay: var(--anim-delay, 0ms);
}

[data-anim-ready] [data-anim]:not(.is-inview) {
  will-change: opacity, transform;
}

[data-anim-ready] [data-anim="slide-left"] {
  transform: translate3d(calc(-1 * var(--anim-distance)), 0, 0);
}

[data-anim-ready] [data-anim="slide-right"] {
  transform: translate3d(var(--anim-distance), 0, 0);
}

[data-anim-ready] [data-anim="slide-bottom"] {
  transform: translate3d(0, var(--anim-distance), 0);
}

[data-anim-ready] [data-anim="slide-top"] {
  transform: translate3d(0, calc(-1 * var(--anim-distance)), 0);
}

[data-anim-ready] [data-anim="zoom"] {
  transform: scale3d(0.9, 0.9, 1);
}

/* data-anim="fade" n'a pas d'etat transforme : seule l'opacite bouge. */

[data-anim-ready] [data-anim].is-inview {
  opacity: 1;
  transform: none;
}

/* Une fois l'apparition jouee, l'element est rendu au CSS de la page : plus de
   transition ni de will-change. Sans cela, un effet de survol qui utilise lui
   aussi transform heriterait de la transition d'apparition (1s) et paraitrait
   pateux. */
[data-anim-ready] [data-anim].anim-done {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Les entrees laterales depassent brievement du cadre. On coupe le debordement
   horizontal sans creer de conteneur de defilement, pour ne pas casser les
   elements en position fixed ou sticky. */
[data-anim-ready],
[data-anim-ready] body {
  overflow-x: clip;
}

/* ==========================================================================
   2. Effets de survol
   --------------------------------------------------------------------------
   Classes utilitaires a poser sur l'element survole (dans le Designer ou via
   la table `hover` du JS). Elles reprennent les valeurs exactes des
   interactions Webflow d'origine.
   ========================================================================== */

/* "Mission card movement" : la carte glisse en bas a droite. */
.anim-nudge {
  transition: transform 300ms var(--anim-ease-in);
}
.anim-nudge:hover {
  transform: translate3d(10px, 5px, 0);
}

/* "case study card animation" : la carte glisse en haut a gauche. */
.anim-lift {
  transition: transform var(--anim-hover-duration) var(--anim-ease-in);
}
.anim-lift:hover {
  transform: translate3d(-10px, -5px, 0);
}

/* "hover-fonctionnement" : le numero recule, l'icone et le titre grossissent.
   Les trois enfants s'animent ensemble au survol du bloc parent. */
.anim-step .numerotation,
.anim-step .icon-fonctionnement,
.anim-step .fonctionnement-card-title,
.anim-step [data-anim-part] {
  transition: transform var(--anim-hover-duration) var(--anim-ease-in);
}
.anim-step:hover .numerotation,
.anim-step:hover [data-anim-part="number"] {
  transform: translate3d(-30px, 0, 0);
}
.anim-step:hover .icon-fonctionnement,
.anim-step:hover [data-anim-part="icon"] {
  transform: scale3d(1.2, 1.2, 1);
}
.anim-step:hover .fonctionnement-card-title,
.anim-step:hover [data-anim-part="title"] {
  transform: scale3d(1.1, 1.1, 1);
}

/* ==========================================================================
   3. Etats pilotes par le scroll
   --------------------------------------------------------------------------
   Le JS pose .is-scrolled / .is-hidden sur [data-anim-navbar] et .is-visible
   sur [data-anim-scroll-cta]. Les valeurs ci-dessous sont des defauts : on
   peut les surcharger page par page.
   ========================================================================== */

[data-anim-navbar] {
  transition: transform 300ms var(--anim-ease-out-quart),
              background-color 300ms var(--anim-ease-out-quart),
              box-shadow 300ms var(--anim-ease-out-quart);
}
[data-anim-navbar].is-hidden {
  transform: translate3d(0, -100%, 0);
}

[data-anim-scroll-cta] {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 20px, 0);
  transition: opacity 300ms var(--anim-ease-out-quart),
              transform 300ms var(--anim-ease-out-quart),
              visibility 0s linear 300ms;
}
[data-anim-scroll-cta].is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* ==========================================================================
   4. Accessibilite
   --------------------------------------------------------------------------
   Si le visiteur a demande a limiter les animations, tout est neutralise.
   Le JS fait de meme pour le defilement anime (saut direct a la section).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-anim-ready] [data-anim],
  .anim-nudge,
  .anim-lift,
  .anim-step .numerotation,
  .anim-step .icon-fonctionnement,
  .anim-step .fonctionnement-card-title,
  .anim-step [data-anim-part],
  [data-anim-navbar],
  [data-anim-scroll-cta] {
    transition: none !important;
  }

  [data-anim-ready] [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }

  .anim-nudge:hover,
  .anim-lift:hover,
  .anim-step:hover .numerotation,
  .anim-step:hover .icon-fonctionnement,
  .anim-step:hover .fonctionnement-card-title,
  .anim-step:hover [data-anim-part] {
    transform: none !important;
  }
}