.ahe-overlay {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
}

.ahe-particle {
  position: absolute;
  top: -90px;
  left: var(--ahe-left);
  width: var(--ahe-size);
  height: var(--ahe-size);
  opacity: var(--ahe-opacity);
  animation: ahe-fall var(--ahe-duration) linear var(--ahe-delay) infinite;
  will-change: transform;
}

.ahe-snowflake::before {
  content: '❄';
  display: block;
  color: #fff;
  font-size: var(--ahe-size);
  line-height: 1;
  text-shadow: 0 0 7px rgb(255 255 255 / 70%);
}

.ahe-ornament {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff 0 4%, var(--ahe-ornament) 18%, color-mix(in srgb, var(--ahe-ornament), #000 22%) 78%);
  box-shadow: 0 2px 7px rgb(0 0 0 / 30%), inset -2px -3px 4px rgb(0 0 0 / 20%);
}

.ahe-ornament::before {
  content: '';
  position: absolute;
  left: 35%;
  top: -18%;
  width: 30%;
  height: 22%;
  border: 1px solid #e8c875;
  border-radius: 2px 2px 0 0;
  background: #b98925;
}

.ahe-ghost::before,
.ahe-bat::before {
  display: block;
  font-size: var(--ahe-size);
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 28%));
}

.ahe-ghost::before { content: '👻'; }

.ahe-bat::before { content: '🦇'; }

.ahe-light-strand {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  width: 100%;
  height: 47px;
  padding: 0 8px;
  background: transparent;
}

.ahe-bulb {
  position: relative;
  display: block;
  width: 13px;
  height: 20px;
  margin-top: 6px;
  border-radius: 48% 48% 54% 54%;
  background: var(--ahe-color);
  box-shadow: 0 0 5px var(--ahe-color), 0 0 13px var(--ahe-color), 0 0 24px color-mix(in srgb, var(--ahe-color), transparent 35%);
  animation: ahe-twinkle var(--ahe-duration) ease-in-out var(--ahe-delay) infinite alternate;
}

.ahe-bulb::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 3px;
  width: 7px;
  height: 6px;
  border-radius: 2px 2px 0 0;
  background: #1f3224;
}

@keyframes ahe-fall {
  from { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  to { transform: translate3d(var(--ahe-drift), var(--ahe-drop, 120vh), 0) rotate(450deg); }
}

@keyframes ahe-twinkle {
  from { filter: brightness(.7); opacity: .6; transform: scale(.86); }
  to { filter: brightness(1.35); opacity: 1; transform: scale(1.12); }
}

@media (max-width: 700px) {
  .ahe-light-strand { height: 37px; }
  .ahe-bulb { width: 10px; height: 16px; }
}

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