/* ============================================
   🎃 HALLOWEEN THEME - CSS 🎃
   Telarañas geométricas + Arañitas bajando por hilos
   Compatible con colores corporativos
   ============================================ */

/* ========== TELARAÑAS EN LAS ESQUINAS ========== */

/* Contenedor de telarañas */
.halloween-web {
    position: fixed;
    width: 250px;
    height: 250px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.2;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
}

/* Posiciones de las telarañas - METIDAS MÁS DENTRO DE LAS ESQUINAS */
.halloween-web.top-left {
    top: -40px;
    left: -40px;
}

.halloween-web.top-right {
    top: -40px;
    right: -40px;
    transform: scaleX(-1);
}

.halloween-web.bottom-left {
    bottom: -40px;
    left: -40px;
    transform: scaleY(-1);
}

.halloween-web.bottom-right {
    bottom: -40px;
    right: -40px;
    transform: scale(-1, -1);
}

/* SVG de la telaraña */
.halloween-web svg {
    width: 100%;
    height: 100%;
}

/* ========== ARAÑITAS BAJANDO POR HILOS ========== */

/* Animación COMBINADA de descenso + balanceo */
@keyframes spider-descend-swing {
    0% { 
        transform: translateY(-100px) translateX(0); 
        opacity: 0;
    }
    5% {
        opacity: 0;
        transform: translateY(-90px) translateX(2px);
    }
    10% {
        opacity: 0.9;
        transform: translateY(-80px) translateX(4px);
    }
    15% {
        transform: translateY(-70px) translateX(6px);
    }
    20% {
        transform: translateY(-60px) translateX(8px);
    }
    25% {
        transform: translateY(-50px) translateX(6px);
    }
    30% {
        transform: translateY(-40px) translateX(4px);
    }
    35% {
        transform: translateY(-30px) translateX(2px);
    }
    40% {
        transform: translateY(-20px) translateX(0);
    }
    45% {
        transform: translateY(-10px) translateX(-2px);
    }
    50% {
        transform: translateY(0) translateX(-4px);
    }
    55% {
        transform: translateY(10vh) translateX(-6px);
    }
    60% {
        transform: translateY(20vh) translateX(-8px);
    }
    65% {
        transform: translateY(30vh) translateX(-6px);
    }
    70% {
        transform: translateY(40vh) translateX(-4px);
    }
    75% {
        transform: translateY(50vh) translateX(-2px);
    }
    80% {
        transform: translateY(60vh) translateX(0);
    }
    85% {
        opacity: 0.9;
        transform: translateY(80vh) translateX(4px);
    }
    90% {
        opacity: 0.7;
        transform: translateY(90vh) translateX(2px);
    }
    95% {
        opacity: 0.3;
        transform: translateY(95vh) translateX(0);
    }
    100% { 
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
}

/* Contenedor de la araña con hilo - ANIMACIÓN COMBINADA */
.halloween-spider-container {
    position: fixed;
    top: -100px;
    pointer-events: none;
    z-index: 9998;
    animation: spider-descend-swing 20s ease-in-out infinite;
}

/* Hilo de la araña - SALE DESDE LA CABEZA DE LA ARAÑA HACIA ARRIBA */
.halloween-spider-thread {
    position: absolute;
    bottom: 15px; /* Posicionado desde la cabeza de la araña (30px / 2) */
    left: 50%;
    transform: translateX(-50%);
    width: 1px; /* Aumentado para mejor visibilidad en todos los navegadores */
    min-width: 1px; /* Asegurar ancho mínimo */
    height: 100vh; /* Altura completa hacia arriba */
    background: linear-gradient(to bottom, 
        rgba(128, 128, 128, 0.3) 0%, /* Un poco más oscuro */
        rgba(128, 128, 128, 0.5) 50%,
        rgba(128, 128, 128, 0.3) 100%);
    box-shadow: 0 0 1px rgba(128, 128, 128, 0.4); /* Sombra para asegurar visibilidad */
    z-index: 1; /* Hilo detrás */
}

/* La araña - CUELGA DEL HILO */
.halloween-spider {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    z-index: 2; /* Araña adelante del hilo */
}

.halloween-spider svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.4));
}

/* Variaciones de velocidad */
.halloween-spider-container:nth-child(odd) {
    animation-duration: 25s;
}

.halloween-spider-container:nth-child(3n) {
    animation-duration: 18s;
}

.halloween-spider-container:nth-child(4n) {
    animation-duration: 22s;
}

/* ========== RESPONSIVE ========== */

/* Para tablets y móviles - telarañas más pequeñas */
@media (max-width: 768px) {
    .halloween-web {
        width: 150px;
        height: 150px;
        opacity: 0.15;
    }
    
    .halloween-spider {
        width: 20px;
        height: 20px;
    }
}

/* Para móviles pequeños - menos elementos */
@media (max-width: 480px) {
    .halloween-web {
        width: 100px;
        height: 100px;
        opacity: 0.1;
    }
    
    .halloween-spider {
        width: 15px;
        height: 15px;
    }
    
    /* Ocultar algunas telarañas en móvil */
    .halloween-web.bottom-left,
    .halloween-web.bottom-right {
        display: none;
    }
}

/* ========== CONFIGURACIÓN DE COLORES ========== */
/* Puedes ajustar estos colores para que combinen con tu paleta */
:root {
    --halloween-web-color: #2c3e50; /* Color gris oscuro corporativo */
    --halloween-spider-color: #2c3e50; /* Color gris oscuro corporativo */
    --halloween-thread-color: rgba(44, 62, 80, 0.4); /* Hilo semi-transparente */
}

/* Aplicar colores corporativos a los elementos */
.halloween-web path,
.halloween-web line {
    stroke: var(--halloween-web-color);
    fill: none;
}

.halloween-spider path,
.halloween-spider circle {
    fill: var(--halloween-spider-color);
}