/* Halloween FX - App Seo & Sem - microappclub.com */
#hfx-root, #hfx-root * { box-sizing: border-box; }
#hfx-root { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9990; overflow: hidden; }
#hfx-root .hfx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Viñeta */
.hfx-vignette { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(35,0,50,.38) 100%); }

/* Telarañas */
.hfx-web { position: absolute; width: clamp(110px, 19vw, 280px); height: auto; opacity: .85;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(0,0,0,.25)); }
.hfx-web.tl { top: 0; left: 0; }
.hfx-web.tr { top: 0; right: 0; transform: scaleX(-1); }
.hfx-web.bl { bottom: 0; left: 0; transform: scaleY(-1); opacity: .6; }
.hfx-web.br { bottom: 0; right: 0; transform: scale(-1, -1); opacity: .6; }
.hfx-web path, .hfx-web line { stroke: rgba(70,70,80,.75); fill: none; stroke-width: 1.1; stroke-linecap: round; }
.hfx-web .dew { fill: rgba(255,255,255,.9); stroke: none; }

/* Arañas colgantes */
.hfx-spider { position: absolute; top: 0; width: 38px; height: 38px;
  animation: hfx-drop var(--dur, 7s) ease-in-out var(--del, 0s) infinite alternate; }
.hfx-spider::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 110vh;
  background: linear-gradient(rgba(90,90,100,.2), rgba(90,90,100,.85)); }
.hfx-spider svg { width: 100%; height: 100%; transform-origin: 50% 0; animation: hfx-swing 3.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
@keyframes hfx-drop { 0% { transform: translateY(var(--min, 40px)); } 100% { transform: translateY(var(--max, 220px)); } }
@keyframes hfx-swing { 0% { transform: rotate(-7deg); } 100% { transform: rotate(7deg); } }

/* Murciélagos */
.hfx-bat { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.hfx-bat svg { width: 100%; height: auto; display: block; }
.hfx-bat .wing { transform-origin: 50px 26px; animation: hfx-flap var(--f, .25s) ease-in-out infinite alternate; }
.hfx-bat .wing.r { transform-origin: 50px 26px; }
@keyframes hfx-flap { 0% { transform: scaleY(1) skewY(0deg); } 100% { transform: scaleY(.35) skewY(8deg); } }

/* Fantasmas */
.hfx-ghost { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.hfx-ghost svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 10px rgba(190,170,255,.8)); }
.hfx-ghost .tail { animation: hfx-wave 1.1s ease-in-out infinite alternate; transform-origin: 30px 50px; }
@keyframes hfx-wave { 0% { transform: scaleX(1); } 100% { transform: scaleX(.94); } }

/* Lluvia */
.hfx-drop { position: absolute; top: -8vh; line-height: 1; user-select: none;
  animation: hfx-fall var(--dur, 12s) linear var(--del, 0s) infinite; opacity: .92; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
@keyframes hfx-fall { 0% { transform: translate3d(0, -8vh, 0) rotate(0deg); } 50% { transform: translate3d(var(--sway, 30px), 55vh, 0) rotate(180deg); }
  100% { transform: translate3d(0, 112vh, 0) rotate(360deg); } }

/* Niebla */
.hfx-fog { position: absolute; left: 0; bottom: 0; width: 200%; height: 26vh; opacity: .55; filter: blur(6px);
  background-image:
    radial-gradient(ellipse at 18% 100%, rgba(210,190,240,.55), rgba(210,190,240,0) 62%),
    radial-gradient(ellipse at 62% 100%, rgba(255,255,255,.45), rgba(255,255,255,0) 58%),
    radial-gradient(ellipse at 88% 100%, rgba(170,150,210,.4), rgba(170,150,210,0) 55%);
  background-size: 50% 100%; background-repeat: repeat-x; animation: hfx-fog 70s linear infinite; }
.hfx-fog.b { height: 18vh; opacity: .4; animation-duration: 110s; animation-direction: reverse; filter: blur(10px); }
@keyframes hfx-fog { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Relámpago */
.hfx-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 20%, rgba(235,225,255,.9), rgba(190,170,255,.45) 60%, rgba(120,90,200,.2));
  opacity: 0; transition: opacity .06s linear; mix-blend-mode: screen; }
.hfx-flash.on { opacity: .55; }

/* Chispas del ratón */
.hfx-spark { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 9992;
  animation: hfx-spark .75s ease-out forwards; }
@keyframes hfx-spark { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 30px))) scale(.1); opacity: 0; } }

/* Cartel */
.hfx-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9995; display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 24px); padding: 10px 16px 10px 20px; border-radius: 999px; color: #fff3e0; font: 600 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: linear-gradient(135deg, #1a0426, #3b0a52 55%, #8a2d00); border: 1px solid #ff8a1f;
  box-shadow: 0 6px 26px rgba(255,120,0,.45), 0 0 0 3px rgba(255,138,31,.15); animation: hfx-glow 2.6s ease-in-out infinite alternate; }
.hfx-banner .hfx-banner-text::before { content: '\1F383'; margin-right: 8px; }
.hfx-banner .hfx-banner-text::after { content: '\1F987'; margin-left: 8px; }
.hfx-close { pointer-events: auto; cursor: pointer; border: 0; background: rgba(255,255,255,.14); color: #fff; width: 24px; height: 24px; border-radius: 50%; font-size: 16px; line-height: 22px; padding: 0; }
.hfx-close:hover { background: rgba(255,255,255,.3); }
.hfx-banner.hfx-hidden { display: none; }
@keyframes hfx-glow { 0% { box-shadow: 0 6px 22px rgba(255,120,0,.35), 0 0 0 3px rgba(255,138,31,.1); } 100% { box-shadow: 0 6px 34px rgba(255,120,0,.7), 0 0 0 5px rgba(255,138,31,.25); } }

@media (max-width: 767px) { .hfx-banner { font-size: 12.5px; bottom: 10px; } .hfx-spider { width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) {
  .hfx-spider, .hfx-spider svg, .hfx-drop, .hfx-fog, .hfx-bat .wing, .hfx-ghost .tail, .hfx-banner { animation: none !important; }
  .hfx-drop, .hfx-bat, .hfx-ghost { display: none; }
}