.scroll-dribbler {
  --mascot-scale: 1;
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 200px;
  height: 240px;
  z-index: 90;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(12px) scale(var(--mascot-scale));
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s ease;
  overflow: hidden;
}
.scroll-dribbler.is-visible { opacity: 1; transform: translateY(0) scale(var(--mascot-scale)); }
.scroll-dribbler__sprite {
  width: 200px;
  height: 240px;
  background-image: url('./dribble-smooth-sprite.webp');
  background-repeat: no-repeat;
  background-size: 1600px 240px;
  animation: asakura-dribble 1.1s step-end 1 both;
  animation-play-state: paused;
}
.scroll-dribbler.is-playing .scroll-dribbler__sprite { animation-play-state: running; }
@keyframes asakura-dribble {
  0% { background-position-x: 0; }
  12.5% { background-position-x: -200px; }
  25% { background-position-x: -400px; }
  37.5% { background-position-x: -600px; }
  50% { background-position-x: -800px; }
  62.5% { background-position-x: -1000px; }
  75% { background-position-x: -1200px; }
  87.5%, 100% { background-position-x: -1400px; }
}
@keyframes asakura-feint {
  0% { background-position-x: 0; }
  12.5% { background-position-x: -200px; }
  25% { background-position-x: -400px; }
  37.5% { background-position-x: -600px; }
  50% { background-position-x: -800px; }
  62.5% { background-position-x: -1000px; }
  75% { background-position-x: -1200px; }
  87.5%, 100% { background-position-x: -1400px; }
}
@keyframes asakura-shot {
  0% { background-position-x: 0; }
  12.5% { background-position-x: -200px; }
  25% { background-position-x: -400px; }
  37.5% { background-position-x: -600px; }
  50% { background-position-x: -800px; }
  62.5% { background-position-x: -1000px; }
  75% { background-position-x: -1200px; }
  87.5%, 100% { background-position-x: -1400px; }
}
@keyframes asakura-celebrate {
  0% { background-position-x: 0; }
  12.5% { background-position-x: -200px; }
  25% { background-position-x: -400px; }
  37.5% { background-position-x: -600px; }
  50% { background-position-x: -800px; }
  62.5% { background-position-x: -1000px; }
  75% { background-position-x: -1200px; }
  87.5%, 100% { background-position-x: -1400px; }
}
.scroll-dribbler[data-motion="feint"] .scroll-dribbler__sprite {
  background-image: url('./feint-smooth-sprite.webp');
  animation-name: asakura-feint;
  animation-duration: 1.35s;
}
.scroll-dribbler[data-motion="shot"] .scroll-dribbler__sprite {
  background-image: url('./shot-smooth-sprite.webp');
  animation-name: asakura-shot;
  animation-duration: 1.3s;
}
.scroll-dribbler[data-motion="celebrate"] .scroll-dribbler__sprite {
  background-image: url('./celebrate-smooth-sprite.webp');
  animation-name: asakura-celebrate;
  animation-duration: 1.4s;
}
.scroll-dribbler:not(.is-visible) .scroll-dribbler__sprite { animation: none; background-position-x: 0; }
@media (max-width: 650px) {
  .scroll-dribbler { --mascot-scale: .42; right: max(4px, env(safe-area-inset-right)); bottom: max(2px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-dribbler { transition: none; }
  .scroll-dribbler[data-motion] .scroll-dribbler__sprite { animation: none; background-position-x: 0; }
}