/* Wine Rack Christmas. Only loaded when the switch is on; everything scoped to the body class. */
body.christmas-theme-active {
    --wr-blue: #009BDF;
    --wr-midnight: #0A2740;
    --wr-dusk: #14507A;
    --wr-frost: #EAF6FD;
    --wr-snow-shadow: #C9DDEB;
    --wr-gold: #D9B36C;
    --wr-light: #FFE6B0;
    --wr-claret: #6B1030;
    --wr-vine: #3B2A22;
}

/* ---------- Header ---------- */
.christmas-theme-active .header {
    background: linear-gradient(180deg, #009BDF 0%, #0E78B5 100%);
}
.christmas-theme-active .header .desktop-nav { position: relative; z-index: 2; }
.christmas-theme-active .wr-xmas { position: absolute; pointer-events: none; }

.christmas-theme-active .wr-xmas__frost {
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background:
        radial-gradient(ellipse 220px 100% at 0 50%, rgba(234, 246, 253, .35), transparent),
        radial-gradient(ellipse 220px 100% at 100% 50%, rgba(234, 246, 253, .35), transparent);
}
.christmas-theme-active .wr-xmas__frost svg { position: absolute; top: 0; height: 100%; width: 240px; }
.christmas-theme-active .wr-xmas__frost svg.is-right { right: 0; transform: scaleX(-1); }
.christmas-theme-active .wr-xmas__frost::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -30%;
    width: 25%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .15), transparent);
    transform: translateX(-100%);
    animation: wr-shimmer 2.5s ease-in-out 2s 1 forwards;
}
@keyframes wr-shimmer { to { transform: translateX(600%); } }

.christmas-theme-active .wr-xmas__lights {
    left: 0; right: 0; bottom: 3px;
    height: 20px;
    z-index: 3;
}
.christmas-theme-active .wr-xmas__lights svg { display: block; width: 100%; height: 100%; overflow: visible; }

.christmas-theme-active .wr-xmas__stars {
    left: 0; right: 0; top: 100%;
    height: 70px;
    z-index: 20;
}
.christmas-theme-active .wr-star {
    position: absolute;
    top: 0;
    transform-origin: 50% 0;
}
.christmas-theme-active .wr-star svg { display: block; overflow: visible; animation: wr-turn 8s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes wr-turn { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.25); } }

.christmas-theme-active .wr-bulb { animation: wr-twinkle 4s ease-in-out infinite; }
@keyframes wr-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (max-width: 800px) {
    .christmas-theme-active .wr-xmas__stars { display: none; }
}

/* ---------- Gutters ---------- */
.christmas-theme-active .wr-gutter {
    display: none;
    position: fixed;
    top: 0; bottom: 0;
    width: 11vw;
    z-index: 101;
    pointer-events: none;
}
.christmas-theme-active .wr-gutter--left { left: 0; }
.christmas-theme-active .wr-gutter--right { right: 0; transform: scaleX(-1); }
.christmas-theme-active .wr-gutter svg { width: 100%; height: 100%; display: block; }
.christmas-theme-active .wr-cane { animation: wr-sway 7s ease-in-out infinite; }
.christmas-theme-active .wr-cane--b { animation-duration: 9s; animation-delay: -3s; }
@keyframes wr-sway { 0%, 100% { transform: rotate(-.7deg); } 50% { transform: rotate(.7deg); } }
@media (min-width: 1400px) {
    .christmas-theme-active .wr-gutter { display: block; }
}

/* ---------- Footer scene ---------- */
.christmas-theme-active .wr-street {
    position: relative;
    width: 100%;
    height: max(170px, 22.5vw); /* matches the 1600x360 viewBox so nothing is cropped at wide widths */
    overflow: hidden;
    pointer-events: none;
    margin-bottom: 20px;
}
.christmas-theme-active .wr-street svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.christmas-theme-active .wr-tw { animation: wr-twinkle 5s ease-in-out infinite; }
.christmas-theme-active .wr-flicker { animation: wr-flicker 3.4s ease-in-out infinite; }
.christmas-theme-active .wr-flicker--b { animation-duration: 4.6s; animation-delay: -1.2s; }
@keyframes wr-flicker { 0%, 100% { opacity: 1; } 45% { opacity: .78; } 60% { opacity: .95; } }
.christmas-theme-active .wr-smoke { animation: wr-smoke 6s ease-in infinite; }
@keyframes wr-smoke { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px, -14px); opacity: 0; } }
.christmas-theme-active .sd-paused * { animation-play-state: paused !important; }

/* ---------- Snow canvas ---------- */
.wr-snow-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .christmas-theme-active .wr-xmas__frost::after,
    .christmas-theme-active .wr-star svg,
    .christmas-theme-active .wr-bulb,
    .christmas-theme-active .wr-cane,
    .christmas-theme-active .wr-tw,
    .christmas-theme-active .wr-flicker,
    .christmas-theme-active .wr-smoke { animation: none; }
    .wr-snow-canvas { display: none; }
}