/* Christmas season (app/occasions.py, 1 November to 26 December): the same paper-and-ink site, coloured in with
   Christmas red. Every page: red crayon buttons and a red logo (base.html picks logo-weihnachten.svg). Start page:
   every yellow crayon fill turns red, a bauble on the slider, and the decorations from weihnachten.js: a paper star
   dangling over the picture, snowflakes drifting down once per visit. */

.weihnachten .btn-crayon { --fill: var(--xmas); }
.home.weihnachten { --sun: var(--xmas); }
.home.weihnachten .compare-handle::after { background-image: url("/static/img/kugel.svg"); background-size: 31px 31px; }

/* a paper star hangs on a thread over the top corner of the picture and sways a little */
.xm-star {
  position: absolute; right: 26px; top: -40px; z-index: 3; width: 40px; height: 84px;
  transform-origin: 50% 0; animation: xm-sway 3.4s ease-in-out infinite alternate;
}
.xm-star::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 34px; border-left: 1.5px solid var(--ink); }
.xm-star img { position: absolute; left: 0; bottom: 0; width: 40px; height: 40px; }
@keyframes xm-sway {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}
/* on a phone the headline is right above the picture: a short thread, so it stays clear of the letters */
@media (max-width: 899px) {
  .xm-star { top: -10px; height: 54px; }
}

/* snowflakes drift down once per visit, in front of everything but never in the way of a tap. Light pencil lines, so
   the text stays easy to read while they drift past */
.xm-snow { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.xm-flake { position: absolute; top: -48px; width: var(--s, 30px); opacity: .45; animation: xm-fall var(--d, 7s) linear var(--w, 0s) both; }
.xm-flake svg { display: block; width: 100%; height: auto; }
@keyframes xm-fall {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--dx, 20px), calc(100vh + 96px)) rotate(150deg); }
}

@media (prefers-reduced-motion: reduce) {
  .xm-star { animation: none; }
}