html,
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
	background-color: rgb(17, 17, 17);
}

/* =========================
   INTRO
   ========================= */

#background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgb(153, 0, 255);
	z-index: 50;
	transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

#background.slide-right {
	transform: translateX(100vw);
}

#logo {
	position: fixed;
	color: azure;
	font-family: monospace;
	line-height: 1.1;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
	z-index: 60;

	/* Mantiene l'ASCII dentro la viewport */
	max-width: 100vw;
	box-sizing: border-box;
}

#logo.moving {
	top: 15%;
	left: 50%;
}

#logo.exit {
	left: 150%;
}

#dot {
	display: inline-block;
	animation: blink 1s steps(1) infinite;
}

#press-any {
	position: fixed;
	bottom: 40%;
	left: 52%;
	transform: translateX(-50%);

	color: white;
	font-family: "Press Start 2P", system-ui;

	white-space: nowrap;

	animation: blink 1.5s steps(1) infinite;

	visibility: hidden;
	opacity: 0;

	transition:
		opacity 0.5s ease,
		left 1.2s cubic-bezier(0.25, 1, 0.5, 1);

	z-index: 60;
}

#press-any.visible {
	visibility: visible;
	opacity: 1;
}

#press-any.exit {
	left: 150%;
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}


/* =========================
   PIXEL OVERLAY
   ========================= */

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;

	display: flex;
	flex-wrap: wrap;

	z-index: 999;
}

.pixel {
	width: 100px;
	height: 100px;

	background-color: rgb(47, 0, 255);

	transition: opacity 1s ease;
}


/* =========================
   MAIN CONTENT
   ========================= */

#main-content {
	position: absolute;
	top: 0;
	left: 0;

	width: 100vw;
	height: 100vh;

	display: flex;
	flex-direction: column;

	color: azure;
	font-family: monospace;

	z-index: 10;

	opacity: 0;
	visibility: hidden;

	transition: opacity 1s ease;
}


/* =========================
   NAVIGATION
   ========================= */

header nav {
	font-family: "Press Start 2P", system-ui;

	display: flex;
	justify-content: center;

	gap: 3rem;
	padding: 2rem;

	font-size: 0.8rem;
}

.nav-item {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	transition: color 0.3s;
}

.nav-item:hover {
	color: rgb(153, 0, 255);
}


/* =========================
   CAROUSEL
   ========================= */

#carousel-section {
	font-family: "Press Start 2P", system-ui;

	flex-grow: 1;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 0.6rem;

	gap: 4rem;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

	/* --- ASCII LOGO --- */

	#logo {
		font-size: clamp(4px, 2.2vw, 9px);
		width: 100vw;
		max-width: 100vw;
		overflow: hidden;
		white-space: pre;
	}

	#logo.moving {
		top: 12%;
	}


	/* --- PRESS ANY BUTTON --- */

	#press-any {
		white-space: normal;

		width: 180px;

		left: 50%;

		text-align: center;

		font-size: 0.6rem;
		line-height: 1.8;
	}


	/* --- NAVIGATION --- */

	header nav {
		gap: 1rem;
		padding: 1rem;

		font-size: 0.55rem;

		flex-wrap: wrap;
	}


	/* --- CAROUSEL --- */

	#carousel-section {
		gap: 0.3rem;
		font-size: 0.5rem;
		padding: 0 0.25rem;
	}
}