#halloween {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fffaf0;
  background:
    radial-gradient(circle at 8% 21%, rgba(255, 246, 223, 0.8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 24% 68%, rgba(255, 211, 117, 0.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 43% 15%, rgba(255, 246, 223, 0.9) 0 1.2px, transparent 2px),
    radial-gradient(circle at 68% 42%, rgba(255, 246, 223, 0.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 18%, rgba(255, 211, 117, 0.75) 0 1px, transparent 1.8px),
    linear-gradient(135deg, #120d1a, #24142e 62%, #1b2d2b);
}
#halloween::before,
#halloween::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
}
#halloween::before {
  background:
    radial-gradient(circle at 15% 46%, #fff9d8 0 1px, transparent 2px),
    radial-gradient(circle at 36% 28%, #fff9d8 0 1.5px, transparent 2.6px),
    radial-gradient(circle at 57% 73%, #ffd675 0 1px, transparent 2px),
    radial-gradient(circle at 76% 34%, #fff9d8 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 93% 76%, #fff9d8 0 1px, transparent 2px);
}
#halloween::after {
  background: radial-gradient(ellipse at 50% 105%, rgba(82, 107, 87, 0.38), transparent 59%);
}
#halloween.is-in-view::before { animation: star-twinkle 4.8s ease-in-out infinite alternate; }
#halloween.is-in-view::after { animation: night-fog 9s ease-in-out infinite alternate; }
#halloween > .container { position: relative; z-index: 1; }
#halloween h2 { color: #fffaf0; }
.halloween-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.web {
  position: absolute;
  top: 0;
  width: 102px;
  height: 86px;
  opacity: 0.33;
  background: repeating-radial-gradient(circle at 0 0, transparent 0 12px, rgba(255,246,223,.9) 13px 14px, transparent 15px 25px);
}
.web::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(45deg, transparent 48%, rgba(255,246,223,.8) 49% 50%, transparent 51%), linear-gradient(-45deg, transparent 48%, rgba(255,246,223,.8) 49% 50%, transparent 51%);
}
.web-left { left: 0; }
.web-right { right: 0; transform: scaleX(-1); }

.mist,
.cloud {
  position: absolute;
  display: block;
  border-radius: 50%;
}
.mist {
  width: 62vw;
  height: 18vw;
  min-height: 110px;
  opacity: 0.14;
  background: radial-gradient(ellipse, rgba(174, 200, 176, 0.66) 0%, rgba(116, 145, 126, 0.23) 48%, transparent 72%);
  filter: blur(18px);
}
.mist-one { bottom: -7%; left: -18%; }
.mist-two { right: -23%; bottom: 17%; opacity: 0.09; transform: scale(1.2); }
.cloud {
  width: 34vw;
  height: 10vw;
  min-height: 58px;
  opacity: 0.14;
  background: radial-gradient(ellipse at 22% 85%, #a7acb3 0 20%, transparent 21%), radial-gradient(ellipse at 46% 58%, #a7acb3 0 27%, transparent 28%), radial-gradient(ellipse at 71% 80%, #a7acb3 0 23%, transparent 24%);
  filter: blur(5px);
}
.cloud-one { top: 8%; left: -10%; }
.cloud-two { top: 47%; right: -14%; opacity: 0.09; transform: scale(1.25); }
#halloween.is-in-view .mist-one { animation: mist-drift 24s ease-in-out infinite alternate; }
#halloween.is-in-view .mist-two { animation: mist-drift 31s ease-in-out infinite alternate-reverse; }
#halloween.is-in-view .cloud-one { animation: cloud-drift 37s linear infinite alternate; }
#halloween.is-in-view .cloud-two { animation: cloud-drift 44s linear infinite alternate-reverse; }
.lightning {
  position: fixed;
  top: -12px;
  right: auto;
  left: auto;
  width: 3px;
  height: 190px;
  opacity: 0;
  background: #fff7cf;
  box-shadow: 0 0 11px 4px rgba(255, 239, 165, 0.9), 24px 44px 34px 12px rgba(218, 192, 255, 0.3);
  transform: rotate(18deg);
}
.strike-left .lightning { left: 9vw; }
.strike-right .lightning { right: 9vw; }
.lightning::after {
  position: absolute;
  top: 68px;
  left: -13px;
  width: 3px;
  height: 104px;
  content: "";
  background: inherit;
  box-shadow: inherit;
  transform: rotate(-39deg);
  transform-origin: top;
}
.halloween-atmosphere.is-flashing .lightning { animation: lightning-strike 0.7s steps(2, end); }



.halloween-viewport-ghost {
  position: fixed;
  top: 12vh;
  left: 3vw;
  z-index: 6;
  display: none;
  pointer-events: none;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  filter: drop-shadow(0 6px 5px rgba(57, 32, 71, 0.25));
  will-change: transform;
}
.halloween-viewport-ghost.is-active {
  display: block;
  animation: halloween-bounce 13s linear infinite;
}
@keyframes pumpkin-glow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 7px 3px rgba(29,23,36,.2)); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 12px rgba(245,184,75,.72)); } }
@keyframes halloween-bounce {
  0% { transform: translate(0, 0) rotate(-8deg); }
  20% { transform: translate(76vw, 19vh) rotate(10deg); }
  42% { transform: translate(44vw, 70vh) rotate(-7deg); }
  65% { transform: translate(4vw, 52vh) rotate(9deg); }
  82% { transform: translate(67vw, 4vh) rotate(-10deg); }
  100% { transform: translate(0, 0) rotate(-8deg); }
}
@keyframes star-twinkle { from { opacity: 0.25; } to { opacity: 0.95; } }
@keyframes night-fog { from { opacity: 0.12; transform: translateX(-3%); } to { opacity: 0.34; transform: translateX(3%); } }
@keyframes mist-drift { from { transform: translateX(-5%); } to { transform: translateX(13%); } }
@keyframes cloud-drift { from { translate: -4% 0; } to { translate: 15% 2%; } }
@keyframes lightning-strike { 0%, 100% { opacity: 0; } 14%, 23%, 37% { opacity: 0.9; } 18%, 29% { opacity: 0.15; } }