/* Conteneur principal */
.spider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 999;
}

/* Toiles d'araignées */
.web {
    width: 2px;
    height: 0;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: web-drop 10s linear infinite;
    z-index: 999;
}

/* Corps des araignées */
.spider-body {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%);
    animation: spider-drop 10s linear infinite;
    z-index: 999;
}

/* Pattes */
.leg {
    width: 10px;
    height: 2px;
    background: #ffffff;
    position: absolute;
    top: 50%;
    transform-origin: left center;
    z-index: 999;
}

.leg1 {
    transform: rotate(30deg);
    left: -10px;
    top: 15%;
}

.leg2 {
    transform: rotate(-30deg);
    left: -10px;
    top: 80%;
}

.leg3 {
    transform: rotate(-30deg);
    right: -10px;
    top: 40%;
}

.leg4 {
    transform: rotate(30deg);
    right: -10px;
    top: 60%;
}

/* Animation de la toile */
@keyframes web-drop {
    0% {
        height: 0;
    }
    50% {
        height: 500px; 
    }
    100% {
        height: 0;
    }
}

/* Animation de l'araignée */
@keyframes spider-drop {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(500px); 
    }
    100% {
        transform: translateX(-50%) translateY(0); 
    }
}

/* Mode Dark uniquement */
body:not(.dark-mode) .spider-container {
    display: none;
}

.spider-container {
    pointer-events: none; /* Ignore les clics sur le conteneur */
}

.spider {
    pointer-events: auto; /* Active les clics sur les araignées */
}


.spider-hover .spider-body {
    transform: scale(1.5); /* Agrandit le corps */
    background-color: red; /* Change la couleur */
    transition: transform 0.3s, background-color 0.3s;
}