/* Hover-only VHS / chromatic aberration treatment for editorial images. */

.mma-glitch-media {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
}

.mma-glitch-media > img:not(.mma-glitch-copy) {
    position: relative;
    z-index: 1;
}

.mma-glitch-copy,
.mma-glitch-media::before,
.mma-glitch-media::after {
    pointer-events: none;
}

.mma-glitch-copy {
    position: absolute !important;
    inset: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: opacity 90ms linear;
    will-change: transform, clip-path, opacity, filter;
}

.mma-glitch-copy--red {
    mix-blend-mode: screen;
    filter: sepia(1) saturate(6) hue-rotate(315deg) contrast(1.08);
}

.mma-glitch-copy--cyan {
    mix-blend-mode: screen;
    filter: sepia(1) saturate(6) hue-rotate(145deg) contrast(1.08);
}

.mma-glitch-media::before {
    position: absolute;
    inset: 0;
    z-index: 4;
    opacity: 0;
    content: "";
    background:
        linear-gradient(
            to bottom,
            transparent 0 46%,
            rgba(255,255,255,.08) 46.5% 47%,
            rgba(0,0,0,.16) 47% 49%,
            transparent 49.5% 100%
        );
    transform: translateX(0);
}

.mma-glitch-media::after {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    content: "";
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(
            90deg,
            rgba(255,0,0,.025),
            transparent 35%,
            rgba(0,255,255,.025)
        );
    mix-blend-mode: screen;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .mma-glitch-media:hover > img:not(.mma-glitch-copy) {
        animation: mma-vhs-base-jitter 760ms steps(1, end) infinite;
        filter: contrast(1.06) saturate(1.08);
    }

    .mma-glitch-media:hover .mma-glitch-copy {
        opacity: .18;
    }

    .mma-glitch-media:hover .mma-glitch-copy--red {
        animation: mma-vhs-red 620ms steps(1, end) infinite;
    }

    .mma-glitch-media:hover .mma-glitch-copy--cyan {
        animation: mma-vhs-cyan 710ms steps(1, end) infinite;
    }

    .mma-glitch-media:hover::before {
        opacity: 1;
        animation: mma-vhs-tear 980ms steps(1, end) infinite;
    }

    .mma-glitch-media:hover::after {
        opacity: .34;
        animation: mma-vhs-scan 520ms steps(2, end) infinite;
    }
}

@keyframes mma-vhs-base-jitter {
    0%, 17%, 24%, 58%, 64%, 100% { transform: translate3d(0,0,0) scale(1); }
    18% { transform: translate3d(-1px,0,0) scale(1.004); }
    19% { transform: translate3d(2px,0,0) scale(1.004); }
    59% { transform: translate3d(1px,-1px,0) scale(1.003); }
    60% { transform: translate3d(-2px,0,0) scale(1.003); }
}

@keyframes mma-vhs-red {
    0%, 100% {
        transform: translate3d(-2px,0,0);
        clip-path: inset(0 0 0 0);
    }
    18% {
        transform: translate3d(-5px,1px,0);
        clip-path: inset(9% 0 58% 0);
    }
    19% {
        transform: translate3d(-2px,0,0);
        clip-path: inset(0 0 0 0);
    }
    57% {
        transform: translate3d(-4px,-1px,0);
        clip-path: inset(62% 0 14% 0);
    }
    59% {
        transform: translate3d(-2px,0,0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes mma-vhs-cyan {
    0%, 100% {
        transform: translate3d(2px,0,0);
        clip-path: inset(0 0 0 0);
    }
    27% {
        transform: translate3d(5px,-1px,0);
        clip-path: inset(35% 0 42% 0);
    }
    29% {
        transform: translate3d(2px,0,0);
        clip-path: inset(0 0 0 0);
    }
    73% {
        transform: translate3d(4px,1px,0);
        clip-path: inset(74% 0 8% 0);
    }
    75% {
        transform: translate3d(2px,0,0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes mma-vhs-tear {
    0%, 100% { transform: translate3d(0,-12%,0); }
    22% { transform: translate3d(5px,8%,0); }
    23% { transform: translate3d(-4px,9%,0); }
    49% { transform: translate3d(0,38%,0); }
    71% { transform: translate3d(-6px,69%,0); }
    72% { transform: translate3d(4px,70%,0); }
}

@keyframes mma-vhs-scan {
    0% { transform: translateY(-2px); }
    50% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

html.reduce-motion .mma-glitch-copy,
html.reduce-motion .mma-glitch-media::before,
html.reduce-motion .mma-glitch-media::after {
    display: none !important;
}

html.reduce-motion .mma-glitch-media:hover > img:not(.mma-glitch-copy) {
    animation: none !important;
    filter: none !important;
    transform: none !important;
}