:root {
    --background-blur: 2px;
    --background-opacity: 0.85;
    --background-overlay-opacity: 0.3;
}

body[data-background="parallax"] {
    background-color: #1d1913;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

body[data-background="single"] {
    background-color: #1d1913;
    position: relative;
    min-height: 100vh;
}

.winter-theme[data-background="parallax"] {
    background-color: #111a1a;
}

.winter-theme[data-background="single"] {
    background-color: #111a1a;
}

body[data-background="single"] {
    position: relative;
}

body[data-background="single"]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--background-single-image, url('../img/backgrounds/apms-background.png'));
    background-attachment: fixed;
    background-position: var(--background-position, center);
    background-repeat: no-repeat;
    background-size: var(--background-size, cover);
    filter: blur(var(--background-blur, 1px)) hue-rotate(var(--background-hue, 0deg)) brightness(var(--background-brightness, 1)) contrast(var(--background-contrast, 1)) saturate(var(--background-saturation, 1)) !important;
    -webkit-filter: blur(var(--background-blur, 1px)) hue-rotate(var(--background-hue, 0deg)) brightness(var(--background-brightness, 1)) contrast(var(--background-contrast, 1)) saturate(var(--background-saturation, 1)) !important;
    opacity: var(--background-opacity, 0.8);
    /* Use non-negative z-index to avoid disappearing on scroll due to stacking-context quirks */
    z-index: 0;
    pointer-events: none;
    transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

body[data-background="single"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, var(--background-overlay-opacity, 0.3));
    z-index: 3;
    pointer-events: none;
    transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.winter-theme[data-background="single"]::before {
    background: rgba(17, 26, 26, var(--background-overlay-opacity, 0.3));
}

.parallax-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use non-negative z-index to avoid disappearing on scroll due to stacking-context quirks */
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Noise overlay layer (intensity via --background-noise-opacity) */
.background-noise-layer {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--background-noise-opacity, 0);
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 220px 220px;
    transform: translateZ(0);
}

.background-tint-layer {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: var(--background-tint-opacity, 0);
    background: rgb(var(--background-tint-r, 128), var(--background-tint-g, 128), var(--background-tint-b, 128));
    mix-blend-mode: color;
    transform: translateZ(0);
}

.background-lightness-layer {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: var(--background-lightness-opacity, 0);
    background: rgb(var(--background-lightness-rgb, 255,255,255));
    mix-blend-mode: soft-light;
    transform: translateZ(0);
}

body[data-background="single"] .parallax-background {
    display: none;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: var(--background-position, center);
    background-repeat: no-repeat;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: var(--background-opacity, 0.8);
    filter: blur(var(--background-blur, 1px)) hue-rotate(var(--background-hue, 0deg)) brightness(var(--background-brightness, 1)) contrast(var(--background-contrast, 1)) saturate(var(--background-saturation, 1)) !important;
    -webkit-filter: blur(var(--background-blur, 1px)) hue-rotate(var(--background-hue, 0deg)) brightness(var(--background-brightness, 1)) contrast(var(--background-contrast, 1)) saturate(var(--background-saturation, 1)) !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.parallax-layer-1 {
    background-image: var(--background-parallax-layer-1, url('../img/backgrounds/web_backround_desktop%201.png'));
    transform: translate3d(var(--parallax-layer-1-x, 0vw), var(--parallax-layer-1-y, -30px), 0) scale(var(--parallax-layer-1-scale, 1));
    opacity: var(--parallax-layer-1-opacity, 0.85);
    z-index: 1;
}

.parallax-layer-2 {
    background-image: var(--background-parallax-layer-2, url('../img/backgrounds/web_backround_desktop%202.png'));
    transform: translate3d(var(--parallax-layer-2-x, 12vw), var(--parallax-layer-2-y, 10px), 0) scale(var(--parallax-layer-2-scale, 0.6));
    opacity: var(--parallax-layer-2-opacity, 0.85);
    z-index: 2;
}

.parallax-layer-3 {
    background-image: var(--background-parallax-layer-3, url('../img/backgrounds/web_backround_desktop%203.png'));
    transform: translate3d(var(--parallax-layer-3-x, 0vw), var(--parallax-layer-3-y, 60px), 0) scale(var(--parallax-layer-3-scale, 1));
    opacity: var(--parallax-layer-3-opacity, 0.85);
    z-index: 3;
}

.parallax-layer-4 {
    background-image: var(--background-parallax-layer-4, url('../img/backgrounds/web_backround_desktop%204.png'));
    transform: translate3d(var(--parallax-layer-4-x, 0vw), var(--parallax-layer-4-y, 0px), 0) scale(var(--parallax-layer-4-scale, 1));
    opacity: var(--parallax-layer-4-opacity, 0.85);
    z-index: 4;
}

@media (max-width: 1024px) {
    .parallax-layer {
        filter: blur(calc(var(--background-blur, 2px) * 0.5)) !important;
        -webkit-filter: blur(calc(var(--background-blur, 2px) * 0.5)) !important;
    }
}

@media (max-width: 768px) {
    .parallax-layer {
        filter: blur(calc(var(--background-blur, 2px) * 0.25)) !important;
        -webkit-filter: blur(calc(var(--background-blur, 2px) * 0.25)) !important;
    }
}

/* Performance optimization: reduce blur on mobile and low-end devices */
@media (max-width: 768px) {
    .support-panel,
    .music-experience-popup,
    .cookie-consent-popup,
    .feedback-sidebar {
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
    }
    
    .navbar {
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }
}

/* Disable backdrop-filter on very low-end devices */
@media (max-width: 480px) {
    .support-panel,
    .music-experience-popup,
    .cookie-consent-popup,
    .feedback-sidebar,
    .navbar,
    .dropdown-menu,
    .admin-header,
    .admin-card,
    .admin-form,
    .admin-table,
    .auth-card,
    .text-overlay::before,
    .hero-text-overlay::before,
    .tooltip .tooltip-inner {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(26, 26, 26, 0.99) !important;
    }
}

/* scrolled state: keep effect subtle but do not override per-layer transforms */
body[data-background="parallax"].scrolled .parallax-layer {
    opacity: 0.9;
}


body[data-background="parallax"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(29, 25, 19, var(--background-overlay-opacity, 0.3));
    z-index: 3;
    pointer-events: none;
    transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-background="parallax"].scrolled::before {
    background: rgba(29, 25, 19, calc(var(--background-overlay-opacity, 0.3) + 0.1));
}

/* Winter theme overlay for parallax */
.winter-theme[data-background="parallax"]::before {
    background: rgba(17, 26, 26, var(--background-overlay-opacity, 0.3));
}

.winter-theme[data-background="parallax"].scrolled::before {
    background: rgba(17, 26, 26, calc(var(--background-overlay-opacity, 0.3) + 0.1));
}


@keyframes fadeInParallax {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 0.9;
        transform: translateY(0);
    }
}

.parallax-layer {
    animation: fadeInParallax 1.2s ease-out;
}

.container,
.content-wrapper,
main,
footer.footer,
footer {
    position: relative;
    z-index: 4;
}

.navbar {
    position: fixed !important;
    z-index: 1030 !important;
}


.winter-theme .parallax-layer-1,
.winter-theme .parallax-layer-2,
.winter-theme .parallax-layer-3,
.winter-theme .parallax-layer-4 {
    background-image: url('../img/backgrounds/web_backround_desktop%201.png');
}

.winter-theme .parallax-layer-2 {
    background-image: url('../img/backgrounds/web_backround_desktop%202.png');
}

.winter-theme .parallax-layer-3 {
    background-image: url('../img/backgrounds/web_backround_desktop%203.png');
}

.winter-theme .parallax-layer-4 {
    background-image: url('../img/backgrounds/web_backround_desktop%204.png');
}


@media (prefers-reduced-motion: reduce) {
    .parallax-layer {
        animation: none;
        transition: none;
        filter: blur(var(--background-blur, 2px)) !important;
        -webkit-filter: blur(var(--background-blur, 2px)) !important;
    }
    
    body[data-background="parallax"].scrolled .parallax-layer-1,
    body[data-background="parallax"].scrolled .parallax-layer-2,
    body[data-background="parallax"].scrolled .parallax-layer-3,
    body[data-background="parallax"].scrolled .parallax-layer-4 {
        transform: none;
    }
    
    body[data-background="single"]::after {
        filter: blur(var(--background-blur, 2px)) !important;
        -webkit-filter: blur(var(--background-blur, 2px)) !important;
    }
}

.parallax-background,
.parallax-layer {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: layout style paint;
}