/* Seasonal footer + full-page effects overlay */

#app-layers .layer-footer-seasonal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

#seasonal-footer-wrapper {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

#seasonal-footer-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Full-page overlay for all effects */
#seasonal-footer-effects {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
}

/* Common sprite base */
.seasonal-snowflake,
.seasonal-lantern,
.seasonal-heart,
.seasonal-ghost,
.seasonal-firework {
  position: absolute;
  opacity: 0.9;
}

/* Snow: fall from well above top to well below bottom of viewport */
.seasonal-snowflake {
  top: -20vh;
  animation-name: seasonal-snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes seasonal-snow-fall {
  0% {
    top: -20vh;
  }
  100% {
    top: 120vh;
  }
}

/* Lanterns & hearts: rise from well below bottom to well above top */
.seasonal-lantern,
.seasonal-heart {
  bottom: -20vh;
  animation-name: seasonal-float-up;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes seasonal-float-up {
  0% {
    bottom: -20vh;
    transform: scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    bottom: 120vh;
    transform: scale(1.1);
    opacity: 0;
  }
}

/* Ghosts: drift horizontally across mid-height (already full width) */
.seasonal-ghost {
  top: 20vh;
  animation-name: seasonal-ghost-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes seasonal-ghost-drift {
  0% {
    transform: translate3d(-30vw, 0, 0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate3d(130vw, 0, 0);
    opacity: 0;
  }
}

/* Fireworks: launch from below bottom up past the top */
.seasonal-firework {
  bottom: -10vh;
  transform-origin: center bottom;
  animation-name: seasonal-firework-burst;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes seasonal-firework-burst {
  0% {
    bottom: -10vh;
    transform: scale(0.2);
    opacity: 0;
  }
  30% {
    bottom: 40vh;
    transform: scale(1);
    opacity: 1;
  }
  100% {
    bottom: 110vh;
    transform: scale(0.7);
    opacity: 0;
  }
}