/* 🌈 Gradient Background */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #fff;
  overflow-x: hidden;
  background: linear-gradient(to bottom right, #1e3c72, #3890ad);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* 🫧 Bubble Container */
.bubble-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.bubble {
  position: absolute;
  bottom: -100px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: rise 25s infinite ease-in;
}

/* 🎈 Bubble Variations */
.bubble:nth-child(1) { left: 10%; width: 25px; height: 25px; animation-duration: 20s; }
.bubble:nth-child(2) { left: 20%; width: 15px; height: 15px; animation-duration: 22s; }
.bubble:nth-child(3) { left: 30%; width: 30px; height: 30px; animation-duration: 26s; }
.bubble:nth-child(4) { left: 40%; width: 20px; height: 20px; animation-duration: 18s; }
.bubble:nth-child(5) { left: 50%; width: 35px; height: 35px; animation-duration: 24s; }
.bubble:nth-child(6) { left: 60%; width: 22px; height: 22px; animation-duration: 28s; }
.bubble:nth-child(7) { left: 70%; width: 18px; height: 18px; animation-duration: 19s; }
.bubble:nth-child(8) { left: 80%; width: 26px; height: 26px; animation-duration: 30s; }
.bubble:nth-child(9) { left: 90%; width: 16px; height: 16px; animation-duration: 21s; }
.bubble:nth-child(10) { left: 95%; width: 28px; height: 28px; animation-duration: 27s; }

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
    transform: translateY(-300px) scale(1.2);
  }
  100% {
    transform: translateY(-800px) scale(1);
    opacity: 0;
  }
}

/* 📺 Header */
header {
  background: rgba(0, 0, 0, 0.7);
  padding: 20px;
  text-align: center;
  z-index: 1;
  position: relative;
}

/* 🔍 Search Input */
input[type="text"] {
  padding: 10px;
  width: 60%;
  max-width: 400px;
  border-radius: 5px;
  border: none;
}

/* 🔘 Search Button */
button {
  padding: 10px 15px;
  border: none;
  background: crimson;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

/* 🎞 Video Grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  padding: 20px;
  z-index: 1;
  position: relative;
}

/* ✨ Shiny Card */
.video-card {
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2),
              0 0 25px rgba(0, 255, 255, 0.15),
              0 0 35px rgba(255, 0, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.4),
              0 0 40px rgba(255, 0, 255, 0.3),
              0 0 60px rgba(255, 255, 255, 0.2);
}

/* 💫 Shimmer Reflection */
.video-card::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -45%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: shimmer 6s infinite linear;
  pointer-events: none;
}

@keyframes shimmer {
  0% {
    top: -100%;
    left: -50%;
  }
  100% {
    top: 100%;
    left: 100%;
  }
}

/* 🖼 Thumbnails */
.video-card img {
  width: 100%;
  border-radius: 10px;
}

/* 📥 Download Button */
.download-btn {
  display: block;
  margin-top: 10px;
  background: #0f9d58;
  padding: 10px;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

/* 📌 Fixed Footer */
.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  padding: 12px 10px;
  z-index: 9999;
  backdrop-filter: blur(10px);
}

.fixed-footer p {
  margin: 4px;
  font-size: 13px;
  color: #fff;
}

.fixed-footer a {
  color: #00e6e6;
  font-weight: bold;
  text-decoration: none;
}