.bat-sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.bat {
  position: absolute;
  will-change: transform, opacity;
  user-select: none;
  pointer-events: none;
  transform-origin: center center;
  opacity: 0.95;
}

.bat--enter {
  animation: batFadeIn 0.6s ease-out forwards;
}

@keyframes batFadeIn {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: scale(1); opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .bat { transition: none !important; animation: none !important; }
}

.group-header {
    background-image: url('https://pelisjuanita.com/movies/halloween/sangre.png');  
    background-repeat: repeat-x; /* Repetir horizontalmente */
    background-size: auto 100%; /* Mantener ancho original y ajustar altura al contenedor */
}

/*telaraña*/
.spiderweb {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;         /* Ajustá el tamaño */
  height: auto;
  z-index: 9999;         /* Encima de todo */
  pointer-events: none;  /* No bloquea clics */
  opacity: 0.9;          /* Leve transparencia */
}

/*fantasma*/
.halloween-ghost {
  position: fixed;
  bottom: 25%;
  left: -150px;
  width: 120px;
  opacity: 0.7;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}

.halloween-ghost.fly {
  animation: ghost-move 8s ease-in-out forwards;
}

@keyframes ghost-move {
  0% {
    transform: translate(-150px, 0);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    transform: translate(50vw, -20px);
  }
  75% {
    transform: translate(75vw, 10px);
  }
  100% {
    transform: translate(calc(100vw + 200px), 0);
    opacity: 0;
  }
}


/* Movimiento tipo zombie más lento */
@keyframes zombieWalk {
  0%   { transform: translateX(100vw) translateY(0); }
  5%   { transform: translateX(95vw) translateY(-2px); }
  10%  { transform: translateX(90vw) translateY(0); }
  15%  { transform: translateX(85vw) translateY(-2px); }
  20%  { transform: translateX(80vw) translateY(0); }
  25%  { transform: translateX(75vw) translateY(-2px); }
  30%  { transform: translateX(70vw) translateY(0); }
  35%  { transform: translateX(65vw) translateY(-2px); }
  40%  { transform: translateX(60vw) translateY(0); }
  45%  { transform: translateX(55vw) translateY(-2px); }
  50%  { transform: translateX(50vw) translateY(0); }
  55%  { transform: translateX(45vw) translateY(-2px); }
  60%  { transform: translateX(40vw) translateY(0); }
  65%  { transform: translateX(35vw) translateY(-2px); }
  70%  { transform: translateX(30vw) translateY(0); }
  75%  { transform: translateX(25vw) translateY(-2px); }
  80%  { transform: translateX(20vw) translateY(0); }
  85%  { transform: translateX(15vw) translateY(-2px); }
  90%  { transform: translateX(10vw) translateY(0); }
  95%  { transform: translateX(5vw) translateY(-2px); }
  100% { transform: translateX(-200px) translateY(0); }
}

#skeleton {
  position: fixed;
  bottom: -2px;
  left: 0;
  width: 180px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;

  /* Movimiento zombie más lento + fade */
  animation: 
    zombieWalk 30s ease-in-out 2s forwards,  /* duración aumentada */
    fadeInOut 30s linear 2s forwards;       /* sincronizado */
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
}

/* 👧 Niña caminando delante del esqueleto */
#halloween-juanita {
  position: fixed;
  bottom: -2px;
  right: -100px;          /* empieza fuera de pantalla */
  width: 80px;            /* tamaño ajustable */
  z-index: 9999;          /* delante del esqueleto */
  opacity: 0;
  pointer-events: none;
  animation:
    girlWalk 25s linear forwards,
    fadeInGirl 1s ease-in forwards;
}

/* Movimiento constante: de derecha a izquierda */
@keyframes girlWalk {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100vw - 150px)); /* se asegura que salga */
  }
}

/* Aparición suave */
@keyframes fadeInGirl {
  0% { opacity: 0; }
  100% { opacity: 1; }
}