/* Signal glitch effect.
 * Scoped to the pinned artist-section reveal.
 */
.duo {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: transparent;
}

.duo .stage {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.under,
.over {
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.duo .under,
.duo .over {
    position: absolute;
    inset: 0;
}

.duo .under {
    z-index: 0;
}

.duo .over {
    z-index: 1;
}

.duo.glitch .under {
    opacity: 1;
    visibility: visible;
}

.duo.glitch .over {
    --signal-alpha: 0;
    --signal-blur: 8px;
    --signal-shift: 0px;
    --reveal-x: 0%;
    --signal-contrast: 0.82;
    --signal-saturate: 0.72;
    --signal-noise-alpha: 0.2;
    --signal-chroma-alpha: 0;
    --signal-tear-alpha: 0;
    --chroma-x: 0px;
    opacity: var(--signal-alpha);
    clip-path: inset(0 calc(100% - var(--reveal-x)) 0 0);
    -webkit-clip-path: inset(0 calc(100% - var(--reveal-x)) 0 0);
    filter:
            blur(var(--signal-blur))
            contrast(var(--signal-contrast))
            saturate(var(--signal-saturate))
            drop-shadow(calc(var(--chroma-x) * -0.5) 0 rgba(0, 240, 255, var(--signal-chroma-alpha)))
            drop-shadow(calc(var(--chroma-x) * 0.5) 0 rgba(255, 6, 181, var(--signal-chroma-alpha)));
    pointer-events: none;
    transform: translate3d(var(--signal-shift), 0, 0);
    will-change: clip-path, opacity, filter, transform;
}

.duo.glitch.is-signal-revealed .over {
    pointer-events: auto;
}

.duo.glitch.is-signal-active .over {
    z-index: 40;
}

.duo.glitch .over::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.duo.glitch .over::after {
    background:
            linear-gradient(90deg, rgba(0, 240, 255, 0.22), transparent 15%, transparent 82%, rgba(255, 6, 181, 0.22)),
            linear-gradient(180deg, transparent 0 13%, rgba(255, 255, 255, var(--signal-tear-alpha)) 13% 14.5%, transparent 14.5% 27%, rgba(0, 240, 255, calc(var(--signal-tear-alpha) * 0.72)) 27% 29%, transparent 29% 48%, rgba(255, 6, 181, calc(var(--signal-tear-alpha) * 0.72)) 48% 50%, transparent 50% 73%, rgba(255, 255, 255, calc(var(--signal-tear-alpha) * 0.55)) 73% 74%, transparent 74% 100%),
            linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.11) 23%, transparent 24%, transparent 56%, rgba(0, 240, 255, 0.12) 57%, transparent 58%),
            linear-gradient(45deg, transparent 0%, transparent 34%, rgba(255, 6, 181, 0.12) 35%, transparent 36%, transparent 100%);
    mix-blend-mode: screen;
    opacity: calc(var(--signal-noise-alpha) + var(--signal-chroma-alpha));
    transform: translate3d(calc(var(--signal-shift) * -0.45), 0, 0);
    will-change: opacity, transform;
}

.duo.glitch .artist-shell {
    position: relative;
    z-index: 2;
}

.duo.glitch .signal-rgb-shift {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--signal-chroma-alpha);
    transform: translate3d(var(--rgb-x, 0px), var(--rgb-y, 0px), 0);
    clip-path: inset(0 calc(100% - var(--reveal-x)) 0 0);
    -webkit-clip-path: inset(0 calc(100% - var(--reveal-x)) 0 0);
    mix-blend-mode: screen;
    will-change: clip-path, opacity, transform;
}

.duo.glitch .signal-rgb-shift-cyan {
    color: rgba(0, 240, 255, 0.82);
    filter: brightness(1.28) saturate(1.6);
}

.duo.glitch .signal-rgb-shift-pink {
    color: rgba(255, 6, 181, 0.74);
    filter: brightness(1.18) saturate(1.8);
}

.duo.glitch .signal-rgb-shift-white {
    color: rgba(255, 255, 255, 0.72);
    filter: grayscale(1) contrast(1.35) brightness(1.18);
    mix-blend-mode: difference;
}

.duo.glitch .signal-rgb-shift img {
    opacity: 0.64;
}

.duo.glitch .signal-band {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: var(--band-alpha, 0);
    transform: translate3d(var(--band-x, 0px), var(--band-y, 0px), 0);
    clip-path: inset(var(--band-top, 0%) 0 var(--band-bottom, 0%) 0);
    -webkit-clip-path: inset(var(--band-top, 0%) 0 var(--band-bottom, 0%) 0);
    filter: contrast(1.28) saturate(1.5);
    mix-blend-mode: screen;
    will-change: clip-path, opacity, transform;
}

.duo.glitch .signal-band:nth-of-type(odd) {
    filter: hue-rotate(18deg) contrast(1.35) saturate(1.7);
}

.duo.glitch .signal-band img {
    opacity: 0.72;
}

.duo.glitch .signal-glitch-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--artifact-alpha, 0);
    mix-blend-mode: hard-light;
}

.duo.glitch .signal-artifact {
    position: absolute;
    left: var(--artifact-left, 0%);
    top: var(--artifact-top, 50%);
    width: var(--artifact-width, 12%);
    height: var(--artifact-height, 10px);
    opacity: var(--artifact-opacity, 0);
    transform:
            translate3d(var(--artifact-x, 0px), var(--artifact-y, 0px), 0)
            skewX(var(--artifact-skew, 0deg))
            scaleX(var(--artifact-scale-x, 1));
    background:
            linear-gradient(90deg, rgba(0, 240, 255, 0.64), rgba(255, 255, 255, 0.2) 32%, rgba(255, 6, 181, 0.58)),
            linear-gradient(135deg, transparent 0 20%, rgba(255, 255, 255, 0.55) 21% 34%, transparent 35% 100%),
            rgba(8, 9, 14, 0.8);
    box-shadow:
            0 0 22px rgba(0, 240, 255, 0.28),
            0 0 28px rgba(255, 6, 181, 0.24);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 88% 72%, 88% 100%, 0 100%);
    will-change: opacity, transform;
}

.duo.glitch .signal-artifact:nth-child(3n + 1) {
    background:
            linear-gradient(90deg, rgba(255, 6, 181, 0.62), rgba(255, 255, 255, 0.18) 42%, rgba(0, 240, 255, 0.46)),
            rgba(6, 8, 12, 0.82);
}

.duo.glitch .signal-artifact:nth-child(3n + 2) {
    background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(0, 240, 255, 0.3) 48%, rgba(255, 6, 181, 0.28)),
            rgba(12, 14, 20, 0.72);
    mix-blend-mode: screen;
}

.duo.glitch.is-glitching .artist-card {
    text-shadow: 1px 0 rgba(0, 240, 255, 0.5), -1px 0 rgba(255, 6, 181, 0.4);
}

#artist-signals {
    scroll-margin-top: 5rem;
}

@media (min-width: 768px) {
    .duo.glitch.artist-reveal {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .duo.glitch.artist-reveal .stage {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .duo.glitch.artist-reveal .under {
        height: 100vh;
    }

    .duo.glitch.artist-reveal .over {
        inset: auto;
        min-height: 100vh;
        position: relative;
    }
}

@media (max-width: 767px) {
    .duo {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .duo .stage {
        height: auto;
        overflow: visible;
    }

    .duo .under,
    .duo .over {
        position: relative;
        inset: auto;
    }

    .duo .under {
        display: none;
    }

    .duo.glitch .over {
        opacity: 1 !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        filter: none !important;
        pointer-events: auto;
        transform: none !important;
    }

    .duo.glitch .over::after,
    .duo.glitch .signal-rgb-shift,
    .duo.glitch .signal-band,
    .duo.glitch .signal-glitch-layer {
        display: none;
    }
}