/* ===============================
   🎃 HALLOWEEN THEME STYLES
   Efectos visuales: telarañas + animaciones
   =============================== */

.spiderweb-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 250px; /* cubre el header completo */
  background-image: url('../img/spiderweb-header.png');
  background-repeat: repeat-x;
  background-size: cover;
  background-position: top center;
  opacity: 0.4;
  pointer-events: none;
  z-index: 20;
  mix-blend-mode: lighten;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  animation: webFloat 8s ease-in-out infinite;

  /* ✅ seguridad visual */
  z-index: 9999 !important;
  height: 100vh; /* cubre el header incluso si es video */
  
  /* 🧪 para probar si el div aparece (puedes borrar esto luego) */
  /* border: 2px solid red; */
}

@keyframes webFloat {
  0% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(3px); opacity: 0.45; }
  100% { transform: translateY(0); opacity: 0.4; }
}

/* ===============================
   💀 OPCIONAL: EFECTO NIEBLA SUAVE
   (puedes borrarlo si no lo deseas)
   =============================== */
.halloween-fog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.8) 100%);
  animation: fogMove 30s ease-in-out infinite alternate;
  mix-blend-mode: lighten;
  opacity: 0.25;
}

@keyframes fogMove {
  0% { transform: translateX(0px); }
  50% { transform: translateX(20px); }
  100% { transform: translateX(-20px); }
}


/* ===============================
   🦇 MURCIÉLAGOS Y NAVIDAD ANIMADOS CON EFECTO REALISTA
   =============================== */
.bat {
  position: fixed;
  width: 50px;
  height: auto;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.9;
  animation-timing-function: linear;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

/* Murciélagos que vuelan de izquierda a derecha */
.bat.fly-right {
  top: 60px;
  left: -10%;
  animation: batFlyRight 14s linear infinite, batFlap 0.6s ease-in-out infinite;
}

.bat.fly-right:nth-child(2) {
  top: 160px;
  animation-delay: 2s;
  animation-duration: 18s;
}

.bat.fly-right:nth-child(3) {
  top: 240px;
  animation-delay: 5s;
  animation-duration: 20s;
}
.bat.fly-right:nth-child(4) {
  top: 240px;
  animation-delay: 5s;
  animation-duration: 20s;
}

.bat.fly-right:nth-child(5) {
  top: 240px;
  animation-delay: 5s;
  animation-duration: 20s;
}


/* Murciélagos que vuelan de derecha a izquierda */
.bat.fly-left {
  top: 100px;
  right: -10%;
  transform: scaleX(-1);
  animation: batFlyLeft 16s linear infinite, batFlap 0.7s ease-in-out infinite;
}

.bat.fly-left:nth-child(6) {
  top: 220px;
  animation-delay: 3s;
  animation-duration: 19s;
}

.bat.fly-left:nth-child(7) {
  top: 300px;
  animation-delay: 6s;
  animation-duration: 21s;
}
.bat.fly-left:nth-child(8) {
  top: 300px;
  animation-delay: 6s;
  animation-duration: 21s;
}
.bat.fly-left:nth-child(9) {
  top: 300px;
  animation-delay: 6s;
  animation-duration: 21s;
}

/* Vuelo suave en trayectorias curvas */
@keyframes batFlyRight {
  0%   { left: -10%; transform: scaleX(1) translateY(0) rotate(0deg); }
  25%  { transform: scaleX(1) translateY(-20px) rotate(5deg); }
  50%  { transform: scaleX(1) translateY(10px) rotate(-5deg); }
  75%  { transform: scaleX(1) translateY(-10px) rotate(8deg); }
  100% { left: 110%; transform: scaleX(1) translateY(0) rotate(0deg); }
}

@keyframes batFlyLeft {
  0%   { right: -10%; transform: scaleX(-1) translateY(0) rotate(0deg); }
  25%  { transform: scaleX(-1) translateY(15px) rotate(-6deg); }
  50%  { transform: scaleX(-1) translateY(-10px) rotate(5deg); }
  75%  { transform: scaleX(-1) translateY(8px) rotate(-8deg); }
  100% { right: 110%; transform: scaleX(-1) translateY(0) rotate(0deg); }
}

/* 🦇 Aleteo suave de alas */
@keyframes batFlap {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(0.9) scaleX(1.05); }
}
.welc-bg {
    opacity: 0 !important; /* invisible */
    pointer-events: none !important; /* no tapa clics */
    background: transparent !important;
}