/* Stati iniziali: SOLO quando JS è attivo e il motion non è disabilitato.
   Senza JS, o con reduced-motion, tutto resta visibile. */
.js:not(.no-motion) [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.js:not(.no-motion) [data-hero] .pl-word { display: inline-block; }
.js:not(.no-motion) [data-hero] .pl-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

/* Hero: il layer di sfondo va ritagliato per lo scale/parallax */
[data-hero] { overflow: hidden; }
[data-hero-bg] { will-change: transform; }

/* Capitolo pinnato: altezza deterministica, niente reflow interno */
[data-chapter="pin"] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-hero] .pl-word,
  .js [data-hero-fade] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}