/**
 * animations.css — États initiaux des animations pilotées par JS.
 *
 * Sans JavaScript (classe .no-js conservée sur <html>), tout le contenu
 * reste visible : les états « cachés » ne s'appliquent que sous .js.
 */

/* Texte découpé en mots : chaque mot est masqué (overflow) et translaté. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* marge de sécurité : évite de rogner les jambages (g, p, y…) */
  padding: 0.06em 0.04em 0.16em;
  margin: -0.06em -0.04em -0.16em;
}

.w__i {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  will-change: transform;
}

/* Le texte reste caché tant que le JS ne l'a pas découpé (évite un flash). */
.js [data-reveal='scrub']:not(.is-split),
.js [data-reveal='intro']:not(.is-split) {
  visibility: hidden;
}

/* Intro du hero : les mots montent l'un après l'autre au chargement. */
.js [data-reveal='intro'] .w__i {
  transition: transform 1.1s var(--ease-out) calc(var(--i, 0) * 70ms + 200ms);
}

.is-loaded [data-reveal='intro'] .w__i {
  transform: translate3d(0, 0, 0);
}

/* Apparition simple (bouton du hero, e-mail de contact). */
.js [data-reveal='fade'] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.5s var(--ease-out) 0.1s, transform 0.5s var(--ease-out) 0.1s;
}

.js [data-reveal='fade'].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .w__i {
    transform: none !important;
  }

  .js [data-reveal='fade'] {
    opacity: 1;
    transform: none;
  }
}