/* ══════════════════════════════════════════════
   antwnlifts.fr : couche animation
   Uniquement transform / opacity (compositées GPU).
   Tout est désactivé sous prefers-reduced-motion (bas du fichier).
   ══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. BARRE DE PROGRESSION DE SCROLL
   ───────────────────────────────────────────── */
.progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* ─────────────────────────────────────────────
   2. NAV : se compacte au scroll
   ───────────────────────────────────────────── */
nav {
  transition: height .35s var(--ease), background .35s ease, box-shadow .35s ease;
}
nav.scrolled {
  height: 52px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 24px rgba(0,0,0,.06);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ─────────────────────────────────────────────
   3. AMBIANCE : bouge en permanence, sans scroll
   ───────────────────────────────────────────── */

/* Halos bleus qui dérivent lentement derrière le hero.
   inset:0 + overflow:hidden : les blobs débordent volontairement du cadre
   et sont rognés ici, sinon ils élargissent la page (scroll horizontal). */
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .5;
  will-change: transform;
}
.blob-1 {
  width: 520px; height: 520px; top: -8%; left: -6%;
  background: radial-gradient(circle, rgba(10,132,255,.22), transparent 68%);
  animation: drift-1 26s ease-in-out infinite;
}
.blob-2 {
  width: 440px; height: 440px; top: 30%; right: -4%;
  background: radial-gradient(circle, rgba(77,163,255,.18), transparent 68%);
  animation: drift-2 32s ease-in-out infinite;
}
.blob-3 {
  width: 360px; height: 360px; bottom: -10%; left: 38%;
  background: radial-gradient(circle, rgba(0,96,223,.10), transparent 70%);
  animation: drift-3 38s ease-in-out infinite;
}
@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, 40px) scale(1.08); }
  66%      { transform: translate(-30px, 70px) scale(.96); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-70px, -50px) scale(1.12); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(50px, -40px) scale(1.06); }
  75%      { transform: translate(-40px, 20px) scale(.94); }
}

/* Grille technique qui défile derrière le hero */
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(10,132,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,132,255,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
  animation: grid-drift 22s linear infinite;
}
@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 56px, 56px 56px; }
}

/* Reflet qui traverse les boutons principaux */
.btn-main::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-180%) skewX(-18deg);
  animation: shine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%, 72%, 100% { transform: translateX(-180%) skewX(-18deg); }
  86%           { transform: translateX(320%) skewX(-18deg); }
}

/* Halo qui respire derrière le CTA final */
.cta-glow {
  position: absolute; top: 50%; left: 50%; width: 900px; height: 900px;
  margin: -450px 0 0 -450px; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(10,132,255,.20), transparent 62%);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .65; }
  50%      { transform: scale(1.16); opacity: 1; }
}

/* Flèche du bouton secondaire */
.btn-sec .arrow { display: inline-block; animation: nudge 2.6s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ─────────────────────────────────────────────
   4. RÉVÉLATION AU SCROLL
   ───────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s var(--ease) var(--delay, 0s),
    transform .8s var(--ease) var(--delay, 0s);
  will-change: transform, opacity;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="blur"]  { transform: translateY(20px); filter: blur(8px); transition-property: opacity, transform, filter; }

[data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Titres : révélation mot par mot (les <span> sont générés par main.js) */
.w { display: inline-block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; vertical-align: top; }
.w-i {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .9s var(--ease) var(--wd, 0s);
  will-change: transform;
}
.split.in .w-i { transform: translateY(0); }

/* Trait qui se dessine sous les labels de section */
.section-label { position: relative; display: inline-block; padding-bottom: 8px; }
.section-label::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .8s var(--ease) .15s;
}
.section-label.in::after { transform: scaleX(1); }

/* Étapes du process : apparition + le numéro prend l'accent */
.phase {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.phase.in { opacity: 1; transform: none; }
.phase-num { transition: transform .6s var(--ease) .2s; }
.phase.in .phase-num { transform: scale(1); }

/* Compteurs */
[data-count] { font-variant-numeric: tabular-nums; }

/* Cartes qui se soulèvent */
.lift { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.lift:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.09); }

/* Parallaxe (piloté par main.js via --py) */
.parallax { transform: translate3d(0, var(--py, 0), 0); will-change: transform; }

/* FAQ : le déroulé (hauteur + fondu de la réponse) est animé par main.js,
   qui doit mesurer la hauteur réelle du texte. Rien à faire ici. */

/* ─────────────────────────────────────────────
   5. ENTRÉE DU HERO (au chargement)
   ───────────────────────────────────────────── */
.hero-eyebrow, .hero-sub, .hero-ctas, .hero-stats {
  opacity: 0; transform: translateY(22px);
  animation: enter .9s var(--ease) forwards;
}
.hero-eyebrow { animation-delay: .1s; }
.hero-sub     { animation-delay: .5s; }
.hero-ctas    { animation-delay: .62s; }
.hero-stats   { animation-delay: .74s; }
@keyframes enter { to { opacity: 1; transform: none; } }

/* Sécurité : si JS ne tourne pas, tout reste visible */
.no-js [data-reveal], .no-js .phase,
.no-js .hero-eyebrow, .no-js .hero-sub, .no-js .hero-ctas,
.no-js .hero-stats {
  opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important;
}
.no-js .section-label::after { transform: none !important; }

/* ─────────────────────────────────────────────
   6. ACCESSIBILITÉ : on coupe tout
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .phase, .hero-eyebrow, .hero-sub, .hero-ctas, .hero-stats {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .w-i { transform: none !important; }
  .section-label::after { transform: none !important; }
  .parallax { transform: none !important; }
  /* Élément purement décoratif : sans animation il n'a plus de sens. */
  .cta-glow { display: none; }
  .aurora, .grid-bg { opacity: .5; }
}