/*
 * Theme color https://coolors.co/e18851-e9a77d-f6dbcb-f9e7dd-fcf3ee-33353f
 */
:root {
	/* colors brand */
	--gunmetal: #33353f;
	--seashell: #fcf3ee;
	--powder-petal: #f9e7dd;
	--powder-petal-alt: #f6dbcb;
	--ligth-bronze: #e9a77d;
	--toasted-almont: #e18851;

	/* semantic colors */
	--color-front: var(--gunmetal);
	--color-back: var(--seashell);
	--color-accent: var(--toasted-almont);

	/* font families */
	--font-stack-common: Museo, system-ui, arial, sans-serif;
	--font-stack-heading: "Peignot", var(--font-stack-common);

	/* font sizes */
	--font-size-base: 16px;

	/* animation */
	--animation-slide: linear(0, 0.013 1%, 0.051 2.2%, 0.404 9.8%, 0.51 12.6%, 0.602 15.5%, 0.683 18.7%, 0.754 22.2%, 0.813 26%, 0.861 30.2%, 0.9 34.8%, 0.931 40%, 0.972 52.7%, 0.992 70.2%, 1);

	/* transitions */
	--timing-fast: .25s;
	--timing-normal: 2s;

	@media (prefers-reduced-motion: reduce) {
		--timing-fast: 0;
		--timing-normal: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}

	:focus {
		transition: outline-offset var(--timing-fast) ease;
		outline-offset: 5px;
	}
}

::selection {
	background: var(--powder-petal);
	color: var(--ligth-bronze);
	text-shadow: 0 1px 0 rgb(0 0 0 / .5)
}

@keyframes animation-appear {
	to {
		opacity: 1;
		translate: 0 0;
		scale: 1;
		filter: blur(0);
	}
}

@font-face {
	font-family: 'Peignot';
	src: url('../fonts/peignot/Peignot.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Bellota';
	src: url('../fonts/museo-sans-rounded/MuseoSansRounded-900.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Bellota';
	src: url('../fonts/museo-sans-rounded/MuseoSansRounded-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Bellota';
	src: url('../fonts/museo-sans-rounded/MuseoSansRounded-500.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	scrollbar-color: var(--color-front) transparent;
	scrollbar-width: auto;
	scrollbar-gutter: stable;
	interpolate-size: allow-keywords;
}

body {
	margin: 0;
	background: var(--color-back);
	color: var(--color-front);
	font: 400 var(--font-size-base)/1.5 var(--font-stack-common);
}

img {
	vertical-align: top;
	max-inline-size: 100%;
	height: auto;
}

.landing {
	display: grid;
	place-items: center;
	/* grid-template-rows: 20dvh 25dvh auto auto; */
	gap: 2rem;
	/* block-size: 100dvh; */
	padding: 2rem 4rem 5rem;

	> * {
		opacity: 0;
		translate: 0 10rem;
		animation: 2s var(--animation-slide) calc(125ms * calc(sibling-index() + 1)) forwards animation-appear;
	}

	.logo-icon {
		max-inline-size: 50vw;
	}

	h1 {
		margin-block: 0;
		font: 400 8rem/1.25 var(--font-stack-heading);
		color: var(--color-front);
		block-size: 100%;
	}

	.message {
		color: var(--color-accent);
		font: 700 1rem/1.25 var(--font-stack-common);
		text-align: center;
	}

    p {
		color: var(--gunmetal);
		font: 1rem/1.25 var(--font-stack-common);
        text-align: center;
        text-wrap: balance;
    }
}

.navigation-links {
	display: flex;
	gap: .5rem;

	.navigation-links-item {
		opacity: 0;
		translate: 0 5rem;
		animation: 2s var(--animation-slide) calc(750ms + calc(100ms * calc(sibling-index() + 1))) forwards animation-appear;
	}

	a {
		cursor: pointer;
		transition: .35s var(--animation-slide);
		display: block;
		color: var(--color-accent);
		font: 300 1.3rem/1.25 var(--font-stack-common);

		&:is(:hover, :focus-visible) {
			scale: 1.1;
			color: var(--black-forest);
		}

		svg {
			inline-size: 4rem;
			display: block;
			pointer-events: none;
		}
	}
}