/**
 * Performance Optimization CSS
 * Prevents forced reflows and improves rendering performance
 */

/* Hardware acceleration for common animated elements */
.parallax-element,
.fade-in-scroll,
.animated-element,
.hover-animation,
.scroll-animation {
    will-change: transform, opacity;
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimized animations using transform and opacity only */
@keyframes optimizedFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

@keyframes optimizedSlideIn {
    from {
        opacity: 0;
        transform: translateX(-30px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

@keyframes optimizedScale {
    from {
        opacity: 0;
        transform: scale(0.8) translateZ(0);
    }
    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

/* Efficient transition classes */
.fade-in-scroll {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-scroll.visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-30px) translateZ(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(30px) translateZ(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.8) translateZ(0);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1) translateZ(0);
}

/* Optimized hover effects using transform */
.hover-scale {
    transition: transform 0.3s ease-out;
    transform: translateZ(0);
}

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

.hover-lift {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    transform: translateZ(0);
}

.hover-lift:hover {
    transform: translateY(-5px) translateZ(0);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Prevent layout thrashing on responsive elements */
.responsive-element {
    contain: layout style paint;
}

/* Optimize images for performance */
.optimized-image {
    will-change: auto; /* Only activate when needed */
    transform: translateZ(0);
    image-rendering: optimizeQuality;
}

.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.lazy-image.loaded {
    opacity: 1;
}

/* Smooth scrolling without forced reflows */
.smooth-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Optimized mobile responsive classes */
@media (max-width: 767px) {
    .mobile-view {
        contain: layout style;
    }
    
    /* Reduce animation complexity on mobile */
    .parallax-element {
        transform: none !important;
    }
    
    /* Simplified animations for mobile */
    .fade-in-scroll,
    .slide-in-left,
    .slide-in-right,
    .scale-in {
        animation: optimizedFadeIn 0.4s ease-out forwards;
        transition: none;
    }
}

/* Container query optimizations */
@supports (container-type: inline-size) {
    .container-optimized {
        container-type: inline-size;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .fade-in-scroll,
    .slide-in-left,
    .slide-in-right,
    .scale-in,
    .hover-scale,
    .hover-lift,
    .parallax-element {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* Performance-optimized loading states */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: loading-shimmer 1.5s infinite;
    transform: translateZ(0);
}

@keyframes loading-shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Force hardware acceleration for critical elements */
.critical-animated {
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

/* Optimize sticky elements */
.sticky-optimized {
    position: sticky;
    contain: layout style paint;
    transform: translateZ(0);
}

/* Performance-focused grid layouts */
.performance-grid {
    display: grid;
    contain: layout style;
}

/* Optimized flexbox containers */
.performance-flex {
    display: flex;
    contain: layout style;
}

/* Efficient visibility toggles */
.hidden-optimized {
    visibility: hidden;
    opacity: 0;
    transform: translateZ(0);
    transition: visibility 0s linear 0.3s, opacity 0.3s ease-out;
}

.visible-optimized {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

/* Optimize form animations */
.form-field-optimized {
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    transform: translateZ(0);
}

.form-field-optimized:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
}

/* Button optimization */
.button-optimized {
    transform: translateZ(0);
    transition: background-color 0.2s ease-out, transform 0.1s ease-out;
}

.button-optimized:active {
    transform: scale(0.98) translateZ(0);
}

/* Table performance optimization */
.table-optimized {
    contain: layout style;
    table-layout: fixed;
}

/* Prevent unnecessary repaints */
.paint-optimized {
    contain: paint;
}

/* Layout containment for complex components */
.layout-optimized {
    contain: layout;
}

/* Style containment for independent components */
.style-optimized {
    contain: style;
}