/* GENERAL PAGE STYLING */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(120deg, #ff0080, #7928ca);
  color: white;
  text-align: center;
}

/* ===== ANIMATION 1: Video Spin ===== */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ===== ANIMATION 2: Video Bounce ===== */
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-50px) rotate(5deg); }
}

/* ===== ANIMATION 3: Fade in text ===== */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(40px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== ANIMATION 4: Text move horizontally ===== */
@keyframes textMove {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-20px) rotate(-2deg); }
  50% { transform: translateX(20px) rotate(2deg); }
  75% { transform: translateX(-15px) rotate(-1deg); }
}

/* VIDEO CLASSES */
.video-spin {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  animation: spin 6s linear infinite;
  transition: transform 0.5s ease, box-shadow 0.5s ease, border-radius 0.5s ease;
}

.video-spin:hover {
  transform: rotate(720deg) scale(1.3) translateY(-20px);
  box-shadow: 0 0 30px #fff;
  border-radius: 0%;
}

.video-bounce {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 20%;
  animation: bounce 3s ease-in-out infinite;
  transition: transform 0.4s ease, border-radius 0.4s ease, filter 0.4s ease;
}

.video-bounce:hover {
  transform: translateY(-70px) rotate(20deg) scale(1.2);
  border-radius: 50%;
  filter: drop-shadow(0 0 20px cyan);
}

/* AUDIO CLASSES */
.audio-player {
  width: 250px;
  border-radius: 10px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
}

.audio-player:hover {
  transform: scale(1.1) rotate(-3deg);
  box-shadow: 0 0 20px yellow;
  filter: brightness(1.3);
}

.audio-player-glow {
  width: 250px;
  border-radius: 12px;
  transition: transform 0.5s ease, box-shadow 0.5s ease, filter 0.5s ease;
}

.audio-player-glow:hover {
  transform: scale(1.15) rotate(5deg) translateX(10px);
  box-shadow: 0 0 30px #ff00ff;
  filter: hue-rotate(45deg) brightness(1.2);
}

/* HEADER AND FOOTER */
header, footer {
  padding: 30px 0;
  background: rgba(0,0,0,0.2);
}

footer p {
  font-size: 1rem;
  color: #fff;
}

/* MAIN TEXT ANIMATION */
.fade-text {
  font-size: 2rem;
  animation: fadeIn 2s ease forwards;
  margin-bottom: 20px;
}

/* New: animate-text applies horizontal movement */
.animate-text {
  display: inline-block;
  animation: textMove 4s ease-in-out infinite;
}

/* FLEX LAYOUT FOR MEDIA ROWS */
.media-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 20px 0;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .media-row { flex-direction: column; }
  .audio-player, .audio-player-glow { width: 80%; }
}