.sjse-overlay {
  position: fixed;
  z-index: 9998;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.5s ease;
}

.sjse-overlay--fading {
  opacity: 0;
}

.sjse-particle {
  position: absolute;
  top: -24px;
  display: block;
  animation: sjse-fall var(--fall-duration) linear var(--fall-delay) infinite;
  will-change: transform;
}

.sjse-snowflake {
  background: #fff;
  -webkit-mask: url("snowflake.svg") center / contain no-repeat;
  mask: url("snowflake.svg") center / contain no-repeat;
}

.sjse-leaf {
  width: var(--leaf-size);
  height: var(--leaf-size);
  background: linear-gradient(145deg, #f3c75e 0%, var(--leaf-color) 47%, #783c26 100%);
  -webkit-mask: url("maple-leaf.svg") center / contain no-repeat;
  mask: url("maple-leaf.svg") center / contain no-repeat;
}

.sjse-poppy {
  width: var(--poppy-size);
  height: var(--poppy-size);
  background: url("remembrance-poppy.svg") center / contain no-repeat;
}

.sjse-blossom {
  width: var(--blossom-size);
  height: var(--blossom-size);
  filter: drop-shadow(0 1px 2px rgba(89, 72, 75, .12));
}

.sjse-blossom svg,
.sjse-star svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sjse-blossom ellipse {
  fill: var(--blossom-color);
}

.sjse-blossom-center {
  fill: #e6bb68;
}

.sjse-star {
  width: var(--star-size);
  height: var(--star-size);
  filter: drop-shadow(0 0 6px rgba(248, 219, 148, .48));
}

.sjse-star path {
  fill: #f5df9e;
}

.sjse-star-glint {
  fill: #fffdf5;
}

.sjse-firework {
  position: absolute;
  left: var(--firework-x);
  top: var(--firework-y);
  width: 1px;
  height: 1px;
  animation: sjse-firework-glow 8.4s ease-out var(--firework-delay) infinite;
}

.sjse-firework::before {
  position: absolute;
  top: -70px;
  left: -70px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(18, 40, 48, .2), rgba(18, 40, 48, .08) 38%, transparent 72%),
    radial-gradient(circle, rgba(255, 193, 91, .24), transparent 68%);
  content: "";
  pointer-events: none;
}

.sjse-firework-spark {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 24px;
  border-radius: 99px;
  background: var(--spark-color);
  box-shadow: 0 0 2px #fff, 0 0 9px var(--spark-color), 0 1px 2px rgba(18, 40, 48, .6);
  opacity: 0;
  animation: sjse-firework-burst 8.4s ease-out calc(var(--firework-delay) + var(--spark-delay)) infinite;
}

@keyframes sjse-firework-glow {
  0%, 16%, 50%, 100% {
    opacity: 0;
    transform: scale(.2);
  }
  19%, 25% {
    opacity: .9;
    transform: scale(1);
  }
  38% {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes sjse-firework-burst {
  0%, 17% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateY(0) scale(.35);
  }
  19% {
    opacity: 1;
  }
  38% {
    opacity: 1;
    transform: rotate(var(--spark-angle)) translateY(var(--spark-distance)) scale(1);
  }
  70% {
    opacity: .85;
    transform: rotate(var(--spark-angle)) translateY(calc(var(--spark-distance) * 1.15)) scale(.9);
  }
  86%, 100% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateY(calc(var(--spark-distance) * 1.35)) scale(.6);
  }
}

@keyframes sjse-fall {
  0% {
    transform: translate3d(0, -5vh, 0) rotate(0);
  }
  100% {
    transform: translate3d(var(--fall-drift), 110vh, 0) rotate(var(--fall-spin));
  }
}

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