.hero-visual .mascot {
  animation: mascot-wander 20s ease-in-out infinite;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.hero-visual .mascot:focus-visible {
  outline: 3px solid #ff7b20;
  outline-offset: 4px;
  border-radius: 16px;
}

.hero-visual .mascot-art {
  animation: mascot-bob .65s ease-in-out infinite;
}

.hero-visual .mascot-shadow {
  animation-duration: .65s;
}

.mascot-leg {
  fill: none;
  stroke: #ff7b20;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 50% 10%;
}

.mascot-leg-left {
  animation: mascot-step .4s ease-in-out infinite alternate;
}

.mascot-leg-right {
  animation: mascot-step .4s ease-in-out infinite alternate-reverse;
}

.mascot-arm-left {
  transform-box: fill-box;
  transform-origin: 80% 80%;
  animation: mascot-arm-step .4s ease-in-out infinite alternate;
}

.hero-visual .mascot.is-tickled .mascot-art {
  animation: mascot-tickle .11s ease-in-out 10 alternate;
}

.hero-visual .mascot.is-tickled .mascot-leg,
.hero-visual .mascot.is-tickled .mascot-arm {
  animation: mascot-tickle-limbs .11s ease-in-out 10 alternate;
}

@keyframes mascot-wander {
  0%, 100% { left: 1%; bottom: 10px; transform: rotate(-2deg); }
  18% { left: 20%; bottom: 32px; transform: rotate(2deg); }
  42% { left: 62%; bottom: 8px; transform: rotate(-1deg); }
  66% { left: 42%; bottom: 66px; transform: rotate(2deg); }
  84% { left: 8%; bottom: 48px; transform: rotate(-2deg); }
}

@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes mascot-step {
  from { transform: rotate(18deg); }
  to { transform: rotate(-18deg); }
}

@keyframes mascot-arm-step {
  from { transform: rotate(-12deg); }
  to { transform: rotate(12deg); }
}

@keyframes mascot-tickle {
  from { transform: translateX(-4px) rotate(-5deg) scale(1.02); }
  to { transform: translateX(4px) rotate(5deg) scale(.98); }
}

@keyframes mascot-tickle-limbs {
  from { transform: rotate(-28deg); }
  to { transform: rotate(28deg); }
}

@media (max-width: 1100px) {
  @keyframes mascot-wander {
    0%, 100% { left: 1%; bottom: 10px; transform: rotate(-2deg); }
    22% { left: 18%; bottom: 30px; transform: rotate(2deg); }
    46% { left: 50%; bottom: 8px; transform: rotate(-1deg); }
    70% { left: 35%; bottom: 58px; transform: rotate(2deg); }
    88% { left: 6%; bottom: 38px; transform: rotate(-2deg); }
  }
}

@media (max-width: 760px) {
  @keyframes mascot-wander {
    0%, 100% { left: 0; bottom: 8px; transform: rotate(-2deg); }
    22% { left: 18%; bottom: 24px; transform: rotate(2deg); }
    46% { left: 52%; bottom: 8px; transform: rotate(-1deg); }
    70% { left: 36%; bottom: 46px; transform: rotate(2deg); }
    88% { left: 5%; bottom: 28px; transform: rotate(-2deg); }
  }
}

@media (max-width: 390px) {
  @keyframes mascot-wander {
    0%, 100% { left: 0; bottom: 8px; transform: rotate(-2deg); }
    22% { left: 15%; bottom: 20px; transform: rotate(2deg); }
    46% { left: 43%; bottom: 8px; transform: rotate(-1deg); }
    70% { left: 30%; bottom: 38px; transform: rotate(2deg); }
    88% { left: 4%; bottom: 24px; transform: rotate(-2deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual .mascot,
  .hero-visual .mascot-art,
  .hero-visual .mascot-shadow,
  .mascot-leg,
  .mascot-arm-left {
    animation: none !important;
  }
}