.animated-video > .frame {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #101315;
}

.animated-video > .frame > .animated-video__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: inherit;
}

.animated-video .animated-video__preview {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: #101315;
	color: #fff;
	cursor: pointer;
	filter: blur(0);
	opacity: 1;
	transition: filter .2s ease, opacity .2s ease;
	animation: animated-video-cover-reveal .2s ease;
}

.animated-video.is-active .animated-video__preview {
	filter: blur(8px);
	opacity: 0;
	pointer-events: none;
	animation: none;
}

@keyframes animated-video-cover-reveal {
	from { filter: blur(8px); opacity: 0; }
	to { filter: blur(0); opacity: 1; }
}

.animated-video .frame > video {
	filter: blur(8px);
	opacity: 0;
	transition: filter .2s ease, opacity .2s ease;
}

.animated-video.is-active .frame > video {
	filter: blur(0);
	opacity: 1;
}

.animated-video .animated-video__preview[hidden] {
	display: none;
}

.animated-video .animated-video__preview picture,
.animated-video .animated-video__preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.animated-video .animated-video__preview video {
	position:absolute; inset:0; display:block; width:100%; height:100%;
	object-fit:cover; pointer-events:none;
}

.animated-video .animated-video__preview::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(44px, 4rem, 72px);
	height: clamp(44px, 4rem, 72px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M19 13L35 24L19 35Z' fill='%23171a1c'/%3E%3C/svg%3E") center / 80% no-repeat;
	box-shadow: 0 0 0 9px rgba(255, 153, 51, .14);
	transition: box-shadow .15s ease;
}

.animated-video .animated-video__preview:hover::after {
	box-shadow: 0 0 0 13px rgba(255, 153, 51, .24);
}

.animated-video .animated-video__preview:focus-visible {
	outline: 3px solid #ff9933;
	outline-offset: -5px;
}

@media (prefers-reduced-motion: reduce) {
	.animated-video .animated-video__preview,
	.animated-video .frame > video {
		transition: none;
		filter: none;
		animation: none;
	}
}