/* Optimized Responsive Backgrounds */

/* Default to mobile JPEGs */
:root {
    --bg-tower-interior: url('/assets/backgrounds/optimized/tower-interior-mobile.jpg');
    --bg-tower-top: url('/assets/backgrounds/optimized/top-of-tower-mobile.jpg');
    --bg-tower: url('/assets/backgrounds/optimized/tower-mobile.jpg');
    --bg-hero: url('/assets/backgrounds/optimized/hero-background-mobile.jpg');
}

/* Tablet and up: Use desktop versions */
@media (min-width: 768px) {
    :root {
        --bg-tower-interior: url('/assets/backgrounds/optimized/tower-interior-desktop.jpg');
        --bg-tower-top: url('/assets/backgrounds/optimized/top-of-tower-desktop.jpg');
        --bg-tower: url('/assets/backgrounds/optimized/tower-desktop.jpg');
        --bg-hero: url('/assets/backgrounds/optimized/hero-background-desktop.jpg');
    }
}

/* High resolution displays: Use HD versions */
@media (min-width: 1536px) and (min-resolution: 2dppx),
       (min-width: 1536px) and (-webkit-min-device-pixel-ratio: 2) {
    :root {
        --bg-tower-interior: url('/assets/backgrounds/optimized/tower-interior-hd.jpg');
        --bg-tower-top: url('/assets/backgrounds/optimized/top-of-tower-hd.jpg');
        --bg-tower: url('/assets/backgrounds/optimized/tower-hd.jpg');
        --bg-hero: url('/assets/backgrounds/optimized/hero-background-hd.jpg');
    }
}

/* WebP support - Applied when .webp class is added to html element */
.webp {
    --bg-tower-interior: url('/assets/backgrounds/optimized/tower-interior-mobile.webp');
    --bg-tower-top: url('/assets/backgrounds/optimized/top-of-tower-mobile.webp');
    --bg-tower: url('/assets/backgrounds/optimized/tower-mobile.webp');
    --bg-hero: url('/assets/backgrounds/optimized/hero-background-mobile.webp');
}

@media (min-width: 768px) {
    .webp {
        --bg-tower-interior: url('/assets/backgrounds/optimized/tower-interior-desktop.webp');
        --bg-tower-top: url('/assets/backgrounds/optimized/top-of-tower-desktop.webp');
        --bg-tower: url('/assets/backgrounds/optimized/tower-desktop.webp');
        --bg-hero: url('/assets/backgrounds/optimized/hero-background-desktop.webp');
    }
}

@media (min-width: 1536px) and (min-resolution: 2dppx),
       (min-width: 1536px) and (-webkit-min-device-pixel-ratio: 2) {
    .webp {
        --bg-tower-interior: url('/assets/backgrounds/optimized/tower-interior-hd.webp');
        --bg-tower-top: url('/assets/backgrounds/optimized/top-of-tower-hd.webp');
        --bg-tower: url('/assets/backgrounds/optimized/tower-hd.webp');
        --bg-hero: url('/assets/backgrounds/optimized/hero-background-hd.webp');
    }
}

/* Preload hints for critical backgrounds */
.preload-critical {
    content: url('/assets/backgrounds/optimized/tower-interior-mobile.jpg')
             url('/assets/backgrounds/optimized/hero-background-mobile.jpg');
}