/* Halloween FX 1.0.0 - overlay visual independente do layout. */
.hfx-overlay,
.hfx-overlay * { box-sizing: border-box; }

.hfx-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147480000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
  contain: layout style paint;
}

.hfx-particle {
  position: absolute;
  top: -110px;
  left: var(--hfx-left, 50%);
  width: var(--hfx-size, 35px);
  height: var(--hfx-size, 35px);
  opacity: 0;
  will-change: transform;
  animation: hfx-travel var(--hfx-duration, 16s) linear var(--hfx-delay, 0s) infinite;
}

.hfx-icon {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px rgba(252, 117, 22, .16));
}

.hfx-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }

.hfx-particle--bat .hfx-icon {
  filter: drop-shadow(0 0 4px rgba(131, 81, 189, .48));
  animation: hfx-flap .66s ease-in-out infinite alternate;
}

.hfx-particle--pumpkin .hfx-icon {
  filter: drop-shadow(0 0 8px rgba(255, 112, 28, .45));
  animation: hfx-wobble 3s ease-in-out infinite alternate;
}

.hfx-particle--ghost .hfx-icon {
  opacity: .78;
  filter: drop-shadow(0 0 9px rgba(193, 169, 246, .32));
  animation: hfx-wobble 4s ease-in-out infinite alternate-reverse;
}

.hfx-web {
  position: absolute;
  top: 0;
  width: clamp(100px, 16vw, 220px);
  height: auto;
  opacity: .26;
  color: #b09bc7;
}
.hfx-web svg { display: block; width: 100%; height: auto; }
.hfx-web--left { left: 0; }
.hfx-web--right { right: 0; transform: scaleX(-1); }

.hfx-fog {
  position: absolute;
  bottom: -9vh;
  height: 36vh;
  width: 92vw;
  opacity: .38;
  will-change: transform;
  filter: blur(14px);
  animation: hfx-fog-drift 25s ease-in-out infinite alternate;
}
.hfx-fog--left {
  left: -26vw;
  background: radial-gradient(ellipse at 48% 90%, rgba(243, 83, 23, .25), rgba(119, 41, 69, .09) 36%, transparent 70%);
}
.hfx-fog--right {
  right: -26vw;
  background: radial-gradient(ellipse at 54% 90%, rgba(122, 75, 183, .28), rgba(57, 30, 73, .11) 40%, transparent 72%);
  animation-duration: 31s;
  animation-direction: alternate-reverse;
}

.hfx-lightning {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: linear-gradient(135deg, rgba(244, 221, 255, .11), rgba(162, 114, 208, .04) 70%);
}
.hfx-lightning.is-flash { animation: hfx-lightning-burst 980ms ease-out both; }

.hfx-paused .hfx-particle,
.hfx-paused .hfx-icon,
.hfx-paused .hfx-fog,
.hfx-paused .hfx-lightning {
  animation-play-state: paused !important;
}

@keyframes hfx-travel {
  0%   { opacity: 0; transform: translate3d(0, -18vh, 0) rotate(-13deg); }
  9%   { opacity: .88; }
  48%  { opacity: .82; }
  90%  { opacity: .78; }
  100% { opacity: 0; transform: translate3d(var(--hfx-drift, 100px), 126vh, 0) rotate(14deg); }
}
@keyframes hfx-flap {
  0% { transform: scaleX(1) scaleY(.88) rotate(-8deg); }
  100% { transform: scaleX(1.08) scaleY(1.07) rotate(8deg); }
}
@keyframes hfx-wobble {
  from { transform: rotate(-12deg) translateY(-4px); }
  to   { transform: rotate(12deg) translateY(4px); }
}
@keyframes hfx-fog-drift {
  from { transform: translate3d(-7vw, 0, 0); }
  to   { transform: translate3d(7vw, -2vh, 0); }
}
@keyframes hfx-lightning-burst {
  0%, 8%, 19%, 33%, 100% { opacity: 0; }
  3%, 14%, 26% { opacity: .9; }
}

@media (max-width: 600px) {
  .hfx-web { width: 105px; opacity: .18; }
  .hfx-fog { opacity: .24; filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hfx-particle, .hfx-icon, .hfx-fog, .hfx-lightning { animation: none !important; }
  .hfx-particle, .hfx-lightning { display: none !important; }
}