.hero-line,
.hero-line-inner {
  display: block;
}

.hero-line {
  overflow: visible;
}

.hero-line-inner {
  transform-origin: 0 100%;
}

.hero-line.motion-mask-active {
  overflow: hidden;
  overflow: clip;
}

[data-page-root] .motion-running {
  transition: none !important;
  will-change: transform, opacity;
}

[data-page-root] .hero-image.motion-running {
  will-change: transform, opacity, clip-path;
}

/* Focus uses no translation; promote just the properties it animates. */
[data-page-entrance="focus"] [data-page-root] .motion-running {
  will-change: opacity, filter;
}

[data-motion="reduced"] .motion-running,
[data-page-entrance="off"] .motion-running,
[data-design-mode="true"] .motion-running {
  opacity: var(--motion-rest-opacity, 1) !important;
  transform: var(--motion-rest-transform, none) !important;
  filter: var(--motion-rest-filter, none) !important;
  clip-path: none !important;
}

[data-motion="reduced"] .hero-line.motion-mask-active,
[data-page-entrance="off"] .hero-line.motion-mask-active,
[data-design-mode="true"] .hero-line.motion-mask-active {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  [data-page-root] .motion-running {
    opacity: var(--motion-rest-opacity, 1) !important;
    transform: var(--motion-rest-transform, none) !important;
    filter: var(--motion-rest-filter, none) !important;
    clip-path: none !important;
  }

  .hero-line.motion-mask-active {
    overflow: visible;
  }
}

/* Also keep any legacy reveal blocks visible when entrance effects are off. */
[data-page-entrance="off"] .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}