@import url("./reset.css");

@font-face {
	font-family: "MonaSansVF";
	src:
		url("../fonts/MonaSansVF[wdth,wght,ital].woff2")
		format("woff2 supports variations"),
		url("../fonts/MonaSansVF[wdth,wght,ital].woff2") format("woff2-variations");
	font-weight: 200 900;
	font-stretch: 90 125;
}

/** {
	outline: 1px solid red;
}*/

:root {
	--fg-color: oklch(96% 0.09 129.6);
	--bg-color: oklch(0.26 0.01 164.01);
}

html {
	font-family: "MonaSansVF", sans-serif;
	background-color: var(--bg-color);
	color: white;
}

body {
	display: grid;
	padding: 2rem;
	min-height: 100vh;
	place-items: safe center;

	@media (width >= 800px) {
		text-align: center;
	}
}

main {
	display: grid;
	gap: 2rem;
}

@keyframes blurUp {
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

@media (width >= 800px) {
	header {
		max-width: 100%;
		translate: 0 -2rem;
	}
}

.logotype,
.tagline,
.footer {
	opacity: 0;
	transform: translateY(1rem);
	filter: blur(10px);
	animation-name: blurUp;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	transition-property: opacity, transform, filter;
	animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
	will-change: opacity, transform, filter;
}

.logotype {
	animation-delay: 100ms;
	color: var(--fg-color);
	margin-block-end: 2rem;
	font-optical-sizing: auto;
	text-transform: uppercase;
	font-variation-settings:
		"wdth" 75,
		"wght" 850;
	font-feature-settings: "ss07" on;
	font-size: 6rem;
	letter-spacing: -0.1rem;
	line-height: 0.8;

	@media (width >= 800px) {
		font-size: 10rem;
	}
}

.tagline {
	animation-delay: 200ms;
	font-size: 1.2rem;
	font-variation-settings:
		"wdth" 125,
		"wght" 500;
	font-feature-settings:
		"ss03" on,
		"ss05" on;

	line-height: 1.2;
	opacity: 0.75;

	@media (width >= 800px) {
		font-size: 1.5rem;
	}
}

footer {
	animation-delay: 300ms;

	@media (width >= 600px) {
		justify-self: center;
		position: absolute;
		bottom: 2rem;
		margin: auto;
	}
}

.footer-text {
	font-variation-settings:
		"wdth" 125,
		"wght" 500;
	font-size: 0.8rem;
	opacity: 0.25;
}