/* ============================================================
   Splash screen + scroll gradient background + page fade.
   clone of components/splash-screen.tsx + app/page.tsx
   ============================================================ */

/* --- Splash screen ---------------------------------------- */
.splash-screen {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ciclic-cream);
	opacity: 1;
	transition: opacity 0.6s ease-in-out;
}

.splash-screen.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.splash-screen__logo {
	opacity: 0;
	transform: scale(0.8);
	animation: splash-logo-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

.splash-screen__logo img {
	width: 200px;
	height: auto;
	animation: splash-logo-float 1.5s ease-in-out 0.85s infinite;
}

@media (min-width: 768px) {
	.splash-screen__logo img {
		width: 300px;
	}
}

@keyframes splash-logo-in {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes splash-logo-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

/* --- Scroll-linked gradient background ------------------- */
.scroll-gradient {
	position: fixed;
	inset: 0;
	z-index: -10;
	background-color: var(--ciclic-cream);
	transition: background-color 0.7s ease-out;
	pointer-events: none;
}

/* --- Page fade-in (post splash) --------------------------- */
.page-fade {
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s ease-out;
}

.page-fade.is-visible {
	opacity: 1;
	pointer-events: auto;
}