/* aboutアニメーション */
.about-character.rotate-active {
  transform-origin: center center;
  animation: rotateAnimation 20s linear infinite;
}

@keyframes rotateAnimation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* グッズアニメーション */
.popponpoppin-active {
  transform-origin: 50% 100%;
  animation: popponpoppinAnimation 3s ease-in-out infinite;
}
@keyframes popponpoppinAnimation {
  0% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(-6deg);
  }
}

/* でんごんばんアニメーション */
.pipipin-active {
  transform-origin: 50% 100%;
  animation: pipipinAnimation 4s ease-in-out infinite;
}
@keyframes pipipinAnimation {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  5% { /* ため */
    transform: translateY(0) scale(1.05, 0.9);
  }
  15% { /* 上昇 */
    transform: translateY(-40px) scale(0.95, 1.05);
  }
  25% { /* 着地 */
    transform: translateY(0) scale(1.1, 0.85);
  }
  40% {
    transform: translateY(0) scale(1, 1);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

.pachichi-active {
  transform-origin: 50% 100%;
  animation: pachichiAnimation 1s ease-in-out infinite;
}
@keyframes pachichiAnimation {
  0% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(1deg);
  }
}

/* おみせアニメーション */
.pukikin-active {
  transform-origin: bottom center;
  animation: pukikinAnimation 1.6s ease-in-out infinite;
}

@keyframes pukikinAnimation {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  15% {
    transform: translateY(-6px) rotate(-10deg);
  }
  30% {
    transform: translateY(0) rotate(0deg);
  }
  45% {
    transform: translateY(-6px) rotate(10deg);
  }
  60% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.js-jump-character {
  display: block;
  transition: transform 0.2s ease;
}

.js-jump-character.is-jumping {
  transform-origin: bottom center;
  animation: jump 3s ease-out;
}

@keyframes jump {
  0% {
    transform: translateY(0) scaleY(0.9);
  }
  20% {
    transform: translateY(0) scaleY(0.8);
  }
  50% {
    transform: translateY(-3000px) scaleY(1.05);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .friends__character {
    animation: none !important;
  }
}