/* This layer is attached to the hero, never the viewport. It scrolls exactly
   with the static artwork and cannot change page height or hit targets. */
.scroll-hero [data-hero-character="warrior"] { aspect-ratio:1183/1500; }
.scroll-hero [data-hero-character="ninja"] { aspect-ratio:790/1500; }
.scroll-hero .scroll-character--ninja { right:6%; }
.scroll-hero .scroll-warrior-scene [data-hero-character="warrior"] > [data-hero-poster] {
  position:absolute; left:-16%; top:-82%; width:144%; height:184%; max-width:none;
}
.scroll-hero [data-hero-character="ninja"] > [data-hero-poster] {
  position:absolute; left:-28%; top:-6%; width:156%; height:108%; max-width:none;
}
.scroll-hero-character-canvas {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  z-index:4; pointer-events:none;
}
.scroll-hero-character-canvas[hidden] { display:none !important; }
[data-hero-character].is-hero-live > [data-hero-poster],
[data-hero-character].is-hero-live > img,
[data-hero-static-prop].is-hero-prop-live { opacity:0 !important; transition:none !important; }
/* The image retains layout dimensions while WebGL is active. An effects-off
   state restores the same static pose immediately, including its flag. */
body.motion-paused .scroll-hero-character-canvas { display:none !important; }
body.motion-paused [data-hero-character] > img,
body.motion-paused [data-hero-static-prop] { opacity:1 !important; transition:none !important; }
/* Keep the full bow movement within the screen at narrow widths. */
@media (max-width:850px) {
  .scroll-hero .scroll-character--ninja { right:8%; }
}
@media (max-width:540px) {
  .scroll-hero .scroll-character--ninja { right:11%; width:33%; }
}