/**
 * Single event — banner and title entrance.
 *
 * Load hero (pattern A): CSS keyframes only. Title sits under the banner, so it
 * reveals on load with a short delay rather than a scroll observer.
 */

.event-single .page-title {
	--page-title-content-max: var(--container-narrow-max);
}

@media (prefers-reduced-motion: no-preference) {
	.event-single .page-banner__media,
	.event-single .page-banner__overlay {
		animation: event-banner-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
		will-change: opacity, transform;
	}

	.event-single .page-banner__breadcrumbs {
		animation: event-banner-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
		will-change: opacity, transform;
	}

	.event-single .page-title__headline {
		animation: event-title-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
		will-change: opacity, transform;
	}
}

@keyframes event-banner-in {
	from {
		opacity: 0;
		transform: scale(1.04);
	}

	to {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

@keyframes event-banner-rise {
	from {
		opacity: 0;
		transform: translateY(2.25rem);
	}

	to {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

@keyframes event-title-in {
	from {
		opacity: 0;
		transform: translateY(2.5rem);
	}

	to {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}