/**
 * Image Fallback Styles - FAANG Level (Amazon/Google/Apple Style)
 * سیستم جایگزینی تصاویر شکسته با placeholder مینیمال و حرفه‌ای
 *
 * Inspiration: Amazon Skeleton, Google Material, Apple Minimalism
 * Architecture:
 * - Minimal DOM: 1 element + 1 pseudo-element (shimmer only)
 * - Performance: CSS containment + GPU optimization
 * - Design: Ultra-minimal, neutral colors, subtle shimmer
 * - KISS: Simple, clean, professional
 */

/* ========================================
   Core Design Tokens - Neutral Palette
   ======================================== */

:root {
    /* Neutral Gray Scale - Professional & Minimal */
    --fallback-bg-base: #f5f5f5;
    --fallback-bg-light: #e8e8e8;
    --fallback-bg-dark: #d0d0d0;

    /* Shimmer - Subtle & Professional (Amazon Style) */
    --fallback-shimmer-base: rgb(255 255 255 / 0%);
    --fallback-shimmer-highlight: rgb(255 255 255 / 40%);
    --fallback-shimmer-end: rgb(255 255 255 / 0%);
}

/* ========================================
   Placeholder Container - Minimal Base
   ======================================== */

.image-fallback-placeholder,
.mirror-placeholder {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;

    /* Simple solid background - Neutral gray */
    background-color: var(--fallback-bg-base);

    overflow: hidden;

    /* CSS Containment: isolate rendering */
    contain: layout style paint;
}

/* ========================================
   Placeholder Surface - Shimmer Effect
   Amazon-style subtle shimmer animation
   ======================================== */

.placeholder-surface {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Shimmer gradient - Amazon style */
    background: linear-gradient(
        90deg,
        var(--fallback-shimmer-base) 0%,
        var(--fallback-shimmer-base) 30%,
        var(--fallback-shimmer-highlight) 50%,
        var(--fallback-shimmer-base) 70%,
        var(--fallback-shimmer-end) 100%
    );
    background-size: 200% 100%;

    /* Smooth shimmer animation */
    animation: shimmer 1.5s ease-in-out infinite;
    pointer-events: none;

    /* GPU optimization */
    will-change: background-position;
    transform: translateZ(0);
}

/* Shimmer Animation - Amazon Style */

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

    100% {
        background-position: 200% 0;
    }
}

/* ========================================
   Context-Specific Styles
   ======================================== */

.avatar .image-fallback-placeholder,
.avatar .mirror-placeholder {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.thumbnail .image-fallback-placeholder,
.thumbnail .mirror-placeholder {
    aspect-ratio: 16 / 9;
}

/* ========================================
   Hidden Original Image
   ======================================== */

.image-fallback-placeholder img,
.mirror-placeholder img {
    display: none !important;
}

img[data-fallback-handled="1"] {
    display: none !important;
}

/* ========================================
   Performance Optimizations
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .placeholder-surface {
        animation: none;
    }
}


/*# sourceMappingURL=image-fallback.css.map*/