@import '@resources/index.css';

.supt-video-homepage {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 150svh;
	margin-top: -75svh;
	padding: 0 !important;

	pointer-events: none;

	@media (orientation: portrait) {
		align-items: flex-start;
	}

	&__background {
		position: absolute;
		inset: 0;
		overflow: hidden;
		&__circle {
			position: fixed;
			width: 100vw;
			height: 100vw;
			border-radius: 50%;
			z-index: 0;

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

			top: calc(50vh - 50vw);
			left: 0;

			will-change: transform;

			@media (orientation: portrait) {
				width: 125vh;
				height: 125vh;
				top: 0;
				left: calc(50vw - 125vh / 2);
			}

			&__separator {
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				height: 300px;
				background-color: var(
					--supt-video-homepage-mobile-separator-background-color,
					$color-purple
				);
				transform-origin: top center;
			}

			&__inner {
				position: absolute;
				inset: 0;
				background-color: $color-purple;
				border-radius: 50%;
			}
		}
	}

	&__inner {
		width: 100%;
		z-index: 1;
		position: sticky;
		top: 0;
		height: 125vmin;
		pointer-events: none;

		@media (orientation: portrait) {
			margin-bottom: calc(75svh - 125vw + (0.7 * 75svh) - 40px);
		}
	}

	&__video {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;

		@media (orientation: portrait) {
			align-items: flex-start;
		}

		video {
			display: block;
			width: 100%;
			height: auto;

			@media (orientation: portrait) {
				height: 100%;
			}
		}
	}

	/* Modifiers */
	&.-is-fully-visible {
		.supt-video-homepage__background {
			&__circle {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}
		}

		.supt-video-homepage__inner {
			pointer-events: auto;
		}
	}
}