/* Lazy Loading Styles */

/* Base lazy image styles */
img[data-src],
.lazy-bg[data-bg] {
  opacity: 0;
  transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;
}

/* Loading state */
img[data-src].loading,
.lazy-bg[data-bg].loading {
  opacity: 0.5;
  filter: blur(10px);
  background: var(--border-light);
}

/* Placeholder while loading */
img[data-src]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--border-light) 0%,
    var(--surface-hover) 50%,
    var(--border-light) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Loaded state */
img.loaded,
.lazy-bg.loaded {
  opacity: 1;
  filter: blur(0);
}

/* Error state */
img.error {
  opacity: 1;
  filter: blur(0);
  background: var(--border-light);
  position: relative;
}

img.error::after {
  content: '⚠️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  color: var(--text-lighter);
}

/* Photo grid specific styles */
.photo-card img[data-src] {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--border-light);
}

/* Biography content images */
.biography-content img[data-src] {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-4) auto;
}

/* Avatar lazy loading */
.avatar[data-src] {
  border-radius: 50%;
  background: var(--border-light);
}

/* Background image lazy loading */
.lazy-bg[data-bg] {
  background-color: var(--border-light);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Blur-up technique for hero images */
.blur-load {
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  transition: filter 400ms ease-out;
}

.blur-load.loaded {
  filter: blur(0);
}

/* Progressive image loading */
.progressive-image {
  position: relative;
  overflow: hidden;
}

.progressive-image .thumbnail {
  filter: blur(20px);
  transform: scale(1.1);
  transition: opacity 300ms ease-out;
}

.progressive-image .full-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

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

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

/* Aspect ratio containers for consistent layout */
.aspect-ratio-16-9 {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.aspect-ratio-4-3 {
  position: relative;
  padding-bottom: 75%; /* 4:3 */
  height: 0;
  overflow: hidden;
}

.aspect-ratio-1-1 {
  position: relative;
  padding-bottom: 100%; /* 1:1 */
  height: 0;
  overflow: hidden;
}

.aspect-ratio-16-9 img,
.aspect-ratio-4-3 img,
.aspect-ratio-1-1 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Loading skeleton for images */
.image-skeleton {
  background: linear-gradient(
    90deg,
    var(--border-light) 0%,
    var(--surface-hover) 50%,
    var(--border-light) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-base);
}

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

/* Disable lazy loading for print */
@media print {
  img[data-src] {
    opacity: 1 !important;
    filter: none !important;
  }
}