/* Video Loading Optimization - Faster Initial Display */

/* Hide video until it's ready to play */
.ph-video video {
	opacity: 0;
	transition: opacity 0.5s ease-in;
}

/* Show video once it can play */
.ph-video video.canplay {
	opacity: 1;
}

/* Poster image - shows immediately while video loads */
.ph-video-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 1;
	transition: opacity 0.5s ease-out;
}

/* Hide poster once video is playing */
.ph-video video.playing ~ .ph-video-poster,
.ph-video video.canplay ~ .ph-video-poster {
	opacity: 0;
	pointer-events: none;
}

/* Ensure video container maintains aspect ratio */
.ph-video-inner {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #000;
}

/* Optimize video rendering */
.ph-video video {
	will-change: opacity;
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* Loading state */
.ph-video.loading .ph-video-poster {
	opacity: 1;
}

.ph-video.loaded .ph-video-poster {
	opacity: 0;
}