html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Inter', sans-serif;
}

h1,
h2,
h3 {
	font-family: 'Manrope', sans-serif;
}

.material-symbols-outlined {
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
}

/* ── Scroll reveal ───────────────────────────────────────── */

.reveal {
	opacity: 0;
	transform: translateY(36px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}
.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-left {
	opacity: 0;
	transform: translateX(-36px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}
.reveal-left.visible {
	opacity: 1;
	transform: translateX(0);
}

.reveal-right {
	opacity: 0;
	transform: translateX(36px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}
.reveal-right.visible {
	opacity: 1;
	transform: translateX(0);
}

.reveal-scale {
	opacity: 0;
	transform: scale(0.94);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}
.reveal-scale.visible {
	opacity: 1;
	transform: scale(1);
}

/* ── Stagger delays ──────────────────────────────────────── */

.delay-1 {
	transition-delay: 0.1s;
}
.delay-2 {
	transition-delay: 0.2s;
}
.delay-3 {
	transition-delay: 0.3s;
}
.delay-4 {
	transition-delay: 0.4s;
}
.delay-5 {
	transition-delay: 0.5s;
}

/* ── Hero entry animation ────────────────────────────────── */

@keyframes heroFadeUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-enter {
	animation: heroFadeUp 0.9s ease forwards;
}
.hero-enter-delay {
	animation: heroFadeUp 0.9s 0.35s ease both;
}

/* ── Phase panel transition ──────────────────────────────── */

.phase-panel {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 0.4s ease,
		transform 0.4s ease;
	display: none;
}
.phase-panel.active {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

/* ── Navbar shrink on scroll ─────────────────────────────── */

nav.nav-scrolled {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

nav.nav-scrolled .logo-header {
	height: 2rem !important;
}