/* ============================================
   鷹家買物社 - 圖片優化 CSS
   功能：載入動畫、錯誤狀態、防止 CLS
   ============================================ */

/* 圖片載入動畫 */
.masonry-card-image.loading {
  animation: imagePulse 1.5s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    #f3f4f6 0%,
    #e5e7eb 50%,
    #f3f4f6 100%
  );
  background-size: 200% 100%;
}

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

/* 圖片載入完成淡入效果 */
.masonry-card-image.loaded {
  animation: fadeIn 0.3s ease-in;
}

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

/* 圖片載入錯誤狀態 */
.masonry-card-image.error {
  filter: grayscale(100%);
  opacity: 0.6;
}

/* 防止 CLS - 強制圖片容器保持比例 */
.masonry-card-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #fef3c7 100%);
}

/* 手機版：固定 aspect-ratio */
@media (max-width: 767px) {
  .masonry-card-image-wrapper {
    aspect-ratio: 4/3;
  }
  
  .masonry-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 平板/桌面版：使用 padding-top trick */
@media (min-width: 768px) {
  .masonry-card-image-wrapper {
    padding-top: 75%; /* 4:3 比例 */
  }
  
  .masonry-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 圖片 hover 效果優化 */
.masonry-card-image-wrapper:hover .masonry-card-image:not(.error) {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* 減少圖片載入時的跳動 */
.masonry-card-image {
  will-change: auto;
}

/* 骨架屏 placeholder */
.image-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* 無圖片時的 placeholder 樣式 */
.no-image-placeholder {
  display: flex;
  align-items: center;
  justify-center;
  min-height: 200px;
  background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #fef3c7 100%);
  color: #78350f;
  font-weight: 600;
}

/* WebP 支援檢測（漸進增強）*/
.webp .masonry-card-image {
  /* 如果支援 WebP，可以在這裡加入額外優化 */
}

/* 減少動畫（尊重用戶偏好）*/
@media (prefers-reduced-motion: reduce) {
  .masonry-card-image,
  .masonry-card-image.loading,
  .masonry-card-image.loaded {
    animation: none !important;
    transition: none !important;
  }
}

/* 高對比模式優化 */
@media (prefers-contrast: high) {
  .masonry-card-image.error {
    border: 2px solid #ef4444;
  }
  
  .no-image-placeholder {
    border: 2px solid #78350f;
  }
}

/* 列印時移除動畫和效果 */
@media print {
  .masonry-card-image {
    animation: none;
    transform: none !important;
    filter: none !important;
  }
}