/**
 * Portfolio card video — poster/skeleton idle, load solo al play, fade-in.
 */

.cs-portfolio-card-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	isolation: isolate;
	background-color: #141414;
	content-visibility: auto;
	contain-intrinsic-size: 360px 640px;
}

.cs-portfolio-card-video__skeleton {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(ellipse 90% 70% at 18% 12%, rgba(228, 35, 19, 0.42), transparent 58%),
		radial-gradient(ellipse 75% 55% at 88% 78%, rgba(228, 35, 19, 0.2), transparent 52%),
		linear-gradient(152deg, #1c1c1c 0%, #2a1212 42%, #101010 100%);
	opacity: 1;
	transition: opacity 0.45s ease;
}

.cs-portfolio-card-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-portfolio-card-video.is-buffering .cs-portfolio-card-video__skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		105deg,
		transparent 30%,
		rgba(255, 255, 255, 0.08) 48%,
		transparent 66%
	);
	background-size: 220% 100%;
	animation: cs-portfolio-video-shimmer 1.6s ease-in-out infinite;
}

.cs-portfolio-card-video.is-ready .cs-portfolio-card-video__skeleton,
.cs-portfolio-card-video.is-error .cs-portfolio-card-video__skeleton {
	opacity: 0;
}

.cs-portfolio-card-video video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.cs-portfolio-card-video.is-ready video,
.cs-portfolio-card-video.is-error video {
	opacity: 1;
}

@keyframes cs-portfolio-video-shimmer {
	0% {
		background-position: 120% 0;
	}
	100% {
		background-position: -40% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-portfolio-card-video__skeleton,
	.cs-portfolio-card-video video {
		transition: none;
	}

	.cs-portfolio-card-video.is-buffering .cs-portfolio-card-video__skeleton::after {
		animation: none;
	}
}

.cs-portfolio-card-video__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background: rgba(17, 17, 17, 0.28);
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cs-portfolio-card-video.is-playing .cs-portfolio-card-video__overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.cs-portfolio-card-video__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	background: rgba(17, 17, 17, 0.55);
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}

.cs-portfolio-card-video__play:hover,
.cs-portfolio-card-video__play:focus-visible {
	background: var(--color-accent, #e42313);
	transform: scale(1.05);
}

.cs-portfolio-card-video__toolbar {
	position: absolute;
	right: 0.65rem;
	bottom: 0.65rem;
	z-index: 3;
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

.cs-portfolio-card-video__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	background: rgba(17, 17, 17, 0.72);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.cs-portfolio-card-video__btn:hover,
.cs-portfolio-card-video__btn:focus-visible {
	background: rgba(17, 17, 17, 0.9);
	transform: scale(1.05);
}

.cs-portfolio-card-video__icon[hidden] {
	display: none;
}

@media (hover: hover) {
	.cs-portfolio-card-video__toolbar {
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.cs-portfolio-card-video.is-playing:hover .cs-portfolio-card-video__toolbar,
	.cs-portfolio-card-video.is-playing:focus-within .cs-portfolio-card-video__toolbar {
		opacity: 1;
	}
}

@media (hover: none) {
	.cs-portfolio-card-video.is-playing .cs-portfolio-card-video__toolbar {
		opacity: 1;
	}
}

.home-portfolio__card-media .cs-portfolio-card-video,
.page-portfolio__card-media .cs-portfolio-card-video {
	position: absolute;
	inset: 0;
}

.home-portfolio__views,
.page-portfolio__views {
	z-index: 4;
}