/* ============================================================
   snow.css — seasonal Christmas module
   Enable with `snow: true` in assets/js/site.js (default: on).
   The layer is inert until <html data-snow="on"> is set.
   ============================================================ */

:root {
    --snowflake: #ffffff;
}

:root.light {
    --snowflake: #7e7e87;
}

.snow {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

html[data-snow="on"] .snow {
    display: block;
}

/* Each flake is an emoji that drifts down with a gentle wind sway. */
.snow span {
    position: absolute;
    top: -8vh;
    left: var(--x, 50%);
    font-size: var(--s, 14px);
    color: var(--snowflake);
    text-shadow: 0 0 10px rgb(255 255 255 / 0.5);
    opacity: var(--o, 0.7);
    pointer-events: none;
    animation:
        snow-fall var(--d, 14s) linear var(--delay, 0s) infinite;
}

.snow span::before {
    content: var(--snow-emoji, "❄");
    display: block;
    text-align: center;
}

/* Individual flakes: different size, speed, start delay, drift path. */
.snow span:nth-child(1)  { --x: 4%;  --s: 12px; --o: 0.55; --d: 16s; --delay: -2s;  --dx1: -14px; --dx2: 18px;  --drift: 26px;  --snow-emoji: "❄️"; }
.snow span:nth-child(2)  { --x: 10%; --s: 16px; --o: 0.8;  --d: 12s; --delay: -7s;  --dx1: 22px;  --dx2: -16px; --drift: -22px; --snow-emoji: "❅"; }
.snow span:nth-child(3)  { --x: 16%; --s: 10px; --o: 0.5;  --d: 19s; --delay: -1s;  --dx1: -10px; --dx2: 12px;  --drift: 14px;  --snow-emoji: "❆"; }
.snow span:nth-child(4)  { --x: 22%; --s: 14px; --o: 0.85; --d: 14s; --delay: -9s;  --dx1: 18px;  --dx2: -20px; --drift: -30px; --snow-emoji: "❉"; }
.snow span:nth-child(5)  { --x: 28%; --s: 11px; --o: 0.6;  --d: 17s; --delay: -4s;  --dx1: -16px; --dx2: 14px;  --drift: 36px;  --snow-emoji: "❅"; }
.snow span:nth-child(6)  { --x: 34%; --s: 9px;  --o: 0.45; --d: 21s; --delay: -12s; --dx1: 12px;  --dx2: -8px;  --drift: -18px; --snow-emoji: "❄️"; }
.snow span:nth-child(7)  { --x: 40%; --s: 15px; --o: 0.8;  --d: 11s; --delay: 0s;    --dx1: -20px; --dx2: 24px;  --drift: 24px;  --snow-emoji: "❆"; }
.snow span:nth-child(8)  { --x: 46%; --s: 12px; --o: 0.65; --d: 15s; --delay: -6s;  --dx1: 16px;  --dx2: -12px; --drift: -12px; --snow-emoji: "❅"; }
.snow span:nth-child(9)  { --x: 52%; --s: 14px; --o: 0.75; --d: 13s; --delay: -8s;  --dx1: -12px; --dx2: 16px;  --drift: 30px;  --snow-emoji: "❉"; }
.snow span:nth-child(10) { --x: 58%; --s: 10px; --o: 0.5;  --d: 19s; --delay: -3s;  --dx1: 14px;  --dx2: -18px; --drift: -26px; --snow-emoji: "❄️"; }
.snow span:nth-child(11) { --x: 64%; --s: 16px; --o: 0.9;  --d: 10s; --delay: -1s;  --dx1: -18px; --dx2: 20px;  --drift: 16px;  --snow-emoji: "❅"; }
.snow span:nth-child(12) { --x: 70%; --s: 11px; --o: 0.55; --d: 17s; --delay: -10s; --dx1: 20px;  --dx2: -14px; --drift: -34px; --snow-emoji: "❆"; }
.snow span:nth-child(13) { --x: 76%; --s: 13px; --o: 0.7;  --d: 14s; --delay: -5s;  --dx1: -14px; --dx2: 10px;  --drift: 22px;  --snow-emoji: "❉"; }
.snow span:nth-child(14) { --x: 82%; --s: 9px;  --o: 0.4;  --d: 22s; --delay: -14s; --dx1: 8px;   --dx2: -10px; --drift: -16px; --snow-emoji: "❄️"; }
.snow span:nth-child(15) { --x: 88%; --s: 15px; --o: 0.85; --d: 12s; --delay: -7s;  --dx1: -16px; --dx2: 22px;  --drift: 34px;  --snow-emoji: "❅"; }
.snow span:nth-child(16) { --x: 94%; --s: 12px; --o: 0.6;  --d: 18s; --delay: -2s;  --dx1: 10px;  --dx2: -16px; --drift: -28px; --snow-emoji: "❄️"; }

@keyframes snow-fall {
    0%   { transform: translate3d(0, -8vh, 0); }
    33%  { transform: translate3d(var(--dx1, -14px), 33vh, 0); }
    66%  { transform: translate3d(var(--dx2, 18px), 66vh, 0); }
    100% { transform: translate3d(var(--drift, 30px), 110vh, 0); }
}

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

/* Mobile: fewer, smaller flakes so they don't clump on narrow screens. */
@media (max-width: 400px) {
    .snow span {
        font-size: var(--s-mobile, 9px) !important;
        opacity: 0.45 !important;
    }

    .snow span:nth-child(even) {
        display: none !important;
    }

    .snow span:nth-child(1)  { --drift: 14px;  }
    .snow span:nth-child(2)  { --drift: -14px; }
    .snow span:nth-child(3)  { --drift: 10px;  }
    .snow span:nth-child(4)  { --drift: -12px; }
    .snow span:nth-child(5)  { --drift: 18px;  }
    .snow span:nth-child(6)  { --drift: -10px; }
    .snow span:nth-child(7)  { --drift: 14px;  }
    .snow span:nth-child(8)  { --drift: -8px;  }
}