/*
 * The holiday themes (shared/utils/holidays.ts): only loaded while one shows,
 * by the website (app/layouts/default.vue) and by CDB's pages in the
 * website's look. Small and quiet: decoration, not clickable, hidden from
 * screen readers; standing still without motion (prefers-reduced-motion).
 *
 * .bata-holiday-garland--<holiday>: along the orange waves under the menu bar
 *   (.waves-bottom): one wave is 7rem wide, shifted 3.5rem, as their mask; the
 *   pictures come from scripts/holiday-svgs.mjs.
 * .bata-holiday-sky--<holiday>: in a dark banner, <i> with --x, --y (where),
 *   --d (delay), --t (duration) and --s (size).
 */

.bata-holiday-garland {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(7rem * 760 / 1920);
  background-repeat: repeat-x;
  background-size: 7rem auto;
  background-position: 3.5rem 0;
  pointer-events: none;
}

.bata-holiday-garland--kerst { background-image: url("garland-kerst.svg"); }
.bata-holiday-garland--pasen { background-image: url("garland-pasen.svg"); }
.bata-holiday-garland--koningsdag { background-image: url("garland-koningsdag.svg"); }

/* Christmas lights glow softly, one after another */
@media (prefers-reduced-motion: no-preference) {
  .bata-holiday-garland--kerst {
    animation: bata-holiday-glow 4s ease-in-out infinite alternate;
  }
}

@keyframes bata-holiday-glow {
  from { filter: brightness(0.9) saturate(0.9); }
  to { filter: brightness(1.15) saturate(1.1); }
}

.bata-holiday-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bata-holiday-sky i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
}

/* Christmas: light snow */
.bata-holiday-sky--kerst i {
  width: calc(7px * var(--s));
  height: calc(7px * var(--s));
  border-radius: 50%;
  background: #fff;
  opacity: 0.7;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

/* Sinterklaas: a few pepernoten (pepernoot.svg: round, matte, with pores) */
.bata-holiday-sky--sinterklaas i {
  width: calc(20px * var(--s));
  height: calc(18px * var(--s));
  background: url("pepernoot.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* New Year: a few fireworks, on the right where there is no text */
.bata-holiday-sky--oudnieuw i {
  left: calc(45% + var(--x) * 0.5);
  top: calc(var(--y) * 0.8);
  width: calc(170px * var(--s));
  height: calc(170px * var(--s));
  -webkit-mask: url("firework.svg") center / contain no-repeat;
  mask: url("firework.svg") center / contain no-repeat;
  background: #ffd23f;
  opacity: 0.5;
}

.bata-holiday-sky--oudnieuw i:nth-child(4n + 2) { background: #0cc6de; }
.bata-holiday-sky--oudnieuw i:nth-child(4n + 3) { background: #ff8849; }
.bata-holiday-sky--oudnieuw i:nth-child(4n + 4) { background: #ffffff; }

@media (prefers-reduced-motion: no-preference) {
  .bata-holiday-sky--kerst i,
  .bata-holiday-sky--sinterklaas i {
    top: -5%;
    animation: bata-holiday-fall var(--t) linear infinite, bata-holiday-sway 3.5s ease-in-out infinite alternate;
    animation-delay: calc(var(--d) * -2), calc(var(--d) * -1);
  }

  .bata-holiday-sky--sinterklaas i {
    animation-name: bata-holiday-fall, bata-holiday-tumble;
    animation-duration: calc(var(--t) * 0.8), 4s;
    animation-timing-function: linear, linear;
    animation-direction: normal, normal;
  }

  .bata-holiday-sky--oudnieuw i {
    opacity: 0;
    animation: bata-holiday-burst 5s ease-out infinite;
    animation-delay: calc(var(--d) * -0.6);
  }
}

@keyframes bata-holiday-fall {
  from { top: -5%; }
  to { top: 105%; }
}

@keyframes bata-holiday-sway {
  from { transform: translateX(-12px); }
  to { transform: translateX(12px); }
}

@keyframes bata-holiday-tumble {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bata-holiday-burst {
  0% { opacity: 0; transform: scale(0.3); }
  12% { opacity: 0.95; }
  45% { opacity: 0.75; transform: scale(1); }
  65%, 100% { opacity: 0; transform: scale(1.05); }
}

/* Fewer on phones */
@media (max-width: 767.98px) {
  .bata-holiday-sky--kerst i:nth-child(n + 13),
  .bata-holiday-sky--sinterklaas i:nth-child(n + 8),
  .bata-holiday-sky--oudnieuw i:nth-child(n + 3) {
    display: none;
  }
}