.hero .bear-motion {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
.hero .bear-motion:focus-visible { outline: 2px solid #486c75; outline-offset: 8px; border-radius: 16px; }
.hero .bear-motion[aria-disabled="true"] { cursor: default; }
.bear-sprite { display: none; position: absolute; inset: 0; background-repeat: no-repeat; pointer-events: none; }
.bear-motion.motion-ready .bear-sprite { display: block; }
.hero .bear-motion.motion-ready > img { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .bear-motion.motion-ready .bear-sprite { display: none; }
  .hero .bear-motion.motion-ready > img { visibility: visible; }
}

/* Match the decoded neutral atlas frame exactly before animation is ready. */
.hero .bear-motion > img, .hero .bear-motion:hover > img { filter: none; transition: none; }