.device {
    isolation: isolate;

    --glitch-roll-h: calc(46 * var(--px));
    --glitch-speed: 1;
    --glitch-step: calc(90ms * var(--glitch-speed));
}

.screen__glitch {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
}

.device.is-glitching .screen__glitch {
    opacity: 1;
}

.device.is-glitching {
    animation:
        device-glitch var(--glitch-burst, 340ms) linear 1,
        glitch-chroma var(--glitch-burst, 340ms) steps(1, end) 1;
}

@keyframes device-glitch {
    0%   { transform: translate(0, 0) rotate(0deg); }
    6%   { transform: translate(calc(-3 * var(--px)), calc(2 * var(--px))) rotate(-0.7deg); }
    12%  { transform: translate(calc(2 * var(--px)), calc(-3 * var(--px))) rotate(0.6deg) scale(1.004); }
    19%  { transform: translate(calc(-1 * var(--px)), calc(1 * var(--px))) rotate(0.2deg); }
    26%  { transform: translate(calc(4 * var(--px)), calc(1 * var(--px))) rotate(-0.5deg) scale(0.997); }
    34%  { transform: translate(calc(-2 * var(--px)), calc(-2 * var(--px))) rotate(0.4deg); }
    42%  { transform: translate(calc(1 * var(--px)), calc(3 * var(--px))) rotate(-0.15deg); }
    52%  { transform: translate(calc(-4 * var(--px)), calc(-1 * var(--px))) rotate(0.8deg) scale(1.006); }
    63%  { transform: translate(calc(3 * var(--px)), calc(2 * var(--px))) rotate(-0.6deg); }
    74%  { transform: translate(calc(-1 * var(--px)), calc(-1 * var(--px))) rotate(0.1deg); }
    85%  { transform: translate(calc(2 * var(--px)), calc(-2 * var(--px))) rotate(-0.3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes glitch-chroma {
    0%   { filter: grayscale(0) invert(0) contrast(100%) saturate(1) hue-rotate(0deg) brightness(1); }
    8%   { filter: grayscale(0) invert(1) contrast(170%) saturate(0.4) hue-rotate(0deg) brightness(1); }
    14%  { filter: grayscale(0) invert(0) contrast(100%) saturate(1) hue-rotate(0deg) brightness(1); }
    20%  { filter: grayscale(0) invert(1) contrast(190%) saturate(1) hue-rotate(90deg) brightness(1); }
    27%  { filter: grayscale(0) invert(1) contrast(150%) saturate(1) hue-rotate(0deg) brightness(1); }
    33%  { filter: grayscale(0) invert(0) contrast(100%) saturate(1) hue-rotate(0deg) brightness(1); }
    38%  { filter: grayscale(0) invert(1) contrast(220%) saturate(1) hue-rotate(-70deg) brightness(1.08); }
    45%  { filter: grayscale(0) invert(0) contrast(100%) saturate(1) hue-rotate(0deg) brightness(1); }
    50%  { filter: grayscale(0) invert(1) contrast(140%) saturate(1) hue-rotate(0deg) brightness(1); }
    58%  { filter: grayscale(0) invert(0) contrast(100%) saturate(1) hue-rotate(0deg) brightness(1); }
    66%  { filter: grayscale(0) invert(1) contrast(180%) saturate(1) hue-rotate(160deg) brightness(1); }
    72%  { filter: grayscale(0) invert(0) contrast(100%) saturate(1) hue-rotate(0deg) brightness(1); }
    80%  { filter: grayscale(0) invert(1) contrast(155%) saturate(1) hue-rotate(0deg) brightness(1); }
    88%  { filter: grayscale(0) invert(0) contrast(100%) saturate(1) hue-rotate(0deg) brightness(1); }
    100% { filter: grayscale(0) invert(0) contrast(100%) saturate(1) hue-rotate(0deg) brightness(1); }
}

.device__burst {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: var(--radius-device);
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: difference;
    -webkit-mix-blend-mode: difference;
    background-image: repeating-linear-gradient(
        180deg,
        rgb(var(--glitch-r) / 0.55) 0,
        rgb(var(--glitch-r) / 0.55) calc(3 * var(--px)),
        rgba(0, 0, 0, 0.5) calc(3 * var(--px)),
        rgba(0, 0, 0, 0.5) calc(11 * var(--px)),
        rgb(var(--glitch-b) / 0.5) calc(14 * var(--px)),
        rgb(var(--glitch-b) / 0.5) calc(16 * var(--px)),
        rgba(0, 0, 0, 0.5) calc(16 * var(--px)),
        rgba(0, 0, 0, 0.5) calc(27 * var(--px))
    );
    background-size: 100% calc(29 * var(--px));
}

.device.is-glitching .device__burst {
    animation:
        burst-flicker var(--glitch-step) steps(1, end) infinite,
        burst-slide var(--glitch-step) steps(1, end) infinite;
}

@keyframes burst-flicker {
    0%   { opacity: 0.5; }
    20%  { opacity: 0.12; }
    40%  { opacity: 0.55; }
    60%  { opacity: 0.22; }
    80%  { opacity: 0.42; }
    100% { opacity: 0.5; }
}

@keyframes burst-slide {
    0%   { background-position-y: 0; }
    25%  { background-position-y: calc(29 * var(--px)); }
    50%  { background-position-y: calc(-58 * var(--px)); }
    75%  { background-position-y: calc(87 * var(--px)); }
    100% { background-position-y: 0; }
}

.glitch__bars {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    -webkit-mix-blend-mode: screen;
    opacity: 0.85;
    background-image: repeating-linear-gradient(
        180deg,
        rgb(var(--glitch-r) / 0.6) 0,
        rgb(var(--glitch-r) / 0.6) calc(2 * var(--px)),
        rgba(0, 0, 0, 0) calc(2 * var(--px)),
        rgba(0, 0, 0, 0) calc(7 * var(--px)),
        rgb(var(--glitch-b) / 0.55) calc(9 * var(--px)),
        rgb(var(--glitch-b) / 0.55) calc(11 * var(--px)),
        rgba(0, 0, 0, 0) calc(11 * var(--px)),
        rgba(0, 0, 0, 0) calc(19 * var(--px))
    );
    background-size: 100% calc(19 * var(--px));
}

.device.is-glitching .glitch__bars {
    animation: bars-jump var(--glitch-step) steps(1, end) infinite;
}

@keyframes bars-jump {
    0%   { background-position-y: 0; }
    20%  { background-position-y: calc(-38 * var(--px)); }
    40%  { background-position-y: calc(19 * var(--px)); }
    60%  { background-position-y: calc(-95 * var(--px)); }
    80%  { background-position-y: calc(57 * var(--px)); }
    100% { background-position-y: 0; }
}

.glitch__static {
    position: absolute;
    inset: calc(-4 * var(--px));
    mix-blend-mode: overlay;
    -webkit-mix-blend-mode: overlay;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, rgba(0, 0, 0, 0) 25% 75%, rgba(255, 255, 255, 0.5) 75%),
        linear-gradient(45deg, rgb(var(--glitch-g) / 0.35) 25%, rgba(0, 0, 0, 0) 25% 75%, rgb(var(--glitch-g) / 0.35) 75%);
    background-size:
        calc(2 * var(--px)) calc(2 * var(--px)),
        calc(3 * var(--px)) calc(3 * var(--px));
    background-position:
        0 0,
        calc(1.5 * var(--px)) calc(1.5 * var(--px));
}

.device.is-glitching .glitch__static {
    animation: static-shimmer calc(var(--glitch-step) * 0.6) steps(1, end) infinite;
}

@keyframes static-shimmer {
    0%   { background-position: 0 0, 0 0; opacity: 0.75; }
    25%  { background-position: calc(-2 * var(--px)) calc(2 * var(--px)), calc(3 * var(--px)) calc(-1 * var(--px)); opacity: 0.4; }
    50%  { background-position: calc(3 * var(--px)) calc(-2 * var(--px)), calc(-2 * var(--px)) calc(3 * var(--px)); opacity: 0.85; }
    75%  { background-position: calc(-3 * var(--px)) calc(-3 * var(--px)), calc(2 * var(--px)) calc(-2 * var(--px)); opacity: 0.3; }
    100% { background-position: 0 0, 0 0; opacity: 0.75; }
}

.glitch__roll {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--glitch-roll-h);
    mix-blend-mode: screen;
    -webkit-mix-blend-mode: screen;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.06) 22%,
        rgb(var(--glitch-g) / 0.28) 50%,
        rgba(255, 255, 255, 0.06) 78%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateY(calc(-46 * var(--px)));
}

.device.is-glitching .glitch__roll {
    animation: roll-drop calc(var(--glitch-step) * 1.4) linear infinite;
}

@keyframes roll-drop {
    0%   { transform: translateY(calc(-1 * var(--glitch-roll-h))); }
    100% { transform: translateY(calc(var(--screen-h) + var(--glitch-roll-h))); }
}

.glitch__slice {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    -webkit-mix-blend-mode: screen;
    background-image: repeating-linear-gradient(
        90deg,
        rgb(var(--glitch-r) / 0.5) 0,
        rgb(var(--glitch-r) / 0.5) calc(4 * var(--px)),
        rgba(0, 0, 0, 0) calc(4 * var(--px)),
        rgba(0, 0, 0, 0) calc(23 * var(--px)),
        rgb(var(--glitch-b) / 0.45) calc(27 * var(--px)),
        rgb(var(--glitch-b) / 0.45) calc(30 * var(--px)),
        rgba(0, 0, 0, 0) calc(30 * var(--px)),
        rgba(0, 0, 0, 0) calc(41 * var(--px))
    );
    background-size: calc(41 * var(--px)) 100%;
}

.glitch__slice--1 {
    -webkit-clip-path: inset(4% 0 84% 0);
    clip-path: inset(4% 0 84% 0);
}

.glitch__slice--2 {
    -webkit-clip-path: inset(22% 0 63% 0);
    clip-path: inset(22% 0 63% 0);
}

.glitch__slice--3 {
    -webkit-clip-path: inset(41% 0 41% 0);
    clip-path: inset(41% 0 41% 0);
}

.glitch__slice--4 {
    -webkit-clip-path: inset(63% 0 18% 0);
    clip-path: inset(63% 0 18% 0);
}

.device.is-glitching .glitch__slice--1 { animation: slice-a var(--glitch-step) steps(1, end) infinite; }
.device.is-glitching .glitch__slice--2 { animation: slice-b calc(var(--glitch-step) * 0.7) steps(1, end) infinite; }
.device.is-glitching .glitch__slice--3 { animation: slice-c calc(var(--glitch-step) * 1.3) steps(1, end) infinite; }
.device.is-glitching .glitch__slice--4 { animation: slice-d calc(var(--glitch-step) * 0.5) steps(1, end) infinite; }

@keyframes slice-a {
    0%   { background-position-x: 0; transform: translateX(0); }
    25%  { background-position-x: calc(41 * var(--px)); transform: translateX(calc(6 * var(--px))); }
    50%  { background-position-x: calc(-82 * var(--px)); transform: translateX(calc(-4 * var(--px))); }
    75%  { background-position-x: calc(123 * var(--px)); transform: translateX(calc(2 * var(--px))); }
    100% { background-position-x: 0; transform: translateX(0); }
}

@keyframes slice-b {
    0%   { background-position-x: calc(-41 * var(--px)); transform: translateX(calc(-3 * var(--px))); }
    33%  { background-position-x: calc(82 * var(--px)); transform: translateX(calc(7 * var(--px))); }
    66%  { background-position-x: calc(-123 * var(--px)); transform: translateX(calc(-6 * var(--px))); }
    100% { background-position-x: calc(-41 * var(--px)); transform: translateX(calc(-3 * var(--px))); }
}

@keyframes slice-c {
    0%   { background-position-x: 0; transform: translateX(0); }
    20%  { background-position-x: calc(-41 * var(--px)); transform: translateX(calc(-8 * var(--px))); }
    40%  { background-position-x: calc(164 * var(--px)); transform: translateX(calc(5 * var(--px))); }
    60%  { background-position-x: calc(-41 * var(--px)); transform: translateX(calc(-2 * var(--px))); }
    80%  { background-position-x: calc(41 * var(--px)); transform: translateX(calc(9 * var(--px))); }
    100% { background-position-x: 0; transform: translateX(0); }
}

@keyframes slice-d {
    0%   { background-position-x: calc(82 * var(--px)); transform: translateX(calc(4 * var(--px))); }
    50%  { background-position-x: calc(-41 * var(--px)); transform: translateX(calc(-9 * var(--px))); }
    100% { background-position-x: calc(82 * var(--px)); transform: translateX(calc(4 * var(--px))); }
}

.glitch__tear {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--px);
    mix-blend-mode: screen;
    -webkit-mix-blend-mode: screen;
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 calc(1 * var(--px)) 0 rgb(var(--glitch-r) / 0.9),
        0 calc(-1 * var(--px)) 0 rgb(var(--glitch-b) / 0.9);
    transform: translateY(calc(-2 * var(--px)));
}

.device.is-glitching .glitch__tear {
    animation: tear-run calc(var(--glitch-step) * 0.8) steps(1, end) infinite;
}

@keyframes tear-run {
    0%   { transform: translateY(0); opacity: 0.9; }
    20%  { transform: translateY(calc(0.13 * var(--screen-h))); opacity: 0.5; }
    40%  { transform: translateY(calc(0.31 * var(--screen-h))); opacity: 1; }
    60%  { transform: translateY(calc(0.15 * var(--screen-h))); opacity: 0.4; }
    80%  { transform: translateY(calc(0.61 * var(--screen-h))); opacity: 0.8; }
    100% { transform: translateY(var(--screen-h)); opacity: 0.9; }
}

.device.is-glitching .screen__scanlines {
    animation-duration: var(--glitch-step);
}

html.is-calm .device.is-glitching .screen__glitch {
    opacity: 0.55;
}

@media (pointer: coarse) and (max-width: 560px) {
    .glitch__slice--3,
    .glitch__slice--4 {
        display: none;
    }

    .glitch__static {
        background-image:
            linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, rgba(0, 0, 0, 0) 25% 75%, rgba(255, 255, 255, 0.5) 75%);
        background-size: calc(2 * var(--px)) calc(2 * var(--px));
    }
}