/* Animations d'entrée. Tout est conditionné à .js : sans JavaScript, le contenu reste visible. */

.js [data-reveal] {
  opacity: 0;
  translate: 0 26px;
  transition: opacity .8s var(--ease-out), translate .9s var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

.js [data-split] .c {
  opacity: 0;
  transform: translateY(80%) rotateX(-80deg);
}
.js [data-split].is-in .c {
  opacity: 1;
  transform: none;
  transition:
    transform .9s var(--ease-out) calc(var(--i, 0) * 24ms),
    opacity .6s var(--ease-out) calc(var(--i, 0) * 24ms);
}

/* Prénoms : lettres droites (demande de Thomas), avec un petit saut vers le haut au passage de la souris. */
.js .hero__title.is-in .c {
  transition:
    transform .9s var(--ease-out) calc(var(--i, 0) * 24ms),
    opacity .6s var(--ease-out) calc(var(--i, 0) * 24ms),
    translate .5s cubic-bezier(.34, 1.56, .64, 1);
}
@media (hover: hover) {
  .js .hero__title.is-in .c:hover { translate: 0 -.14em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-split] .c { opacity: 1; translate: 0 0; transform: none; transition: none; }
  .ring__arc { stroke-dashoffset: 0 !important; }
  .seal__ring { animation: none; }
  .g-item.is-new { animation: none; }
  .btn, .btn__in, .btn__rev, .seal, .menu-btn { transition: none; }
}