/* =============================================================
   WSP Landing — Animations vanilla (équivalents animate-ui)
   Tous les effets sont scope-contained avec préfixe .wsp-*
   pour ne pas interférer avec home.css / home-v2.css.
   ============================================================= */

/* ---------- 1. Gradient text animé (équivalent GradientText) ---------- */
/* On force la priorité sur les couleurs existantes (.hero-title em a un
   color appliqué qui sinon masquerait le gradient via background-clip). */
.wsp-gradient-text,
.hero-title em .wsp-gradient-text {
  background-image: linear-gradient(
    90deg,
    #e06a2c 0%,
    #ffffff 25%,
    #6baedb 50%,
    #ffffff 75%,
    #e06a2c 100%
  );
  background-size: 700% 100%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: wsp-gradient-pan 22s linear infinite;
  display: inline-block;
}

@keyframes wsp-gradient-pan {
  0%   { background-position: 0% 0%; }
  100% { background-position: 500% 100%; }
}

/* ---------- 2. Highlight (équivalent HighlightText) ---------- */
/* Fond orange qui se déploie de gauche à droite quand l'élément
   entre dans le viewport (.is-revealed appliqué par JS). */
.wsp-highlight {
  position: relative;
  background-image: linear-gradient(
    120deg,
    rgba(224, 106, 44, 0.30) 0%,
    rgba(224, 106, 44, 0.50) 100%
  );
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  padding-inline: 0.15em;
  border-radius: 0.18em;
  transition: background-size 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wsp-highlight.is-revealed {
  background-size: 100% 100%;
}

/* ---------- 3. Shimmer text (équivalent ShimmeringText) ---------- */
/* Reflet lumineux qui passe de gauche à droite en boucle.
   On utilise un gradient linear sur la couleur de fond du texte. */
.wsp-shimmer {
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.85) 40%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.85) 60%,
    rgba(255, 255, 255, 0.85) 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wsp-shimmer-pan 4.2s ease-in-out infinite;
  display: inline-block;
}

@keyframes wsp-shimmer-pan {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* ---------- 4. Magnetic hover (équivalent Magnetic) ---------- */
/* Le JS écrit --mx et --my (en px) sur l'élément ; le CSS
   les applique via translate3d. Transition rapide mais pas instantanée
   pour un effet "spring". */
.wsp-magnetic {
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.wsp-magnetic:hover {
  transition: transform 80ms linear;
}

/* ---------- 5. Counting number — purement JS (rAF), pas de CSS spécifique. */
/* Pour éviter le saut de layout pendant le count-up, on garde tabular-nums. */
.wsp-counting {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 6. Section #how — entrée séquencée des 4 cases (slide latéral) ---------- */
/* Slide depuis la gauche, écart 384 ms entre cases (durée +20% vs version
   précédente). Total ~2.0 s — sensation cinématique appuyée. */
#how .step {
  opacity: 0;
  transform: translateX(-72px);
  transition:
    opacity 864ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 864ms cubic-bezier(0.22, 1, 0.36, 1);
}
#how.in-view .step,
.chapter#how.in-view .step {
  opacity: 1;
  transform: none;
}
.chapter#how.in-view .step:nth-child(1) { transition-delay: 144ms; }
.chapter#how.in-view .step:nth-child(2) { transition-delay: 528ms; }
.chapter#how.in-view .step:nth-child(3) { transition-delay: 912ms; }
.chapter#how.in-view .step:nth-child(4) { transition-delay: 1296ms; }

/* Subtle accent-light pulse sur le step-num pendant l'entrée (1 cycle,
   sync avec l'apparition de chaque case). Durée +20% vs version précédente. */
#how .step .step-num {
  position: relative;
}
#how .step .step-num::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(224, 106, 44, 0.35), transparent 70%);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}
.chapter#how.in-view .step:nth-child(1) .step-num::after { animation: wsp-step-pulse 1080ms ease-out 456ms 1; }
.chapter#how.in-view .step:nth-child(2) .step-num::after { animation: wsp-step-pulse 1080ms ease-out 840ms 1; }
.chapter#how.in-view .step:nth-child(3) .step-num::after { animation: wsp-step-pulse 1080ms ease-out 1224ms 1; }
.chapter#how.in-view .step:nth-child(4) .step-num::after { animation: wsp-step-pulse 1080ms ease-out 1608ms 1; }

@keyframes wsp-step-pulse {
  0%   { opacity: 0; transform: scale(0.6); }
  35%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* Mobile : sur grille 1 colonne, le slide latéral aurait moins de sens
   (les cases occupent la pleine largeur). On garde le slide mais raccourci
   pour éviter un viewport scroll horizontal involontaire. */
@media (max-width: 520px) {
  #how .step {
    transform: translateX(-32px);
  }
}

/* ---------- 7. Section #testimonial — fan-out des 3 avis clients ---------- */
/* Pattern « fan-out depuis le centre » : la carte gauche sort par la
   gauche (rotate -3°), la carte centrale monte du bas, la carte droite
   sort par la droite (rotate +3°). Convention SaaS B2B premium
   (Linear, Stripe, Vercel) : entrée séquentielle marquée mais discrète,
   transform-origin bottom center pour que la rotation paraisse naturelle.
   Cadences : 880 ms durée, 380 ms écart séquentiel (cf. mémoire feedback). */
#testimonial .testi-card {
  opacity: 0;
  transform-origin: bottom center;
  transition:
    opacity 880ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 880ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Carte 1 — big, à gauche : slide depuis la gauche + tilt négatif (×3). */
#testimonial .testi-card:nth-child(1) {
  transform: translateX(-168px) translateY(60px) rotate(-9deg);
}
/* Carte 2 — centre : slide depuis le bas (×3). */
#testimonial .testi-card:nth-child(2) {
  transform: translateY(168px);
}
/* Carte 3 — droite : slide depuis la droite + tilt positif (×3). */
#testimonial .testi-card:nth-child(3) {
  transform: translateX(168px) translateY(60px) rotate(9deg);
}

.chapter#testimonial.in-view .testi-card {
  opacity: 1;
  transform: translateX(0) translateY(0) rotate(0);
}

.chapter#testimonial.in-view .testi-card:nth-child(1) { transition-delay: 160ms; }
.chapter#testimonial.in-view .testi-card:nth-child(2) { transition-delay: 540ms; }
.chapter#testimonial.in-view .testi-card:nth-child(3) { transition-delay: 920ms; }

/* Mobile (<900px) : la grille passe en 1 colonne — la rotation devient
   visuellement bizarre. On dégrade en simple slide-up stagger (×3). */
@media (max-width: 900px) {
  #testimonial .testi-card:nth-child(1),
  #testimonial .testi-card:nth-child(2),
  #testimonial .testi-card:nth-child(3) {
    transform: translateY(144px);
  }
}

/* ---------- 8. prefers-reduced-motion — désactive les animations en boucle ---------- */
@media (prefers-reduced-motion: reduce) {
  .wsp-gradient-text,
  .wsp-shimmer {
    animation: none;
  }
  .wsp-magnetic {
    transform: none !important;
    transition: none;
  }
  .wsp-highlight {
    transition: none;
    background-size: 100% 100%;
  }
  #how .step {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  #how .step .step-num::after { animation: none !important; }
  #testimonial .testi-card,
  #testimonial .testi-card:nth-child(1),
  #testimonial .testi-card:nth-child(2),
  #testimonial .testi-card:nth-child(3) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}