/* Performance Optimization CSS for EventoCraft - Enhanced Version */

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

/* Hardware acceleration and smooth rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Optimize animations and transitions */
.animate, .transition, .hover-effect {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reduce paint and layout thrashing */
.fixed-position, .sticky-header {
    will-change: transform;
    transform: translateZ(0);
}

/* ===== IMAGE OPTIMIZATIONS ===== */

/* Lazy loading placeholder styles */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lazy-load.loaded {
    opacity: 1;
    animation: none;
}

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

/* Optimize all images */
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Progressive image loading */
/* Do not hide native lazy images; rely on .lazy-load placeholders instead */
img[loading="lazy"] {
    opacity: inherit;
    transition: opacity 0.5s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* ===== CAROUSEL OPTIMIZATIONS ===== */

/* Logo carousel performance */
#logo-carousel, .owl-carousel {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: layout style paint;
}

#logo-carousel .logo-item, .owl-item {
    will-change: transform;
    transform: translateZ(0);
    position: relative;
    contain: layout style paint;
}

/* Keep logos above any backgrounds */
#logo-carousel .logo-item img { position: relative; z-index: 1; }

/* Optimize carousel animations */
.owl-carousel .owl-stage {
    will-change: transform;
    transform: translateZ(0);
}

/* Ensure logos are fully visible inside their boxes */
#logo-carousel img { object-fit: contain !important; }

/* Bind original card background transparency to admin-controlled variable */
/* Use theme's default card styling only; no admin-bound overlay */
/* Force-remove any extra overlay card by zeroing its background if present */
.logo-item::after { display: none !important; background: transparent !important; }

/* Remove inner overlay/background on logo images entirely */
.logo-carousel.s2 img {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ===== BACKGROUND OPTIMIZATIONS ===== */

/* Jarallax performance */
.jarallax-img {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize background images */
.bg-image {
    will-change: transform;
    transform: translateZ(0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===== ANIMATION OPTIMIZATIONS ===== */

/* Reduce motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .animate, .transition, .hover-effect {
        animation: none !important;
        transition: none !important;
    }
    
    .lazy-load {
        transition: none !important;
        animation: none !important;
    }
}

/* Optimize CSS animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* ===== MOBILE OPTIMIZATIONS ===== */

@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .animate, .transition {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Optimize carousel for mobile */
    #logo-carousel {
        margin: 0 -15px;
        overflow: hidden;
    }
    
    #logo-carousel .logo-item {
        padding: 0 10px;
    }
    
    #logo-carousel img {
        max-height: 40px;
    }
    
    /* Reduce complex shadows on mobile */
    .shadow, .box-shadow {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* Optimize scrolling */
    .smooth-scroll {
        scroll-behavior: auto;
    }
}

/* ===== DESKTOP OPTIMIZATIONS ===== */

@media (min-width: 769px) {
    /* Enable smooth scrolling on desktop */
    .smooth-scroll {
        scroll-behavior: smooth;
    }
    
    /* Enhanced hover effects for desktop */
    .hover-effect:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
}

/* ===== SCROLL OPTIMIZATIONS ===== */

/* Optimize scroll performance */
.scroll-container {
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Optimize scroll on mobile */
@media (max-width: 768px) {
    html {
        scroll-behavior: auto;
    }
}

/* ===== FONT OPTIMIZATIONS ===== */

/* Optimize font loading */
@font-face {
    font-display: swap;
}

/* Reduce font variations for better performance */
.text-optimized {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "liga" 1, "kern" 1;
}

/* ===== LAYOUT OPTIMIZATIONS ===== */

/* Prevent layout shifts */
.aspect-ratio-box {
    position: relative;
    height: 0;
    overflow: hidden;
}

.aspect-ratio-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optimize flexbox and grid */
.flex-optimized {
    contain: layout style;
}

.grid-optimized {
    contain: layout style;
}

/* ===== INTERACTION OPTIMIZATIONS ===== */

/* Optimize button interactions */
.btn, button {
    will-change: transform;
    transform: translateZ(0);
    transition: all 0.2s ease;
}

.btn:hover, button:hover {
    transform: translateZ(0) scale(1.02);
}

/* Optimize form elements */
input, textarea, select {
    will-change: border-color, box-shadow;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ===== VIDEO OPTIMIZATIONS ===== */

/* Optimize video loading */
video {
    will-change: transform;
    transform: translateZ(0);
    object-fit: cover;
}

/* Lazy load videos */
video[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.5s ease;
}

video[loading="lazy"].loaded {
    opacity: 1;
}

/* ===== ERROR HANDLING ===== */

/* Graceful fallbacks for broken images */
img[src*="data:image/svg+xml"], 
img:not([src]), 
img[src=""],
img[src*="error"] {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== PERFORMANCE MONITORING ===== */

/* Performance indicator (hidden by default) */
.performance-indicator {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    z-index: 9999;
    display: none;
    font-family: monospace;
}

.performance-indicator.show {
    display: block;
}

/* ===== CRITICAL CSS OPTIMIZATIONS ===== */

/* Above-the-fold optimizations */
.critical-content {
    contain: layout style paint;
    will-change: auto;
}

/* Optimize hero section */
#section-hero {
    contain: layout style paint;
    will-change: auto;
}

/* Optimize navigation */
#mainmenu, .btn-menu {
    contain: layout style paint;
    will-change: auto;
}

/* ===== MEMORY OPTIMIZATIONS ===== */

/* Reduce memory usage for large lists */
.long-list {
    contain: layout style;
    will-change: auto;
}

/* Optimize gallery items */
.gallery-item {
    contain: layout style paint;
    will-change: auto;
}

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

/* Webkit optimizations */
@supports (-webkit-appearance: none) {
    .webkit-optimized {
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
    }
}

/* Firefox optimizations */
@supports (-moz-appearance: none) {
    .firefox-optimized {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* ===== RESPONSIVE PERFORMANCE ===== */

/* Optimize for different screen densities */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .high-dpi-optimized {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Optimize for low-end devices */
@media (max-width: 480px) {
    .low-end-optimized {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    .low-end-optimized img {
        max-width: 100%;
        height: auto;
    }
}