.halloween-container {
    display: block;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    contain: layout paint;
}

.halloween {
    will-change: transform;
    position: fixed;
    bottom: -10%;
    z-index: 15;
    user-select: none;
    cursor: default;
    animation-name: halloween-fall, halloween-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running
}



@keyframes halloween-fall {
    0% {
        bottom: -10%;
    }

    100% {
        bottom: 110%;
    }
}

@keyframes halloween-shake {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(80px)
    }
}

.halloween:nth-of-type(0) {
    left: 1%;
    animation-delay: 0s, 0s;
}

.halloween:nth-of-type(1) {
    left: 10%;
    animation-delay: -1s, -1s;
}

.halloween:nth-of-type(2) {
    left: 20%;
    animation-delay: -2s, -2s;
}

.halloween:nth-of-type(3) {
    left: 30%;
    animation-delay: -3s, -3s;
}

.halloween:nth-of-type(4) {
    left: 40%;
    animation-delay: -4s, -4s;
}

.halloween:nth-of-type(5) {
    left: 50%;
    animation-delay: -5s, -5s;
}

.halloween:nth-of-type(6) {
    left: 60%;
    animation-delay: -6s, -6s;
}

.halloween:nth-of-type(7) {
    left: 70%;
    animation-delay: -7s, -7s;
}

.halloween:nth-of-type(8) {
    left: 80%;
    animation-delay: -8s, -8s;
}

.halloween:nth-of-type(9) {
    left: 90%;
    animation-delay: -9s, -9s;
}

.halloween:nth-of-type(10) {
    left: 25%;
    animation-delay: -10s, -10s;
}

.halloween:nth-of-type(11) {
    left: 65%;
    animation-delay: -11s, -11s;
}

/* --- Fog Layer --- */
.halloween-fog-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
    mask-image: linear-gradient(to top, black, transparent);
}
.halloween-fog-blob {
    position: absolute;
    bottom: -10vh;
    width: 150vw;
    height: 50vh;
    background: radial-gradient(ellipse at center, rgba(120, 130, 140, 0.4) 0%, transparent 60%);
    border-radius: 50%;
    filter: blur(15px);
}
.halloween-fog-blob:nth-child(1) {
    will-change: transform;
    left: -20vw;
    animation: fog-float1 25s ease-in-out infinite alternate;
}
.halloween-fog-blob:nth-child(2) {
    will-change: transform;
    left: -50vw;
    background: radial-gradient(ellipse at center, rgba(100, 110, 120, 0.3) 0%, transparent 65%);
    animation: fog-float2 35s ease-in-out infinite alternate;
}
@keyframes fog-float1 {
    0% { transform: translateX(0) scale(1); opacity: 0.8; }
    50% { opacity: 1; }
    100% { transform: translateX(20vw) scale(1.1); opacity: 0.6; }
}
@keyframes fog-float2 {
    0% { transform: translateX(0) scale(1.1); opacity: 0.7; }
    50% { opacity: 1; }
    100% { transform: translateX(30vw) scale(1); opacity: 0.5; }
}

/* --- Spiders --- */
.halloween-spider-wrapper {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1002;
    transform-origin: top;
    will-change: transform;
    pointer-events: auto;
    padding: 20px; /* Increase hit area */
   translate: 0 -50px;
}

.halloween-thread {
    width: 30px; /* Wider hit area for mouse interaction */
    height: 100vh;
    margin-top: -100vh;
    position: relative;
    cursor: pointer;
}
.halloween-thread::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(200, 200, 200, 0.1), rgba(200, 200, 200, 0.6));
}
.halloween-spider {
    will-change: transform;
    animation: spider-swing 3s ease-in-out infinite alternate;
    transform-origin: top center;
}

/* MARK: SPIDER SWAY CONFIGURATION */
@keyframes wind-sway {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

@keyframes spider-drop {
    0% { transform: translateY(-50px); }
    30% { transform: translateY(var(--drop-height, 50vh)); }
    60% { transform: translateY(var(--drop-height, 50vh)); }
    100% { transform: translateY(-50px); }
}
@keyframes spider-swing {
    0% { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}

/* Mice */
.halloween-mouse {
    position: absolute;
    z-index: 10000;
    pointer-events: none;
    will-change: left;
}
@keyframes mouse-run-right {
    0% { left: -10vw; }
    100% { left: 110vw; }
}
@keyframes mouse-run-left {
    0% { left: 110vw; }
    100% { left: -10vw; }
}