.supt-section-world {
	height: 400vh;

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

		/* height * 0.5 (which is the scale at the end) / 2 (to have the half of it) */
		margin-bottom: calc(-50vh + (var(--supt-section-world-height) * 0.51) / 2);

		overflow: hidden;
	}

	&__line-wrapper {
		position: absolute;
		inset: 0;
		display: flex;
		justify-content: center;
	}

	&__line {
		position: relative;
		display: block;
		width: 1px;
		height: 25%;
		background-color: $color-new;
		transform-origin: top;

		@media (min-width: $breakpoint-md) {
			height: 40%;
		}

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

	&__inner {
		height: 100%;
		display: flex;
		padding-top: 25vh;
		@media (min-width: $breakpoint-md) {
			align-items: center;
			padding-top: 0;
		}
	}

	&__content {
		position: relative;
		padding: 52px 0;
	}
	&__text {
		@extend %t-body-sm;
		color: $color-new;
	}

	&__world-col {
		position: static;
		@media (min-width: $breakpoint-md) {
			position: relative;
		}
	}

	&__world-wrapper {
		position: absolute;
		left: var(--supt-container-padding-inline);
		right: var(--supt-container-padding-inline);
		top: 45%;

		@media (min-width: $breakpoint-md) {
			left: 0;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	&__world {
		transform-origin: 50% -50%;
		@media (min-width: $breakpoint-md) {
			transform-origin: 0% -50%;
		}

		&__line {
			--supt-section-world-glow-dasharray: 2070;

			position: absolute;
			top: 50%;
			left: 50%;
			width: 125%;
			height: 125%;
			transform: translate(-50%, -50%) rotate(-90deg);

			stroke-dasharray: var(--supt-section-world-glow-dasharray);
			stroke-dashoffset: var(--supt-section-world-glow-dasharray);
		}

		canvas {
			display: block;
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 1;
			cursor: grab;

			position: relative;
			z-index: 1;

			&:active {
				cursor: grabbing;
			}
		}
	}
}