/* Decorative, click-through Christmas frame; no changes to content layout. */
.cs-festival--christmas { position:fixed; inset:0; z-index:20; overflow:hidden; pointer-events:none; user-select:none; contain:strict; }
.cs-festival--christmas, .cs-festival--christmas * { pointer-events:none !important; box-sizing:border-box; }
.cs-christmas__lights { position:absolute; inset:0 0 auto; height:54px; background:url('../assets/christmas-lights.svg') repeat-x center top / 360px 54px; }
.cs-christmas__edge { position:absolute; top:54px; bottom:0; width:20px; opacity:.65; background:url('../assets/snowflake.svg') repeat-y center top / 17px 150px; }
.cs-christmas__edge--left { left:3px; }
.cs-christmas__edge--right { right:3px; }
.cs-christmas__snow { position:absolute; top:48px; width:19px; height:19px; opacity:.7; background:url('../assets/snowflake.svg') center / contain no-repeat; }
.cs-christmas__snow--1 { left:2.0%; top:62px; width:15px; height:15px; }
.cs-christmas__snow--2 { left:10.4%; top:76px; width:18px; height:18px; }
.cs-christmas__snow--3 { left:18.8%; top:48px; width:21px; height:21px; }
.cs-christmas__snow--4 { left:27.2%; top:62px; width:12px; height:12px; }
.cs-christmas__snow--5 { left:35.6%; top:76px; width:15px; height:15px; }
.cs-christmas__snow--6 { left:44.0%; top:48px; width:18px; height:18px; }
.cs-christmas__snow--7 { left:52.4%; top:62px; width:21px; height:21px; }
.cs-christmas__snow--8 { left:60.8%; top:76px; width:12px; height:12px; }
.cs-christmas__snow--9 { left:69.2%; top:48px; width:15px; height:15px; }
.cs-christmas__snow--10 { left:77.6%; top:62px; width:18px; height:18px; }
.cs-christmas__snow--11 { left:86.0%; top:76px; width:21px; height:21px; }
.cs-christmas__snow--12 { left:94.4%; top:48px; width:12px; height:12px; }
/* A welcome animation settles within five seconds, without a persistent distraction. */
@media (prefers-reduced-motion:no-preference) {
  .cs-festival--christmas:not(.cs-festival--still) .cs-christmas__lights { animation:cs-christmas-twinkle 1.6s ease-in-out 3; }
  .cs-festival--christmas:not(.cs-festival--still) .cs-christmas__snow { animation:cs-christmas-snowfall 4.8s ease-out 1; }
  .cs-festival--christmas:not(.cs-festival--still) .cs-christmas__snow:nth-child(even) { animation-name:cs-christmas-snowfall-reverse; }
}
@keyframes cs-christmas-twinkle { 0%,100% { opacity:1; } 50% { opacity:.5; } }
@keyframes cs-christmas-snowfall { from { transform:translate(-12px,-100px) rotate(-50deg); opacity:0; } 25% { opacity:.85; } to { transform:translate(0,0) rotate(0); opacity:.7; } }
@keyframes cs-christmas-snowfall-reverse { from { transform:translate(16px,-140px) rotate(70deg); opacity:0; } 30% { opacity:.85; } to { transform:translate(0,0) rotate(0); opacity:.7; } }
@media (max-width:600px) {
  .cs-christmas__lights { height:36px; background-size:240px 36px; }
  .cs-christmas__edge { top:36px; width:12px; background-size:10px 160px; }
  .cs-christmas__edge--left { left:0; } .cs-christmas__edge--right { right:0; }
  .cs-christmas__snow { top:38px; width:11px; height:11px; }
  .cs-christmas__snow:nth-child(even) { display:none; }
}
@media (forced-colors:active), print { .cs-festival--christmas { display:none; } }