/** CRT image effect: .crt-tv / .crt-gallery */
.crt-tv {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transform: perspective(900px) translateZ(0);
	box-shadow:
		inset 0 0 34px rgba(0, 0, 0, .66),
		inset 0 0 9px rgba(170, 194, 180, .05),
		0 0 16px rgba(130, 141, 136, .035)
}
.crt-tv img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.72) sepia(.06) contrast(1.12) brightness(.78);
	transition: filter .25s ease
}
.crt-tv:hover img {
	filter: grayscale(.58) sepia(.05) contrast(1.08) brightness(.86)
}
.crt-tv::before {
	content: "";
	position: absolute;
	z-index: 9;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 50% 48%, transparent 54%, rgba(0, 0, 0, .12) 72%, rgba(0, 0, 0, .48) 100%),
		linear-gradient(115deg, rgba(255, 255, 255, .045) 0%, transparent 18%, transparent 72%, rgba(255, 255, 255, .018) 100%);
	box-shadow:
		inset 8px 0 18px rgba(0, 0, 0, .16),
		inset -8px 0 18px rgba(0, 0, 0, .16),
		inset 0 7px 16px rgba(255, 255, 255, .018),
		inset 0 -10px 20px rgba(0, 0, 0, .20)
}
.crt-tv > i, .crt-noise {
	position: absolute;
	inset: 0;
	pointer-events: none
}
.crt-tint {
	z-index: 2;
	background: linear-gradient(rgba(91, 118, 101, .075), rgba(58, 82, 69, .04));
	mix-blend-mode: color
}
.crt-fog {
	z-index: 3;
	background:
		radial-gradient(circle at 24% 36%, rgba(178, 196, 185, .20), transparent 30%),
		radial-gradient(circle at 72% 64%, rgba(145, 166, 153, .14), transparent 34%),
		linear-gradient(110deg, transparent 18%, rgba(150, 170, 157, .10) 50%, transparent 78%);
	filter: blur(18px);
	opacity: .20;
	mix-blend-mode: screen;
	transform: scale(1.16);
	animation: crt-fog 16s ease-in-out infinite alternate
}
.crt-static {
	z-index: 4;
	background:
		radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .16) 68%, rgba(0, 0, 0, .69) 100%),
		repeating-linear-gradient(to bottom, rgba(225, 238, 229, .057) 0, rgba(225, 238, 229, .057) 1px, rgba(0, 0, 0, .018) 1px, rgba(0, 0, 0, .018) 2px, transparent 2px, transparent 4px)
}
.crt-sweep {
	z-index: 6;
	top: -25%;
	bottom: auto;
	height: 18%;
	background: linear-gradient(to bottom, transparent, rgba(188, 213, 195, .035), transparent);
	filter: blur(5px);
	animation: crt-sweep 5.5s linear infinite
}
.crt-tv.crt-small .crt-static {
	background:
		radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .16) 68%, rgba(0, 0, 0, .69) 100%),
		repeating-linear-gradient(to bottom, rgba(225, 238, 229, .045) 0, rgba(225, 238, 229, .045) 1px, rgba(0, 0, 0, .014) 1px, rgba(0, 0, 0, .014) 2px, transparent 2px, transparent 4px)
}
.crt-tv.crt-small .crt-sweep {
	background: linear-gradient(to bottom, transparent, rgba(188, 213, 195, .05), transparent)
}
.crt-haze {
	z-index: 7;
	background:
		linear-gradient(to bottom, transparent 0%, rgba(190, 205, 196, .045) 34%, rgba(190, 205, 196, .080) 49%, rgba(190, 205, 196, .035) 62%, transparent 100%),
		radial-gradient(ellipse at 50% 48%, rgba(190, 210, 198, .060), transparent 68%);
	mix-blend-mode: screen;
	opacity: .78;
	animation: crt-haze 6s ease-in-out infinite alternate
}
.crt-flicker {
	z-index: 7;
	background: linear-gradient(to bottom, rgba(210, 232, 218, .027), rgba(210, 232, 218, .06), rgba(210, 232, 218, .024));
	mix-blend-mode: screen;
	animation: crt-flicker 3.2s steps(1, end) infinite
}
.crt-noise {
	z-index: 8;
	width: 100%;
	height: 100%;
	opacity: .25;
	mix-blend-mode: screen;
	image-rendering: auto;
	filter: contrast(1.72) brightness(1.14);
	animation: crt-noise .55s steps(2, end) infinite
}
@keyframes crt-sweep {
	from { transform: translateY(-50%) }
	to { transform: translateY(760%) }
}
@keyframes crt-fog {
	from { transform: scale(1.15) translate3d(-1.2%, -.8%, 0) }
	to { transform: scale(1.17) translate3d(1.2%, .8%, 0) }
}
@keyframes crt-haze {
	from { opacity: .45; transform: translateY(-1.5%) }
	to { opacity: .72; transform: translateY(1.5%) }
}
@keyframes crt-noise {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.015) }
	25% { transform: translate3d(-.6%, .3%, 0) scale(1.02) }
	50% { transform: translate3d(.4%, -.5%, 0) scale(1.018) }
	75% { transform: translate3d(.2%, .5%, 0) scale(1.022) }
}
@keyframes crt-flicker {
	0%, 100% { opacity: .10 }
	6% { opacity: .18 }
	7% { opacity: .08 }
	8% { opacity: .22 }
	26% { opacity: .12 }
	27% { opacity: .19 }
	28% { opacity: .10 }
	54% { opacity: .16 }
	55% { opacity: .07 }
	56% { opacity: .20 }
	78% { opacity: .11 }
	79% { opacity: .17 }
	80% { opacity: .09 }
}
@media (prefers-reduced-motion: reduce) {
	.crt-fog, .crt-sweep, .crt-haze, .crt-flicker, .crt-noise {
		animation: none
	}
}