/* latin */
@font-face {
	font-family: 'Figtree';
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url(../fonts/figtree-latin-italic-300-900.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
/* latin */
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url(../fonts/figtree-latin-normal-300-900.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

html, body { height: 100%; margin: 0; overflow: hidden; }
body {
	font-family: 'Figtree', sans-serif;
	color: #FFF;
	background: #111;
}
#poster {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1000px;
}
#poster::before {
	content: " ";
	position: absolute;
	inset: 0;
	background: url(../img/waves-curves-6.jpg) no-repeat 50% 25%;
	background-size: cover;
	mix-blend-mode: overlay;
	opacity: 1;
	transform-origin: top right;
	animation: poster_background 20000ms linear;
}
#slogan {
	margin: 0;
	padding: 10%;
	font-size: clamp(24px, calc(12px + 6vw), 120px);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	font-weight: 900;
	transform: rotate( -4deg ) skew( -4deg ) scale( 1 );
}
#slogan .line {
	display: block;
	clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	animation: line_reveal 400ms ease-out both 1;
}
#slogan .line:nth-child(2) {
	animation-delay: 800ms;
}
#slogan .highlight-text {
	color: #fff;
}

.default {
	background-image: linear-gradient(45deg, #a5115b 10%, #da7500 90%);
}
.mirage {
	background-image: linear-gradient(45deg, #16222A 10%, #3A6073 90%);
}
.kashmir {
	background-image: linear-gradient(45deg, #614385 10%, #516395 90%);
}
.venice-blue {
	background-image: linear-gradient(45deg, #085078 10%, #85D8CE 90%);
}
.midnight-city {
	background-image: linear-gradient(45deg, #555 10%, #999 90%);
}
.lemon-twist {
	background-image: linear-gradient(45deg, #3CA55C 10%, #B5AC49 90%);
}
.influenza {
	background-image: linear-gradient(45deg, #C04848 10%, #480048 90%);
}
.army {
	background-image: linear-gradient(45deg, #414d0b 10%, #727a17 90%);
}
.pinot-noir {
	background-image: linear-gradient(45deg, #4b6cb7 10%, #182848 90%);
}

::selection {
	background: #222;
}

.midnight-city #slogan {
	color: rgba( 255, 255, 255, 0.6 );
}


@keyframes poster_background {
	0% {
		transform: scale( 1.25 );
	}
}
@keyframes line_reveal {
	0% {
		opacity: 0;
		font-weight: 700;
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	50% {
		clip-path: polygon(75% 0, 0 0, 0 100%, 25% 100%);
	}
}