/*
 * Halloween cobwebs.
 *
 * Rendered by //layouts/seasonal/_halloween via //layouts/_seasonalDecorations,
 * which only outputs the markup during October. The overlay is fixed to the
 * viewport, purely decorative and never intercepts clicks (pointer-events: none).
 */

.halloween-cobwebs {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    overflow: hidden;
    pointer-events: none;
}

.halloween-cobwebs__defs {
    position: absolute;
    width: 0;
    height: 0;
}

.halloween-cobwebs__web {
    position: absolute;
    top: -10px;
    width: 260px;
    height: 260px;
    opacity: .8;
    /* A dark halo keeps the pale threads readable over both the dark header
       and the white page below it. */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}

.halloween-cobwebs__web--left {
    left: -16px;
}

.halloween-cobwebs__web--right {
    right: -16px;
    transform: scaleX(-1);
}

.halloween-cobwebs__spider {
    position: absolute;
    top: 0;
    right: 150px;
    width: 40px;
    height: 152px;
    transform-origin: 50% 0;
    animation: halloween-cobweb-sway 7s ease-in-out infinite;
    /* Keeps the dark silhouette legible against the dark hero and header. */
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .85));
}

.halloween-cobwebs__spider .halloween-cobwebs__thread {
    stroke: rgba(255, 255, 255, .75);
    stroke-width: 1;
}

.halloween-cobwebs__spider .halloween-cobwebs__legs {
    fill: none;
    stroke: #1d1d1d;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.halloween-cobwebs__spider .halloween-cobwebs__body {
    fill: #1d1d1d;
}

@keyframes halloween-cobweb-sway {
    0%,
    100% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(4deg);
    }
}

@media (max-width: 767px) {
    .halloween-cobwebs__web {
        width: 110px;
        height: 110px;
        opacity: .6;
    }

    .halloween-cobwebs__web--right,
    .halloween-cobwebs__spider {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-cobwebs__spider {
        animation: none;
    }
}

@media print {
    .halloween-cobwebs {
        display: none !important;
    }
}