body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #0a0a0a, #1c1c3c);
  background-size: cover;
  color: #fff;
  overflow: hidden;
}

/* 粒子アニメーション */
@keyframes particles {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-800px) translateX(200px);
    opacity: 0;
  }
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  animation: particles 5s linear infinite;
  opacity: 0;
}

/* 粒子の配置をランダム化 */
.particle:nth-child(1) {
  top: 80%;
  left: 20%;
  animation-duration: 4s;
  animation-delay: 0s;
}
.particle:nth-child(2) {
  top: 60%;
  left: 40%;
  animation-duration: 3s;
  animation-delay: 1s;
}
.particle:nth-child(3) {
  top: 50%;
  left: 70%;
  animation-duration: 5s;
  animation-delay: 2s;
}
.particle:nth-child(4) {
  top: 30%;
  left: 90%;
  animation-duration: 6s;
  animation-delay: 1s;
}
.particle:nth-child(5) {
  top: 70%;
  left: 10%;
  animation-duration: 4.5s;
  animation-delay: 3s;
}

/* 1. リズムに合わせたライトの点滅 */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

.light {
  width: 50px;
  height: 50px;
  background: #ff5722;
  border-radius: 50%;
  display: inline-block;
  margin: 10px;
  animation: blink 0.5s infinite;
}

/* 2. 波形アニメーション */
@keyframes wave {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(2);
  }
  100% {
    transform: scaleY(1);
  }
}

.bar {
  display: inline-block;
  width: 10px;
  margin: 0 2px;
  height: 50px;
  background: #4caf50;
  animation: wave 0.3s infinite ease-in-out;
}

.bar:nth-child(2) {
  animation-delay: 0.1s;
}
.bar:nth-child(3) {
  animation-delay: 0.2s;
}

/* 3. スポットライトの回転 */
@keyframes spotlight {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spotlight {
  animation: spotlight 3s infinite linear;
  background: radial-gradient(
    circle,
    rgba(255, 255, 0, 0.8) 0%,
    rgba(255, 255, 0, 0) 70%
  );
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}

/* 4. 跳ねる音符アニメーション */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.note {
  animation: bounce 0.6s infinite ease-in-out;
  font-size: 40px;
  color: #9c27b0;
  display: inline-block;
  margin: 0 10px;
}

/* 5. 光るボタンの鼓動アニメーション */
@keyframes pulse {
  0% {
    box-shadow: 0 0 10px #ff0000;
  }
  50% {
    box-shadow: 0 0 30px #ff0000;
  }
  100% {
    box-shadow: 0 0 10px #ff0000;
  }
}

.button {
  animation: pulse 1s infinite;
  padding: 10px 20px;
  background: #f44336;
  color: #fff;
  border: none;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
}

/* 6. ディスコボール風エフェクト */
@keyframes disco1 {
  0%,
  100% {
    background-color: #ff0000;
  }
  25% {
    background-color: #00ff00;
  }
  50% {
    background-color: #0000ff;
  }
  75% {
    background-color: #ffff00;
  }
}
@keyframes disco2 {
  0%,
  100% {
    background-color: #00ff00;
  }
  25% {
    background-color: #ff0000;
  }
  50% {
    background-color: #ffff00;
  }
  75% {
    background-color: #0000ff;
  }
}
@keyframes disco3 {
  0%,
  100% {
    background-color: #ff0000;
  }
  25% {
    background-color: #0000ff;
  }
  50% {
    background-color: #ffff00;
  }
  75% {
    background-color: #00ff00;
  }
}
@keyframes disco4 {
  0%,
  100% {
    background-color: #00ff00;
  }
  25% {
    background-color: #ff0000;
  }
  75% {
    background-color: #ffff00;
  }
}
@keyframes disco5 {
  0%,
  100% {
    background-color: #ffff00;
  }
  25% {
    background-color: #ff0000;
  }
  75% {
    background-color: #00ff00;
  }
}

.disco {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.discoEf1 {
  animation: disco1 0.5s infinite;
}
.discoEf2 {
  animation: disco2 0.5s infinite;
}
.discoEf3 {
  animation: disco3 0.5s infinite;
}
.discoEf4 {
  animation: disco4 0.5s infinite;
}
.discoEf5 {
  animation: disco5 0.5s infinite;
}

/* 7. ステージエッジの光の流れ */
@keyframes edge-glow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

.stage {
  animation: edge-glow 2s infinite linear;
  background: linear-gradient(90deg, #ff0000, #0000ff, #ff0000);
  background-size: 300%;
  height: 10px;
  width: 100%;
}

/* 8. ダンサーのシルエットが動く */
@keyframes dancer1 {
  0%,
  100% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(0px);
  }
}
@keyframes dancer2 {
  0%,
  100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(10px);
  }
}

.dancer1 {
  position: absolute;
  animation: dancer1 0.8s infinite ease-in-out;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 100%;
  display: inline-block;
}
.dancer2 {
  position: absolute;
  right: 0;
  bottom: 0;
  animation: dancer2 0.8s infinite ease-in-out;
  width: 70%;
  height: 100%;
  display: inline-block;
}
.dancer1,
.dancer2 {
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* 9. ファンの歓声を表現する波動エフェクト */
@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.ripple {
  animation: ripple 1s infinite;
  border: 2px solid #00f;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 10. カラフルな花火アニメーション */
@keyframes fireworks {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.firework {
  animation: fireworks 1s infinite;
  background: radial-gradient(circle, #ff0, #f00);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
}