/* Opening animation (inc/intro.php). Hidden unless the head gate added html.ep-intro.
   Timings mirror the INTRO_* constants in assets/js/site/intro.js. */
:root {
	--ep-intro-total: 2000ms;
	--ep-intro-logo: 800ms;
	--ep-intro-fade: 500ms;
	--ep-intro-skip: 200ms;
}

.ep-intro-overlay {
	display: none;
}

html.ep-intro .ep-intro-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	z-index: 9999; /* above AnnouncementModal (9000), drawer (100), header (50) */
	/* --color-primary-heading / --color-primary / --color-surface-tint */
	background: linear-gradient(135deg, #001b3d 0%, #002654 45%, #435e8f 100%);
	background-size: 200% 200%;
	touch-action: none;
	overscroll-behavior: contain;
	cursor: pointer;
	animation:
		ep-intro-bg var(--ep-intro-total) ease-in-out both,
		ep-intro-out var(--ep-intro-fade) ease-in calc(var(--ep-intro-total) - var(--ep-intro-fade)) forwards;
}

/* Distinct keyframe name so adding the class restarts the fade immediately. */
html.ep-intro .ep-intro-overlay.ep-intro-skip {
	animation: ep-intro-skip-out var(--ep-intro-skip) ease-out forwards;
}

.ep-intro-logo {
	width: clamp(96px, 28vw, 180px);
	height: auto;
	/* No filter: the file itself is white (assets/img/logo-white.svg), so it never flashes dark. */
	animation: ep-intro-logo var(--ep-intro-logo) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ep-intro-bg {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}

@keyframes ep-intro-logo {
	from { opacity: 0; transform: scale(0.85); }
	to { opacity: 1; transform: none; }
}

/* visibility:hidden at the end so the overlay stops blocking pointer events even if JS never runs. */
@keyframes ep-intro-out {
	from { opacity: 1; }
	to { opacity: 0; visibility: hidden; }
}

@keyframes ep-intro-skip-out {
	from { opacity: 1; }
	to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	html.ep-intro .ep-intro-overlay {
		background-size: auto;
		animation-name: none, ep-intro-out;
	}
	.ep-intro-logo {
		animation-name: ep-intro-logo-fade;
	}
	@keyframes ep-intro-logo-fade {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}