/* --- SCREEN CANVAS ATTACH SYSTEM --- */
#halloween-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

#halloween-canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* --- SPIDER LEGS NATURAL CRAWLING MOTION --- */
.dynamic-spider-wrapper {
  position: absolute;
  top: -200px; /* Offset start frame bounds */
  width: 60px;
  height: 60px;
  will-change: transform;
}

.spider-line-thread {
  position: absolute;
  bottom: 30px;
  left: 29px;
  width: 1px;
  background: linear-gradient(to top, rgba(255,255,255,0.25), rgba(255,255,255,0.02));
}

.premium-spider-asset {
  width: 100%;
  height: 100%;
}

.s-leg {
  stroke: #12100e;
  stroke-width: 2.5px;
  stroke-linecap: round;
  fill: none;
  transform-origin: 25px 20px;
  animation: spiderLegCrawl 0.28s ease-in-out infinite alternate;
}

/* Alternate offset timing to make legs move like a real spider */
.s-leg.l2, .s-leg.l4, .s-leg.r1, .s-leg.r3 { animation-delay: 0.14s; }

@keyframes spiderLegCrawl {
  0% { transform: rotate(5deg) scaleY(1.05); }
  100% { transform: rotate(-7deg) scaleY(0.92); }
}

/* --- FLAPPING BAT GRAPHICS --- */
.dynamic-bat-wrapper {
  position: absolute;
  width: 55px;
  height: 35px;
  will-change: transform;
}

.premium-bat-asset {
  width: 100%;
  height: 100%;
}

.b-wing {
  transform-origin: 30px 18px;
  animation: realisticWingFlap 0.18s ease-in-out infinite alternate;
}
.wing-right { transform-origin: 34px 18px; }

@keyframes realisticWingFlap {
  0% { transform: scaleY(1.2) rotate(-10deg); }
  100% { transform: scaleY(-0.3) rotate(20deg); }
}

/* --- FLOATING GHOST ELEMENT SLOW BLINK --- */
.dynamic-ghost-wrapper {
  position: absolute;
  width: 75px;
  height: 75px;
  opacity: 0.9;
  will-change: transform;
  filter: drop-shadow(0 8px 15px rgba(255, 255, 255, 0.05));
}

.premium-ghost-asset {
  width: 100%;
  height: 100%;
}

/* --- GRAVEYARD GROUNDLINE ASSET MATRICES --- */
.graveyard-floor-base {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to top, #030303 70%, transparent);
}

.dynamic-grave-wrapper {
  position: absolute;
  bottom: 15px;
  width: 70px;
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.premium-hand-asset {
  width: 45px;
  height: 75px;
  margin-bottom: -30px;
  z-index: 2;
  will-change: transform;
}

.premium-pumpkin-asset {
  width: 50px;
  height: 45px;
  z-index: 3;
}

.carved-glow {
  animation: pulsePumpkinLantern 3s ease-in-out infinite alternate;
}

@keyframes pulsePumpkinLantern {
  0%, 100% { fill: #facc15; filter: drop-shadow(0 0 2px #ea580c); }
  50% { fill: #fef08a; filter: drop-shadow(0 0 10px #f97316); }
}