/* ============================================
   IMAGE OPTIMIZATION STYLES
   ============================================ */

/* Lazy Loading Placeholder */
img[data-src],
img[loading="lazy"] {
  background: linear-gradient(
    90deg,
    rgba(136, 199, 138, 0.1) 0%,
    rgba(136, 199, 138, 0.2) 50%,
    rgba(136, 199, 138, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* Blur-up Effect */
.blur-up {
  position: relative;
  overflow: hidden;
}

.blur-up img {
  filter: blur(20px);
  transform: scale(1.1);
  transition: filter 0.5s ease, transform 0.5s ease;
}

.blur-up.loaded img {
  filter: blur(0);
  transform: scale(1);
}

/* Image Loading State */
img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img.loaded,
img[src]:not([data-src]) {
  opacity: 1;
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Image Container */
.img-container {
  position: relative;
  overflow: hidden;
  background: rgba(136, 199, 138, 0.05);
}

.img-container::before {
  content: '';
  display: block;
  padding-bottom: 75%; /* 4:3 aspect ratio */
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Aspect Ratios */
.aspect-square::before { padding-bottom: 100%; }
.aspect-video::before { padding-bottom: 56.25%; }
.aspect-4-3::before { padding-bottom: 75%; }
.aspect-16-9::before { padding-bottom: 56.25%; }

/* Progressive Loading */
.progressive-image {
  position: relative;
  display: block;
  overflow: hidden;
  background: rgba(136, 199, 138, 0.1);
}

.progressive-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(10px);
  transform: scale(1.05);
  transition: opacity 0.5s ease;
}

.progressive-image-main {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.progressive-image.loaded .progressive-image-placeholder {
  opacity: 0;
}

.progressive-image.loaded .progressive-image-main {
  opacity: 1;
}

/* WebP Support Detection */
.no-webp .webp-image {
  display: none;
}

.webp .fallback-image {
  display: none;
}

/* Image Hover Effects */
.img-hover-zoom {
  overflow: hidden;
}

.img-hover-zoom img {
  transition: transform 0.5s ease;
}

.img-hover-zoom:hover img {
  transform: scale(1.1);
}

/* Loading Spinner */
.img-loading {
  position: relative;
}

.img-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(136, 199, 138, 0.2);
  border-top-color: var(--color-sage);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Dark Mode */
[data-theme="dark"] img[data-src],
[data-theme="dark"] img[loading="lazy"] {
  background: linear-gradient(
    90deg,
    rgba(136, 199, 138, 0.05) 0%,
    rgba(136, 199, 138, 0.1) 50%,
    rgba(136, 199, 138, 0.05) 100%
  );
}

[data-theme="dark"] .img-container {
  background: rgba(136, 199, 138, 0.08);
}