.supt-section-guardvision {
	height: 600vh;

	&__inner,
	&__horizontal-scroll {
		padding-top: 69px;
		@media (min-width: $breakpoint-md) {
			padding-top: 81px;
		}
	}

	&__inner {
		height: 100vh;
		position: sticky;
		top: 0;

		display: flex;
		align-items: center;

		overflow: hidden;
	}

	.container {
		position: relative;
	}

	&__image {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 70%;
		transform: translate(-50%, -52%);
		z-index: 1;

		@media (min-width: $breakpoint-sm) {
			height: 80%;
		}
		@media (min-width: $breakpoint-md) {
			transform: translate(-50%, -50%);
			height: 100%;
		}

		&__inner {
			position: absolute;
			inset: 0;
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;

			&.-on {
				position: absolute;
				inset: 0;
				opacity: 0;
			}
		}

		&__zoom {
			position: absolute;
			inset: 0;

			opacity: 0;

			&__radar {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;

				transform-origin: 48% 30%;
				z-index: 1;

				@media (min-width: $breakpoint-lg) {
					transform-origin: 48% 28%;
				}
				@media (min-width: $breakpoint-xxl) {
					transform-origin: 48% 30%;
				}
			}
		}

		&__circle {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;

			opacity: 0;
		}

		&__star-wrapper {
			position: absolute;
			inset: 0;
		}

		&__star {
			position: absolute;

			top: 50%;
			left: 50%;
			width: 100%;
			height: 100%;
			translate: -44.5% -43.5%;

			opacity: 0;

			@media (min-width: $breakpoint-xs) {
				translate: -45% -43.5%;
			}
			@media (min-width: $breakpoint-sm) {
				translate: -46% -43.5%;
			}
			@media (min-width: $breakpoint-lg) {
				translate: -46.5% -43.5%;
			}
			@media (min-width: $breakpoint-xl) {
				translate: -47% -43%;
			}
			@media (min-width: $breakpoint-xxl) {
				translate: -46% -44%;
			}
		}
	}

	&__content {
		height: calc(100vh - 10vh * 2);
		@media (min-width: $breakpoint-md) {
			height: calc(100vh - 100px * 2);
		}

		& > * {
			&:nth-child(1),
			&:nth-child(2) {
				align-self: flex-start;
			}
			&:nth-last-child(1),
			&:nth-last-child(2) {
				align-self: flex-end;
			}

			/* 1st line */
			&:nth-child(2) {
				margin-top: 65px;
			}

			/* 2nd line */
			&:nth-last-child(2) {
				margin-bottom: 65px;
			}
		}
	}

	&__text {
		opacity: 0;
		p {
			@extend %t-body-s;
			color: $color-white;
		}
	}

	&__line {
		position: relative;
		opacity: 0;

		display: none;
		@media (min-width: $breakpoint-md) {
			display: block;
		}

		svg {
			display: block;

			&.-default,
			&.-glow {
				width: 100%;
				height: auto;
			}
			&.-glow {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 150%;

				stroke-dasharray: 230;
				stroke-dashoffset: 230;
			}
		}
	}

	&__mobile-line {
		position: relative;
		display: block;
		width: 1px;
		height: 5vh;
		background-color: $color-new;
		left: 50%;
		transform: translateX(-50%);
		transform-origin: top;

		opacity: 0;

		@media (min-width: $breakpoint-md) {
			display: none;
		}

		&:first-child {
			margin-bottom: 3vh;
		}
		&:last-child {
			margin-top: 3vh;

			transform-origin: 50%;
			transform: scaleY(-1);
		}

		&__glow {
			position: absolute;
			top: 0;
			left: calc(-50% + 1px);
			width: auto;
			height: 100%;
			transform-origin: top;
			transform: scaleY(1.2) translateX(-50%);
			stroke-dasharray: 40;
			stroke-dashoffset: 40;
		}
	}

	/* Horizontal scroll */
	&__horizontal-scroll {
		position: absolute;
		inset: 0;
		width: 200vw;

		transform-origin: left;
		transform: translateX(100%);

		z-index: 0;

		&__inner {
			position: relative;
			inset: 0;
			width: 200vw;
			height: 100%;

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

		&__line {
			position: relative;
			display: block;
			width: 120vw;
			height: 1px;
			background-color: $color-new;
			z-index: 2;

			margin-right: -67vw;

			/* Because we've translated the image to -52% on mobile */
			top: -1%;

			@media (min-width: $breakpoint-md) {
				top: 0;
				width: 140vw;
				margin-right: -87vw;
			}

			&__glow {
				position: absolute;
				top: calc(-50% + 1px);
				left: 0;
				width: 100%;
				height: auto;
				transform-origin: left;
				transform: translateY(-50%) scaleX(0);

				overflow: visible;
			}

			&__end {
				position: absolute;
				top: 50%;
				right: -10px;
				transform: translateY(-50%) scale(0);
				transform-origin: 50% 0%;

				&__radar {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 500%;
					height: 500%;
					border-radius: 50%;
					border: 3px solid $color-main;
					z-index: -1;
				}
			}
		}

		&__image {
			width: 100vw;
			height: 100%;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 25%;
				background: linear-gradient(-90deg, rgba(1, 1, 1, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
				z-index: 1;
			}

			video {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: bottom right;
			}
		}
	}
}