/* ==========================================================================
   OSUN — états d'animation
   Les états masqués ne s'appliquent que si JS est actif (.js sur <html>),
   afin que le contenu reste visible sans JavaScript.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 2.2rem, 0);
}
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translate3d(-2.2rem, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.94); }

.js .split-line { display: block; overflow: hidden; }
.js .split-line > span { display: block; }
.js .is-intro-complete .split-line { overflow: visible; }
.js .split-word { display: inline-block; white-space: nowrap; }
.js .split-char { display: inline-block; }

.js .hero__halo { opacity: 0; }

/* Sur mobile, les révélations se font sur une distance plus courte et sans
   mise à l'échelle de grandes images : beaucoup moins de surfaces composites. */
@media (max-width: 47.99rem) {
  .js .hero h1,
  .js [data-intro-title] { opacity: 0; }
  .js .hero h1.is-css-intro,
  .js [data-intro-title].is-css-intro,
  .js .hero h1.is-intro-complete,
  .js [data-intro-title].is-intro-complete { opacity: 1; }
  .js [data-reveal] { transform: translate3d(0, 1.2rem, 0); }
  .js [data-reveal="left"] { transform: translate3d(-1.2rem, 0, 0); }
  .js [data-reveal="scale"] { transform: translate3d(0, 1.2rem, 0); }
  .js [data-reveal].is-mobile-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 1.35s cubic-bezier(.25, .46, .45, .94), transform 1.35s cubic-bezier(.25, .46, .45, .94);
  }
  .js .is-mobile-title-pending {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }
  .js .is-mobile-title-pending.is-mobile-title-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 1.2s cubic-bezier(.25, .46, .45, .94), transform 1.2s cubic-bezier(.25, .46, .45, .94);
  }
}

@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  .js .is-css-intro .split-line > span {
    animation: mobile-title-in 1.28s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(.22s + var(--intro-index, 0) * 125ms);
    will-change: transform;
  }
}

@keyframes mobile-title-in {
  from { transform: translate3d(0, 104%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* ------------------------------------------------ mouvement réduit -------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .hero__halo { opacity: 1; }

  .marquee__track { animation: none; transform: none; }
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__eyebrow .dot { animation: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}