/* Lazy loading animation styles */

:root {
  /* Mirrors Tailwind neutral (slate) scale — single source in tailwind.config.mjs */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Handle lazy-loaded images */
.loaded img[loading="lazy"] {
  animation: fadeIn 0.5s ease-in-out;
}

/* Handle above-the-fold images differently - no animation */
img[loading="eager"] {
  opacity: 1;
}

/* Ensure picture elements handle loading attributes correctly */
picture img[loading="lazy"],
picture img[loading="lazy"]:not(.is-loaded) {
  background-color: var(--color-neutral-100);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Add the loaded state styling */
img.is-loaded {
  animation: fadeIn 0.5s ease-in-out;
}

/* Skeleton placeholder for images that haven't loaded yet */
img[loading="lazy"]:not([src]) {
  background-color: var(--color-neutral-100);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* Reduce motion if user prefers reduced motion */
.reduce-motion * {
  transition-duration: 0.001ms !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .loaded img[loading="lazy"],
  img.is-loaded,
  .loaded .lazy-section[data-loaded="true"] .lazy-section-content {
    animation: none;
    opacity: 1;
    transform: none;
  }

  picture img[loading="lazy"],
  picture img[loading="lazy"]:not(.is-loaded),
  img[loading="lazy"]:not([src]) {
    animation: none;
    background-image: none;
  }
}

/* Styles for lazy sections */
.lazy-section-content {
  will-change: opacity;
}

.lazy-section-content.opacity-100 {
  opacity: 1;
}

/* Fade-up animation for lazy sections */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loaded .lazy-section[data-loaded="true"] .lazy-section-content {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Default WebP format support - provide a fallback background color */
.webp-image {
  background-color: var(--color-neutral-50);
}