/* ==========================================================================
   CHEELO — ANIMATIONS.CSS
   Etats d'animation pilotés par JS (classes ajoutées au scroll / interaction).
   ========================================================================== */

/* --- Reveal au scroll : états de départ selon la direction ------------- */
[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="down"]  { transform: translateY(-40px); }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="fade"]  { transform: none; }

[data-reveal] {
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1 !important;
  transform: translate(0,0) scale(1) !important;
}

/* Décalage progressif (stagger) pour les enfants d'une grille */
[data-reveal-group] > * { transition-delay: calc(var(--stagger-index, 0) * 90ms); }

/* --- Hover 3D (tilt) sur cartes ------------------------------------------ */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* --- Bouton magnétique ---------------------------------------------------*/
[data-magnetic] { transition: transform .25s cubic-bezier(.22,.61,.36,1); }

/* --- Compteurs animés ----------------------------------------------------*/
.count-up { font-variant-numeric: tabular-nums; }

/* --- Parallaxe légère (appliquée via transform par JS) ------------------ */
[data-parallax] { will-change: transform; }

/* --- Curseur / halo doux sur cartes premium ------------------------------*/
.price-card, .feature-card {
  background-image: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(217,27,114,.06), transparent 60%);
}

/* --- Ligne de progression de lecture (barre en haut de page) ------------ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--gradient-brand); z-index: 1100;
  transition: width .1s linear;
}

/* --- Apparition du header au chargement ---------------------------------*/
@keyframes header-drop {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.site-header { animation: header-drop .8s cubic-bezier(.16,1,.3,1) .1s both; }

/* --- Halo respirant sur le badge "le plus populaire" ---------------------*/
.price-card.is-popular .badge-pop {
  animation: badge-breathe 2.4s ease-in-out infinite;
}
@keyframes badge-breathe {
  0%,100% { box-shadow: 0 0 0 0 rgba(217,27,114,.25); }
  50% { box-shadow: 0 0 0 8px rgba(217,27,114,0); }
}

/* ==========================================================================
   V2 — COUCHE D'ANIMATIONS PREMIUM (WOW)
   Ajouts non-destructifs : rien ci-dessus n'est modifié, tout est en plus.
   ========================================================================== */

/* --- Lift + scale + ombre douce au survol des cartes --------------------- */
.price-card, .feature-card, .simple-card, .mini-card, .review-card {
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}
[data-tilt] { will-change: transform; }

/* --- Light-sweep : un rai de lumière traverse la carte au survol --------- */
.price-card, .feature-card {
  position: relative;
  isolation: isolate;
}
.price-card::after, .feature-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 60%);
  background-size: 250% 250%;
  background-position: 150% 150%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity .3s ease;
}
.price-card:hover::after, .feature-card:hover::after {
  opacity: 1;
  animation: light-sweep 1.1s ease forwards;
}
@keyframes light-sweep {
  from { background-position: 150% 150%; }
  to   { background-position: -50% -50%; }
}

/* --- Icônes qui s'animent au survol de leur carte ------------------------- */
.feature-card .f-icon, .mini-card .m-icon {
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}
.feature-card:hover .f-icon, .mini-card:hover .m-icon {
  transform: scale(1.15) rotate(-6deg);
}
.price-card .ico-check {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.price-card ul li:hover .ico-check {
  transform: scale(1.25);
}

/* --- Boutons : respiration douce + effet de lumière au survol ------------ */
.btn-primary {
  position: relative;
  overflow: hidden;
  animation: btn-breathe 3.4s ease-in-out infinite;
}
.btn-primary::before {
  content: "";
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .65s cubic-bezier(.16,1,.3,1);
}
.btn-primary:hover::before { left: 130%; }
@keyframes btn-breathe {
  0%, 100% { box-shadow: var(--shadow-brand); }
  50% { box-shadow: 0 16px 40px rgba(217,27,114,.42), 0 0 0 1px rgba(217,27,114,.05); }
}
.btn:active { transform: scale(.96) !important; }

/* --- Badges : petit rebond au survol de la carte parente ------------------ */
.badge-pop { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.price-card:hover .badge-pop, .feature-card:hover .badge-pop { transform: scale(1.08) rotate(-2deg); }

/* --- Halo global qui suit le curseur (desktop uniquement) ---------------- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,27,114,.10), rgba(121,40,202,.06) 45%, transparent 70%);
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .4s ease;
  will-change: transform;
}
.cursor-glow.is-active { opacity: 1; }

/* --- Aurora enrichie : mouvement plus organique --------------------------- */
@keyframes aurora-drift-v2 {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  33%  { transform: translate3d(2%, 3%, 0) scale(1.06) rotate(2deg); }
  66%  { transform: translate3d(-2%, 1%, 0) scale(1.03) rotate(-2deg); }
  100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
}
.hero-aurora { animation: aurora-drift-v2 14s ease-in-out infinite; }

/* --- FAQ : ouverture plus fluide, contenu qui glisse et s'éclaircit ------- */
.faq-a-inner { transform: translateY(-6px); opacity: 0; transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .4s ease; }
.faq-item.is-open .faq-a-inner { transform: translateY(0); opacity: 1; }
.faq-a { transition: max-height .5s cubic-bezier(.16,1,.3,1); }
.faq-item { transition: box-shadow .35s ease, border-color .35s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.faq-item:hover { transform: translateY(-2px); }

/* --- Menu mobile : entrée séquencée des liens ----------------------------- */
.mobile-nav a, .mobile-nav .btn, .mobile-nav .lang-switcher {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.mobile-nav.is-open a, .mobile-nav.is-open .btn, .mobile-nav.is-open .lang-switcher {
  opacity: 1; transform: translateY(0);
}
.mobile-nav.is-open a:nth-child(1) { transition-delay: .05s; }
.mobile-nav.is-open a:nth-child(2) { transition-delay: .1s; }
.mobile-nav.is-open a:nth-child(3) { transition-delay: .15s; }
.mobile-nav.is-open a:nth-child(4) { transition-delay: .2s; }
.mobile-nav.is-open a:nth-child(5) { transition-delay: .25s; }
.mobile-nav.is-open a:nth-child(6) { transition-delay: .3s; }
.mobile-nav.is-open a:nth-child(7) { transition-delay: .35s; }
.mobile-nav.is-open a:nth-child(8) { transition-delay: .4s; }
.mobile-nav.is-open a:nth-child(9) { transition-delay: .45s; }
.mobile-nav.is-open a:nth-child(10) { transition-delay: .5s; }

/* --- Chargement : sortie du loader plus élégante -------------------------- */
.loader-mark { animation: loader-pulse 1.1s ease-in-out infinite, loader-in .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes loader-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.page-loader { transition: opacity .5s cubic-bezier(.16,1,.3,1), visibility .5s; }
.page-loader.is-hidden { transform: scale(1.02); }

/* --- Transitions de page (View Transitions API, avec repli gracieux) ----- */
@view-transition { navigation: auto; }
@supports (view-transition-name: none) {
  ::view-transition-old(root) { animation: page-fade-out .35s cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root) { animation: page-fade-in .45s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes page-fade-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes page-fade-in { from { opacity: 0; transform: translateY(8px); } }

/* --- Accessibilité : réduire les animations si demandé ------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-aurora { animation: none; }
  .cursor-glow { display: none; }
  .btn-primary { animation: none; }
  .btn-primary::before { display: none; }
}

/* --- Support tactile : pas de hover, on désactive les effets souris ------ */
@media (hover: none) {
  .cursor-glow { display: none; }
  .price-card::after, .feature-card::after { display: none; }
}