/* 
Performance optimizations for styles.css
Contains styles for lazy loading and animations
*/

/* Lazy loading image styles */
img.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

img.lazy.loaded {
    opacity: 1;
}

/* Animation optimizations using will-change */
.service-item:hover,
.btn:hover,
.back-to-top-btn:hover,
.about-image:hover img {
    will-change: transform;
}

/* Reduce repaints for scrolled header */
header.scrolled {
    will-change: transform, backdrop-filter;
}

/* Optimize lightbox transitions */
.lightbox {
    will-change: opacity;
}

/* Fade-in animations optimized */
@media (prefers-reduced-motion: no-preference) {
    .hero h2 {
        animation: fadeInDown 1s ease-out;
    }

    .hero p {
        animation: fadeInUp 1s ease-out 0.3s;
        animation-fill-mode: backwards;
    }

    .hero .btn {
        animation: fadeInUp 1s ease-out 0.6s;
        animation-fill-mode: backwards;
    }
}

/* Service image gallery fade effect */
@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}