/* =========================
   БАННЕР
========================= */

.banner {
	position: relative;
	width: 100%;
	min-height: 300px;
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

.banner__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #6b6b6b;
}

.banner__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner .container {
	position: relative;
	z-index: 1;

	width: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.banner__body {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;
	justify-content: center;
}

/* =========================
   КНОПКА PLAY
========================= */

.play-button {
	position: relative;

	width: 120px;
	height: 120px;

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}

.play-icon {
	position: relative;
	z-index: 3;

	width: 38px;
	height: auto;

	transform-origin: center;

	transition:
		transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		filter 0.35s ease;
}

.play-ring {
	position: absolute;

	width: 70px;
	height: 70px;

	border: 2px solid #00d1f7;

	border-radius: 50%;

	opacity: 0;

	transform: scale(0.5);

	pointer-events: none;
}

.play-button:hover .play-icon {
	transform: scale(1.15);

	filter: drop-shadow(0 0 5px rgba(0, 209, 247, 0.9)) drop-shadow(0 0 15px rgba(0, 209, 247, 0.7))
		drop-shadow(0 0 30px rgba(0, 209, 247, 0.4));
}

.play-button:hover .play-ring-1 {
	animation: playRing 1.8s ease-out infinite;
}

.play-button:hover .play-ring-2 {
	animation: playRing 1.8s ease-out infinite;
	animation-delay: 0.9s;
}

@keyframes playRing {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}

	15% {
		opacity: 0.9;
	}

	50% {
		opacity: 0.5;
	}

	75% {
		opacity: 0.2;
	}

	100% {
		opacity: 0;
		transform: scale(2.4);
	}
}

.play-button:active .play-icon {
	transform: scale(0.95);

	filter: drop-shadow(0 0 8px rgba(0, 209, 247, 0.8));
}

#banner-video {
	padding: 0;
	max-width: 900px;
}

.main-page-banner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #6b6b6b;
}

.main-page-banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner-course-block {
	position: relative;
	z-index: 5;
}

.main-page-banner .play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}