/* Video Background Styling */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-color: #1a1a1a; /* Fallback color if video fails to load */
  /* Pastel gradient background that will show while video is loading or if it fails */
  background-image: linear-gradient(to bottom right, #f9c5d1, #c6e5d9, #a6c1ee, #d3f0ea);
  background-size: 400% 400%;
  animation: gradientAnimation 15s ease infinite;
  transition: all 1.5s ease-in-out; /* Smooth transition for background changes */
}

/* Animation for the gradient background */
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* When video is playing, reduce the opacity of the gradient background for a subtle effect */
.video-background.video-playing {
  background-image: linear-gradient(to bottom right, rgba(249, 197, 209, 0.3), rgba(198, 229, 217, 0.3), rgba(166, 193, 238, 0.3), rgba(211, 240, 234, 0.3));
}

/* For mobile devices, keep the gradient fully visible */
.video-background.mobile-device {
  background-image: linear-gradient(to bottom right, #f9c5d1, #c6e5d9, #a6c1ee, #d3f0ea);
}

/* 
   The #local-video-player element is styled inline in index.html for position, size, and object-fit.
   Its display:none is toggled to display:block by js/main.js when the 'playing' event fires.
   No specific CSS is needed here for #local-video-player's basic visibility or layout, 
   as long as .video-background (its parent) is correctly positioned and visible.
*/

/* Styling for the local video player */
#local-video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.9; /* Slight transparency to allow the gradient to show through */
  transition: opacity 1s ease-in-out;
}

/* Enhance the frosted glass effect for the main content area (this was present before) */
.max-w-7xl {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Mobile optimizations for the main content area (this was present before) */
@media (max-width: 767px) {
  .max-w-7xl {
    padding: 8px; /* Less padding on small screens */
    backdrop-filter: blur(8px); /* Less blur on mobile */
  }
}

/* Ensure modals display above the video background (this was present before) */
.modal {
  z-index: 100;
}

.modal-content {
  z-index: 101;
}