/*your custom css goes here*/

/* Performance optimizations for animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rotate360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Animation classes (used by custom-optimizations.js) */
/* .cart-animate {
    margin: 100px;
    transition: margin 0.5s ease-out;
}
.anim-active {
    margin: 0;
}

.cart-rotate {
    transition: transform 2s ease-out;
}
.rotate-active {
    transform: rotate(360deg);
} */

/* Optimize page transitions */
.page-transition {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Optimize image loading */
/* img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.5s;
}
img[loading="lazy"].loaded {
    opacity: 1;
} */

/* Optimized modal animations */
.modal {
    transition: opacity 0.3s ease;
}
.modal-dialog {
    transform: scale(0.8);
    transition: transform 0.3s ease;
}
.modal.show .modal-dialog {
    transform: scale(1);
}

/* Optimized loader animation */
.spinner-border {
    border-width: 2px;
    animation-duration: 0.8s;
}

/* Improved scrolling performance */
/* * {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
} */

/* Optimize hover effects */
.aiz-side-nav-item > a:hover,
.aiz-side-nav-item > a:focus,
.category-nav-element:hover {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* High Load Mode - reduces animations and effects during peak load */
.high-load-mode * {
    transition: none !important;
    animation: none !important;
    animation-delay: 0s !important;
    animation-duration: 0s !important;
}

.high-load-mode .slick-slide {
    transition: opacity 0.1s linear !important;
}

.high-load-mode .fade {
    transition: opacity 0.1s linear !important;
}

.high-load-mode .spinner-border {
    animation: spinner-border 1s linear infinite !important;
}

/* Reduce image quality for slow connections */
.reduce-image-quality img {
    image-rendering: auto;
    filter: blur(0.5px);
}

/* Optimizations for mobile devices */
@media (max-width: 767px) {
    .mobile-optimize {
        contain: content;
        content-visibility: auto;
    }
    
    .mobile-optimize img:not(.critical-image) {
        transition: opacity 0.2s;
    }
}