.hero__video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	border-radius: 25px;
	overflow: hidden;
	background: #0f172a;
}

.hero__video-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	pointer-events: none;
	background: #0f172a;
}

.home-video-shell {
	position: relative;
}

.home-video-toggle {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(17, 24, 39, 0.62);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24);
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.home-video-toggle[hidden],
.home-video-spinner[hidden] {
	display: none !important;
}

.home-video-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	display: inline-flex;
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	border: 4px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ef017f;
	border-radius: 50%;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.24);
	pointer-events: none;
	animation: home-video-spinner-rotate 0.85s linear infinite;
}

@keyframes home-video-spinner-rotate {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-video-spinner {
		animation-duration: 1.8s;
	}
}

.home-video-toggle:hover {
	transform: translate(-50%, -50%) scale(1.06);
	background: rgba(239, 1, 127, 0.78);
}

.home-video-toggle.is-unmuted {
	background: rgba(0, 133, 222, 0.82);
}

.home-video-toggle.is-play-required {
	background: rgba(239, 1, 127, 0.88);
}

.home-video-toggle i {
	font-size: 24px;
	line-height: 1;
	pointer-events: none;
}

@media (max-width: 766px) {
	.hero__video-wrapper {
		margin-bottom: 24px;
	}
}