/* Motion hooks only: layout, typography, colors and frame dimensions belong to
   editorial.css. No CSS hides content before JavaScript becomes available. */
.editorial-hero.editorial-motion-ready .headline-line {
  display: block;
  overflow: clip;
}

.editorial-hero .editorial-line-content {
  display: block;
}

/* Layer promotion is limited to the two visible, moving hero images. */
.editorial-hero.editorial-motion-active .editorial-motion-layer {
  will-change: translate, rotate, scale;
}

/* Runtime cancels entrances and removes continuous transforms on preference
   changes; these rules also cover a stylesheet/system preference race. */
@media (prefers-reduced-motion: reduce) {
  .editorial-hero .editorial-motion-layer {
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    will-change: auto;
  }

  .editorial-hero .editorial-line-content {
    transform: none !important;
  }
}