/* Variables */
:root {
	--site-pad: 2rem;
	--container: 62rem;
	--coral: #b7594d;
	--ocean: #90aeb2;
	--shell: #eee6dd;
	--primary: "Josefin Sans", sans-serif;
	--secondary: "Yeseva One", serif;
}

/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100svh;
	height: 100dvh;
	line-height: 1.5;
	background: var(--coral);
	font-family: var(--primary);
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

button,
input,
textarea,
select {
	font: inherit;
	border: none;
	background: none;
}

button {
	cursor: pointer;
}

input,
textarea,
select {
	width: 100%;
	min-width: 0;
}

html {
	scroll-behavior: smooth;
}

/* Utility */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--site-pad) + var(--site-pad));
	margin: 0 auto;
	padding: 0 var(--site-pad);
}
.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.group {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	min-height: 100svh;
	height: 100dvh;
	padding: 2rem;
	gap: 2rem;
}
.logo {
	width: 100%;
	max-width: 40rem;
	margin: 0 auto 1rem auto;
}
.txt {
	color: var(--shell);
	text-align: center;
	max-width: 50rem;

	h1 {
		span {
			display: block;
		}
		span:nth-child(2) {
			font-size: 1.5rem;
			font-weight: 500;
			line-height: 2rem;
		}
		strong {
			display: block;
			font-family: var(--secondary);
			font-size: 3.75rem;
			font-weight: 100;
			line-height: 4rem;
			margin: 0 0 2rem 0;
		}
	}

	p {
		font-size: 1.5rem;
		font-weight: 200;
	}
}

.wrap:has(.form) {
	container-type: inline-size;
	width: 100%;
	max-width: 28rem;
}

.form {
	p {
		display: none;
		color: var(--shell);
		font-size: 1.2rem;
		font-weight: 200;
		line-height: 1.2;
		margin: 0 0 1rem 0;
		text-align: center;
		font-weight: 400;
		text-wrap: balance;
	}

	form {
		background: var(--shell);
		border-radius: 5px;
		position: relative;

		input {
			padding: 1rem 120px 1rem 1rem;
			width: 90vw;
			max-width: 28rem;
			font-size: 1.2rem;
			line-height: 1;

			&::placeholder {
				font-size: 0.875rem;
				color: var(--ocean);
				font-style: italic;
				font-weight: 300;
			}
		}

		button {
			background: var(--ocean);
			color: var(--shell);
			font-weight: 500;
			padding: 1rem 1.2rem 0.8rem 1.2rem;
			text-transform: uppercase;
			line-height: 1;
			border-radius: 3px;
			position: absolute;
			inset: 3px 3px 3px auto;
			transition: scale 0.1s ease;

			&:hover,
			&:focus-visible {
				background: var(--coral);
			}

			&:active {
				scale: 0.95;
			}
		}
	}
}

@container (max-width: 400px) {
	.form {
		p {
			display: block;
		}
		form input::placeholder {
			color: transparent;
		}
	}
}

.social {
	display: flex;
	gap: 1rem;

	a {
		text-decoration: none;
		line-height: 0;

		svg {
			fill: var(--shell);
			width: 34px;
			height: 34px;
		}

		&:hover,
		&:focus-visible {
			svg {
				fill: var(--ocean);
			}
		}
	}
}

.location {
	align-self: flex-start;
	padding: 30px 0 0 0;

	a {
		text-decoration: none;
		display: flex;
		font-size: 18px;
		font-weight: 350;
		color: var(--shell);
		line-height: 1.2rem;
		gap: 0.5rem;

		svg {
			fill: var(--ocean);
			width: 34px;
			height: 34px;
		}

		&:hover,
		&:focus-visible {
			text-decoration: underline;
			svg {
				fill: var(--shell);
			}
		}
	}
}

.license {
	align-self: flex-start;

	span {
		display: flex;
		padding: 0 0 20px 40px;
		font-size: 12px;
		font-weight: 350;
		color: var(--shell);
		line-height: 1.2rem;
		gap: 0.5rem;
	}
}

.pattern {
	position: fixed;
	inset: 0;
	opacity: 0.09;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	height: 100vh;

	.anchor {
		position: relative;
		width: 0;
		height: 100vh;
		left: 50%;

		div {
			width: 100vw;
			max-width: 300px;
			position: absolute;
			transform-origin: center center;
			will-change: transform; /* Hint to browser for GPU acceleration */

			&:nth-child(1) {
				inset: -100px auto auto -650px;
			}
			&:nth-child(2) {
				inset: -200px auto auto -250px;
			}
			&:nth-child(3) {
				inset: -230px auto auto 100px;
			}
			&:nth-child(4) {
				inset: 50px auto auto 400px;
			}
			&:nth-child(5) {
				inset: 300px auto auto -750px;
			}
			&:nth-child(6) {
				inset: 200px auto auto -380px;
			}
			&:nth-child(7) {
				inset: 180px auto auto 0;
			}
			&:nth-child(8) {
				inset: 440px auto auto 250px;
			}
			&:nth-child(9) {
				inset: 400px auto auto 580px;
			}
			&:nth-child(10) {
				inset: 620px auto auto -520px;
			}
			&:nth-child(11) {
				inset: 600px auto auto -140px;
			}
			&:nth-child(12) {
				inset: 850px auto auto 200px;
			}
			&:nth-child(13) {
				inset: 800px auto auto 500px;
			}
			&:nth-child(14) {
				inset: 800px auto auto -800px;
			}
			&:nth-child(15) {
				inset: 50px auto auto -1000px;
			}
			&:nth-child(16) {
				inset: -100px auto auto 800px;
			}
		}
	}
}