/* The actual process and its finished artwork share the existing hero frame. */
.hero-art-frame #hero-image[src="/assets/portrait-brush-clean-start.webp"]{object-fit:cover;object-position:50% 12%}
.hero-art-frame.has-brush-scroll .hero-brush-poster,
.hero-art-frame.has-brush-scroll .hero-brush-video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;pointer-events:none;opacity:0;transition:none}
.hero-art-frame.has-brush-scroll .hero-brush-poster.is-ready{opacity:1}
/* The aligned video is invisible at scroll zero, even when fully decoded.
   The controller reveals it by scroll distance, never by elapsed time. */
@media(prefers-reduced-motion:reduce){
  .hero-art-frame.has-brush-scroll .hero-brush-poster,
  .hero-art-frame.has-brush-scroll .hero-brush-video{display:none;transition:none}
}