@font-face {
	font-family: 'Marke Eigenbau';
	font-style: normal;
	font-display: swap;
	src: url('../fonts/Marke Eigenbau.ttf') format('truetype');
}

html, body {
	height: 100%;
	background: linear-gradient(rgb(255 149 0), rgb(224 219 210));
}

main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.sky {
	position: relative;
	flex: 1;
	padding: 1rem;
	background: linear-gradient(rgb(255 149 0), rgb(224 219 210));
}

.cloud-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 250px;
	margin: 0 auto;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.cloud {
	position: absolute;
	left: 0;
	width: 176px;
	height: 114px;
	background-repeat: no-repeat;
	background-size: contain;
	will-change: transform;
}

.cloud.c-0 { background-image: url('../images/cloud0.png'); }
.cloud.c-1 { background-image: url('../images/cloud1.png'); }
.cloud.c-2 { background-image: url('../images/cloud2.png'); }

/* First set */
#cloud1   { top: 40px;  animation: movingclouds 60s linear infinite; animation-delay:   0s; }
#cloud2   { top: 10px;  animation: movingclouds 63s linear infinite; animation-delay:  -7s; }
#cloud3   { top: 100px; animation: movingclouds 65s linear infinite; animation-delay: -14s; }
#cloud4   { top: -20px; animation: movingclouds 70s linear infinite; animation-delay: -21s; }
#cloud5   { top: 100px; animation: movingclouds 75s linear infinite; animation-delay: -28s; }
#cloud6   { top: -40px; animation: movingclouds 77s linear infinite; animation-delay: -35s; }
#cloud7   { top: 12px;  animation: movingclouds 79s linear infinite; animation-delay: -42s; }
#cloud8   { top: 10px;  animation: movingclouds 59s linear infinite; animation-delay: -10s; }
#cloud9   { top: 72px;  animation: movingclouds 89s linear infinite; animation-delay: -17s; }

/* Second set */
#cloud1-2 { top: 40px;  animation: movingclouds 60s linear infinite; animation-delay: -20s; }
#cloud2-2 { top: 10px;  animation: movingclouds 63s linear infinite; animation-delay: -27s; }
#cloud3-2 { top: 100px; animation: movingclouds 65s linear infinite; animation-delay: -34s; }
#cloud4-2 { top: -20px; animation: movingclouds 70s linear infinite; animation-delay: -41s; }
#cloud5-2 { top: 100px; animation: movingclouds 75s linear infinite; animation-delay: -48s; }
#cloud6-2 { top: -40px; animation: movingclouds 77s linear infinite; animation-delay: -55s; }
#cloud7-2 { top: 12px;  animation: movingclouds 79s linear infinite; animation-delay: -62s; }
#cloud8-2 { top: 10px;  animation: movingclouds 59s linear infinite; animation-delay: -30s; }
#cloud9-2 { top: 72px;  animation: movingclouds 89s linear infinite; animation-delay: -37s; }

/* Third set */
#cloud1-3 { top: 40px;  animation: movingclouds 60s linear infinite; animation-delay: -40s; }
#cloud2-3 { top: 10px;  animation: movingclouds 63s linear infinite; animation-delay: -47s; }
#cloud3-3 { top: 100px; animation: movingclouds 65s linear infinite; animation-delay: -54s; }
#cloud4-3 { top: -20px; animation: movingclouds 70s linear infinite; animation-delay: -61s; }
#cloud5-3 { top: 100px; animation: movingclouds 75s linear infinite; animation-delay: -68s; }
#cloud6-3 { top: -40px; animation: movingclouds 77s linear infinite; animation-delay: -75s; }
#cloud7-3 { top: 12px;  animation: movingclouds 79s linear infinite; animation-delay: -82s; }
#cloud8-3 { top: 10px;  animation: movingclouds 59s linear infinite; animation-delay: -50s; }
#cloud9-3 { top: 72px;  animation: movingclouds 89s linear infinite; animation-delay: -57s; }

@keyframes movingclouds {
	0%   { transform: translateX(100vw); }
	100% { transform: translateX(calc(-100vw - 176px)); }
}

/* ----------------------------------------------------------------
   Floor
   ---------------------------------------------------------------- */

.floor {
	position: relative;
	display: flex;
	width: 100%;
	height: 100px;
	background-image: url('../images/floor.png');
	background-size: cover;
	background-repeat: repeat-x;
	animation: floormove 120s infinite linear;
}

@keyframes floormove {
	0%   {}
	100% {
		background-position-x: -100vw;
		background-position-y: 100%;
	}
}

/* ----------------------------------------------------------------
   Vignette overlay
   ---------------------------------------------------------------- */

.vignette {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	background: rgba(0, 0, 0, 0.9);
}

/* ----------------------------------------------------------------
   Breathing animation + text
   ---------------------------------------------------------------- */

.breathing-wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.breathing-frame {
	display: block;
}

.breathing-text {
	margin: 0;
	color: #fff;
	font-family: 'Marke Eigenbau', sans-serif;
	font-size: var(--fs-large);
	font-weight: bold;
	text-align: center;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
}

.breathing-subtext {
	margin-top: 1.5rem;
	color: #aaa;
	font-size: var(--fs);
}

.breathing-link {
	color: #aaa;
	pointer-events: auto;
	text-decoration: none;
}

.breathing-link:hover {
	color: #7983f5;
}