#portfolio .portfolio-video-poster {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	transition: transform 260ms ease, opacity 180ms ease;
}

#portfolio video[data-src] {
	position: relative;
	z-index: 2;
	opacity: 0;
	background: transparent;
	transition: opacity 160ms ease, transform 300ms ease;
}

#portfolio .has-video-poster.is-video-playing video[data-src] {
	opacity: 1;
}

#portfolio video[data-src] + div {
	z-index: 3;
}

#portfolio .group:hover .portfolio-video-poster,
#portfolio .group:focus-within .portfolio-video-poster {
	transform: scale(1.05);
}

#portfolio .portfolio-video-loader {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	background: rgba(15, 15, 15, 0.48);
	transition: opacity 180ms ease;
}

#portfolio .portfolio-video-loader::before {
	content: "";
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	border: 3px solid rgba(245, 245, 245, 0.22);
	border-top-color: var(--color-gold, #ffc107);
	box-shadow: 0 0 18px rgba(255, 193, 7, 0.28);
	animation: portfolio-video-spin 800ms linear infinite;
}

#portfolio .is-video-loading .portfolio-video-loader {
	opacity: 1;
}

@keyframes portfolio-video-spin {
	to {
		transform: rotate(360deg);
	}
}