/* Stars Background Animation - Completely Revised */

/* Star container - Fixed positioning and z-index */
.stars-container {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0; /* Keep this low to ensure footer appears above */
  display: block !important;
  background-color: #000000 !important;
}

/* Stars are created using JavaScript now */
#stars, #stars2, #stars3 {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2000px;
  z-index: 1; /* Ensure stars are visible */
}

/* First set of stars - Small */
#stars {
  animation: animateStars 50s linear infinite;
}

/* Second set of stars - Medium */
#stars2 {
  animation: animateStars 100s linear infinite;
}

/* Third set of stars - Large */
#stars3 {
  animation: animateStars 150s linear infinite;
}

/* Star animation */
@keyframes animateStars {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

/* Create actual stars styling */
.star {
  position: absolute;
  border-radius: 50%;
  background-color: white;
  animation: twinkle 1s infinite alternate;
  z-index: 1; /* Ensure stars are visible */
  pointer-events: none; /* Make sure stars don't block footer interactions */
}

/* Twinkle animation for stars */
@keyframes twinkle {
  from {opacity: 1;}
  to {opacity: 0.5;}
}

/* Make sure the fixed background works properly */
.fixed-bg {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  display: block !important;
}

/* Ensure stars container spans full viewport */
.stars-container.fixed-bg {
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* Allow clicking through to footer elements */
}

/* Ensure video content doesn't block stars */
.course-content-grid {
  position: relative;
  z-index: 2;
}

/* Semi-transparent background for main container */
.container-xxl {
  background-color: transparent !important;
}

/* Ensure main wrapper doesn't hide stars */
.course-player-wrapper {
  background-color: rgba(8, 8, 8, 0.6) !important;
}

/* Make video container see-through enough to show stars */
#video-container {
  background-color: rgba(0, 0, 0, 0.7) !important;
  position: relative;
  z-index: 1;
}

/* DRM-compatible video with transparent background */
#videoPlayer {
  background-color: transparent !important;
}

/* Ensure video controls are visible above stars */
.shaka-video-container {
  z-index: 5 !important;
}

.shaka-video-container .shaka-controls-container {
  z-index: 10 !important;
}

/* Set body background */
body {
  background-color: #000000 !important;
}

/* Make sure footer appears above stars */
.footer, footer, .site-footer {
  position: relative;
  z-index: 5; /* Higher than stars container */
  background-color: inherit; /* Preserve footer background */
}

/* Other site elements should also appear above stars */
.main-content, main, .page-content {
  position: relative;
  z-index: 2;
}

/* Additional script to dynamically create stars */