/**
 * Module Performance Optimization Styles
 * Sparkles Design Library Component
 *
 * This file contains performance-focused CSS patterns and optimizations
 * for all CustomHyva modules, including rendering hints, containment,
 * and efficient animation patterns.
 *
 * Dependencies:
 * - Modern browser support for content-visibility and contain properties
 * - CSS Containment Module Level 1 support
 *
 * Used by: All CustomHyva modules requiring performance optimization
 */

/* ========== CONTENT VISIBILITY OPTIMIZATIONS ========== */

/**
 * Auto content visibility for images in grid layouts
 * Improves initial page load and scrolling performance
 */
.perf-auto-visibility {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

/**
 * Hero section image performance optimization
 * Larger intrinsic size for hero content areas
 */
.perf-hero-visibility {
    content-visibility: auto;
    contain-intrinsic-size: 500px 300px;
}

/**
 * Product grid performance optimization
 * Optimized for e-commerce product listings
 */
.perf-product-visibility {
    content-visibility: auto;
    contain-intrinsic-size: 250px 300px;
}

/**
 * Gallery thumbnail performance optimization
 * Square aspect ratio optimization for thumbnails
 */
.perf-thumbnail-visibility {
    content-visibility: auto;
    contain-intrinsic-size: 150px;
}

/* ========== CSS CONTAINMENT PATTERNS ========== */

/**
 * Layout containment for independent content sections
 * Prevents layout thrashing across section boundaries
 */
.perf-contain-layout {
    contain: layout;
}

/**
 * Style containment for component isolation
 * Prevents style recalculation cascading
 */
.perf-contain-style {
    contain: style;
}

/**
 * Paint containment for visual isolation
 * Optimizes repainting operations
 */
.perf-contain-paint {
    contain: paint;
}

/**
 * Strict containment for maximum isolation
 * Use for complex components that don't affect external layout
 */
.perf-contain-strict {
    contain: strict;
}

/**
 * Size containment for fixed-size containers
 * Prevents size changes from affecting parent layouts
 */
.perf-contain-size {
    contain: size;
}

/* ========== TRANSFORM OPTIMIZATIONS ========== */

/**
 * GPU-accelerated transform base
 * Forces layer creation for smooth animations
 */
.perf-gpu-layer {
    transform: translateZ(0);
    will-change: transform;
}

/**
 * Optimized hover transforms
 * Minimal transform operations for best performance
 */
.perf-hover-lift:hover {
    transform: translateZ(0) translateY(-2px);
}

.perf-hover-scale:hover {
    transform: translateZ(0) scale(1.02);
}

.perf-hover-subtle:hover {
    transform: translateZ(0) translateY(-1px) scale(1.01);
}

/* ========== SCROLL PERFORMANCE ========== */

/**
 * Smooth scrolling for containers
 * Enables hardware acceleration for scroll operations
 */
.perf-smooth-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/**
 * Scroll snap for carousel-like experiences
 * Improves touch scrolling on mobile devices
 */
.perf-scroll-snap {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.perf-scroll-snap > * {
    scroll-snap-align: start;
}

/**
 * Optimized scrollbar styling
 * Lightweight scrollbar customization
 */
.perf-custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}

.perf-custom-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.perf-custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.perf-custom-scroll::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
}

.perf-custom-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

/* ========== ANIMATION PERFORMANCE ========== */

/**
 * High-performance fade animations
 * Uses opacity and transform for GPU acceleration
 */
.perf-fade-in {
    --perf-slide-offset: .5rem;
    animation-duration: .3s;
}

.perf-fade-in-slow {
    --perf-slide-offset: .5rem;
    animation-duration: .6s;
}

.perf-fade-in,
.perf-fade-in-slow,
.perf-slide-up {
    animation-name: perf-slide-vertical;
    animation-timing-function: ease-out;
}

/**
 * Optimized slide animations
 * Minimal transform operations for smooth movement
 */
.perf-slide-up {
    --perf-slide-offset: 1rem;
    animation-duration: .4s;
}

.perf-slide-left {
    animation: perf-slide-left 0.4s ease-out;
}

@keyframes perf-slide-vertical {
    from {
        opacity: 0;
        transform: translateZ(0) translateY(var(--perf-slide-offset, .5rem));
    }
    to {
        opacity: 1;
        transform: translateZ(0) translateY(0);
    }
}

@keyframes perf-slide-left {
    from {
        opacity: 0;
        transform: translateZ(0) translateX(1rem);
    }
    to {
        opacity: 1;
        transform: translateZ(0) translateX(0);
    }
}

/**
 * Performance-optimized scale animation
 * Uses transform for hardware acceleration
 */
.perf-scale-in {
    animation: perf-scale-in 0.3s ease-out;
}

@keyframes perf-scale-in {
    from {
        opacity: 0;
        transform: translateZ(0) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

/* ========== LOADING PERFORMANCE PATTERNS ========== */

/**
 * Efficient skeleton loading animation
 * Optimized gradient animation for loading states
 */
.perf-skeleton {
    background: linear-gradient(90deg,
        var(--color-gray-200) 25%,
        var(--color-gray-100) 50%,
        var(--color-gray-200) 75%);
    background-size: 200% 100%;
    animation: perf-skeleton-loading 1.5s infinite;
}

@keyframes perf-skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/**
 * Progressive loading indicator
 * Lightweight progress indication
 */
.perf-progress-bar {
    width: 100%;
    height: 3px;
    background: var(--color-gray-200);
    overflow: hidden;
    position: relative;
}

.perf-progress-bar::before {
    background: var(--color-primary);
    animation: perf-progress 1.5s infinite;
}

@keyframes perf-progress {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ========== RESOURCE LOADING OPTIMIZATION ========== */

/**
 * Image loading optimization
 * Prevents layout shift during image loading
 */
.perf-image-container {
    position: relative;
    overflow: hidden;
}

.perf-image-container img {
    transition: opacity 0.3s ease;
}

.perf-image-container img[loading="lazy"] {
    opacity: 0;
}

.perf-image-container img.loaded {
    opacity: 1;
}

/* ========== INTERSECTION OBSERVER HELPERS ========== */

/**
 * Classes for intersection observer implementations
 * Used with JavaScript for progressive enhancement
 */
.perf-observe-hidden {
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.perf-observe-visible {
    opacity: 1;
    transform: translateY(0);
}

.perf-observe-scale-hidden {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.perf-observe-scale-visible {
    opacity: 1;
    transform: scale(1);
}

/* ========== CRITICAL CSS PATTERNS ========== */

/**
 * Above-the-fold optimization
 * Critical styles for immediate viewport content
 */
.perf-critical {
    /* These styles should be inlined in the HTML head */
    display: block;
    visibility: visible;
}

/**
 * Below-the-fold deferral
 * Non-critical content that can be lazily loaded
 */
.perf-deferred {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

/* ========== MEMORY OPTIMIZATION ========== */

/**
 * Memory-efficient large lists
 * Optimizes rendering for extensive content lists
 */
.perf-virtual-list {
    overflow: auto;
    contain: strict;
    content-visibility: auto;
}

.perf-virtual-list-item {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 60px;
}

/* ========== MOBILE PERFORMANCE ========== */

/**
 * Touch optimization for mobile devices
 * Improves touch responsiveness and reduces delays
 */
.perf-touch-optimized {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.perf-touch-area {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== REDUCED MOTION OPTIMIZATIONS ========== */

/**
 * Performance-aware motion reduction
 * Maintains functionality while respecting user preferences
 */
@media (prefers-reduced-motion: reduce) {
    .perf-fade-in,
    .perf-fade-in-slow,
    .perf-slide-up,
    .perf-slide-left,
    .perf-scale-in,
    .perf-skeleton,
    .perf-progress-bar::before {
        animation: none;
    }

    .perf-hover-lift:hover,
    .perf-hover-scale:hover,
    .perf-hover-subtle:hover {
        transform: none;
    }

    .perf-observe-hidden,
    .perf-observe-scale-hidden {
        transform: none;
        transition: opacity 0.3s ease;
    }
}

/* ========== PRINT PERFORMANCE ========== */

/**
 * Print optimization
 * Removes animations and optimizes for print media
 */
@media print {
    .perf-fade-in,
    .perf-fade-in-slow,
    .perf-slide-up,
    .perf-slide-left,
    .perf-scale-in,
    .perf-skeleton,
    .perf-progress-bar,
    .perf-hover-lift,
    .perf-hover-scale,
    .perf-hover-subtle {
        animation: none;
        transform: none;
        transition: none;
    }

    .perf-observe-hidden,
    .perf-observe-scale-hidden {
        opacity: 1;
        transform: none;
    }
}

/* ========== BROWSER SPECIFIC OPTIMIZATIONS ========== */

/**
 * WebKit/Blink optimizations
 * Improves performance in Chromium-based browsers
 */
@supports (-webkit-appearance: none) {
    .perf-webkit-optimized {
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000px;
    }
}

/**
 * Firefox optimizations
 * Specific optimizations for Firefox
 */
@supports (-moz-appearance: none) {
    .perf-firefox-optimized {
        will-change: auto;
    }
}

/* ========== UTILITY CLASSES ========== */

/**
 * Performance utility classes
 * Quick performance enhancements for common patterns
 */
.perf-no-select {
    user-select: none;
}

.perf-hardware-acceleration {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.perf-will-change-transform {
    will-change: transform;
}

.perf-will-change-opacity {
    will-change: opacity;
}

.perf-will-change-auto {
    will-change: auto;
}