/* Translucent mountain backdrop with scroll parallax */

#skibum-parallax-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.skibum-parallax-layer {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    will-change: transform;
}

.skibum-parallax-layer--sky {
    top: 0;
    height: 58%;
    background:
        radial-gradient(ellipse 70% 50% at 75% 10%, rgba(246, 196, 83, 0.06) 0%, transparent 55%),
        linear-gradient(
            180deg,
            rgba(125, 175, 230, 0.42) 0%,
            rgba(191, 219, 254, 0.28) 40%,
            rgba(248, 250, 252, 0.12) 100%
        );
    opacity: 0.72;
}

.skibum-parallax-layer--far {
    bottom: 18%;
    height: 42%;
    background:
        linear-gradient(165deg, transparent 38%, rgba(79, 117, 155, 0.12) 38%, rgba(79, 117, 155, 0.12) 42%, transparent 42%),
        linear-gradient(195deg, transparent 52%, rgba(55, 90, 120, 0.1) 52%, rgba(55, 90, 120, 0.1) 58%, transparent 58%),
        linear-gradient(175deg, transparent 28%, rgba(26, 40, 31, 0.09) 28%, rgba(26, 40, 31, 0.09) 35%, transparent 35%);
    opacity: 0.55;
}

.skibum-parallax-layer--mid {
    bottom: 8%;
    height: 38%;
    background:
        linear-gradient(160deg, transparent 45%, rgba(79, 117, 155, 0.14) 45%, rgba(79, 117, 155, 0.14) 52%, transparent 52%),
        linear-gradient(200deg, transparent 35%, rgba(26, 40, 31, 0.12) 35%, rgba(26, 40, 31, 0.12) 48%, transparent 48%),
        linear-gradient(170deg, transparent 55%, rgba(55, 90, 120, 0.1) 55%, rgba(55, 90, 120, 0.1) 65%, transparent 65%);
    opacity: 0.5;
}

.skibum-parallax-layer--near {
    bottom: 0;
    height: 32%;
    background:
        linear-gradient(155deg, transparent 40%, rgba(26, 40, 31, 0.16) 40%, rgba(26, 40, 31, 0.16) 55%, transparent 55%),
        linear-gradient(185deg, transparent 25%, rgba(79, 117, 155, 0.18) 25%, rgba(79, 117, 155, 0.18) 42%, transparent 42%),
        linear-gradient(0deg, rgba(241, 245, 249, 0.55) 0%, rgba(248, 250, 252, 0.38) 35%, transparent 70%);
    opacity: 0.48;
}

.skibum-parallax-layer--snow {
    bottom: 0;
    height: 14%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.28) 40%,
        rgba(248, 250, 252, 0.62) 100%
    );
    opacity: 0.65;
}

/* App chrome only — modals/toasts use fixed stacking in brand-ui.css */
#app,
#nav-mobile,
#data-sync-banner {
    position: relative;
    z-index: 1;
}

#header {
    position: relative;
    z-index: 60;
}

body.skibum-parallax-on {
    background-color: #e4ebf2;
}

body.skibum-parallax-on.skibum-premium {
    background: linear-gradient(180deg, #dce6f0 0%, #eef2f7 40%, #f8fafc 100%);
}

body.skibum-parallax-on #home-page,
body.skibum-parallax-on #features.features-showcase,
body.skibum-parallax-on #colorado-resorts,
body.skibum-parallax-on #app-screens,
body.skibum-parallax-on #seo-guide,
body.skibum-parallax-on #profile-page > div,
body.skibum-parallax-on #friends-page .social-page-shell,
body.skibum-parallax-on #leaderboard-page .social-page-shell,
body.skibum-parallax-on #detail-page .detail-page-inner,
body.skibum-parallax-on #search-page,
body.skibum-parallax-on #about-page,
body.skibum-parallax-on #contact-page,
body.skibum-parallax-on #partner-page {
    background: transparent !important;
}

body.skibum-parallax-on .skibum-card,
body.skibum-parallax-on .social-card,
body.skibum-parallax-on .stat-card-pro {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
    .skibum-parallax-layer {
        transform: none !important;
        will-change: auto;
    }
}