/* === FULL PAGE SETUP === */
body {
  margin: 0;
  height: 100vh;
  background: black;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Common media styles */
video, audio {
  position: absolute;
  border-radius: 15px;
  transition: transform 0.2s linear;
}

/* === TRIANGLE POSITIONS === */
/* Top video */
video:first-of-type {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 30vw;
}

/* Bottom-left audio */
audio:first-of-type {
  bottom: 10%;
  left: 25%;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 400%;
}

/* Bottom-right video */
#rickVideo {
  bottom: 10%;
  right: 25%;
  width: 30vw;
}

/* Bottom-center audio (Rick Astley) */
audio:last-of-type {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 400%;
}

/* === VIDEO ANIMATIONS === */
/* Slow continuous spin */
@keyframes slowSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Chaotic movement + faster spin on hover */
@keyframes moveRandomVideo {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(50px, -30px) rotate(720deg); }
  40%  { transform: translate(-70px, 40px) rotate(1440deg); }
  60%  { transform: translate(80px, -60px) rotate(2160deg); }
  80%  { transform: translate(-60px, 70px) rotate(2880deg); }
  100% { transform: translate(0, 0) rotate(3600deg); }
}

/* Apply slow spin to all videos by default */
video {
  animation: slowSpin 30s linear infinite;
}

/* Add chaotic spin and motion on hover */
video:hover {
  animation: moveRandomVideo 8s ease-in-out infinite;
}

/* === AUDIO ANIMATIONS === */
@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

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

@keyframes moveRandom {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(50px, -40px); }
  40%  { transform: translate(-60px, 30px); }
  60%  { transform: translate(70px, -50px); }
  80%  { transform: translate(-50px, 60px); }
  100% { transform: translate(0, 0); }
}

/* Hover: rainbow + spin + move for both audio players */
audio:hover {
  animation:
    rainbowShift 1s linear infinite,
    fastSpin 0.6s linear infinite,
    moveRandom 6s ease-in-out infinite;
}