/* image glitch effect by MinzCode:
https://codepen.io/MinzCode/pen/YzqwbQV
*/

.dialogue-box-cont > .image-cont > .glitch.layer {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    xbackground-image: url('https://i.imgur.com/1E3GP4A.png');
    /*https://i.imgur.com/mNeSH3x.png https://i.imgur.com/1E3GP4A.png https://i.imgur.com/F2wfEys.jpeg */

	xbackground-repeat: no-repeat;
	xbackground-position: 0 0;
    xz-index:1;
}
.dialogue-box-cont > .image-cont > .glitch.layer:nth-child(3) {
	transform: translateX(-2%);
	animation: glitch-anim-1 5s infinite linear alternate;
}
.dialogue-box-cont > .image-cont > .glitch.layer:nth-child(4) {
	transform: translateX(2%) translateY(2%);
	animation: glitch-anim-2 5.3s -.8s infinite linear alternate;
}
.dialogue-box-cont > .image-cont > .glitch.layer:nth-child(5) {
	transform: translateX(2%) ;
	animation: glitch-anim-flash 5s infinite linear;
}
.dialogue-box-cont > .image-cont > .glitch.layer:nth-child(6) {
	transform: translateX(-2%);
	animation: glitch-anim-1 8.2s 0.3s infinite linear alternate backwards;
}

@keyframes glitch-anim-1 {
	0% {
		clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
	}
	10% {
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	20% {
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	40% {
		clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
	}
	50% {
		clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
	}
	60% {
		clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
	}
	70% {
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	80% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	90% {
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	100% {
		clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
	}
}
@keyframes glitch-anim-2 {
	0% {
		clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
	}
	15% {
		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	}
	25% {
		clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
	}
	30% {
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	45% {
		clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
	}
	50% {
		clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
	}
	65% {
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	75% {
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	80% {
		clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
	}
	95% {
		clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
	}
	100% {
		clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
	}
}
@keyframes glitch-anim-flash {
	0% {
		opacity: .3;
        filter:saturate(10);
	}
	30%, 100% {
		opacity: 0;
	}
}