/* Performance Optimization: Defer non-critical background images */
/* This file contains performance enhancements for styles.css */

/* 1. DEFER NON-CRITICAL BACKGROUND IMAGES */
/* Load background images only after page is interactive */
@media (prefers-reduced-motion: no-preference) {
    /* These rules apply only after page load via JavaScript */
}

/* 2. OPTIMIZE SERVICE CARD BACKGROUNDS - Consolidated Rules */
/* Instead of separate rules for each card, use data attributes */

/* Base deferred background image loader */
.defer-bg-image {
    transition: background-image 0.3s ease;
    will-change: background-image;
}

/* 3. OPTIMIZE IMAGE LOADING STRATEGY */
/* Preload only above-the-fold images */
.hero {
    background-image: linear-gradient(135deg, rgba(44, 62, 80, 0.7) 0%, rgba(52, 73, 94, 0.7) 100%), url('../images/banner-web.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* These are critical - load immediately */
}

/* Below-the-fold images: Use media queries for better optimization */
@media (min-width: 768px) {
    .service-card.workshop-card,
    .service-card.chrome-card,
    .service-card.nickel-card,
    .service-card.copper-card,
    .service-card.zinc-card,
    .service-card.specialist-card {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: scroll;
    }

    /* Consolidate background images */
    .service-card.workshop-card,
    .service-card.workshop-card:hover {
        background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('../images/workshop-web-opt.webp');
    }

    .service-card.workshop-card:hover {
        background-image: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)), url('../images/workshop-web-opt.webp');
    }

    .service-card.chrome-card,
    .service-card.chrome-card:hover {
        background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('../images/chromed-part.webp');
    }

    .service-card.chrome-card:hover {
        background-image: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)), url('../images/chromed-part.webp');
    }
}

/* 4. IMAGE SRCSET AND RESPONSIVE PICTURES */
/* Use picture element in HTML for responsive images - see HTML */

/* 5. CSS CONTAINMENT FOR PERFORMANCE */
.service-card,
.work-card {
    contain: layout style paint;
}

/* 6. OPTIMIZE ANIMATIONS AND TRANSITIONS */
/* Reduce paint operations */
.stat:hover,
.service-card:hover,
.youtube-card:hover,
.instagram-card:hover {
    will-change: transform;
}

/* 7. REMOVE REDUNDANT STYLES */
/* Consolidate similar rules to reduce file size */