/* A little haunted, a lot of friendly. Scoped to the decorative viewport layer. */
#haunt-atmosphere {
  position: fixed;
  inset: 0;
  z-index: var(--haunt-layer, 30);
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
  contain: layout paint;
}
#haunt-atmosphere *, #haunt-atmosphere *::before, #haunt-atmosphere *::after {
  pointer-events: none !important;
  box-sizing: border-box;
}
#haunt-atmosphere svg { display: block; width: 100%; height: 100%; overflow: visible; }
#haunt-atmosphere .haunt-flyer {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(68px, 7.5vw, 112px);
  aspect-ratio: 144 / 156;
  will-change: transform;
}
#haunt-atmosphere .haunt-ghost {
  width: 100%;
  height: 100%;
  animation: haunt-bob 3.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 9px #130f2127);
}
#haunt-atmosphere .haunt-ghost-tail {
  transform-origin: 73px 118px;
  animation: haunt-tail 2.4s ease-in-out infinite alternate;
}
#haunt-atmosphere .haunt-ghost-cheek { opacity: .7; }
#haunt-atmosphere .haunt-ghost-arm {
  transform-origin: 104px 74px;
  animation: haunt-wave 2.8s ease-in-out infinite;
}
#haunt-atmosphere .haunt-route-left { animation: haunt-left 33s linear infinite; }
#haunt-atmosphere .haunt-route-right { animation: haunt-right 39s linear infinite; animation-delay: -18s; }
#haunt-atmosphere .haunt-route-high { width: 70px; animation: haunt-high 47s linear infinite; animation-delay: -9s; }
#haunt-atmosphere .haunt-route-low { width: 60px; animation: haunt-low 51s linear infinite; animation-delay: -28s; }
#haunt-atmosphere .haunt-route-right .haunt-ghost { animation-delay: -1.3s; }
#haunt-atmosphere .haunt-route-high .haunt-ghost { animation-duration: 4.5s; }
#haunt-atmosphere .haunt-fog {
  position: absolute;
  width: 140%;
  height: clamp(65px, 14vh, 140px);
  left: -20%;
  bottom: -30px;
  opacity: .32;
  background: radial-gradient(ellipse at 22% 95%, #c0a1ff45 0, #c0a1ff19 33%, transparent 68%), radial-gradient(ellipse at 73% 115%, #f5e6ff42 0, #c0a1ff14 32%, transparent 67%);
  animation: haunt-fog 26s ease-in-out infinite alternate;
}
#haunt-atmosphere .haunt-fog-back {
  height: clamp(55px, 11vh, 110px);
  opacity: .2;
  animation-direction: alternate-reverse;
  animation-duration: 31s;
}
#haunt-atmosphere .haunt-star {
  position: absolute;
  width: var(--star-size, 5px);
  height: var(--star-size, 5px);
  border-radius: 50%;
  color: var(--star-color, #ffcf8f);
  background: currentColor;
  opacity: .25;
  box-shadow: 0 0 9px #ffaf5133;
  animation: haunt-star var(--star-duration, 8s) ease-in-out infinite alternate;
  animation-delay: var(--star-delay, 0s);
}
#haunt-atmosphere .haunt-star.is-diamond { border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
#haunt-atmosphere .haunt-bat {
  position: absolute;
  width: 35px;
  height: 24px;
  left: 0;
  top: 0;
  opacity: 0;
  animation: haunt-bat-flight var(--flight-duration, 11s) linear both;
}
#haunt-atmosphere .haunt-bat svg { fill: #271c38; stroke: #c0a1ff55; stroke-width: .65; }
#haunt-atmosphere .haunt-bat-wing { transform-box: fill-box; transform-origin: right center; animation: haunt-flap .34s ease-in-out infinite alternate; }
#haunt-atmosphere .haunt-bat-wing-right { transform-origin: left center; animation-delay: -.12s; }
#haunt-atmosphere .haunt-summoned { width: clamp(78px, 9vw, 124px); animation: haunt-summon 5.8s cubic-bezier(.2,.42,.58,1) both; }
#haunt-atmosphere .haunt-boo {
  position: absolute;
  left: 69%;
  top: 3%;
  padding: 7px 12px;
  background: #fff8e9;
  border: 1.5px solid #745689;
  color: #6c427d;
  border-radius: 16px 16px 16px 3px;
  font: 800 16px/1.05 'Avenir Next', Avenir, sans-serif;
  transform: rotate(8deg);
  box-shadow: 0 3px 8px #130f2120;
  animation: haunt-boo 5.8s ease-in-out both;
}
#haunt-atmosphere .haunt-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--particle-size, 11px);
  height: var(--particle-size, 11px);
  color: var(--particle-color, #ffaf51);
  opacity: 0;
  animation: haunt-burst var(--particle-duration, 1.3s) cubic-bezier(.17,.55,.36,1) both;
}
#haunt-atmosphere[data-paused="true"] *, body.paused #haunt-atmosphere * { animation-play-state: paused !important; }
body.capture #haunt-atmosphere { display: none; }
@keyframes haunt-bob {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}
@keyframes haunt-tail { from { transform: rotate(-3deg) scaleX(.98); } to { transform: rotate(3deg) scaleX(1.02); } }
@keyframes haunt-wave { 0%,60%,100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 82% { transform: rotate(8deg); } }
@keyframes haunt-left {
  0% { transform: translate(-105px, 90vh) rotate(-12deg); opacity: 0; }
  8% { opacity: .8; }
  28% { transform: translate(4px, 67vh) rotate(5deg); }
  50% { transform: translate(-25px, 43vh) rotate(-7deg); }
  75% { transform: translate(12px, 20vh) rotate(7deg); opacity: .78; }
  95%,100% { transform: translate(-115px, -150px) rotate(-15deg); opacity: 0; }
}
@keyframes haunt-right {
  0% { transform: translate(calc(100vw + 50px), 8vh) rotate(12deg); opacity: 0; }
  10% { opacity: .8; }
  29% { transform: translate(calc(100vw - 82px), 26vh) rotate(-5deg); }
  55% { transform: translate(calc(100vw - 60px), 57vh) rotate(8deg); }
  80% { transform: translate(calc(100vw - 104px), 83vh) rotate(-9deg); opacity: .78; }
  100% { transform: translate(calc(100vw + 105px), 105vh) rotate(12deg); opacity: 0; }
}
@keyframes haunt-high {
  0%,49% { transform: translate(-130px, 12vh) rotate(12deg); opacity: 0; }
  54% { opacity: .3; }
  67% { transform: translate(30vw, 4vh) rotate(-8deg); }
  82% { transform: translate(64vw, 12vh) rotate(7deg); opacity: .3; }
  95%,100% { transform: translate(calc(100vw + 110px), -85px) rotate(-10deg); opacity: 0; }
}
@keyframes haunt-low {
  0%,40% { transform: translate(calc(100vw + 90px), 98vh) rotate(-12deg); opacity: 0; }
  47% { opacity: .26; }
  66% { transform: translate(65vw, calc(100vh - 57px)) rotate(5deg); }
  83% { transform: translate(29vw, calc(100vh - 68px)) rotate(-7deg); opacity: .26; }
  98%,100% { transform: translate(-100px, calc(100vh + 60px)) rotate(-15deg); opacity: 0; }
}
@keyframes haunt-fog { from { transform: translateX(-5%) scaleY(.85); } to { transform: translateX(6%) scaleY(1.12); } }
@keyframes haunt-star { from { opacity: .13; transform: translateY(2px) scale(.8); } to { opacity: .65; transform: translateY(-13px) scale(1.05); } }
@keyframes haunt-flap { from { transform: scaleY(.46) rotate(12deg); } to { transform: scaleY(1) rotate(-6deg); } }
@keyframes haunt-bat-flight {
  0% { opacity: 0; transform: translate(var(--bat-start), var(--bat-y)) scale(.85) rotate(-8deg); }
  10%,85% { opacity: .62; }
  44% { transform: translate(48vw, calc(var(--bat-y) - 45px)) scale(1) rotate(4deg); }
  100% { opacity: 0; transform: translate(var(--bat-end), calc(var(--bat-y) + 10px)) scale(.75) rotate(-5deg); }
}
@keyframes haunt-summon {
  0% { opacity: 0; transform: translate(var(--summon-x), var(--summon-y)) scale(.6) rotate(-14deg); }
  10% { opacity: .94; }
  33% { transform: translate(calc(var(--summon-x) + var(--summon-sway)), calc(var(--summon-y) - 90px)) scale(1.06) rotate(10deg); }
  64% { opacity: .92; transform: translate(calc(var(--summon-x) - 15px), calc(var(--summon-y) - 185px)) scale(.95) rotate(-8deg); }
  100% { opacity: 0; transform: translate(calc(var(--summon-x) + var(--summon-exit)), -170px) scale(.7) rotate(18deg); }
}
@keyframes haunt-boo { 0%,12% { opacity: 0; scale: .8; } 22%,55% { opacity: 1; scale: 1; } 75%,100% { opacity: 0; scale: .94; } }
@keyframes haunt-burst {
  0% { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) scale(.4) rotate(0); }
  12% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(var(--particle-x) + var(--particle-dx)), calc(var(--particle-y) + var(--particle-dy))) scale(.65) rotate(var(--particle-spin)); }
}
@media (max-width: 700px) {
  #haunt-atmosphere .haunt-route-high, #haunt-atmosphere .haunt-route-low { display: none; }
  #haunt-atmosphere .haunt-flyer { width: 66px; }
  #haunt-atmosphere .haunt-summoned { width: 84px; }
  #haunt-atmosphere .haunt-fog { opacity: .2; }
  #haunt-atmosphere .haunt-boo { font-size: 13px; padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) { #haunt-atmosphere { display: none !important; } }
@media print { #haunt-atmosphere { display: none !important; } }