/* Altear : états initiaux et styles liés au mouvement.
   Tout est préfixé par .js:not(.motion-fallback) : sans JS, ou si GSAP échoue, le contenu reste visible. */

.js:not(.motion-fallback) [data-reveal],
.js:not(.motion-fallback) [data-stagger] > * { opacity: 0; }

.js:not(.motion-fallback) [data-split],
.js:not(.motion-fallback) [data-hero] .hero-title { visibility: hidden; }

.js:not(.motion-fallback) [data-hero] .hero-lead,
.js:not(.motion-fallback) [data-hero] .hero-ctas,
.js:not(.motion-fallback) [data-hero] .hero-trust,
.js:not(.motion-fallback) [data-hero-3d] { opacity: 0; }

.js:not(.motion-fallback) [data-progress] { transform: scaleX(0); transform-origin: 0 50%; }

/* Texte découpé par SplitText */
.js:not(.motion-fallback) .split-line { display: block; }
.js:not(.motion-fallback) .split-line-mask { padding-bottom: .14em; margin-bottom: -.14em; }
.js:not(.motion-fallback) .split-word,
.js:not(.motion-fallback) .split-char { display: inline-block; }
.js:not(.motion-fallback) [data-split] .split-char { will-change: transform; }
.js:not(.motion-fallback) [data-split] .grad,
.js:not(.motion-fallback) [data-hero] .hero-title .grad { display: inline-block; }

/* Appareils et plans 3D */
.js:not(.motion-fallback) [data-hero-3d],
.js:not(.motion-fallback) [data-tilt3d],
.js:not(.motion-fallback) [data-layer3d] { transform-style: preserve-3d; }
.js:not(.motion-fallback) [data-hero-3d] { will-change: transform; }
.js:not(.motion-fallback) [data-marquee] { will-change: transform; }
.js:not(.motion-fallback) [data-nav] { will-change: transform; }

/* Fond WebGL actif : les aurores CSS s'atténuent */
.gl-on .aurora { opacity: .25; }
canvas.hero-gl { pointer-events: none; }

/* Scène « fonctionnement » : étapes qui s'allument tour à tour (≥ 900 px, classe posée par JS) */
.js:not(.motion-fallback) .story-live [data-story-step] {
  opacity: .38;
  transition: opacity .5s ease, transform .5s ease;
}
.js:not(.motion-fallback) .story-live [data-story-step].is-done { opacity: .6; }
.js:not(.motion-fallback) .story-live [data-story-step].is-active { opacity: 1; }
.js:not(.motion-fallback) .story-live [data-story-step] [data-reveal] { opacity: 1; }
.story-packet {
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: #fff; pointer-events: none; opacity: 0;
  box-shadow: 0 0 12px 3px rgba(167, 139, 250, .9), 0 0 36px 10px rgba(34, 211, 238, .45);
}

/* Carrousels mobiles : carte courante mise en avant (mobile, mouvement autorisé, carrousel qui défile) */
@media (max-width: 759px) and (prefers-reduced-motion: no-preference) {
  .js:not(.motion-fallback) [data-carousel].is-carousel-live > * {
    scale: .955; filter: brightness(.8);
    transition: scale .4s ease, filter .4s ease;
  }
  .js:not(.motion-fallback) [data-carousel].is-carousel-live > .is-current { scale: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-dock] { transition: none; }
  html.js:not(.motion-fallback) [data-reveal],
  html.js:not(.motion-fallback) [data-stagger] > *,
  html.js:not(.motion-fallback) [data-split],
  html.js:not(.motion-fallback) [data-hero] .hero-title,
  html.js:not(.motion-fallback) [data-hero] .hero-lead,
  html.js:not(.motion-fallback) [data-hero] .hero-ctas,
  html.js:not(.motion-fallback) [data-hero] .hero-trust,
  html.js:not(.motion-fallback) [data-hero-3d] { opacity: 1 !important; visibility: visible !important; }
  html.js:not(.motion-fallback) [data-progress] { opacity: 0; transform: none; }
  html.js:not(.motion-fallback) [data-hero-3d],
  html.js:not(.motion-fallback) [data-marquee],
  html.js:not(.motion-fallback) [data-nav] { will-change: auto; }
  .gl-on .aurora { opacity: 1; }
}