/* ==========================================================================
   animations.css — États de départ, découpage du texte, grain animé,
   et version calme (prefers-reduced-motion)
   ========================================================================== */

/* ---- Texte découpé (split.js) ---------------------------------------- */
/* Masque par mot : le mot monte depuis sous sa ligne de base. Le padding
   négatif évite de rogner l'italique et les jambages. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.04em 0.12em 0.16em;
  margin: -0.04em -0.12em -0.16em;
}
.split-word__in,
.char {
  display: inline-block;
  will-change: transform;
}
.split-space { display: inline; }

/* Avant découpage, on masque pour éviter le flash de texte non animé */
.js [data-split]:not(.is-split) { visibility: hidden; }

/* Éléments du hero révélés après le preloader */
.js [data-hero-item] { opacity: 0; }

/* ---- Grain animé ------------------------------------------------------ */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-6%, -9%); }
  25% { transform: translate(-14%, 4%); }
  37% { transform: translate(7%, -18%); }
  50% { transform: translate(-4%, 13%); }
  62% { transform: translate(-13%, 6%); }
  75% { transform: translate(11%, 2%); }
  87% { transform: translate(2%, 10%); }
}
.grain { animation: grain 1.1s steps(1) infinite; }

/* ---- Révélation encre des photos -------------------------------------- */
.js [data-ink-reveal] img { clip-path: circle(0% at 50% 60%); }
.is-revealing { filter: url(#ink-reveal); }

/* ---- Preloader : sortie à l'encre ------------------------------------- */
.preloader.is-leaving { filter: url(#ink-dissolve); }

/* ======================================================================
   prefers-reduced-motion : une version calme mais toujours soignée.
   Pas de smooth scroll, pas de traînée, dessins déjà tatoués.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }
  .grain { animation: none; }
  .js [data-split]:not(.is-split) { visibility: visible; }
  .js [data-hero-item] { opacity: 1; }
  .js [data-ink-reveal] img { clip-path: none; }
  .pulse { animation: none; box-shadow: 0 0 0 3px rgba(162, 75, 48, 0.25); }
  .scroll-hint__line::after { animation: none; transform: none; }
  .menu { transition: none; }
}