/* ========================================
   Seasonal theme: Christmas (.xmas-*)
   ----------------------------------------
   Scoped under body.theme-christmas or an .xmas-* decoration class, so the
   file is inert while the theme is off. Artwork colours (snow, hat, socket,
   wire) are the design system's one sanctioned palette exception.
   ======================================== */

body.theme-christmas {
    --xmas-red: 255, 19, 19;
    --xmas-gold: 255, 203, 49;
    --xmas-green: 25, 238, 25;
    --xmas-cyan: 13, 202, 240;
}

/* --- Falling snow -------------------------------------------------------- */
/* Above the sidebar (1030), below the loading / reconnect overlays (2000). */
.xmas-snow {
    position: fixed;
    inset: 0;
    z-index: 1035;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
}

/* Each layer starts one tile above the viewport and falls exactly one tile per
   loop, so the loop is seamless. Moved by transform only — animating
   background-position repaints the whole viewport every frame. */
.xmas-snow > i {
    position: absolute;
    left: -40px;
    right: -40px;
    bottom: 0;
    will-change: transform;
}

.xmas-snow-far {
    top: -220px;
    opacity: .55;
    background-image:
        radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent),
        radial-gradient(1.4px 1.4px at 90px 120px, #fff, transparent),
        radial-gradient(1.8px 1.8px at 160px 60px, #fff, transparent),
        radial-gradient(1.2px 1.2px at 210px 180px, #fff, transparent),
        radial-gradient(1.6px 1.6px at 40px 210px, #fff, transparent),
        radial-gradient(1.3px 1.3px at 130px 160px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 200px 95px, #fff, transparent);
    background-size: 220px 220px;
    animation: xmas-fall-far 20s linear infinite;
}

.xmas-snow-mid {
    top: -360px;
    opacity: .65;
    background-image:
        radial-gradient(2.4px 2.4px at 60px 80px, rgba(255, 255, 255, .9), transparent),
        radial-gradient(2.2px 2.2px at 300px 200px, rgba(255, 255, 255, .9), transparent),
        radial-gradient(2.6px 2.6px at 180px 330px, rgba(255, 255, 255, .9), transparent),
        radial-gradient(2px 2px at 340px 40px, rgba(255, 255, 255, .9), transparent),
        radial-gradient(2.3px 2.3px at 120px 250px, rgba(255, 255, 255, .9), transparent);
    background-size: 360px 360px;
    animation: xmas-fall-mid 22s linear infinite;
}

.xmas-snow-near {
    top: -560px;
    opacity: .6;
    background-image:
        radial-gradient(4px 4px at 100px 150px, rgba(255, 255, 255, .75), transparent),
        radial-gradient(3.5px 3.5px at 420px 420px, rgba(255, 255, 255, .7), transparent),
        radial-gradient(4.5px 4.5px at 520px 90px, rgba(255, 255, 255, .7), transparent),
        radial-gradient(3.8px 3.8px at 260px 500px, rgba(255, 255, 255, .7), transparent);
    background-size: 560px 560px;
    animation: xmas-fall-near 18s linear infinite;
}

@keyframes xmas-fall-far {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(18px, 110px, 0); }
    100% { transform: translate3d(0, 220px, 0); }
}

@keyframes xmas-fall-mid {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-26px, 180px, 0); }
    100% { transform: translate3d(0, 360px, 0); }
}

@keyframes xmas-fall-near {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(34px, 280px, 0); }
    100% { transform: translate3d(0, 560px, 0); }
}

/* --- Light strings (shared by the garland and the side strand) ----------- */
.xmas-wire {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.xmas-wire path {
    fill: none;
    stroke: rgba(190, 215, 200, .45);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}

.xmas-bulb {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 8px;
    height: 12px;
    margin-left: -4px;
    border-radius: 45% 45% 50% 50% / 35% 35% 65% 65%;
    background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .95) 0 14%, rgb(var(--c)) 46%, rgba(var(--c), .8) 100%);
    box-shadow: 0 0 6px rgba(var(--c), .9);
    transform: rotate(var(--r, 0deg));
    transform-origin: 50% -2px;
}

.xmas-bulb::before {
    content: '';
    position: absolute;
    left: 1.5px;
    top: -3px;
    width: 5px;
    height: 4px;
    border-radius: 1px;
    background: #24302a;
}

.xmas-bulb::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 60%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--c), .55) 0%, rgba(var(--c), 0) 70%);
    animation: xmas-twinkle var(--t, 2.8s) ease-in-out var(--d, 0s) infinite;
}

@keyframes xmas-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: .2; }
}

/* --- Top garland: across the content area, scrolls away with the page ---- */
.xmas-garland {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    z-index: 5;
    pointer-events: none;
    transition: left .25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.vnav-active .xmas-garland {
    left: var(--vnav-w);
}

body.vnav-active.vnav-active-collapsed .xmas-garland {
    left: var(--vnav-w-collapsed);
}

@media (max-width: 767.98px) {
    body.vnav-active .xmas-garland,
    body.vnav-active.vnav-active-collapsed .xmas-garland {
        left: 0;
        top: 64px;
    }
}

/* The layout's <main> only — pages and picker modals have their own <main class="col-*">. */
body.theme-christmas .container-fluid > main {
    padding-top: 1.75rem;
}

/* --- Side strand: straddles the sidebar's right border (desktop only) ---- */
.xmas-strand {
    position: fixed;
    top: 0;
    left: calc(var(--vnav-w) - 10px);
    width: 20px;
    height: 100vh;
    z-index: 1031;
    pointer-events: none;
    transition: left .25s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s ease;
}

body.vnav-active-collapsed .xmas-strand {
    left: calc(var(--vnav-w-collapsed) - 10px);
}

/* Sidebar popovers live inside the sidebar's z-index 1030 context, so the strand would paint over them. */
body:has(.vnav-user .notif-panel-wrap, .vnav-user .sponsor-badge-wrapper:hover, .vnav-user .sponsor-badge-wrapper:focus-within) .xmas-strand {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .xmas-snow {
        display: none;
    }

    .xmas-bulb::after {
        animation: none;
        opacity: .85;
    }
}

/* --- Snow on the chrome -------------------------------------------------- */
/* Hand-picked: capping every top-level card read as overdone. Home rail, hall of fame, VIP panel. */
:where(body.theme-christmas :is(.home-rail, .hall, .subscription-panel)) {
    position: relative;
}

body.theme-christmas :is(.home-rail, .hall, .subscription-panel)::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: -6px;
    left: .75rem;
    right: .75rem;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M0 6C8 2 16 2 22 5C30 1 40 1 46 5C54 2 62 2 68 5C76 1 86 1 92 5C100 2 112 2 120 6L120 10C116 10 114 13 111 11C108 9 104 10 100 10C96 10 95 15 92 15C89 15 89 10 85 10C78 10 72 11 66 10C62 10 61 13 58 13C55 13 55 10 51 10C44 10 38 10 32 10C28 10 27 14 24 14C21 14 21 10 18 10C12 10 6 11 0 10Z' fill='%23eef6ff'/%3E%3C/svg%3E") 0 0 / 120px 16px repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .35));
    pointer-events: none;
}

body.theme-christmas .vnav-header {
    position: relative;
}

/* ::after on both — .vnav-mobile-topbar::before already holds the bar's blur. */
body.theme-christmas .vnav-header::after,
body.theme-christmas .vnav-mobile-topbar::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
    margin-top: -1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M0 0H120V3C116 3 115 6 112 6C109 6 109 3 105 3C98 3 92 4 86 3C82 3 81 8 78 8C75 8 75 3 71 3C64 3 58 3 52 3C49 3 48 5 46 5C44 5 43 3 40 3C34 3 30 4 26 3C22 3 21 9 18 9C15 9 15 3 11 3C7 3 4 3 0 3Z' fill='%23eef6ff'/%3E%3C/svg%3E") 0 0 / 120px 10px repeat-x;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3));
    pointer-events: none;
}

/* Stays in layout: it carries the sticky-footer margin-top: auto. */
body.theme-christmas > hr {
    opacity: 0;
}

body.theme-christmas > footer {
    position: relative;
    padding-top: 2.75rem !important;
}

body.theme-christmas > footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c9d9ea' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23c9d9ea' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.2' stop-color='%23f2f8ff'/%3E%3Cstop offset='1' stop-color='%23f2f8ff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 40V20C40 16 80 6 130 10C180 14 210 4 260 6C310 8 360 24 400 20V40Z' fill='url(%23b)'/%3E%3Cpath d='M0 40V24C30 18 60 10 95 13C130 16 150 7 190 8C230 9 250 21 290 19C330 17 370 30 400 24V40Z' fill='url(%23f)'/%3E%3C/svg%3E") 0 100% / 400px 40px repeat-x;
    pointer-events: none;
}

body.theme-christmas .vnav-brand,
body.theme-christmas .vnav-brand-mobile {
    position: relative;
    overflow: visible;
}

/* Percentages of the logo box, tuned so the hat sits on the panther's head, mirrored and tilted to lean left. */
body.theme-christmas .vnav-brand::after,
body.theme-christmas .vnav-brand-mobile::after {
    content: '';
    position: absolute;
    left: 9.5%;
    top: -20%;
    width: 59.4%;
    height: 46.7%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 87 56' preserveAspectRatio='none'%3E%3Cpath d='M12 44C15 27 28 11 51 7C66 4 77 11 80 21C74 17 68 16 62 18C54 22 54 34 57 44Z' fill='%23e0303f'/%3E%3Cpath d='M51 7C66 4 77 11 80 21C74 17 68 16 62 18C59 13 55 9 51 7Z' fill='%23a51424' opacity='.55'/%3E%3Cpath d='M12 44C15 30 23 19 36 12C28 21 24 32 26 44Z' fill='%23fff' opacity='.18'/%3E%3Crect x='4' y='40' width='62' height='12' rx='6' fill='%23f4f8ff'/%3E%3Ccircle cx='77' cy='25' r='6.5' fill='%23f4f8ff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    transform: scaleX(-1) rotate(16deg);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
    pointer-events: none;
}

/* .nav-logo's min-width keeps these boxes 80px wide while object-fit: contain shrinks the logo inside. */
body.theme-christmas .vnav-brand-mobile::after {
    left: 20.6%;
    width: 43%;
}

body.theme-christmas.vnav-active-collapsed .vnav-brand::after {
    left: 29.75%;
    width: 29.7%;
}