/* Spider music courier -------------------------------------------------- */
.sleek-spider-actor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 130;
    width: 46px;
    height: 46px;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-120px, -120px, 0);
    filter:
        drop-shadow(0 6px 6px rgba(15, 23, 42, 0.18))
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.62));
    transition:
        opacity 0.24s ease,
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.sleek-spider-actor.is-ready {
    opacity: 1;
}

.spider-music-idle {
    width: 100%;
    height: 100%;
    color: #20242a;
    transform-origin: 50% 18%;
    animation: spider-idle 2.8s ease-in-out infinite;
}


.spider-music-art {
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: url("../img/spider-actor.svg") center / contain no-repeat;
    mask: url("../img/spider-actor.svg") center / contain no-repeat;
}

.sleek-spider-actor.is-pulling .spider-music-idle {
    animation: spider-pull 0.34s ease-in-out infinite;
}

.sleek-spider-thread {
    position: fixed;
    inset: 0;
    z-index: 129;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sleek-spider-thread.is-visible {
    opacity: 1;
}

.sleek-spider-thread path {
    fill: none;
    stroke: rgba(35, 39, 45, 0.5);
    stroke-width: 0.55;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.sleek-spider-cargo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 131;
    display: grid;
    width: 46px;
    height: 46px;
    overflow: hidden;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 11px;
    background: #f4f1ea;
    box-shadow:
        0 9px 24px -10px rgba(15, 23, 42, 0.5),
        0 2px 6px rgba(15, 23, 42, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-120px, -120px, 0);
    transition:
        opacity 0.2s ease,
        transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.sleek-spider-cargo.is-visible {
    opacity: 1;
}

.sleek-spider-cargo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sleek-spider-cargo.is-fallback {
    background:
        radial-gradient(circle at 30% 30%, #ffe3d8, transparent 62%),
        linear-gradient(145deg, #ffeadf, #c9f8ff);
}

.sleek-spider-cargo.is-fallback img {
    display: none;
}

@keyframes spider-idle {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1deg);
    }
    50% {
        transform: translate3d(0, -3px, 0) rotate(1deg);
    }
}

@keyframes spider-pull {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-3deg);
    }
    50% {
        transform: translate3d(-1px, -2px, 0) rotate(3deg);
    }
}

html.dark .spider-music-idle {
    color: #ece9e2;
}

html.dark .sleek-spider-thread path {
    stroke: rgba(255, 255, 255, 0.42);
}

html.dark .sleek-spider-cargo {
    border-color: rgba(255, 255, 255, 0.55);
    background: #24262a;
}

@media (max-width: 720px) {
    .sleek-spider-actor {
        width: 38px;
        height: 38px;
    }

    .sleek-spider-cargo {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sleek-spider-actor,
    .sleek-spider-cargo {
        transition: none;
    }

    .spider-music-idle,
    .sleek-spider-actor.is-pulling .spider-music-idle {
        animation: none;
    }
}

/* A small woven web that wraps the grabbed cover. */
.sleek-spider-web {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 132;
    width: 88px;
    height: 88px;
    color: rgba(255, 255, 255, 0.82);
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-120px, -120px, 0) scale(0.35) rotate(-8deg);
    transition:
        opacity 0.24s ease,
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    filter:
        drop-shadow(0 0 1px rgba(15, 23, 42, 0.55))
        drop-shadow(0 2px 4px rgba(15, 23, 42, 0.16));
    -webkit-mask: url("../img/spider-web.svg") center / contain no-repeat;
    mask: url("../img/spider-web.svg") center / contain no-repeat;
    will-change: transform;
}

.sleek-spider-web.is-visible {
    opacity: 0.92;
}


html.dark .sleek-spider-web {
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 720px) {
    .sleek-spider-web {
        width: 76px;
        height: 76px;
    }
}