/* ============================================================
   Timbly — Couche "Vivant" (ambient motion + interactions)
   Appliqué sur TOUTES les pages.
   - Effets universels : spotlight, magnetic, ripple, tilt, blobs
   - Effets home-only : aurora hero, parallax mockup, split-text
   ============================================================ */

/* ------------------------------------------------------------
   1. Aurora mesh gradient dans le hero (home uniquement)
   ------------------------------------------------------------ */
body.home .hero {
  position: relative;
  isolation: isolate;
}

body.home .hero::before {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(40% 50% at 18% 28%, rgba(110, 0, 223, 0.65) 0%, transparent 60%),
    radial-gradient(35% 45% at 82% 18%, rgba(49, 244, 104, 0.28) 0%, transparent 65%),
    radial-gradient(45% 55% at 70% 78%, rgba(110, 0, 223, 0.55) 0%, transparent 60%),
    radial-gradient(35% 40% at 12% 75%, rgba(49, 244, 104, 0.18) 0%, transparent 65%);
  filter: blur(40px);
  animation: aurora-drift 22s ease-in-out infinite;
  will-change: transform;
}

body.home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    120% 80% at 50% 110%,
    transparent 40%,
    rgba(10, 7, 54, 0.35) 100%
  );
}

body.home .hero > .container.hero-grid,
body.home .hero > .hero-wave,
body.home .hero > .hero-deco-star {
  position: relative;
  z-index: 1;
}

@keyframes aurora-drift {
  0%, 100% {
    transform: translate(0%, 0%) scale(1);
  }
  25% {
    transform: translate(4%, -3%) scale(1.06);
  }
  50% {
    transform: translate(-3%, 4%) scale(0.97);
  }
  75% {
    transform: translate(3%, 2%) scale(1.03);
  }
}

/* ------------------------------------------------------------
   1bis. Aurora discret sur page-banner (pages intérieures)
   Stacking original (style.css) :
     parallax z:0  •  scrim z:1  •  inner z:2
   On insère l'aurora en z:2 (au-dessus du scrim) et on remonte
   le contenu à z:3 pour qu'il reste lisible.
   ------------------------------------------------------------ */
.page-banner {
  position: relative;
  isolation: isolate;
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(40% 60% at 20% 30%, rgba(110, 0, 223, 0.28) 0%, transparent 60%),
    radial-gradient(35% 50% at 80% 70%, rgba(49, 244, 104, 0.14) 0%, transparent 60%);
  filter: blur(40px);
  opacity: 0.75;
  animation: aurora-drift 26s ease-in-out infinite;
  mix-blend-mode: screen;
  will-change: transform;
}

.page-banner .page-banner__inner {
  z-index: 3;
}

/* ------------------------------------------------------------
   2. Blobs ambient sur sections récurrentes
   ------------------------------------------------------------ */
.section[aria-label="Preuves"],
.testimonials-section,
.cta-dark,
.section--how-it-works {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section[aria-label="Preuves"] > .container,
.testimonials-section > .container,
.cta-dark > .container,
.section--how-it-works > .container {
  position: relative;
  z-index: 1;
}

/* Stats : blobs violet/lime — dosage Linear (subtil) */
.section[aria-label="Preuves"]::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -120px;
  top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 0, 223, 0.08) 0%, transparent 70%);
  filter: blur(80px);
  z-index: 0;
  animation: blob-drift-a 18s ease-in-out infinite;
  pointer-events: none;
}

.section[aria-label="Preuves"]::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -100px;
  bottom: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 244, 104, 0.1) 0%, transparent 70%);
  filter: blur(80px);
  z-index: 0;
  animation: blob-drift-b 22s ease-in-out infinite;
  pointer-events: none;
}

/* Testimonials : blobs subtils */
.testimonials-section::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -140px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 0, 223, 0.05) 0%, transparent 70%);
  filter: blur(90px);
  z-index: 0;
  animation: blob-drift-b 24s ease-in-out infinite;
  pointer-events: none;
}

.testimonials-section::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  left: -100px;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 244, 104, 0.06) 0%, transparent 70%);
  filter: blur(80px);
  z-index: 0;
  animation: blob-drift-a 20s ease-in-out infinite;
  pointer-events: none;
}

/* CTA dark : halos chauds */
.cta-dark::before {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  left: 50%;
  top: -200px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 0, 223, 0.35) 0%, transparent 70%);
  filter: blur(80px);
  z-index: 0;
  animation: blob-pulse 12s ease-in-out infinite;
  pointer-events: none;
}

.cta-dark::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  right: -80px;
  bottom: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 244, 104, 0.22) 0%, transparent 70%);
  filter: blur(70px);
  z-index: 0;
  animation: blob-drift-a 16s ease-in-out infinite;
  pointer-events: none;
}

/* How it works : halo subtil */
.section--how-it-works::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -140px;
  top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 0, 223, 0.08) 0%, transparent 70%);
  filter: blur(70px);
  z-index: 0;
  animation: blob-drift-b 26s ease-in-out infinite;
  pointer-events: none;
}

@keyframes blob-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(60px, 40px); }
}

@keyframes blob-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-50px, 50px); }
}

@keyframes blob-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.9; }
  50%      { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

/* ------------------------------------------------------------
   3. Cursor-reactive spotlight sur cartes
   Classe .has-spotlight ajoutée par JS, --mx/--my trackés au mousemove
   ------------------------------------------------------------ */
.has-spotlight {
  position: relative;
  isolation: isolate;
}

.has-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(49, 244, 104, 0.22),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

.has-spotlight:hover::before {
  opacity: 1;
}

/* Contenu au-dessus du spotlight */
.has-spotlight > * {
  position: relative;
  z-index: 2;
}

/* Spotlight violet (+ normal blend) sur cartes claires */
.how-timeline__card.has-spotlight::before,
.testimonial-card.has-spotlight::before,
.panel--faq-cta.has-spotlight::before,
.about-features-grid__card.has-spotlight::before,
.feature-row.has-spotlight::before,
.panel.has-spotlight::before {
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(110, 0, 223, 0.18),
    transparent 65%
  );
  mix-blend-mode: normal;
}

/* ------------------------------------------------------------
   4. Magnetic buttons + ripple
   ------------------------------------------------------------ */
.is-magnetic {
  translate: var(--mag-x, 0) var(--mag-y, 0);
  transition: translate 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: translate;
}

.btn,
.store-badge {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ripple {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, 0.55);
  animation: ripple-out 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 0;
}

.btn-primary .ripple {
  background: rgba(10, 7, 54, 0.35);
}

.store-badge .ripple {
  background: rgba(255, 255, 255, 0.35);
}

@keyframes ripple-out {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
  }
  to {
    transform: translate(-50%, -50%) scale(32);
    opacity: 0;
  }
}

/* ------------------------------------------------------------
   5. Scroll parallax sur mockup (home) + tilt reveal universel
   ------------------------------------------------------------ */
body.home .hero-mockup-float {
  translate: 0 var(--pY, 0);
  will-change: translate;
}

.vivant-tilt {
  opacity: 0;
  translate: 0 40px;
  rotate: x 12deg;
  transition:
    opacity 0.9s cubic-bezier(0.2, 1, 0.36, 1),
    translate 0.9s cubic-bezier(0.2, 1, 0.36, 1),
    rotate 0.9s cubic-bezier(0.2, 1, 0.36, 1);
  transform-origin: 50% 100%;
}

.vivant-tilt.is-revealed {
  opacity: 1;
  translate: 0 0;
  rotate: x 0deg;
}

/* ------------------------------------------------------------
   6. Split-text H1 hero (home uniquement)
   ------------------------------------------------------------ */
body.home .hero h1.is-split {
  animation: none !important;
  opacity: 1;
}

body.home .hero h1.is-split .char {
  display: inline-block;
  opacity: 0;
  translate: 0 20px;
  rotate: -4deg;
  animation: char-in 0.75s cubic-bezier(0.22, 1.25, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 32ms + 100ms);
  will-change: opacity, translate, rotate;
}

body.home .hero h1.is-split .char.is-space {
  width: 0.28em;
}

@keyframes char-in {
  0% {
    opacity: 0;
    translate: 0 20px;
    rotate: -4deg;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
}

/* ------------------------------------------------------------
   7. Reduced motion — couper toute la couche vivant
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.home .hero::before,
  body.home .hero::after,
  .page-banner::before,
  .section[aria-label="Preuves"]::before,
  .section[aria-label="Preuves"]::after,
  .testimonials-section::before,
  .testimonials-section::after,
  .cta-dark::before,
  .cta-dark::after,
  .section--how-it-works::before {
    animation: none !important;
  }

  .has-spotlight::before {
    display: none !important;
  }

  .is-magnetic {
    translate: 0 0 !important;
    transition: none !important;
  }

  .vivant-tilt {
    opacity: 1 !important;
    translate: 0 0 !important;
    rotate: x 0deg !important;
    transition: none !important;
  }

  body.home .hero h1.is-split .char {
    opacity: 1 !important;
    translate: 0 0 !important;
    rotate: 0deg !important;
    animation: none !important;
  }

  .ripple {
    display: none !important;
  }
}