:root {
	--padding-container: 40px;
	--color-white: #fff;
	--color-black: #000;
}

html {
	font-family: Arial, Helvetica, sans-serif;
	font-family: 'Montserrat', sans-serif;
	font-optical-sizing: auto;
}

#header {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	background-size: cover;
	background-position: center;
	position: relative;
	z-index: 0;
	overflow: clip;
	&::before {
		--color-gray-transparent: oklab(from var(--color-black) 20% a b / 0.7);
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image: linear-gradient(
			to bottom,
			var(--color-gray-transparent) 0%,
			transparent 30%,
			transparent 70%,
			var(--color-gray-transparent) 100%
		);
	}
	.header__background {
		position: absolute;
		inset: 0;
		z-index: -2;
		background-size: cover;
		background-position: center;
		animation: parallax-scroll linear;
		animation-timeline: view();
		animation-range: exit 0% exit 100%;
	}

	.header__title {
		padding: var(--padding-container);
		font-size: clamp(2rem, 5vw, 3rem);
		text-transform: uppercase;
		color: var(--color-white);
		text-align: center;
		font-weight: 700;
	}
	.header__logo {
		max-width: 60vw;
	}
}

#main {
	padding: var(--padding-container);
	background-color: var(--color-black);
	color: #ccc;
	@media (max-width: 800px) {
		padding: 50px 16px;
	}
	#info {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 50px;
		@media (max-width: 800px) {
			grid-template-columns: 1fr;
		}
		p {
			max-width: 36ch;
			text-align: justify;
		}
		a {
			color: var(--color-white);
			text-decoration: underline;
		}
		> div {
			justify-self: center;
			padding: 16px;
			max-width: 500px;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 24px;
			&:before {
				content: '';
				width: 40%;
				height: 1px;
				background-color: var(--color-white);
			}
		}
		h2 {
			font-size: 2rem;
			text-transform: uppercase;
			margin-bottom: 16px;
			font-weight: 600;
		}
	}
	#about {
		position: relative;
		overflow: hidden;
		padding: 100px var(--padding-container);
		text-align: center;
		font-weight: 300;
		@media (max-width: 800px) {
			padding: 50px 16px;
		}
		.about__content {
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: column;
			gap: 2rem;
			> div {
				max-width: 1000px;
				display: flex;
				flex-direction: column;
				gap: 1.5rem;
				margin-inline: auto;
				&:first-child {
					margin-inline: 0 auto;
				}
				&:last-child {
					margin-inline: auto 0;
				}
			}
		}

		p {
			text-align: justify;
		}

		.about__icon {
			width: 100px;
			height: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			> img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		.separator-line {
			display: none;
		}
	}
}

#footer {
	height: 100vh;
	position: relative;
	z-index: 0;
	overflow: hidden;
	color: var(--color-white);
	display: flex;
	align-items: center;
	&::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent, rgba(0, 0, 0, 0.4));
		z-index: -1;
	}
	.footer__background {
		position: absolute;
		inset: 0;
		z-index: -2;
		background-size: cover;
		background-position: center;
	}

	@media (prefers-reduced-motion: no-preference) {
		.footer__background {
			will-change: transform;
		}
	}

	.footer__content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		padding: var(--padding-container);
		max-width: 1600px;
		margin: 0 auto;
		@media (max-width: 800px) {
			grid-template-columns: 1fr;
			gap: 2rem;
		}
	}

	.footer__left {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		align-self: flex-start;
		h3 {
			font-size: 3rem;
			font-weight: 700;
			text-transform: uppercase;
		}
	}

	.footer__right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
		gap: 3rem;
		align-self: center;
		align-self: stretch;
		@media (max-width: 800px) {
			align-items: flex-start;
			text-align: left;
		}
		.footer__logo {
			width: 300px;
			height: auto;
			margin-bottom: 2rem;
		}

		.contact-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			gap: 2.5rem;
			.contact-item {
				display: flex;
				flex-direction: column;
				gap: 0.25rem;
				strong {
					color: var(--color-red, red);
					font-size: 1.5rem;
					font-weight: 700;
					text-transform: uppercase;
				}
				a,
				p {
					color: var(--color-white);
					font-size: 1.2rem;
					font-weight: 300;
					text-decoration: none;
				}
			}
		}
	}
}

p {
	font-size: 1.125rem;
	line-height: 1.5;
	font-size: 1.2rem;
}

.button {
	&.button--primary {
		background-color: var(--color-red, red);
		color: var(--color-white);
		padding: 0.75rem 1.5rem;
		border-radius: 100px;
		font-weight: 600;
		text-decoration: none !important;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		transition:
			background-color 0.5s,
			transform 0.4s;
		transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
		transform-origin: center !important;
		&::before {
			content: '⬇';
		}
		&:hover {
			transform: scale(1.05);
		}
	}
}

.footer__socials,
.social-icons {
	display: flex;
	gap: 1.5rem;
	a {
		position: relative;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
		background-color: var(--color-red, red);
		border-radius: 8px;
		font-size: 0;
		text-decoration: none;
		transition: transform 0.2s;

		&::before {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			background-color: var(--color-white);
			mask-image: var(--background-svg);
			mask-size: 70% 70%;
			mask-repeat: no-repeat;
			mask-position: center;
			-webkit-mask-image: var(--background-svg);
			-webkit-mask-size: 70% 70%;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
		}

		&:hover {
			transform: scale(1.1);
		}
	}
}

@keyframes parallax-scroll {
	to {
		transform: translateY(20vh);
		filter: brightness(0.2);
	}
}