body.xmas{
    background-image:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.06), transparent 30%),
        radial-gradient(circle at 80% 0%, rgba(0,255,255,.05), transparent 35%);
}

 #xmas-overlay{
     pointer-events:none;
     position:fixed;
     inset:0;
     z-index:9999;
     overflow:hidden;
     filter: drop-shadow(0 0 10px rgba(255,255,255,0.06));
 }

.ps-frost{ position: relative; }
.ps-frost::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height: 10px;
    pointer-events:none;
    background:
        radial-gradient(12px 8px at 10% 70%, rgba(255,255,255,0.18), transparent 70%),
        radial-gradient(16px 10px at 24% 40%, rgba(255,255,255,0.14), transparent 75%),
        radial-gradient(18px 10px at 38% 65%, rgba(255,255,255,0.16), transparent 75%),
        radial-gradient(14px 9px at 52% 35%, rgba(255,255,255,0.12), transparent 75%),
        radial-gradient(20px 12px at 66% 60%, rgba(255,255,255,0.16), transparent 75%),
        radial-gradient(12px 8px at 80% 35%, rgba(255,255,255,0.12), transparent 75%),
        radial-gradient(18px 12px at 92% 65%, rgba(255,255,255,0.16), transparent 75%),
        linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0));
    opacity: .9;
    filter: blur(.1px);
}

/* Announcement strip look */
.ps-xmas-strip{
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10), transparent 42%),
        radial-gradient(circle at 80% 0%, rgba(92,185,255,0.10), transparent 45%),
        linear-gradient(90deg, rgba(2,6,23,0.92), rgba(15,23,42,0.92));
    border-bottom: 1px solid rgba(148,163,184,0.18);
    backdrop-filter: blur(14px);
}
.xmas-flake-wrap{
    position:absolute;
    top:-12vh;
    left:0;
    transform: translate3d(0,0,0);
    will-change: transform;
    animation-name: xmas-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--fall, 12s);
    animation-delay: var(--fallDelay, 0s);
}

.xmas-flake{
    width: var(--size, 6px);
    height: var(--size, 6px);
    border-radius: 999px;
    opacity: var(--opacity, .85);
    filter: blur(var(--blur, .25px));
    will-change: transform, opacity;

    /* Soft snow look (not just a white dot) */
    background:
        radial-gradient(circle at 30% 30%,
        rgba(255,255,255,.95),
        rgba(255,255,255,.55) 45%,
        rgba(255,255,255,0) 72%);

    box-shadow:
        0 0 10px rgba(255,255,255,.10),
        0 0 18px rgba(92,185,255,.06);

    animation:
        xmas-sway var(--sway, 4.8s) ease-in-out infinite,
        xmas-twinkle var(--twinkle, 3.2s) ease-in-out infinite;
    animation-delay: var(--swayDelay, 0s), var(--twinkleDelay, 0s);
}

@keyframes xmas-fall{
    to { transform: translate3d(0, 125vh, 0); }
}

@keyframes xmas-sway{
    0%   { transform: translate3d(calc(var(--drift, 18px) * -1), 0, 0) rotate(-8deg); }
    50%  { transform: translate3d(var(--drift, 18px), 0, 0) rotate(8deg); }
    100% { transform: translate3d(calc(var(--drift, 18px) * -1), 0, 0) rotate(-8deg); }
}

@keyframes xmas-twinkle{
    0%, 100% { opacity: var(--opacity, .85); }
    50%      { opacity: calc(var(--opacity, .85) * .55); }
}

@media (prefers-reduced-motion: reduce){
    .xmas-flake-wrap, .xmas-flake{ animation: none !important; }
    #xmas-overlay{ display:none; }
}

.ps-xmas-strip{
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10), transparent 42%),
        radial-gradient(circle at 80% 0%, rgba(92,185,255,0.10), transparent 45%),
        linear-gradient(90deg, rgba(2,6,23,0.92), rgba(15,23,42,0.92));
    border-bottom: 1px solid rgba(148,163,184,0.18);
    backdrop-filter: blur(14px);
}

.ps-frost{ position: relative; }
.ps-frost::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height: 12px;
    pointer-events:none;

    background:
        linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 55%, rgba(255,255,255,0)),
        radial-gradient(18px 10px at 8% 75%, rgba(255,255,255,0.22), transparent 72%),
        radial-gradient(22px 12px at 20% 45%, rgba(255,255,255,0.18), transparent 75%),
        radial-gradient(26px 12px at 36% 68%, rgba(255,255,255,0.20), transparent 75%),
        radial-gradient(20px 10px at 52% 38%, rgba(255,255,255,0.16), transparent 75%),
        radial-gradient(28px 14px at 68% 62%, rgba(255,255,255,0.20), transparent 75%),
        radial-gradient(18px 10px at 84% 38%, rgba(255,255,255,0.16), transparent 75%),
        radial-gradient(26px 14px at 94% 70%, rgba(255,255,255,0.22), transparent 75%);

    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -1px 0 rgba(92,185,255,0.06) inset;

    opacity: .95;
    filter: blur(.12px) saturate(1.08);

    -webkit-mask-image:
        radial-gradient(14px 9px at 6% 90%, #000 68%, transparent 74%),
        radial-gradient(18px 10px at 18% 86%, #000 66%, transparent 74%),
        radial-gradient(22px 12px at 30% 92%, #000 66%, transparent 74%),
        radial-gradient(16px 10px at 42% 85%, #000 66%, transparent 74%),
        radial-gradient(24px 12px at 56% 92%, #000 66%, transparent 74%),
        radial-gradient(18px 10px at 70% 86%, #000 66%, transparent 74%),
        radial-gradient(22px 12px at 82% 92%, #000 66%, transparent 74%),
        radial-gradient(16px 10px at 94% 85%, #000 66%, transparent 74%),
        linear-gradient(#000, #000);
    -webkit-mask-composite: source-over;
    mask-image:
        radial-gradient(14px 9px at 6% 90%, #000 68%, transparent 74%),
        radial-gradient(18px 10px at 18% 86%, #000 66%, transparent 74%),
        radial-gradient(22px 12px at 30% 92%, #000 66%, transparent 74%),
        radial-gradient(16px 10px at 42% 85%, #000 66%, transparent 74%),
        radial-gradient(24px 12px at 56% 92%, #000 66%, transparent 74%),
        radial-gradient(18px 10px at 70% 86%, #000 66%, transparent 74%),
        radial-gradient(22px 12px at 82% 92%, #000 66%, transparent 74%),
        radial-gradient(16px 10px at 94% 85%, #000 66%, transparent 74%),
        linear-gradient(#000, #000);
}

.ps-frost-footer{ position: relative; }
.ps-frost-footer::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height: 22px;
    pointer-events:none;

    background:
        linear-gradient(to bottom, rgba(255,255,255,0.28), rgba(255,255,255,0.10) 55%, rgba(255,255,255,0)),

        radial-gradient(2px 2px at 12% 40%, rgba(255,255,255,0.22), transparent 60%),
        radial-gradient(2px 2px at 22% 55%, rgba(255,255,255,0.18), transparent 60%),
        radial-gradient(2px 2px at 38% 35%, rgba(255,255,255,0.20), transparent 60%),
        radial-gradient(2px 2px at 58% 50%, rgba(255,255,255,0.18), transparent 60%),
        radial-gradient(2px 2px at 74% 38%, rgba(255,255,255,0.20), transparent 60%),
        radial-gradient(2px 2px at 88% 55%, rgba(255,255,255,0.22), transparent 60%),

        radial-gradient(28px 16px at 10% 78%, rgba(255,255,255,0.30), transparent 74%),
        radial-gradient(34px 18px at 26% 50%, rgba(255,255,255,0.24), transparent 76%),
        radial-gradient(40px 18px at 44% 74%, rgba(255,255,255,0.28), transparent 76%),
        radial-gradient(30px 16px at 60% 48%, rgba(255,255,255,0.22), transparent 76%),
        radial-gradient(44px 20px at 78% 70%, rgba(255,255,255,0.28), transparent 76%),
        radial-gradient(28px 16px at 92% 52%, rgba(255,255,255,0.26), transparent 76%);

    box-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 -1px 0 rgba(92,185,255,0.08) inset,
        0 10px 30px rgba(255,255,255,0.02);

    opacity: 1;
    filter: blur(.14px) saturate(1.10);

    -webkit-mask-image:
        radial-gradient(26px 16px at 8% 100%, #000 66%, transparent 76%),
        radial-gradient(18px 22px at 16% 100%, #000 66%, transparent 76%),
        radial-gradient(30px 18px at 26% 100%, #000 66%, transparent 76%),
        radial-gradient(16px 26px at 36% 100%, #000 66%, transparent 76%),
        radial-gradient(34px 18px at 48% 100%, #000 66%, transparent 76%),
        radial-gradient(20px 24px at 60% 100%, #000 66%, transparent 76%),
        radial-gradient(36px 18px at 72% 100%, #000 66%, transparent 76%),
        radial-gradient(18px 26px at 84% 100%, #000 66%, transparent 76%),
        radial-gradient(30px 18px at 94% 100%, #000 66%, transparent 76%),
        linear-gradient(#000, #000);
    mask-image:
        radial-gradient(26px 16px at 8% 100%, #000 66%, transparent 76%),
        radial-gradient(18px 22px at 16% 100%, #000 66%, transparent 76%),
        radial-gradient(30px 18px at 26% 100%, #000 66%, transparent 76%),
        radial-gradient(16px 26px at 36% 100%, #000 66%, transparent 76%),
        radial-gradient(34px 18px at 48% 100%, #000 66%, transparent 76%),
        radial-gradient(20px 24px at 60% 100%, #000 66%, transparent 76%),
        radial-gradient(36px 18px at 72% 100%, #000 66%, transparent 76%),
        radial-gradient(18px 26px at 84% 100%, #000 66%, transparent 76%),
        radial-gradient(30px 18px at 94% 100%, #000 66%, transparent 76%),
        linear-gradient(#000, #000);
}

@supports not ((-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000))) {
    .ps-frost::before, .ps-frost-footer::before{ border-radius: 0 0 16px 16px; }
}

.ps-particle {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: screen;
    opacity: 0.9;
    animation: psFloat 22s ease-in-out infinite;
}

@keyframes psFloat {
    0%   { transform: translateY(0px) translateX(0px) scale(1); }
    50%  { transform: translateY(-35px) translateX(25px) scale(1.15); }
    100% { transform: translateY(0px) translateX(0px) scale(1); }
}