.nyd-container{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
pointer-events:none;
z-index:0;
overflow:hidden;
}
.nyd-confetti{
position:absolute;
width:10px;
height:20px;
animation:nyd-fall linear infinite;
}
.nyd-confetti.shape-rect{
border-radius:2px;
}
.nyd-confetti.shape-circle{
border-radius:50%;
width:12px;
height:12px;
}
.nyd-confetti.shape-star{
background:transparent !important;
width:auto;
height:auto;
font-size:16px;
}
@keyframes nyd-fall{
0%{
transform:translateY(-5vh) rotate(0deg);
opacity:1;
}
100%{
transform:translateY(105vh) rotate(720deg);
opacity:0;
}
}
.nyd-year{
position:absolute;
font-family:'Dosis',sans-serif;
font-weight:700;
color:var(--cl1);
opacity:0;
user-select:none;
pointer-events:none;
animation:nyd-rise linear infinite;
text-shadow:0 0 10px var(--sh2);
}
.nyd-year.style-outline{
color:transparent;
-webkit-text-stroke:1px var(--cl1);
text-shadow:none;
}
.nyd-year.style-glow{
text-shadow:0 0 20px var(--shd),0 0 40px var(--sh2),0 0 60px var(--sh2);
}
@keyframes nyd-rise{
0%{
transform:translateY(0) rotate(0deg) scale(0.5);
opacity:0;
}
10%{
opacity:0.7;
transform:translateY(-10vh) rotate(calc(var(--nyd-rot,5deg) * 0.3)) scale(0.7);
}
30%{
opacity:0.8;
}
50%{
opacity:0.6;
transform:translateY(-50vh) rotate(var(--nyd-rot,5deg)) scale(0.9);
}
80%{
opacity:0.3;
}
100%{
transform:translateY(-120vh) rotate(calc(var(--nyd-rot,5deg) * 1.5)) scale(1.1);
opacity:0;
}
}
@keyframes nyd-rise-left{
0%{
transform:translate(0,0) rotate(0deg) scale(0.5);
opacity:0;
}
10%{
opacity:0.7;
}
50%{
opacity:0.6;
}
100%{
transform:translate(-20vw,-120vh) rotate(-15deg) scale(1.1);
opacity:0;
}
}
@keyframes nyd-rise-right{
0%{
transform:translate(0,0) rotate(0deg) scale(0.5);
opacity:0;
}
10%{
opacity:0.7;
}
50%{
opacity:0.6;
}
100%{
transform:translate(20vw,-120vh) rotate(15deg) scale(1.1);
opacity:0;
}
}
.nyd-year.drift-left{
animation-name:nyd-rise-left;
}
.nyd-year.drift-right{
animation-name:nyd-rise-right;
}
@media(prefers-reduced-motion:reduce){
.nyd-confetti{
animation:none;
opacity:0.3;
}
.nyd-year{
animation:none;
opacity:0.15;
}
}