/* Seasonal overlay only. Does not restyle site components. */

.da-season {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.da-season span {
  position: absolute;
  top: -12%;
  left: var(--x, 10%);
  font-size: var(--s, 1.2rem);
  line-height: 1;
  opacity: 0.9;
  animation: da-season-fall var(--dur, 16s) linear var(--d, 0s) infinite;
  will-change: transform;
  user-select: none;
}

.da-season-memorial span {
  animation-name: da-season-flag;
}

.da-season-halloween span {
  animation-name: da-season-bat;
}

@keyframes da-season-fall {
  0% {
    transform: translate3d(0, -8vh, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(var(--drift, 16px), 112vh, 0) rotate(220deg);
  }
}

@keyframes da-season-flag {
  0% {
    transform: translate3d(0, -8vh, 0) rotate(-8deg);
  }
  50% {
    transform: translate3d(var(--drift, 20px), 52vh, 0) rotate(8deg);
  }
  100% {
    transform: translate3d(0, 112vh, 0) rotate(-8deg);
  }
}

@keyframes da-season-bat {
  0% {
    transform: translate3d(-8vw, -6vh, 0);
  }
  50% {
    transform: translate3d(var(--drift, 40px), 48vh, 0);
  }
  100% {
    transform: translate3d(calc(var(--drift, 40px) * -0.4), 112vh, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .da-season {
    display: none;
  }
}