/* Container for all falling elements */
#effects-animation-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999;
  pointer-events: none;
}

/* Styles for a falling element (leaf or snowflake) */
.falling-element {
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Seasonal elements */
.leaf {
  background-image: url("/assets/fall/leaf-b913677b.png");
  opacity: 0.6;
  z-index: -1000;
}
.snowflake {
  background-image: url("/assets/christmas/snowflake-52651192.png");
  opacity: 0.6;
  z-index: -1000;
}
.falling-skull {
  background-image: url("/assets/spooky/falling_skull-042d3b70.png");
  opacity: 0.6;
  z-index: -1000;
}
.spiderweb {
  width: 52px;
  height: 52px;
  position: absolute;
  right: 1px;
  top: 1px;
  background-image: url("/assets/spooky/spiderweb-421f0bdf.png");
  transform: scaleX(-1);
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px;
  vertical-align: middle;
  z-index: 0;
}
.witch-hat {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  left: -25px;
  top: -20px;
  background-image: url("/assets/spooky/witch_hat-3ef48f30.png");
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px;
  vertical-align: middle;
  z-index: 0;
}
.santa-hat {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  left: -28px;
  top: -15px;
  background-image: url("/assets/christmas/santa_hat-c79a89c3.png");
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px;
  vertical-align: middle;
  z-index: -1;
}

/* Jack-o-lantern candle light flicker effect */
.jackolantern {
  position: absolute;
  bottom: 120px;
  left: 16px;
  width: 64px;
  height: 64px;
  background-image: url("/assets/spooky/jackolantern-9591f787.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -700;
}
.candle-light {
  position: absolute;
  left: 28px;
  bottom: 126px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 212, 120, 0.8) 0%, rgba(255, 140, 0, 0.4) 60%, rgba(255, 140, 0, 0) 100%);
  z-index: -800;
  pointer-events: none;
}
.flicker {
  animation: candle-flicker 1.2s infinite;
}

.christmas-tree {
  position: absolute;
  bottom: 100px;
  right: 16px;
  width: 80px;
  height: 120px;
  background-image: url("/assets/christmas/christmas_tree-945f963b.png");
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  z-index: -700;
}

.snowman {
  position: absolute;
  bottom: 108px;
  left: 16px;
  width: 80px;
  height: 120px;
  background-image: url("/assets/christmas/snowman-d8e7bc2d.png");
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  z-index: -700;
}


.lights {
  flex: 1 1 auto;
  height: 32px;
  background-image: url("/assets/christmas/tile_christmas_lights-8b6fddb4.png");
  pointer-events: none;
  background-size: auto 32px;
  background-repeat: repeat-x, no-repeat;
  margin-left: 8px;
  animation: twinkle-lights 2.5s infinite linear;
}