:root {
	--fontsize: 0.875rem;
	--margin: var(--fontsize);
	--margin-half: calc(var(--margin) / 2);
	--margin-double: calc(var(--margin) * 2);
	--in: animate-in 10ms forwards;
	--in-out: animate-in-out 2000ms forwards;
}

@keyframes animate-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes animate-in-out {
	0% {
		opacity: 0;
	}
	0.005%,
	99.005% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes slide-in {
	from {
		-webkit-mask-position-x: 100%;
		mask-position-x: 100%;
	}

	to {
		-webkit-mask-position-x: 0%;
		mask-position-x: 0%;
	}
}

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

html,
body {
	height: 100%;
}

body {
	color: white;
	background-color: #211a13;
	font-family: "Suisse Intl";
	font-size: var(--fontsize);
	text-size-adjust: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

main {
	display: flex;
	align-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	justify-content: space-between;
	min-height: 100%;
}

header {
	max-width: 100%;
	padding: var(--margin-double);
	overflow: hidden;
}

h1 {
	margin-left: -0.08em;
	font-size: calc(29.5vw - 1em);
	line-height: 0.725;
	user-select: none;
}

.hidden {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.subscribe {
	max-width: 100%;
	padding: var(--margin-double);
	overflow: hidden;
}

.subscribe > div {
	width: 100%;
	font-family: "Suisse Intl Mono";
	font-size: inherit;
	line-height: 0.725;
	text-transform: uppercase;
	user-select: none;
}

.subscribe > div:not(:only-child) {
	margin-bottom: var(--margin);
}

.subscribe > form {
	display: flex;
	overflow: hidden;
	animation: slide-in 1000ms cubic-bezier(0.1, 1, 0.22, 1) forwards;
	-webkit-mask: linear-gradient(to right, black 50%, transparent 50%) no-repeat 100% 0% / 200% 100%;
	mask: linear-gradient(to right, black 50%, transparent 50%) no-repeat 100% 0% / 200% 100%;
}

.subscribe > form > :is(button, input) {
	appearance: none;
	min-height: 0;
	height: calc(0.725em + var(--margin-double));
	padding: var(--margin);
	border: none;
	border-radius: 0;
	font-family: "Suisse Intl Mono";
	font-size: inherit;
	line-height: 0.725;
	text-transform: uppercase;
}

.subscribe > form > input {
	flex: 1;
	min-width: 0;
	width: 20em;
	max-width: 100%;
}

.subscribe > form > button {
	background-color: #211a13;
	color: white;
	cursor: pointer;
}

footer {
	max-width: 100%;
	padding: var(--margin-double);
	overflow: hidden;
	font-family: "Suisse Intl Mono";
	line-height: 0.725;
	text-transform: uppercase;
}

/* ANIMATION */

.animate > span {
	opacity: 0;
}

/* INTRO */

.taglines {
	position: fixed;
}

.taglines > div {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Suisse Intl Mono";
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
}

/* BACKGROUND */

video {
	width: 120%;
	height: 120%;
	position: fixed;
	inset: -10%;
	z-index: -1;
	object-fit: cover;
	object-position: center;
	/* filter: blur(10px); */
	opacity: 0;
	animation: animate-in 2000ms forwards;
}

/* LOGO ADJUSTMENTS */

.logo {
	transform: scaleX(0.99);
	transform-origin: left;
}

.logo > :nth-child(2),
.logo > :nth-child(3) {
	margin-left: -0.095em;
}

.logo > :nth-child(4),
.logo > :nth-child(6) {
	margin-left: -0.07em;
}

.logo > :nth-child(5) {
	margin-left: -0.065em;
}

.logo > :nth-child(7) {
	margin-left: -0.055em;
}

.logo > :nth-child(8) {
	margin-left: -0.1em;
	position: relative;
	top: -0.01em;
}

/* RESPONSIVE */

@media (orientation: portrait) {
	main {
		align-items: flex-start;
		flex-direction: column;
		flex-wrap: nowrap;
	}
}

@media (max-width: 480px) {
	:root {
		--fontsize: 0.75rem;
	}
}