/* Homepage-only, noninteractive holiday art. The hero copy remains above it. */
.bm-halloween-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
  /* Change this ONE parameter to stop the spider nearer/farther above the pumpkin. */
  --bm-halloween-spider-pumpkin-gap: 12px;
  --bm-halloween-spider-top-y: -54px;
  --bm-halloween-spider-bottom-y: 8px;
  --bm-halloween-silk-top-scale: .568;
  --bm-halloween-silk-bottom-scale: 1.064;
}
.bm-halloween-scene svg { display: block; width: 100%; height: 100%; }
.bm-halloween-web {
  position: absolute;
  top: 0;
  right: 0;
  width: 205px;
  height: 180px;
  color: #4b5d63;
  opacity: .34;
}
.bm-halloween-spider {
  position: absolute;
  top: -5px;
  right: 46px;
  width: 72px;
  height: 185px;
  opacity: .82;
  transform-origin: 50% 0;
  animation: bm-halloween-sway 9s ease-in-out infinite;
}
/* Allow the spider and silk to travel beyond the small SVG viewBox. */
.bm-halloween-spider svg { overflow: visible; }
.bm-halloween-thread {
  transform-box: view-box;
  transform-origin: 45px 0;
  filter: drop-shadow(0 0 1.3px rgba(12, 31, 41, .95));
  animation: bm-halloween-silk 7.2s ease-in-out infinite;
}
.bm-halloween-spider-body {
  animation: bm-halloween-climb 7.2s ease-in-out infinite;
}
.bm-halloween-bats {
  position: absolute;
  top: 66px;
  right: clamp(170px, 19vw, 310px);
  width: 120px;
  height: 64px;
  opacity: .35;
  animation: bm-halloween-drift 12s ease-in-out infinite;
}
.bm-halloween-pumpkin {
  position: absolute;
  bottom: 7px;
  right: clamp(18px, 3.5vw, 65px);
  width: clamp(96px, 11vw, 146px);
  height: auto;
  aspect-ratio: 6 / 5;
  opacity: .88;
  filter: drop-shadow(0 7px 16px rgba(122, 56, 19, .18));
  animation: bm-halloween-breathe 7s ease-in-out infinite;
}
@keyframes bm-halloween-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3deg); }
}
/* The silk stays pinned to the top as the spider climbs, then descends. */
@keyframes bm-halloween-climb {
  0%, 8%, 100% { transform: translateY(var(--bm-halloween-spider-top-y)); }
  48%, 58% { transform: translateY(var(--bm-halloween-spider-bottom-y)); }
}
@keyframes bm-halloween-silk {
  0%, 8%, 100% { transform: scaleY(var(--bm-halloween-silk-top-scale)); }
  48%, 58% { transform: scaleY(var(--bm-halloween-silk-bottom-scale)); }
}
@keyframes bm-halloween-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-8px, -5px, 0); }
}
@keyframes bm-halloween-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -3px, 0) scale(1.015); }
}
@media (max-width: 767px) {
  .bm-halloween-web { width: 112px; height: 105px; opacity: .24; }
  .bm-halloween-spider { width: 43px; height: 112px; right: 15px; top: -4px; opacity: .64; }
  .bm-halloween-bats { display: none; }
  .bm-halloween-pumpkin { width: 79px; right: 5px; bottom: 4px; opacity: .76; }
}
@media (max-width: 359px) {
  .bm-halloween-web, .bm-halloween-spider { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-halloween-spider, .bm-halloween-thread, .bm-halloween-spider-body, .bm-halloween-bats, .bm-halloween-pumpkin { animation: none !important; }
}