/* --- 1. BASE STYLES --- */
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100%;
	background: #000;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	font-family: halyard-display, sans-serif;
	overflow: hidden;
	touch-action: none;
}
#folder-icon-btn {
	display: none !important;
}

/* --- 2. TYPOGRAPHY & PROFILE LAYOUT --- */
.profile {
	position: fixed;
	left: 5%;
	bottom: 0;
	width: auto;
	max-width: 45%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 1000;
	pointer-events: none; /* Let 3D handle clicks by default */
}

/* Allow interaction with text */
.profile h1, .profile p, [contenteditable="true"] {
	pointer-events: auto;
}

h1 {
	font-family: ivypresto-headline, serif;
	font-weight: 700;
	font-size: clamp(3.5rem, 8vw, 8rem); /* Responsive size */
	line-height: 0.9;
	margin: 0;
}

p {
	font-size: clamp(1rem, 1.5vw, 1.3rem);
	margin: 1rem 0 0 0;
	opacity: 0.8;
}

/* --- 3. CMS BUTTONS & STATES --- */
/* Default States: Hide internal album controls, show Album button */
#back-btn,
.cms-btn.upload,
#cms-delete-btn {
	display: none !important;
}

.cms-btn.album {
	display: inline-block;
}

/* Album Open State: Show Back, Upload, Delete. Hide Add Album. */
body.album-open #back-btn,
body.album-open .cms-btn.upload,
body.album-open #cms-delete-btn {
	display: inline-block !important;
}

body.album-open .cms-btn.album {
	display: none !important;
}

/* --- 4. EDITOR MODE --- */
body.cms-edit-active .viewport {
	pointer-events: none !important;
}

body.cms-edit-active [contenteditable="true"] {
	pointer-events: auto !important;
	cursor: text;
}

body.cms-edit-active [contenteditable="true"]:hover {
	outline: 1px dashed #6366f1;
}

/* Start hidden for GSAP intro */
.profile h1, .profile p {
	opacity: 0;
	will-change: transform, opacity;
}

/* Ensure the profile section doesn't block the grid when open */
.profile {
	transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 5. MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
	.profile {
		max-width: 80%;
		left: 8%;
		justify-content: flex-end;
		padding-bottom: 120px; /* Space for the CMS bar */
		height: 80vh;
	}

	h1 {
		font-size: 3.5rem; /* Large but readable on phones */
	}

	p {
		font-size: 1.1rem;
	}

	/* Make buttons easier to tap on mobile */
	.cms-btn {
		padding: 10px 18px !important;
		font-size: 12px !important;
	}

	#cms-edit-bar {
		width: 90%;
		bottom: 15px !important;
		gap: 8px !important;
		padding: 8px 12px !important;
	}

	#back-btn {
		padding: 10px 20px;
		font-size: 14px;
	}
}