/* Le décor reste présent pendant le défilement, sans intercepter les clics. */
.halloween-spiders {
    position: fixed;
    z-index: 40;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    contain: strict;
}

.halloween-spider-drop {
    --spider-size: 42px;
    --spider-depth: 47vh;
    --spider-duration: 24s;
    --spider-delay: -8s;
    position: absolute;
    top: -110vh;
    left: 4%;
    width: 1px;
    height: 110vh;
    opacity: .88;
    animation: halloween-spider-descend var(--spider-duration) ease-in-out var(--spider-delay) infinite;
}

/* Le fil dépasse toujours le bord supérieur, même au point le plus bas. */
.halloween-spider-drop::before {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(to bottom, rgba(233, 211, 174, .05), rgba(214, 177, 130, .36));
}

.halloween-spider {
    position: absolute;
    top: 100%;
    left: calc(var(--spider-size) / -2);
    display: block;
    width: var(--spider-size);
    height: auto;
    overflow: visible;
    transform-origin: 50% 0;
    animation: halloween-spider-sway 4.8s ease-in-out var(--spider-delay) infinite alternate;
}

.halloween-spider-drop:nth-child(2) {
    --spider-size: 36px;
    --spider-depth: 76vh;
    --spider-duration: 29s;
    --spider-delay: -19s;
    left: 22%;
    opacity: .74;
}

.halloween-spider-drop:nth-child(3) {
    --spider-size: 39px;
    --spider-depth: 35vh;
    --spider-duration: 26s;
    --spider-delay: -5s;
    left: 39%;
    opacity: .76;
}

.halloween-spider-drop:nth-child(4) {
    --spider-size: 46px;
    --spider-depth: 64vh;
    --spider-duration: 31s;
    --spider-delay: -23s;
    left: 59%;
    opacity: .8;
}

.halloween-spider-drop:nth-child(5) {
    --spider-size: 34px;
    --spider-depth: 88vh;
    --spider-duration: 27s;
    --spider-delay: -13s;
    left: 79%;
    opacity: .76;
}

.halloween-spider-drop:nth-child(6) {
    --spider-size: 44px;
    --spider-depth: 57vh;
    --spider-duration: 23s;
    --spider-delay: -16s;
    left: 96%;
}

@keyframes halloween-spider-descend {
    0%, 100% { transform: translate3d(0, -80px, 0); }
    39% { transform: translate3d(5px, var(--spider-depth), 0); }
    53% { transform: translate3d(-4px, calc(var(--spider-depth) - 18px), 0); }
    68% { transform: translate3d(3px, calc(var(--spider-depth) - 5px), 0); }
    95% { transform: translate3d(0, -80px, 0); }
}

@keyframes halloween-spider-sway {
    from { transform: rotate(-5deg); }
    to { transform: rotate(5deg); }
}

.halloween-spiders.is-paused {
    visibility: hidden;
}

.halloween-spiders.is-paused .halloween-spider-drop,
.halloween-spiders.is-paused .halloween-spider,
.halloween-spiders.is-background .halloween-spider-drop,
.halloween-spiders.is-background .halloween-spider {
    animation-play-state: paused;
}

.halloween-animation-toggle {
    position: fixed;
    z-index: 94;
    left: max(16px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    max-width: calc(100vw - 94px);
    padding: 10px 14px;
    color: #f8e5ca;
    background: #221d28;
    border: 1px solid #a87747;
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(10, 7, 16, .3);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.halloween-animation-toggle:hover {
    color: #fff5e5;
    background: #372a36;
    border-color: #ffb45f;
}

.halloween-animation-toggle:focus-visible {
    outline: 3px solid #ffb45f;
    outline-offset: 4px;
}

.halloween-animation-toggle-icon {
    display: block;
    flex: 0 0 9px;
    width: 9px;
    height: 11px;
    border-right: 3px solid #ffb45f;
    border-left: 3px solid #ffb45f;
}

.halloween-animation-toggle[aria-pressed="false"] .halloween-animation-toggle-icon {
    width: 0;
    height: 0;
    flex-basis: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 0;
    border-left: 9px solid #ffb45f;
}

@media (max-width: 700px) {
    .halloween-spider-drop { --spider-size: 34px; left: 7%; }
    .halloween-spider-drop:nth-child(2),
    .halloween-spider-drop:nth-child(3),
    .halloween-spider-drop:nth-child(5) { display: none; }
    .halloween-spider-drop:nth-child(4) { --spider-size: 35px; --spider-depth: 47vh; left: 49%; }
    .halloween-spider-drop:nth-child(6) { --spider-size: 37px; --spider-depth: 78vh; left: 92%; }
    .halloween-animation-toggle {
        left: max(10px, env(safe-area-inset-left));
        bottom: max(12px, env(safe-area-inset-bottom));
        min-height: 44px;
        padding-inline: 12px;
        font-size: 11px;
    }
}

/* La reprise est possible uniquement après une action explicite de la personne. */
@media (prefers-reduced-motion: reduce) {
    .halloween-spiders.has-motion-override .halloween-spider-drop {
        animation-duration: var(--spider-duration) !important;
        animation-iteration-count: infinite !important;
    }
    .halloween-spiders.has-motion-override .halloween-spider {
        animation-duration: 4.8s !important;
        animation-iteration-count: infinite !important;
    }
}

@media print {
    .halloween-spiders,
    .halloween-animation-toggle { display: none !important; }
}