/* Image & Video Performance Optimizer CSS - Simplified */

/* Critical images - no lazy loading */
img[data-critical="true"] {
  opacity: 1 !important;
  background: none !important;
  animation: none !important;
  transition: none !important;
}

/* Critical sections - no lazy loading */
.introduction-six img,
.services__item img,
.slider img,
.introduction-two img,
.video-frame__poster img {
  opacity: 1 !important;
  background: none !important;
  animation: none !important;
  transition: none !important;
}

/* Lazy loading states */
.lazy-loading {
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

.lazy-loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.lazy-error {
  opacity: 0.7;
  background: #ffebee;
  border: 1px solid #f44336;
}

/* Loading animation */
@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Basic responsive optimization */
img[data-responsive] {
  max-width: 100%;
  height: auto;
}

/* Video optimization */
video {
  max-width: 100%;
  height: auto;
}

/* Mobile video optimization */
@media (max-width: 768px) {
  video {
    preload: none;
  }
  
  .video-frame video {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
}