/* Snowfall effect for entire site
Usage:
1) Include this stylesheet on every page:
2) Add a container element near the end of :
3) (Recommended) Use the small JS snippet below to generate randomized flakes.
JS (paste into your page or in a site-wide script file):
------------------------------------------------------
//
Notes:
- The CSS alone can style flakes; the JS dynamically creates many flakes with randomized
properties (size, left position, fall duration, drift and opacity) so the effect looks
natural and different on each page view.
- `pointer-events: none` ensures the snow doesn't block UI interaction.
*/
.snow-container{
position:fixed;
inset:0; /* top:0; right:0; bottom:0; left:0 */
pointer-events:none;
z-index:9999; /* keep on top; adjust if necessary */
overflow:hidden;
}
.snowflake{
--left: 50%;
--size: 16px;
--duration: 12s;
--delay: 0s;
--opacity: 0.9;
--drift: 80px;
position:absolute;
left:var(--left);
top:-10vh; /* start slightly above viewport */
font-family: serif; /* some flakes look nicer in serif */
font-size:var(--size);
line-height:1;
color: #ffffff;
opacity:var(--opacity);
transform: translateX(0) translateY(0) rotate(0deg);
will-change: transform, opacity;
text-shadow: 0 0 6px rgba(255,255,255,0.6), 0 1px 0 rgba(0,0,0,0.05);
filter: drop-shadow(0 0 2px rgba(255,255,255,0.12));
animation: snow-fall var(--duration) linear var(--delay) infinite;
-webkit-font-smoothing: antialiased;
}
/* Make some flakes feel slower or faster by staggering animation-timing-function slightly */
.snowflake:nth-child(4n){ animation-timing-function: cubic-bezier(.2,.6,.3,1); }
.snowflake:nth-child(4n+1){ animation-timing-function: linear; }
.snowflake:nth-child(4n+2){ animation-timing-function: cubic-bezier(.3,.5,.2,1); }
.nowflake:nth-child(4n+3){ animation-timing-function: ease-in-out; }
@keyframes snow-fall{
0%{
transform: translateX(0) translateY(-12vh) rotate(0deg) scale(1);
opacity: var(--opacity);
}
10%{ opacity: calc(var(--opacity) * 0.95); }
50%{
transform: translateX(calc(var(--drift) * 0.5)) translateY(45vh) rotate(180deg) scale(1.02);
opacity: calc(var(--opacity) * 0.9);
}
100%{
transform: translateX(var(--drift)) translateY(110vh) rotate(360deg) scale(0.98);
opacity: 0.9; /* keep faintly visible as it leaves */
}
}
/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
.snowflake{ animation: none; opacity: 0.6; }
}
/* Reduce visual noise on small screens */
@media (max-width: 480px){
.snowflake{ --size: calc(var(--size) * 0.9); }
}