/* =========================================================
   SITE MUSIC — ACTIVE SIGNAL TO SPECTRUM JUMP
   Loaded by the Music partial so the stabilized player files
   do not need to be replaced.
   ========================================================= */

.site-music-engine__overview[data-spectrum-jump-ready="true"] {
    position: relative;
    cursor: pointer;
    outline: none;
    isolation: isolate;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.site-music-engine__overview[data-spectrum-jump-ready="true"]::after {
    content: "VIEW SPECTRUM";
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 3;
    max-width: calc(100% - 20px);
    padding: 3px 6px;
    color: rgba(117, 224, 255, 0.62);
    border-left: 1px solid rgba(63, 218, 255, 0.42);
    background:
        linear-gradient(
            90deg,
            rgba(0, 217, 255, 0.07),
            transparent
        );
    font-family: var(--music-mono, monospace);
    font-size: 0.46rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(4px, 0, 0);
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        color 180ms ease;
}

.site-music-engine__overview[data-spectrum-jump-ready="true"]::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 2;
    border: 1px solid transparent;
    clip-path: polygon(
        0 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% 100%,
        0 100%
    );
    pointer-events: none;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.site-music-engine__overview[data-spectrum-jump-ready="true"]:hover,
.site-music-engine__overview[data-spectrum-jump-ready="true"]:focus-visible {
    background:
        linear-gradient(
            90deg,
            rgba(0, 217, 255, 0.055),
            transparent 48%,
            rgba(122, 92, 255, 0.045)
        );
    box-shadow:
        inset 2px 0 0 rgba(66, 226, 255, 0.78),
        inset 0 0 20px rgba(0, 217, 255, 0.035),
        0 0 20px rgba(0, 217, 255, 0.05);
}

.site-music-engine__overview[data-spectrum-jump-ready="true"]:hover::before,
.site-music-engine__overview[data-spectrum-jump-ready="true"]:focus-visible::before {
    border-color: rgba(73, 215, 255, 0.19);
    box-shadow:
        inset 0 0 16px rgba(0, 217, 255, 0.025);
}

.site-music-engine__overview[data-spectrum-jump-ready="true"]:hover::after,
.site-music-engine__overview[data-spectrum-jump-ready="true"]:focus-visible::after {
    color: rgba(133, 235, 255, 0.94);
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.site-music-engine__overview[data-spectrum-jump-ready="true"]:active {
    transform: translate3d(0, 1px, 0);
}

.music-reactive__spectrum.is-spectrum-jump-target {
    animation: site-music-spectrum-arrival 900ms ease-out both;
}

@keyframes site-music-spectrum-arrival {
    0% {
        border-top-color: rgba(99, 226, 255, 0.96);
        box-shadow:
            0 0 0 1px rgba(65, 219, 255, 0.38),
            0 0 42px rgba(0, 217, 255, 0.18),
            0 0 74px rgba(122, 92, 255, 0.1),
            inset 0 1px 0 rgba(216, 241, 255, 0.07);
    }

    100% {
        border-top-color: rgba(0, 217, 255, 0.52);
    }
}

@media (max-width: 520px) {
    .site-music-engine__overview[data-spectrum-jump-ready="true"]::after {
        right: 7px;
        bottom: 6px;
        font-size: 0.42rem;
    }
}

@media (hover: none) {
    .site-music-engine__overview[data-spectrum-jump-ready="true"]::after {
        opacity: 0.68;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-music-engine__overview[data-spectrum-jump-ready="true"],
    .site-music-engine__overview[data-spectrum-jump-ready="true"]::before,
    .site-music-engine__overview[data-spectrum-jump-ready="true"]::after {
        transition: none !important;
    }

    .music-reactive__spectrum.is-spectrum-jump-target {
        animation: none !important;
        border-top-color: rgba(99, 226, 255, 0.88);
    }
}