@import "./config.css";
@import "./components.css";

/* Global */
html,
body {
	overflow-x: hidden;
}
body {
	--bgOpacity: 100%;
	color: var(--secondary);
	background-color: var(--neutral);

	&::after {
		content: "";
		position: absolute;
		z-index: -2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		pointer-events: none;
		background-color: var(--primary);
		opacity: var(--bgOpacity);
	}
}

/* Header */
header {
	overflow-x: clip;
	position: absolute;
	z-index: 9;
	top: 0;
	left: 50%;
	translate: -50% 0;
	width: 100%;
	margin-top: 1.625rem;
	color: var(--neutral);
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 1.5625rem;

	.header-logo {
		margin-right: auto;

		img {
			width: 9.1875rem;
		}
	}

	> .btn-wrapper .btn {
		transition:
			opacity var(--anim),
			scale var(--anim),
			background-color var(--anim),
			border-color var(--anim),
			color var(--anim);
	}

	nav {
		position: absolute;
		top: 100%;
		right: 0;
		margin: 1.125rem var(--padding-x);
		padding: var(--padding-x);
		width: max-content;
		display: grid;
		place-items: center;
		gap: 0.1875rem;
		border-radius: 1.125rem;
		backdrop-filter: blur(1.5625rem);
		background-color: color-mix(in srgb, var(--secondary) 65%, transparent);
		transform-origin: top right;
		transition:
			opacity var(--anim),
			translate var(--anim),
			visibility var(--anim),
			scale var(--anim);

		.btn-wrapper {
			display: none;
		}
		.link {
			padding: 0.375rem 0.75rem;
			text-transform: uppercase;
		}
	}
	> .btn-wrapper.active .btn {
		color: var(--secondary);
		border-color: transparent;
		background-color: color-mix(in srgb, var(--neutral) 95%, transparent);
	}
	> .btn-wrapper:not(.active) + nav {
		opacity: 0;
		scale: 0.95;
		visibility: hidden;
		translate: 0 -0.25rem;
	}

	@media (min-width: 1024px) {
		> .btn-wrapper {
			display: none;
		}
		button.btn {
			display: none;
		}

		nav {
			all: unset !important;
			display: contents !important;

			.btn-wrapper {
				display: table;
				margin-left: auto;
			}
			.link:last-child {
				display: none;
			}
		}
	}
	@media (min-width: 1200px) and (min-height: 800px) {
		margin-top: 3.25rem;
	}

	@media (min-width: 1920px) {
		overflow: initial;
	}
}

/* Hero */
#hero {
	--ellipseOpacity: 50%;
	--ellipseRadius: 30%;
	--ellipseDrop: 0%;
	overflow: hidden;
	position: relative;
	padding-top: 8.5rem;

	/* BG with pattern & gradients */
	&::before,
	&::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	&::before {
		z-index: -3;
		background-image:
			radial-gradient(
				circle at 50% 50%,
				var(--primary) 50%,
				color-mix(in srgb, var(--primary) 75%, transparent)
			),
			linear-gradient(0deg, var(--secondary), var(--secondary));
	}
	&::after {
		z-index: -2;
		background-image: url("../assets/img/pattern.svg");
		background-size: 3.75rem;
		filter: brightness(0) invert(1);
		opacity: 0.06;
	}

	.hero-loading {
		position: absolute;
		z-index: 999;
		top: 30%;
		left: 50%;
		translate: -50% -50%;
		width: 3rem;
		height: auto;
		animation: loader 2s linear infinite;
		color: var(--neutral);
	}

	.title {
		max-width: clamp(61.25rem, 21.25rem + 62.5vw, 96.25rem);
		text-align: center;
		margin-inline: auto;
		line-height: 1;
		position: relative;
		z-index: 1;
		opacity: 0;
	}

	.hero-content {
		position: relative;
		margin-top: -3rem;
		background-image: linear-gradient(
			to bottom,
			transparent 40%,
			var(--neutral) 40%
		);

		/* Ellipse (rounded horizon line) */
		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			left: 50%;
			translate: -50% var(--ellipseOpacity);
			top: 25%;
			width: 235%;
			aspect-ratio: 4518 / 1026;
			border-radius: var(--ellipseRadius);
			filter: drop-shadow(
				0 0 4.6875rem
					color-mix(
						in srgb,
						var(--neutral) 50%,
						color-mix(
							in srgb,
							var(--neutral) var(--ellipseDrop),
							transparent
						)
					)
			);
			background-image: radial-gradient(
				ellipse at 50% 50%,
				var(--neutral) 50%,
				color-mix(in srgb, var(--neutral) 20%, transparent)
			);
		}

		.container {
			display: grid;
			grid-template-columns: 1fr;
			justify-items: center;
			position: relative;
		}
	}

	.hero-model {
		position: relative;
		margin-bottom: 3.2rem;
		padding-inline: var(--padding-x);
		width: calc(100% + var(--padding-x) * 2);

		div {
			aspect-ratio: 637 / 480;
		}
	}

	.text {
		text-align: center;
		padding-bottom: 1.6875rem;
		margin-top: 2.5rem;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			right: 50%;
			translate: 50% 0;
			width: 6.25rem;
			border-top: 1px solid;
		}
	}

	.btn-wrapper {
		z-index: 3;
	}

	@media (min-width: 480px) {
		.hero-model div {
			width: 80%;
			margin-inline: auto;
		}
		.text {
			max-width: 75%;
		}
	}
	@media (min-width: 640px) {
		.hero-model div {
			width: 65%;
			aspect-ratio: 637 / 547;
		}
	}
	@media (min-width: 768px) {
		.hero-model div {
			width: 52.5%;
		}
	}

	@media (min-width: 1024px) {
		overflow: visible;
		padding-bottom: 8.125rem;

		.hero-loading {
			top: 50%;
			width: 4rem;
		}

		.hero-content {
			background-image: none;
			margin-top: max(min(-4.375rem, -10.2vh), -6.25rem);

			&::before {
				top: 48.5%;
			}

			.container {
				grid-template-columns: 1fr auto 1fr;
				justify-items: unset;
				align-items: end;
			}
		}

		.hero-model {
			width: auto;
			padding-inline: 0;
			margin-right: unset;
			margin-bottom: -1.875rem;
			margin-left: 1.25rem;
			grid-column: 2;
			grid-row: 1;

			&::after {
				width: 200%;
			}

			div {
				margin-left: 0;
				width: auto;
				height: min(56vh, 34.1875rem);
				min-height: 26.25rem;
			}
		}

		.text {
			text-align: right;
			justify-self: end;
			grid-column: 1;
			max-width: 20.625rem;
			margin-right: 0.75rem;
			margin-bottom: clamp(-5.625rem, -14.514rem + 13.89vw, -0.625rem);

			&::after {
				right: 0;
				translate: 0;
			}
		}

		.btn-wrapper {
			margin-top: 0;
			margin-left: -10.25rem;
			justify-self: start;
			position: absolute;
			grid-column: 3;
		}
	}

	@media (min-width: 1200px) and (min-height: 800px) {
		padding-top: min(17vh, 11.5625rem);
	}

	@media (min-width: 2000px) {
		.hero-content::before {
			width: 150%;
		}
	}
}
@keyframes loader {
	0% {
		rotate: -90deg;
	}
	100% {
		rotate: 270deg;
	}
}

/* 3D */
#three-scene {
	--helpOpacity: 0;
	--helpX: -50%;
	--helpY: 62.5%;
	position: absolute;
	z-index: 2;
	top: 9%;
	left: 0;

	&::after {
		content: "";
		position: absolute;
		z-index: 3;
		top: var(--helpY);
		left: 50%;
		translate: var(--helpX) -50%;
		background: url("../assets/icons/gesture.svg") no-repeat center/ 50% 50%;
		width: 4.625rem;
		aspect-ratio: 1;
		pointer-events: none;
		animation: move 2s infinite;
		backdrop-filter: blur(7px) brightness(0.8);
		border-radius: 50%;
		opacity: var(--helpOpacity);
	}

	canvas {
		mask-image: linear-gradient(to top, transparent, white 10%);
	}

	@media (min-width: 400px) {
		top: 6.5%;
	}
	@media (min-width: 480px) {
		top: 7%;
	}
	@media (min-width: 560px) {
		top: 2.5%;
	}
	@media (min-width: 640px) {
		top: 2.5%;
	}
	@media (min-width: 700px) {
		top: -1%;
	}
	@media (min-width: 768px) {
		top: 1.75%;
	}
	@media (min-width: 920px) {
		top: -0.75%;
	}
	@media (min-width: 1024px) {
		top: 0;
		--wheelShadowX: 40%;
		--wheelShadowOpacity: 0;
		--wheelShadowDepth: 50%;
		--wheelShadowXMultiplier: (-50% + var(--wheelShadowX)) / 2.5;

		&::before {
			content: "";
			position: fixed;
			z-index: -1;
			top: 50vh;
			left: calc(var(--wheelShadowX) + var(--wheelShadowXMultiplier));
			translate: -50% 125%;
			width: min(28%, 33rem);
			aspect-ratio: 539 / 164;
			pointer-events: none;
			background: radial-gradient(
				ellipse at center,
				color-mix(
					in srgb,
					transparent,
					var(--secondary) var(--wheelShadowDepth)
				),
				transparent 66%
			);
			mask-image: radial-gradient(ellipse at center, white, transparent);
			opacity: var(--wheelShadowOpacity);
		}

		&::after {
			display: none;
		}
	}
	@media (min-width: 1024px) and (max-height: 720px) {
		--wheelShadowXMultiplier: (-50% + var(--wheelShadowX)) / 5;

		&::before {
			translate: -50% 110%;
		}
	}
	@media (min-width: 1200px) and (min-height: 720px) {
		--wheelShadowXMultiplier: 0%;

		&::before {
			translate: -50% 85%;
		}
	}
	@media (min-width: 1536px) and (max-height: 800px) {
		--wheelShadowXMultiplier: (50% - var(--wheelShadowX)) / 8;

		&::before {
			translate: -50% 70%;
		}
	}
	@media (min-width: 1600px) and (min-height: 800px) {
		--wheelShadowXMultiplier: 0%;
	}
}
.pin-spacer,
#three-scene,
#three-scene canvas {
	user-select: none;
	pointer-events: none;
}

/* Features & Specs */
#fonctionnalites {
	background-color: var(--neutral);

	.fonctionnalites-infos {
		--textPadding: 1.4em;
		--patternMargin: clamp(11.25rem, 4.036rem + 11.27vw, 17.563rem);
		--patternX: -25%;
		--patternClip: 0 0, 0% 0, 0% 100%, 0% 100%;
		padding-block: 9.375rem;
		position: relative;

		&:last-of-type {
			--patternX: 25%;
			--patternClip: 100% 0, 100% 0, 100% 100%, 100% 100%;
		}

		.infos-item:not(:first-of-type) {
			margin-top: 4.5rem;
		}

		.heading {
			--titleIconOpacity: 1;
			width: fit-content;
			position: relative;

			&::after {
				display: inline-block;
				content: "";
				z-index: -1;
				height: 0.4em;
				margin-left: 0.35em;
				translate: 0 -1rem;
				aspect-ratio: 1;
				background: url("../assets/img/pattern.svg") no-repeat
					center/100%;
				opacity: var(--titleIconOpacity);
			}
		}

		.text {
			margin-top: 1.8em;
			margin-left: var(--textPadding);
			padding-left: var(--textPadding);
			padding-bottom: 2.3125rem;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 1px;
				height: 100%;
				background-image: repeating-linear-gradient(
					to bottom,
					currentColor,
					currentColor 0.8125rem,
					transparent 0.8125rem,
					transparent 1.625rem
				);
			}
		}

		@media (min-width: 640px) {
			.heading br {
				display: none;
			}
		}

		@media (min-width: 1024px) {
			--textPadding: 2.1em;

			&::before {
				content: "";
				position: absolute;
				top: 42%;
				right: 50%;
				margin-right: var(--patternMargin);
				width: min(21%, 18.75rem);
				translate: var(--patternX) -55%;
				aspect-ratio: 1;
				background-image: url("../assets/img/pattern.svg");
				background-size: 20%;
				clip-path: polygon(var(--patternClip));
			}

			.infos-item {
				width: 50%;
				margin-left: auto;

				&:not(:first-of-type) {
					margin-top: 4.5rem;
				}
			}

			.heading::after {
				display: none;
			}

			.text {
				max-width: 33rem;
				min-height: 8.75em;
				padding-bottom: 0;
			}

			&:nth-of-type(even) {
				text-align: right;

				&::before {
					right: unset;
					left: 50%;
					margin-right: unset;
					margin-left: var(--patternMargin);
				}

				.infos-item {
					margin-left: 0;
				}

				.heading {
					margin-left: auto;
				}

				.text {
					margin-left: auto;
					margin-right: var(--textPadding);
					padding-right: var(--textPadding);

					&::before {
						left: auto;
						right: 0;
					}
				}
			}
		}

		@media (min-width: 1600px) and (min-height: 800px) {
			padding-block: 12.5rem;

			&::before {
				width: 300px;
				background-size: 3.75rem;
			}
		}
	}

	.fonctionnalites-specs {
		--wheelDarkShadowY: 3vw;
		--wheelDarkShadowX: 50%;
		--specsHide: 100%;
		overflow: hidden;
		padding-bottom: 8.125rem;
		background-color: var(--secondary-dark);
		position: relative;

		&::before,
		&::after {
			content: "";
			position: absolute;
			z-index: 1;
			top: var(--wheelDarkShadowY);
			left: var(--wheelDarkShadowX);
			mask-image: radial-gradient(ellipse at center, white, transparent);
		}

		&::before {
			height: 55%;
			aspect-ratio: 1 / 1.1;
			translate: -50% -10%;
			background: radial-gradient(
				ellipse at center,
				color-mix(in srgb, transparent, var(--neutral) 35%),
				transparent 75%
			);
			opacity: 0.66;
		}
		&::after {
			height: 25%;
			aspect-ratio: 913 / 278;
			translate: -50% 95%;
			background:
				radial-gradient(
					ellipse at center,
					color-mix(in srgb, transparent, var(--secondary) 90%),
					transparent 15%
				),
				radial-gradient(
					ellipse at center,
					color-mix(in srgb, transparent, var(--neutral) 20%),
					transparent 77%
				);
			opacity: 0.6;
		}

		.specs-model {
			position: relative;
			z-index: 2;
			margin-block: -4rem -2rem;
			max-width: 31.25rem;
			margin-inline: auto;

			&::after {
				content: "";
				position: absolute;
				z-index: 999;
				inset: 0;
				background-color: var(--secondary-dark);
				pointer-events: none;
				opacity: var(--specsHide);
			}

			div {
				width: 115%;
				margin-left: -7.5%;
				max-width: unset;
				aspect-ratio: 913 / 991;
			}
		}

		.container {
			position: relative;
			z-index: 3;
			display: grid;
			row-gap: 3.125rem;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;
		}

		.specs-item {
			text-align: center;
			color: var(--neutral);

			.text {
				opacity: 0.75;
				margin-block: 0.5rem 0.125rem;
			}

			img {
				width: auto;
				height: 4.25rem;
				margin-inline: auto;
			}
		}

		@media (min-width: 580px) {
			--wheelDarkShadowY: 8vw;
		}

		@media (min-width: 768px) {
			--wheelDarkShadowY: 1vw;
			padding-top: 6.875rem;

			&::before {
				height: 100%;
			}
			&::after {
				height: 45%;
				translate: -50% 110%;
			}

			.specs-model {
				display: contents;

				div {
					display: none;
				}
			}

			.container {
				padding-inline: 0;
				column-gap: 150px;
			}

			.specs-item .text {
				font-size: 1rem;
			}
		}

		@media (min-width: 1024px) {
			&::before {
				opacity: 0.8;
			}
			&::after {
				opacity: 0.75;
				background: radial-gradient(
					ellipse at center,
					color-mix(in srgb, transparent, var(--neutral) 20%),
					transparent 77%
				);
			}

			.specs-model {
				display: none;
			}
		}

		@media (min-width: 1200px) {
			.container {
				column-gap: 3.125rem;
			}
		}

		@media (min-width: 1600px) {
			&::before {
				opacity: 1;
				height: 105%;
			}
			&::after {
				opacity: 1;
				height: 50%;
				translate: -50% 120%;
			}
		}
	}
}

/* CTA Button */
#cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1.5rem;
	text-align: center;
	margin-bottom: 12.5rem;
}

/* Partners & press */
#partenaires {
	overflow: hidden;
	position: relative;
	padding-block: 8.125rem 11rem;

	&::before,
	&::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	&::before {
		z-index: -2;
		background-color: var(--primary);
	}
	&::after {
		z-index: -1;
		background-image: url("../assets/img/pattern.svg");
		background-size: 3.75rem;
		filter: brightness(0) invert(1);
		opacity: 0.055;
	}

	.partenaires-group {
		.title {
			text-wrap: pretty;
			text-align: center;
		}

		.group-list {
			display: flex;
			column-gap: 1.875rem;
			margin-top: 2.875rem;
			padding-bottom: 0.5rem;
			padding-inline: var(--padding-x) 100%;
			margin-left: calc(var(--padding-x) * -1);
			width: calc(100% + var(--padding-x) * 2);
			overflow: auto;
			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;
			-ms-overflow-style: none;
			position: relative;
			z-index: 9;

			&::-webkit-scrollbar {
				display: none;
			}

			li {
				scroll-snap-stop: always;
				scroll-snap-align: start;
				scroll-margin: var(--padding-x);
				flex-shrink: 0;
				width: clamp(18.75rem, 15.421rem + 14.2vw, 29.625rem);
				opacity: 0.5;
				pointer-events: none;
				transition: opacity var(--anim-long);

				&.active,
				&.active ~ li {
					opacity: 1;
					pointer-events: auto;
				}
			}

			.card {
				height: 100%;
			}
		}

		.group-buttons {
			position: absolute;
			z-index: 1;
			display: flex;
			width: 23%;
			min-width: 13.75rem;
			max-width: 27.25rem;
			height: 6.25rem;
			filter: drop-shadow(
				-0.625rem 0.625rem 4.6875rem
					color-mix(in srgb, var(--secondary) 15%, transparent)
			);

			button {
				--cardBtnRadius: 2.0625rem;
				position: relative;
				width: 50%;
				padding-inline: 0.625rem;
				background-color: var(--neutral);
				transition:
					background-color var(--anim),
					opacity var(--anim);

				img {
					width: 100%;
					height: min(45%, 4.25rem);
					object-fit: contain;
					object-position: left center;
					user-select: none;
					pointer-events: none;
					transition:
						opacity var(--anim),
						translate var(--anim);
				}

				&:first-child img {
					rotate: 180deg;
				}

				&:disabled {
					cursor: not-allowed;

					img {
						opacity: 0.4;
					}
				}

				&:not(:disabled):active {
					background-color: var(--neutral-darker) !important;
				}

				&::before {
					content: "";
					position: absolute;
					top: 0;
					right: 100%;
					width: var(--cardBtnRadius);
					aspect-ratio: 1;
					pointer-events: none;
					background: inherit;
					mask-image: radial-gradient(
						circle at 0% 100%,
						transparent 70%,
						white calc(70% + 1px)
					);
				}
			}
		}

		&:first-child {
			position: relative;
			padding-bottom: 3rem;

			.group-buttons {
				top: 100%;
				right: calc(var(--padding-x) * -1);

				button {
					&::before {
						display: none;
					}

					&:first-child {
						border-top-left-radius: var(--cardBtnRadius);
						border-bottom-left-radius: var(--cardBtnRadius);
					}
				}
			}
		}

		&:last-child {
			margin-top: 10rem;

			.group-buttons {
				bottom: 0;
				left: 50%;
				translate: -50% 0;

				button:first-child {
					border-top-left-radius: var(--cardBtnRadius);

					&::before {
						top: unset;
						bottom: 0;
						rotate: 90deg;
					}
				}
				button:last-child {
					border-top-right-radius: var(--cardBtnRadius);

					&::before {
						top: unset;
						bottom: 0;
						right: unset;
						left: 100%;
						rotate: 180deg;
					}
				}
			}
		}
	}

	@media (min-width: 768px) {
		.partenaires-group {
			.group-buttons button {
				--cardBtnRadius: 3.125rem;

				&:not(:disabled):is(:hover, :focus-visible) {
					background-color: var(--neutral-dark);

					&:first-child img {
						translate: -0.5rem 0;
					}

					&:last-child img {
						translate: 0.5rem 0;
					}
				}
			}

			&:first-child {
				position: static;
				padding-bottom: 0;

				.title {
					text-align: left;
				}

				.group-buttons {
					top: 0;
					right: 0;

					button::before {
						display: block;
					}

					button:first-child {
						border-top-left-radius: 0;
					}
				}
			}

			&:last-child {
				margin-top: 6.25rem;
			}
		}
	}

	@media (min-width: 1200px) {
		padding-block: 9.375rem 17.5rem;

		.partenaires-group {
			.group-list {
				column-gap: 3.125rem;
			}

			.group-buttons {
				height: 9.375rem;
			}
		}
	}

	@media (min-width: 1600px) {
		.partenaires-group {
			.group-list {
				margin-top: 4.6875rem;
			}

			&:last-child {
				margin-top: 8.125rem;
			}
		}
	}
}

/* Contact */
#contact {
	--contactBgOpacity: 0.075;
	--contactBgScale: 1;

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-block: 15.625rem;
		position: relative;

		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			background: url("../assets/img/model.webp") no-repeat;
			background-position: 40% center;
			background-size: auto 65%;
			opacity: var(--contactBgOpacity);
			scale: var(--contactBgScale) var(--contactBgScale);
		}
	}

	.contact-toggle {
		display: flex;
		align-items: center;
		column-gap: 0.875rem;
		cursor: pointer;

		.text span {
			display: inline-block;
			transition:
				translate var(--anim-long),
				opacity var(--anim);
		}
	}
	&:has(input#pro:checked) .contact-toggle .text {
		span:first-child {
			translate: 1ch 0;
		}
		span:last-child {
			opacity: 0;
		}
	}

	.heading {
		line-height: 1;
		text-align: center;
		margin-block: 2.1875rem 1em;
	}

	.contact-consent {
		cursor: pointer;
		margin-bottom: 2.5rem;
		max-width: 50rem;
		display: flex;
		align-items: start;

		input {
			cursor: pointer;
			margin-top: 0.25rem;
			margin-right: 0.75rem;
			accent-color: var(--secondary);
		}

		.text {
			user-select: none;
			font-size: 1rem;
			transition: opacity var(--anim);

			span,
			a {
				opacity: 0.8;
			}

			&:not(:focus-within):active {
				opacity: 0.6;
			}

			.link {
				text-decoration: underline;
			}
		}
	}

	.contact-input {
		--btnSize: clamp(4.688rem, 2.793rem + 8.08vw, 10.875rem);
		position: relative;
		width: 100%;
		max-width: 37.5rem;

		.input {
			padding-right: calc(var(--btnSize) + 1.875rem);
		}

		.btn {
			position: absolute;
			right: 1.25rem;
			top: 50%;
			translate: 0 -50%;
			margin-top: -2px;
			padding-inline: 0;
			width: var(--btnSize);
			height: 67.5%;

			&::before,
			&::after {
				display: none;
			}

			.btn-icon {
				width: auto;
				height: min(65%, 4.25rem);
				rotate: -45deg;
				margin-inline: auto;

				&.icon-loading {
					display: none;
				}
			}
		}
	}
	#contact-form.loading {
		.contact-toggle,
		.contact-input {
			cursor: wait;

			> * {
				pointer-events: none;
			}
		}
		.contact-input .btn {
			.btn-icon:first-child {
				display: none;
			}
			.btn-icon.icon-loading {
				display: block;
				animation: spin 1s linear infinite;
			}
		}
	}

	@media (min-width: 375px) and (max-width: 640px) {
		.heading {
			font-size: 2.47rem;
			width: 103%;
		}
	}

	@media (min-width: 400px) and (max-width: 640px) {
		.heading {
			width: 100%;
		}
	}

	@media (orientation: landscape) {
		.container::before {
			background-size: auto 80%;
			background-position: center center;
		}
	}

	@media (min-width: 1024px) {
		.contact-input {
			max-width: 56.25rem;

			.btn {
				height: 2.069em;
			}
		}

		.heading {
			max-width: 62.5rem;
		}
	}

	@media (min-width: 1200px) and (min-height: 800px) {
		.container {
			padding-block: 23.125rem;
		}

		.contact-consent {
			.text {
				font-size: 1.1rem;
			}

			.link:is(:hover, :active, :focus-visible) {
				opacity: 1;
			}
		}
	}

	@media (min-width: 1600px) {
		.heading {
			max-width: 76.25rem;
		}
	}
}
@keyframes spin {
	from {
		rotate: 0deg;
	}
	to {
		rotate: 360deg;
	}
}

/* Footer */
footer {
	color: var(--neutral);
	text-align: center;
	padding-block: 7.5rem;
	background-color: var(--secondary);

	.container {
		max-width: 100rem;
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 2.5rem clamp(6.25rem, -0.464rem + 10.49vw, 12.125rem);
	}

	.footer-logo img {
		width: 3.25rem;
		height: auto;
		margin-inline: auto;
		margin-bottom: 0.8em;
	}
	.footer-logo small {
		opacity: 0.5;
		font-size: 0.875rem;
	}

	.footer-links {
		opacity: 0.75;

		.link {
			display: table;
			padding-block: 0.375em;
			text-transform: uppercase;
			margin-inline: auto;
		}
	}

	@media (min-width: 1024px) {
		text-align: left;

		.container {
			flex-direction: row;
		}
		.footer-links .link {
			margin-inline: 0;
		}
		.btn {
			margin-left: auto;
		}
	}

	@media (min-width: 1200px) and (min-height: 800px) {
		padding-block: clamp(7.5rem, -2.813rem + 13.75vw, 10.938rem);
	}
}

/* Legals */
#legals {
	&::after {
		display: none;
	}

	font-size: 16px;

	.container {
		display: grid;
		row-gap: 1em;
		margin-block: 4em;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-top: 2rem;
	}

	ul li {
		list-style: disc inside;
		padding-left: 1ch;
	}
}

/* Reveals fouc fix */
header .header-logo,
header nav .link,
header .btn,
.hero-content .text,
.hero-content .btn,
canvas {
	visibility: hidden;
}