/**
 * Subtle Image Fade-In Effect with Skeleton Loading
 * Makes images appear gently with professional skeleton placeholders
 */

/* Initial state - images start with skeleton */
img:not(.loaded):not(.nav-icon):not(.theme-icon):not(.go-to-top-icon) {
  opacity: 0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  min-height: 200px;
  border-radius: 4px;
}

/* Dark mode skeleton */
.dark-mode img:not(.loaded):not(.nav-icon):not(.theme-icon):not(.go-to-top-icon) {
  background: linear-gradient(90deg, #2d2d2d 25%, #3a3a3a 37%, #2d2d2d 63%);
  background-size: 400% 100%;
}

/* When image is loaded, fade in smoothly */
img.loaded {
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  animation: none;
  background: none;
  min-height: auto;
}

/* For images that fail to load */
img.error {
  opacity: 0.3;
  background: #f0f0f0;
  animation: none;
}

.dark-mode img.error {
  background: #2d2d2d;
}

/* Exception: SVG icons should appear instantly (no skeleton) */
.nav-icon,
.theme-icon,
.go-to-top-icon {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  background: none !important;
  min-height: auto !important;
}

/* Exception: Logo should appear immediately */
.clean-brand img,
.navbar-brand img {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  background: none !important;
  min-height: auto !important;
}

/* Skeleton shimmer animation */
@keyframes skeleton-shimmer {
  0% {
    background-position: -400% 0;
  }
  100% {
    background-position: 400% 0;
  }
}

/* Smooth transition for images in containers */
.image-container img,
figure img,
.card img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero/cover images - slightly slower fade + taller skeleton */
.hero img:not(.loaded),
.cover-image:not(.loaded),
img[src*="cover"]:not(.loaded) {
  min-height: 400px;
}

.hero img.loaded,
.cover-image.loaded,
img[src*="cover"].loaded {
  transition: opacity 0.8s ease-in-out;
}

/* Thumbnail images - quick fade + smaller skeleton */
img[src*="thumbnail"]:not(.loaded),
.thumbnail img:not(.loaded) {
  min-height: 150px;
}

img[src*="thumbnail"].loaded,
.thumbnail img.loaded {
  transition: opacity 0.4s ease-in-out;
}

/* Portfolio images - medium skeleton */
.image-container img:not(.loaded) {
  min-height: 300px;
}

/* Responsive skeleton heights */
@media (max-width: 768px) {
  img:not(.loaded):not(.nav-icon):not(.theme-icon):not(.go-to-top-icon) {
    min-height: 150px;
  }
  
  .hero img:not(.loaded),
  .cover-image:not(.loaded),
  img[src*="cover"]:not(.loaded) {
    min-height: 250px;
  }
  
  .image-container img:not(.loaded) {
    min-height: 200px;
  }
}