/* WebVue Halloween Ambience 1.3 — fixed visual layer, no theme layout overrides */
.zhl-stage {
  --zhl-gold: #ff9fc1;
  --zhl-copper: #ff5f93;
  --zhl-ink: #0f090f;
  --zhl-haze: #55122d;
  --zhl-alpha: .72;
  --zhl-haze-opacity: .246;
  --zhl-web-opacity: .538;
  --zhl-web-low-opacity: .393;
  --zhl-web-high-opacity: .638;
  --zhl-moon-opacity: .525;
  --zhl-haze-mobile-opacity: .136;
  --zhl-web-mobile-opacity: .401;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 55;
  pointer-events: none !important;
  overflow: hidden;
  isolation: isolate;
  contain: strict;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.zhl-stage *, .zhl-stage *::before, .zhl-stage *::after { pointer-events: none !important; box-sizing: border-box; }
.zhl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zhl-haze {
  position: absolute;
  bottom: -18%;
  width: min(60vw, 650px);
  height: min(55vw, 420px);
  border-radius: 50%;
  filter: blur(28px);
  opacity: var(--zhl-haze-opacity);
  transform: translate3d(0,0,0);
  animation: zhl-mist-drift 23s ease-in-out infinite alternate;
}
.zhl-haze--left {
  left: -19%;
  background: radial-gradient(ellipse, var(--zhl-haze) 0%, transparent 76%);
}
.zhl-haze--right {
  right: -20%;
  background: radial-gradient(ellipse, var(--zhl-copper) 0%, transparent 74%);
  animation-duration: 29s;
  animation-delay: -14s;
}
.zhl-web {
  position: absolute;
  top: 0;
  width: clamp(125px, 15vw, 240px);
  height: auto;
  color: var(--zhl-gold);
  opacity: var(--zhl-web-opacity);
  filter: drop-shadow(0 0 8px rgba(255,95,147,.12));
  animation: zhl-web-breathe 8s ease-in-out infinite alternate;
}
.zhl-web--left { left: 0; }
.zhl-web--right { right: 0; transform: scaleX(-1); animation-delay: -5s; }
.zhl-moon {
  position: absolute;
  bottom: clamp(32px, 7vh, 95px);
  right: clamp(18px, 5vw, 76px);
  width: clamp(44px, 5.5vw, 78px);
  height: auto;
  color: var(--zhl-gold);
  opacity: var(--zhl-moon-opacity);
  filter: drop-shadow(0 0 13px rgba(196,165,116,.24));
  animation: zhl-moon-float 10s ease-in-out infinite alternate;
}
@keyframes zhl-mist-drift {
  0% { transform: translate3d(-4%, 4%, 0) scale(.92); }
  100% { transform: translate3d(8%, -8%, 0) scale(1.1); }
}
@keyframes zhl-web-breathe {
  0% { opacity: var(--zhl-web-low-opacity); }
  100% { opacity: var(--zhl-web-high-opacity); }
}
@keyframes zhl-moon-float {
  0% { transform: translateY(0) rotate(-4deg); }
  100% { transform: translateY(-13px) rotate(5deg); }
}
@media (max-width: 767px) {
  .zhl-web { width: 89px; opacity: var(--zhl-web-mobile-opacity); }
  .zhl-haze { width: 85vw; height: 40vh; opacity: var(--zhl-haze-mobile-opacity); }
  .zhl-moon { bottom: 44px; right: 18px; width: 45px; }
  .zhl-stage[data-mobile="0"]:not(.zhl-stage--preview) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .zhl-stage *, .zhl-stage *::before, .zhl-stage *::after { animation: none !important; transition: none !important; }
}