/* Video Loading Enhancements */

/* Ensure poster images display properly */
video[poster] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Immediately show poster as background */
  background-image: attr(poster url);
}

/* Smooth transition when video loads */
video {
  transition: opacity 0.3s ease;
  /* Ensure videos have proper dimensions while loading */
  min-height: 200px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

video:not([data-loaded]) {
  opacity: 0.9;
}

video[data-loaded] {
  opacity: 1;
}

/* Improved loading indicator for videos */
.video-loading {
  position: relative;
  overflow: hidden;
}

.video-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: video-spin 1s linear infinite;
  z-index: 1;
}

@keyframes video-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* GIF poster optimization */
video[poster*=".gif"] {
  /* Ensure GIF posters are immediately visible */
  background-image: attr(poster url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  video {
    /* Reduce video quality on mobile for better performance */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    /* Force video playback on mobile */
    -webkit-playsinline: true;
  }
  
  /* Ensure poster images (now GIFs) are crisp on mobile */
  video[poster] {
    background-size: cover;
    object-fit: cover;
    /* Ensure posters load quickly on mobile */
    background-image: attr(poster url);
  }
  
  /* Mobile-specific poster loading optimization */
  video[poster]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  
  /* Hide the pseudo-element when video loads */
  video[data-mobile-loaded]::before {
    opacity: 0;
  }
  
  /* Ensure GIF posters animate properly on mobile */
  video[poster*=".gif"] {
    background-image: attr(poster url);
    /* Force immediate display of poster */
    background-color: transparent;
  }
  
  /* Loading state for mobile videos */
  video[data-mobile-loading] {
    background-color: #f0f0f0;
  }
  
  /* Optimize video containers on mobile */
  .hero-03-marquee__video video,
  .mxd-blog-preview__image video,
  .parallax-img-small {
    /* Ensure posters display immediately */
    background-image: attr(poster url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}