/* New Year decoration. Loaded only while the owner has it switched on; it never changes theme colours. */
.ny-garland,.ny-snow{position:fixed;pointer-events:none;user-select:none}
.ny-garland{left:0;right:0;top:0;height:14px;z-index:60;contain:strict}
.ny-garland:before,.ny-garland:after,.ny-garland i{content:'';position:absolute;inset:0;background-repeat:repeat-x;background-size:78px 14px}
.ny-garland{background:linear-gradient(#0000 0,#0000 5px,#0000005c 5px,#0000005c 6px,#0000 6px) repeat-x}
.ny-garland i:nth-child(1){background-image:radial-gradient(circle at 9px 8px,#ff5a5f 0 3.2px,#ff5a5f55 3.6px 6px,#0000 6.5px)}
.ny-garland i:nth-child(2){background-image:radial-gradient(circle at 9px 8px,#ffd166 0 3.2px,#ffd16655 3.6px 6px,#0000 6.5px);background-position:26px 0}
.ny-garland:before{background-image:radial-gradient(circle at 9px 8px,#4cd7a1 0 3.2px,#4cd7a155 3.6px 6px,#0000 6.5px);background-position:52px 0}
.ny-garland:after{background-image:radial-gradient(circle at 9px 8px,#6fb8ff 0 3.2px,#6fb8ff55 3.6px 6px,#0000 6.5px);background-position:13px 0;opacity:.85}
.ny-snow{inset:0;width:100%;height:100%;z-index:50}
@media(prefers-reduced-motion:no-preference){
 :root:not([data-lite=true]) .ny-garland i:nth-child(1){animation:ny-blink 2.6s ease-in-out infinite}
 :root:not([data-lite=true]) .ny-garland i:nth-child(2){animation:ny-blink 2.6s ease-in-out -.9s infinite}
 :root:not([data-lite=true]) .ny-garland:before{animation:ny-blink 2.6s ease-in-out -1.7s infinite}
}
@keyframes ny-blink{0%,100%{opacity:1}50%{opacity:.35}}
:root[data-lite=true] .ny-snow,:root[data-background-motion=off] .ny-snow{display:none}
@media(prefers-reduced-motion:reduce){.ny-snow{display:none}}
@media(max-width:800px){.ny-garland{height:12px;background-size:64px 12px}.ny-garland:before,.ny-garland:after,.ny-garland i{background-size:64px 12px}}
@media print{.ny-garland,.ny-snow{display:none}}

/* Home screen: the New Year banner replaces the usual one for everyone while the decoration is on. */
html[data-new-year=on]:not([data-ny-hero=off]) .hero-image{content:url('/assets/fall-banner-ny6.webp')}
@media(max-width:800px){html[data-new-year=on]:not([data-ny-hero=off]) .hero-image{content:url('/assets/fall-banner-mobile-ny6.webp')}}
