/* Performance optimizations to prevent forced reflows and layout thrashing */

/* Use transform instead of changing layout properties for animations */
.magnet-item {
    will-change: transform;
    transform: translateZ(0); /* Force hardware acceleration */
}

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

.owl-carousel .owl-item {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimize modal transitions */
.modal {
    will-change: opacity, visibility;
}

.modal.show {
    will-change: auto;
}

/* Optimize form elements */
.form-control, .btn {
    will-change: auto;
}

/* Prevent layout shifts during loading */
.loader {
    will-change: opacity;
    transform: translateZ(0);
}

/* Optimize images to prevent layout shifts */
img {
    max-width: 100%;
    height: auto;
}

/* Use contain property for better performance */
.carousel-container, .modal-content {
    contain: layout style paint;
}

/* Optimize scroll performance */
.scrollable-content {
    will-change: scroll-position;
    transform: translateZ(0);
}

/* Reduce repaints for frequently changing elements */
.alert, .toast {
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* Optimize hover effects */
.hover-effect {
    will-change: transform;
    transition: transform 0.2s ease;
}

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

/* Prevent forced reflows in responsive design */
@media (max-width: 768px) {
    .responsive-element {
        will-change: auto;
    }
}

/* Optimize text rendering */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize box-shadow and border-radius for better performance */
.optimized-shadow {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 4px;
    will-change: auto;
}

/* Use CSS containment for complex layouts */
.complex-layout {
    contain: layout style;
}

/* Optimize animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
    will-change: opacity;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
    will-change: transform;
}