/* ============================================================================
   HAZLNUT LAZY LOADING STYLES
   ============================================================================
   Centralized CSS for lazy loading images across the application.
   Includes shimmer effects, fade-in animations, and loading states.
   
   Usage:
     - Add 'lazy-load-image' or 'lazy-loading' class to elements
     - JS will add 'image-loaded' or 'loaded' class when image loads
   ============================================================================ */


/* ======================================================================
   BASE SHIMMER ANIMATION
   ====================================================================== */

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


/* ======================================================================
   CSS CUSTOM PROPERTY PATTERN (--gift-image)
   Used for: registry.html, host_registry.html, explore.html
   ====================================================================== */

/* Shimmer effect before image loads */
.lazy-load-image {
    background: linear-gradient(90deg, #e3dcd6 0%, #f0ebe7 50%, #e3dcd6 100%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s infinite;
}

/* Hide pseudo-elements (blurred bg + sharp image) until image is loaded */
.lazy-load-image::before,
.lazy-load-image::after {
    display: none;
}

/* Fade in pseudo-elements when image loads */
.image-loaded::before {
    display: block;
    animation: fadeInBlur 0.3s ease-in forwards;
}

.image-loaded::after {
    display: block;
    animation: fadeIn 0.3s ease-in forwards;
}

/* Stop shimmer animation when loaded */
.image-loaded {
    animation: none;
    background: none;
}


/* ======================================================================
   IMG TAG PATTERN (data-src → src)
   Used for: explore_category.html, explore_curator.html
   ====================================================================== */

/* Container shimmer effect */
.lazy-loading {
    background: linear-gradient(90deg, #e8e0d8 25%, #f0ebe5 50%, #e8e0d8 75%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s infinite;
}

/* Hide img tag initially */
.lazy-loading > img,
img.lazy-img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Fade in img when loaded */
img.lazy-img.loaded,
.lazy-loading > img.loaded {
    opacity: 1;
}


/* ======================================================================
   FADE-IN ANIMATIONS
   ====================================================================== */

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

@keyframes fadeInBlur {
    from {
        opacity: 0;
        filter: blur(0px);
    }
    to {
        opacity: 1;
        filter: blur(20px);
    }
}


/* ======================================================================
   PRODUCT THUMBNAILS (Admin/Curator)
   Small square thumbnails in tables
   ====================================================================== */

.product-thumbnail.lazy-loading {
    display: inline-block;
    background: linear-gradient(90deg, #e8e0d8 25%, #f0ebe5 50%, #e8e0d8 75%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s infinite;
}

.product-thumbnail img.lazy-img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-thumbnail img.lazy-img.loaded {
    opacity: 1;
}


/* ======================================================================
   CATEGORY PRODUCT IMAGES (Explore Category Page)
   ====================================================================== */

.category-product-image.lazy-loading {
    background: linear-gradient(90deg, #e8e0d8 25%, #f0ebe5 50%, #e8e0d8 75%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s infinite;
}

.category-product-image img.lazy-img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.category-product-image img.lazy-img.loaded {
    opacity: 1;
}


/* ======================================================================
   EXPLORE TILE IMAGES
   Category hero images on explore page
   ====================================================================== */

.explore-tile-image.lazy-load-image {
    background: linear-gradient(90deg, #e3dcd6 0%, #f0ebe7 50%, #e3dcd6 100%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s infinite;
}

.explore-tile-image.image-loaded {
    animation: none;
    background: none;
}


/* ======================================================================
   GIFT CARD IMAGES (Registry/Wishlist)
   ====================================================================== */

.gift-card-image.lazy-load-image {
    background: linear-gradient(90deg, #e3dcd6 0%, #f0ebe7 50%, #e3dcd6 100%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s infinite;
}

/* Hide pseudo-elements (blurred bg + sharp image) until loaded */
.gift-card-image.lazy-load-image::before,
.gift-card-image.lazy-load-image::after {
    display: none;
}

/* Fade in blurred background */
.gift-card-image.image-loaded::before {
    display: block;
    animation: fadeInBlur 0.3s ease-in forwards;
}

/* Fade in sharp image on top */
.gift-card-image.image-loaded::after {
    display: block;
    animation: fadeIn 0.3s ease-in forwards;
}

/* Stop shimmer when loaded */
.gift-card-image.image-loaded {
    animation: none;
    background: none;
}


/* ======================================================================
   RESPONSIVE ADJUSTMENTS
   ====================================================================== */

@media (max-width: 768px) {
    /* Slightly faster animation on mobile for better perceived performance */
    .lazy-load-image,
    .lazy-loading,
    .product-thumbnail.lazy-loading,
    .category-product-image.lazy-loading,
    .explore-tile-image.lazy-load-image,
    .gift-card-image.lazy-load-image {
        animation-duration: 1.2s;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Disable animations for users who prefer reduced motion */
    .lazy-load-image,
    .lazy-loading,
    .product-thumbnail.lazy-loading,
    .category-product-image.lazy-loading,
    .explore-tile-image.lazy-load-image,
    .gift-card-image.lazy-load-image {
        animation: none;
        background: #e8e4df;
    }
    
    .image-loaded::before,
    .image-loaded::after,
    img.lazy-img.loaded {
        animation: none;
        opacity: 1;
    }
}