/**
 * Performance Optimizations for Younity Creations
 * Fixes non-composited animations and improves rendering performance
 * 
 * Version: 1.0.0
 * Date: 2026-02-07
 */

/* ========================================
   FIX: Non-Composited Animations
   ======================================== */

/* Owl Carousel - Force GPU acceleration for smooth animations */
.owl-stage-outer {
    /* Use transform instead of height for better performance */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.owl-stage {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.owl-item {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimize carousel transitions */
.owl-carousel .owl-stage {
    transition: transform 0.3s ease-in-out;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
}

/* Ensure smooth animations for all carousel elements */
.owl-carousel .animated {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}

/* Owl Carousel Dots - Fix non-composited animations */
.owl-carousel .owl-dots,
.owl-theme .owl-dots {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.owl-carousel .owl-dots .owl-dot,
.owl-theme .owl-dots .owl-dot {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.owl-carousel .owl-dots .owl-dot span,
.owl-theme .owl-dots .owl-dot span {
    will-change: transform, opacity, background-color;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Use background-color instead of color for better performance */
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease, opacity 0.3s ease;
}

/* ========================================
   FIX: Testimonial Carousel Performance
   ======================================== */

.testimonial-carousel,
.testimonial-item {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ========================================
   OPTIMIZATION: Reduce Paint Areas
   ======================================== */

/* Contain layout changes to specific elements */
.owl-carousel {
    contain: layout style paint;
}

.owl-stage-outer {
    contain: layout style;
    overflow: hidden;
}

/* ========================================
   OPTIMIZATION: Smooth Scrolling
   ======================================== */

/* Enable smooth scrolling with GPU acceleration */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .owl-carousel .animated,
    .owl-stage {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================
   OPTIMIZATION: Image Loading
   ======================================== */

/* Prevent layout shift during image loading */
img {
    content-visibility: auto;
}

/* Lazy-loaded images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

/* ========================================
   OPTIMIZATION: Font Rendering
   ======================================== */

/* Improve font rendering performance */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========================================
   OPTIMIZATION: Reduce Repaints
   ======================================== */

/* Isolate elements that change frequently */
.scrollup,
.whatsapp-float,
.call-float {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ========================================
   OPTIMIZATION: Hover Effects
   ======================================== */

/* Use transform for hover effects instead of position changes */
.portfolio-item:hover img,
.gallery-item:hover img {
    transform: scale(1.05) translateZ(0);
    -webkit-transform: scale(1.05) translateZ(0);
    transition: transform 0.3s ease-in-out;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
}

/* ========================================
   OPTIMIZATION: Modal/Overlay Performance
   ======================================== */

/* Optimize lightbox and modals */
.mfp-wrap,
.mfp-container {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ========================================
   OPTIMIZATION: Navigation
   ======================================== */

/* Smooth navigation transitions */
.navbar,
.main-menu {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ========================================
   OPTIMIZATION: Critical Rendering Path
   ======================================== */

/* Prioritize above-the-fold content */
.hero-section,
.top-section,
header {
    contain: layout style;
}

/* Defer below-the-fold rendering */
footer,
.footer-widgets {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ========================================
   OPTIMIZATION: Video Elements
   ======================================== */

/* Optimize video playback */
video {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

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

/* Mark elements for performance monitoring */
[data-performance-critical] {
    contain: layout style paint;
}

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

/* Safari-specific optimizations */
@supports (-webkit-appearance: none) {

    .owl-stage-outer,
    .owl-stage,
    .owl-item {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

/* Firefox-specific optimizations */
@-moz-document url-prefix() {
    .owl-carousel {
        transform: translateZ(0);
    }
}