/**
 * Sparkles Responsive Images CSS
 * Modern image optimization with format support and lazy loading
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

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

/* Picture element container */
.sparkles-picture {
    position: relative;
    display: block;
    overflow: hidden;
}

.sparkles-picture img {
    will-change: opacity; /* Keep raw for performance optimization */ width: 100%; height: auto; transition-property: all; transition-duration: .15s; transition-duration: .3s; transition-timing-function: cubic-bezier(0,0,.2,1);
}

/* ========================================
   LOADING STATES
   ======================================== */

/* Default loading state - invisible */
.sparkles-image-loading {
    opacity: 0;
}

/* Successfully loaded state */
.sparkles-image-loaded {
    opacity: 1;
}

/* Error state */
.sparkles-image-error {
    opacity: .5;
    --tw-grayscale: grayscale(100%);
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgba(254,202,202,var(--tw-border-opacity,1));
}

/* Loading placeholder with skeleton animation */
.sparkles-image-placeholder {
    background-color: var(--gray-200);
}

.sparkles-image-placeholder::before {
    content: '';
    animation: sparkles-skeleton-wave 1.5s ease-in-out infinite;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: var(--gray-200) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--gray-200)00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: var(--gray-300)00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),var(--gray-300) var(--tw-gradient-via-position),var(--tw-gradient-to);
    --tw-gradient-to: var(--gray-200) var(--tw-gradient-to-position);
}

/* ========================================
   FORMAT DETECTION INDICATORS
   ======================================== */

/* WebP format indicator */
.sparkles-webp-enhanced::after,
.sparkles-avif-enhanced::after {
    position: absolute;
    top: .25rem;
    left: .25rem;
    padding-left: .25rem;
    padding-right: .25rem;
    font-size: .75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    border-radius: .25rem;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
}

.sparkles-webp-enhanced::after {
    content: 'WebP';
    --tw-bg-opacity: 1;
    background-color: var(--color-success);
}

/* AVIF format indicator */
.sparkles-avif-enhanced::after {
    content: 'AVIF';
    background-color: var(--color-primary);
}

/* Debug mode - show format indicators */
.sparkles-debug .sparkles-webp-enhanced::after,
.sparkles-debug .sparkles-avif-enhanced::after {
    opacity: 1;
}

/* ========================================
   RESPONSIVE CONTAINERS
   ======================================== */

/* Base responsive container */
.sparkles-responsive-container {
    position: relative;
    width: 100%;
}

.sparkles-responsive-container img,
.sparkles-product-card-minimal img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Aspect ratio utilities for common use cases */
.sparkles-aspect-square {
    aspect-ratio: 1/1;
}

.sparkles-aspect-video {
    aspect-ratio: 16/9;
}

.sparkles-aspect-portrait {
    aspect-ratio: 3/4;
}

.sparkles-aspect-landscape {
    aspect-ratio: 4/3;
}

.sparkles-aspect-ultrawide {
    aspect-ratio: 21/9;
}

/* ========================================
   PROGRESSIVE ENHANCEMENT
   ======================================== */

/* Source elements hidden by default, shown when format supported */
.sparkles-picture source {
    display: none;
}

.sparkles-supports-webp .sparkles-picture source[type="image/webp"] {
    display: block;
}

.sparkles-supports-avif .sparkles-picture source[type="image/avif"] {
    display: block;
}

/* Body classes for format support (applied by JS) */
.sparkles-supports-webp body {
    --sparkles-webp-support: 1;
}

.sparkles-supports-avif body {
    --sparkles-avif-support: 1;
}

/* ========================================
   INTERSECTION OBSERVER FALLBACK
   ======================================== */

/* Show images immediately if Intersection Observer not supported */
.no-intersection-observer .sparkles-image-loading {
    opacity: 1;
}

.no-intersection-observer .sparkles-image-placeholder::before {
    display: none;
}

/* ========================================
   ACCESSIBILITY & USER PREFERENCES
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .sparkles-image-error {
        border-width: 4px;
        --tw-border-opacity: 1;
        border-color: rgba(220,38,38,var(--tw-border-opacity,1));
    }
    
    .sparkles-image-placeholder,
    .sparkles-newsletter-input {
        border-width: 2px;
        --tw-border-opacity: 1;
        border-color: rgba(75,85,99,var(--tw-border-opacity,1));
    }
    
    .sparkles-webp-enhanced::after,
    .sparkles-avif-enhanced::after {
        font-weight: 700;
    }
}

/* ACCESSIBILITY: Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .sparkles-picture img,
    .sparkles-image-placeholder::before {
        animation: none;
        transition: none;
    }
    
    .sparkles-skeleton-wave {
        animation: none;
    }
}

/* ========================================
   FOCUS & INTERACTIVE STATES
   ======================================== */

/* Focusable images (when used as links or interactive elements) */
img[tabindex] {
    --tw-ring-color: var(--color-primary);
}

.sparkles-picture:focus-within,
.sparkles-recommendations__button--primary:focus,
.sparkles-newsletter-submit:focus {
    --tw-ring-color: var(--color-primary);
    outline: 2px solid #0000;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.sparkles-picture:focus-within,
.sparkles-recommendations__button--primary:focus {
    --tw-ring-opacity: 0.5;
}

.sparkles-picture:focus-within {
    --tw-ring-offset-width: 2px;
}

/* ========================================
   PRINT OPTIMIZATION
   ======================================== */

/* PRINT OPTIMIZATION: Ensure images display properly when printed */
@media print {
    .sparkles-webp-enhanced::after,
    .sparkles-avif-enhanced::after {
        display: none;
    }
    
    .sparkles-image-placeholder::before {
        display: none;
    }
    
    body .sparkles-picture img {
        filter: none; /* Keep raw for filter reset */
    }
}

/* ========================================
   COMMON USE CASE UTILITIES
   ======================================== */

/* Product images */
.sparkles-product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
}

.sparkles-product-image.sparkles-product-image-portrait {
    aspect-ratio: 4 / 5;
}

.sparkles-product-image img,
.sparkles-gallery-image img {
    object-fit: cover;
}

.sparkles-product-image img:hover {
    transform: scale(1.05);
}

/* Hero images */
.sparkles-hero-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
}

@media (min-width: 1024px) {
    .sparkles-hero-image {
        aspect-ratio: 21/9;
    }
}

.sparkles-hero-image img {
    object-fit: cover;
}

/* Thumbnail images */
.sparkles-thumbnail,
.sparkles-avatar,
.sparkles-product-card-minimal .sparkles-image-container {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.sparkles-thumbnail {
    width: 4rem;
    height: 4rem;
    border-radius: .25rem;
}

.sparkles-thumbnail img,
.sparkles-avatar img {
    object-fit: cover;
}

/* Avatar images */
.sparkles-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
}

/* Gallery images */
.sparkles-gallery-image {
    position: relative;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    border-radius: .25rem;
}

.sparkles-gallery-image img:hover {
    transform: scale(1.1);
}

/* Blog/content images */
.sparkles-content-image {
    position: relative;
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: .5rem;
    overflow: hidden;
    --tw-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
}

.sparkles-content-image img {
    object-fit: cover;
}

/* ========================================
   RESPONSIVE BREAKPOINT UTILITIES
   ======================================== */

/* Mobile-first responsive image sizes */
.sparkles-responsive-mobile {
    width: 100%;
}

@media (min-width: 640px) {
    .sparkles-responsive-tablet {
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .sparkles-responsive-desktop {
        width: 100%;
    }
}

@media (min-width: 1280px) {
    .sparkles-responsive-large {
        width: 100%;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Optimize rendering performance */

/* GPU acceleration for smooth transitions */
.sparkles-picture img,
.sparkles-image-placeholder::before {
    transform: translateZ(0); /* Keep raw for GPU acceleration */
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    .sparkles-image-placeholder {
        --tw-bg-opacity: 1;
        background-color: rgba(55,65,81,var(--tw-bg-opacity,1));
    }
    
    .sparkles-image-placeholder::before {
        background-image: linear-gradient(to right,var(--tw-gradient-stops));
        --tw-gradient-from: var(--gray-700) var(--tw-gradient-from-position);
        --tw-gradient-to: var(--gray-700)00 var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    }
    
    .sparkles-image-error {
        --tw-border-opacity: 1;
        border-color: rgba(248,113,113,var(--tw-border-opacity,1));
    }
}

/* ========================================
   CUSTOM PROPERTIES FOR DYNAMIC CONTROL
   ======================================== */

/* Image tokens moved to tokens.css for proper architecture */

/* Apply custom properties */