@charset "UTF-8";
/* Christmas overlay with individual drifting snowflakes above lasers
   - Fullscreen fixed layer
   - Pointer-events: none (does not block clicks)
   - Disabled on small screens and when prefers-reduced-motion is set
*/

#xmasOverlay {
  position: fixed;
  inset: 0;
  z-index: 9500; /* Above #laser_container (9000) */
  pointer-events: none;
  overflow: hidden;
}

/* Canvas fills the overlay; actual drawing is done in JS */
#xmasCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.snowflake {
  position: absolute;
  top: -10vh;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  opacity: 0.9;
  will-change: transform;
  --x-drift: 0px; /* per-flake override from JS */
  animation-name: xmasSnowDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes xmasSnowDrift {
  0% {
    transform: translate3d(0, -10vh, 0);
  }
  25% {
    transform: translate3d(calc(var(--x-drift) * 0.4), 25vh, 0);
  }
  50% {
    transform: translate3d(calc(var(--x-drift) * -0.2), 55vh, 0);
  }
  75% {
    transform: translate3d(calc(var(--x-drift) * 0.9), 80vh, 0);
  }
  100% {
    transform: translate3d(calc(var(--x-drift) * -0.2), 110vh, 0);
  }
}

/* Respect prefers-reduced-motion (independent of device size) */
@media (prefers-reduced-motion: reduce) {
  #xmasOverlay {
    display: none;
  }
}

/* Sneeuwkap op de speler zelf: vaste heuvel direct op de bovenrand van de speler
  Alleen binnen de Music-view, zodat Home hier geen last van heeft.
*/
body.snow-active #musicView #audioContainer::before {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: -33px; /* 3px hoger voor wat meer ruimte tot de controls */
  height: 42px; /* dikker sneeuwdek op de speler */
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.98),
    rgba(230,230,255,0.78));
  -webkit-clip-path: polygon(
    0% 86%,   /* links laag */
    8% 74%,
    18% 64%,
    30% 54%,
    42% 60%,
    54% 46%,  /* hoogste bult iets links van midden */
    66% 54%,
    78% 64%,
    90% 74%,
    100% 86%,
    96% 96%,
    88% 100%,
    78% 94%,
    68% 100%,
    56% 94%,
    46% 100%,
    34% 94%,
    22% 100%,
    10% 94%,
    0% 90%,
    0% 100%
  );
  clip-path: polygon(
    0% 86%,
    8% 74%,
    18% 64%,
    30% 54%,
    42% 60%,
    54% 46%,
    66% 54%,
    78% 64%,
    90% 74%,
    100% 86%,
    96% 96%,
    88% 100%,
    78% 94%,
    68% 100%,
    56% 94%,
    46% 100%,
    34% 94%,
    22% 100%,
    10% 94%,
    0% 90%,
    0% 100%
  );
  border-radius: 18px 18px 0 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 1; /* boven de speler-achtergrond, maar onder de controls zelf */
}

/* Sneeuwophoping bovenop de lopende-tekstbalk (footer): alleen als sneeuw actief is */
body.snow-active .footer-bar {
  /* behoud position: fixed uit main-mp3player.css, alleen overflow aanpassen */
  overflow: visible; /* zorg dat de sneeuwrand boven de balk kan uitsteken */
}

body.snow-active .footer-bar::before {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: -104.5px; /* 15px hoger, zodat het pak naar boven groeit */
  height: 111px; /* 15px extra dikte naar boven */
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.98),
    rgba(230,230,255,0.78));
  -webkit-clip-path: polygon(
    0% 80%,   /* linker zijkant laag */
    4% 68%,
    10% 60%,
    18% 52%,
    26% 58%,
    34% 72%,
    42% 64%,
    50% 46%,  /* hoogste bult in het midden */
    58% 60%,
    66% 72%,
    74% 62%,
    82% 54%,
    90% 62%,
    96% 74%,
    100% 84%,
    96% 96%,
    88% 100%,
    80% 94%,
    70% 100%,
    60% 94%,
    50% 100%,
    40% 94%,
    30% 100%,
    20% 94%,
    10% 100%,
    0% 92%,
    0% 100%
  );
  clip-path: polygon(
    0% 80%,
    4% 68%,
    10% 60%,
    18% 52%,
    26% 58%,
    34% 72%,
    42% 64%,
    50% 46%,
    58% 60%,
    66% 72%,
    74% 62%,
    82% 54%,
    90% 62%,
    96% 74%,
    100% 84%,
    96% 96%,
    88% 100%,
    80% 94%,
    70% 100%,
    60% 94%,
    50% 100%,
    40% 94%,
    30% 100%,
    20% 94%,
    10% 100%,
    0% 92%,
    0% 100%
  );
  border-radius: 20px 20px 0 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 1;
}