/* WebP and AVIF support styles */
.webp .mv-section {
  background-image: url("/images/mv.webp"),
    radial-gradient(
      circle at var(--x-0) var(--y-0),
      var(--c-0) var(--s-start-0),
      transparent var(--s-end-0)
    ),
    radial-gradient(
      circle at var(--x-1) var(--y-1),
      var(--c-1) var(--s-start-1),
      transparent var(--s-end-1)
    ),
    radial-gradient(
      circle at var(--x-2) var(--y-2),
      var(--c-2) var(--s-start-2),
      transparent var(--s-end-2)
    ),
    radial-gradient(
      circle at var(--x-3) var(--y-3),
      var(--c-3) var(--s-start-3),
      transparent var(--s-end-3)
    ),
    radial-gradient(
      circle at var(--x-4) var(--y-4),
      var(--c-4) var(--s-start-4),
      transparent var(--s-end-4)
    ),
    radial-gradient(
      circle at var(--x-5) var(--y-5),
      var(--c-5) var(--s-start-5),
      transparent var(--s-end-5)
    ),
    linear-gradient(
      135deg,
      var(--color-grad-from) 0%,
      var(--color-grad-to) 100%
    );
}

.avif .mv-section {
  background-image: url("/images/mv.avif"),
    radial-gradient(
      circle at var(--x-0) var(--y-0),
      var(--c-0) var(--s-start-0),
      transparent var(--s-end-0)
    ),
    radial-gradient(
      circle at var(--x-1) var(--y-1),
      var(--c-1) var(--s-start-1),
      transparent var(--s-end-1)
    ),
    radial-gradient(
      circle at var(--x-2) var(--y-2),
      var(--c-2) var(--s-start-2),
      transparent var(--s-end-2)
    ),
    radial-gradient(
      circle at var(--x-3) var(--y-3),
      var(--c-3) var(--s-start-3),
      transparent var(--s-end-3)
    ),
    radial-gradient(
      circle at var(--x-4) var(--y-4),
      var(--c-4) var(--s-start-4),
      transparent var(--s-end-4)
    ),
    radial-gradient(
      circle at var(--x-5) var(--y-5),
      var(--c-5) var(--s-start-5),
      transparent var(--s-end-5)
    ),
    linear-gradient(
      135deg,
      var(--color-grad-from) 0%,
      var(--color-grad-to) 100%
    );
}

/* Responsive background images for different screen sizes */
@media (max-width: 768px) {
  .webp .mv-section {
    background-image: url("/images/mv-800w.webp"), /* other gradients... */;
  }

  .avif .mv-section {
    background-image: url("/images/mv-800w.avif"), /* other gradients... */;
  }

  .mv-section {
    background-image: url("/images/mv-800w.png"), /* other gradients... */;
  }
}

@media (max-width: 480px) {
  .webp .mv-section {
    background-image: url("/images/mv-480w.webp"), /* other gradients... */;
  }

  .avif .mv-section {
    background-image: url("/images/mv-480w.avif"), /* other gradients... */;
  }

  .mv-section {
    background-image: url("/images/mv-480w.png"), /* other gradients... */;
  }
}

/* Lazy loading styles */
.lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lazy.loaded {
  opacity: 1;
}

/* Placeholder for images while loading */
.img-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}