/* ============================================================================
 * Catlante animations - CSS pur, sans dependance.
 *
 * Remplace les libs GSAP + ScrollTrigger + Lenis (~75 Ko gzip) par 1.5 Ko de JS
 * vanilla (catlante-animations.js) + ce fichier CSS.
 *
 * Conserve EXACTEMENT le meme comportement visuel :
 *   - smooth scroll
 *   - fade-up des titres au scroll (.title)
 *   - fade-up des elements .js-animated-stagger-element
 *   - slide-in des images CTA gauche/droite
 *   - zoom progressif sur .zoom-img img (scrub, gere par JS)
 *   - parallax sur .parallax-bg .bg--image (scrub, gere par JS)
 *   - animations au load (.slider__content__form, .slider__content__lien)
 *
 * Tient compte des contraintes existantes du theme :
 *   - #viewport .title { opacity: 0; visibility: hidden } deja dans _animate-site.scss
 *     (specificite #id, donc on cible avec #viewport .title.in-view)
 *   - .js-animated-stagger-element n'a PAS d'etat initial dans le SCSS theme
 *   - mobile (max-width: 767px) : original desactivait toutes les animations
 *     (cf. lenis-animate.js ligne 7-9) -> on fait pareil ici
 *   - prefers-reduced-motion : accessibilite, on desactive tout
 * ============================================================================ */

/* ============================================================
   1. Smooth scroll natif (remplace Lenis)
   ============================================================ */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   2. Animations au chargement du slider hero
   Reproduit exactement :
     gsap.from(".slider__content__form", { duration: 1, yPercent: 50, opacity: 0 })
     gsap.from(".slider__content__lien", { duration: 1.3, yPercent: 100, opacity: 0 })
   ============================================================ */
@keyframes catlanteFadeUp50 {
  from { opacity: 0; transform: translateY(50%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes catlanteFadeUp100 {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.slider__content__form {
  animation: catlanteFadeUp50 1s ease-out both;
}
.slider__content__lien {
  animation: catlanteFadeUp100 1.3s ease-out both 0.1s;
}

/* ============================================================
   3. .title (dans #viewport) : fade-up + visibility au scroll
   L'etat initial (opacity:0; visibility:hidden) vient de _animate-site.scss
   On doit utiliser #viewport .title.in-view pour battre la specificite ID.
   Easing 'expo' GSAP = cubic-bezier(0.16, 1, 0.3, 1).
   ============================================================ */
@media (min-width: 768px) {
  #viewport .title {
    transform: translateY(100px);
    transition:
      opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #viewport .title.in-view {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ============================================================
   4. .js-animated-stagger-element : fade-up au scroll
   Reproduit :
     gsap.set(elem, { y: 40, autoAlpha: 0 });
     gsap.fromTo(elem, { y:40, autoAlpha:0 }, { autoAlpha:1, duration:1.2, y:0, ease:"expo.out" });
   ============================================================ */
@media (min-width: 768px) {
  .js-animated-stagger-element {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .js-animated-stagger-element.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   5. CTA images : slide horizontal au scroll
   Reproduit :
     image-left :  translateX: "100%" -> "-10%", duration: 0.8, ease: "power1.out"
     image-right : translateX: "-100%" -> "10%", duration: 0.8, ease: "power1.out"
   power1.out GSAP = cubic-bezier(0.25, 1, 0.5, 1) approx.
   ============================================================ */
@media (min-width: 768px) {
  .js-cta-section-b-image-left figure {
    opacity: 0;
    transform: translateX(100%) translateY(-10%);
    transition:
      opacity 0.8s ease-out,
      transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.1s;
    will-change: opacity, transform;
  }
  .js-cta-section-b-image-right figure {
    opacity: 0;
    transform: translateX(-100%);
    transition:
      opacity 0.8s ease-out,
      transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.1s;
    will-change: opacity, transform;
  }
  .js-cta-section-b-image-left figure.in-view {
    opacity: 1;
    transform: translateX(-10%) translateY(0);
  }
  .js-cta-section-b-image-right figure.in-view {
    opacity: 1;
    transform: translateX(10%);
  }
}

/* CTA content : fade-in simple */
@media (min-width: 768px) {
  .js-cta-section-content .privatisation__content {
    opacity: 0;
    transition: opacity 1s ease-out;
    will-change: opacity;
  }
  .js-cta-section-content .privatisation__content.in-view {
    opacity: 1;
  }
}

/* ============================================================
   6. .zoom-img img + .parallax-bg .bg--image
   Le transform est applique en INLINE par le JS au scroll (scrub).
   On declare juste will-change pour la perf GPU.
   transform-origin pour le zoom : original GSAP utilise "bottom"
   ============================================================ */
@media (min-width: 768px) {
  .zoom-img img {
    transform-origin: bottom center;
    will-change: transform;
  }
  .parallax-bg .bg--image {
    will-change: transform;
  }
}

/* ============================================================
   7. Mobile (< 768px)
   Reproduit le `return true;` du original sur mobile : aucune animation.
   Sur mobile, _animate-site.scss force deja `.title { opacity: 1 }`.
   Pour les autres elements potentiellement caches, on force visible.
   ============================================================ */
@media (max-width: 767px) {
  .slider__content__form,
  .slider__content__lien {
    animation: none;
  }
  .js-animated-stagger-element,
  .js-cta-section-b-image-left figure,
  .js-cta-section-b-image-right figure,
  .js-cta-section-content .privatisation__content {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* ============================================================
   8. Accessibility : prefers-reduced-motion (OS-level setting)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .slider__content__form,
  .slider__content__lien {
    animation: none;
  }
  #viewport .title,
  .js-animated-stagger-element,
  .js-cta-section-b-image-left figure,
  .js-cta-section-b-image-right figure,
  .js-cta-section-content .privatisation__content {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .zoom-img img,
  .parallax-bg .bg--image {
    will-change: auto;
  }
}

/* Classe defensive ajoutee par le JS si prefers-reduced-motion */
.no-anim #viewport .title,
.no-anim .js-animated-stagger-element,
.no-anim .js-cta-section-b-image-left figure,
.no-anim .js-cta-section-b-image-right figure,
.no-anim .js-cta-section-content .privatisation__content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}