/* ========================================== */
/* 🎨 VARIÁVEIS GLOBAIS (O CONTROLE MESTRE)   */
/* ========================================== */
:root {
	--neon: #00ff88;
	--bg-dark: #050505;
	--text-light: #ffffff;
	--font-base: Consolas, monospace;
}

/* ========================================== */
/* 🛠️ CONFIGURAÇÕES GERAIS                   */
/* ========================================== */
body {
	margin: 0;
	overflow: hidden;
	background-color: var(--bg-dark);
	color: var(--text-light);
	font-family: var(--font-base);
}

/* ========================================== */
/* 🎬 OVERLAYS E HERO (APRESENTAÇÃO)          */
/* ========================================== */
.about-title {
	font-size: 2rem;
	color: var(--neon);
	margin-bottom: 40px;
	letter-spacing: 3px;
}

.about-text {
	font-size: 1.1rem;
	line-height: 1.8;
	color: #ddd;
	text-align: justify;
	width: 100%;
	max-width: 800px;
	white-space: normal !important;
	word-wrap: break-word;
}

/* ========================================== */
/* 🍔 MENUS MOBILE (HOME & INTERNAS)          */
/* ========================================== */
#mobile-menu-btn, #mobile-dropdown, #gallery-menu-btn, #gallery-dropdown {
	display: none;
}

/* ========================================== */
/* 📱 RESPONSIVIDADE E MEDIA QUERIES          */
/* ========================================== */

/* --- PROTEÇÃO TOUCH/DESKTOP --- */

@media (hover: none) and (pointer: coarse) {
	body, a, button, .folder-tab, .close-panel, * {
		cursor: auto !important;
	}
}

/* --- MOBILE GERAL (MAX 1000px) --- */
@media (max-width: 1000px) {

	body, #main-wrapper, #canvas-container, canvas {
		cursor: pointer !important;
		-webkit-tap-highlight-color: transparent;
	}

	/* Impede que o título quebre a linha de forma estranha */
	.about-title {
		font-size: 1.8rem !important;
		margin-bottom: 20px !important;
		white-space: nowrap !important;
	}

}

/* --- MENU INTERNO GALERIAS (MAX 850px) --- */
@media (max-width: 850px) {
	.header .nav {
		display: none !important;
	}

	#gallery-menu-btn {
		display: block;
		position: fixed;
		top: 30px; /* <--- Ajustado de 34 para 30! */
		right: 20px;
		z-index: 9999;
		font-size: 24px;
		color: #000 !important;
		cursor: pointer;
		line-height: 1;
	}

	#gallery-dropdown {
		position: fixed;
		top: 30px;
		right: 20px;
		background: transparent;
		border: none;
		padding: 0;
		display: none;
		flex-direction: column;
		align-items: flex-end;
		gap: 15px;
		z-index: 9998;
	}

		#gallery-dropdown a {
			color: #000 !important;
			font-size: 0.7rem !important;
			text-decoration: none;
			text-transform: uppercase;
			letter-spacing: 2px;
			line-height: 1;
			margin: 0;
			opacity: 0;
			transform: translateY(-10px);
			animation: cascade-drop 0.3s ease forwards;
		}

			#gallery-dropdown a:hover, #gallery-dropdown a.active {
				color: var(--neon) !important;
			}

			#gallery-dropdown a:nth-child(1) {
				animation-delay: 0.05s;
			}

			#gallery-dropdown a:nth-child(2) {
				animation-delay: 0.10s;
			}

			#gallery-dropdown a:nth-child(3) {
				animation-delay: 0.15s;
			}

			#gallery-dropdown a:nth-child(4) {
				animation-delay: 0.20s;
			}
}

/* ========================================== */
/* 🌊 ANIMAÇÕES GERAIS E CACHOEIRAS           */
/* ========================================== */

@keyframes cascade-drop {
	0% {
		opacity: 0;
		transform: translateY(-15px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes content-cascade {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Aplicando a Cachoeira nas Abas Internas */
.project-item, .about-text, .text-content p, .text-content h3, .text-content ul {
	opacity: 0;
	animation: content-cascade 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

	.project-item:nth-child(1) {
		animation-delay: 0.05s;
	}

	.project-item:nth-child(2) {
		animation-delay: 0.10s;
	}

	.project-item:nth-child(3) {
		animation-delay: 0.15s;
	}

	.project-item:nth-child(4) {
		animation-delay: 0.20s;
	}

	.project-item:nth-child(5) {
		animation-delay: 0.25s;
	}

	.project-item:nth-child(6) {
		animation-delay: 0.30s;
	}

	.about-text:nth-of-type(1) {
		animation-delay: 0.05s;
	}

	.about-text:nth-of-type(2) {
		animation-delay: 0.10s;
	}

	.about-text:nth-of-type(3) {
		animation-delay: 0.15s;
	}

	.text-content p:nth-of-type(1) {
		animation-delay: 0.05s;
	}

	.text-content p:nth-of-type(2) {
		animation-delay: 0.10s;
	}

	.text-content h3:nth-of-type(1) {
		animation-delay: 0.15s;
	}

	.text-content p:nth-of-type(3) {
		animation-delay: 0.20s;
	}