/* Layout: page-header (inner pages). The site header overlays the top. */
.sw-page-header { padding-block: calc(var(--header-height) + var(--gap-l)) var(--gap-l); }
.sw-page-header--has-media { padding-block-end: 0; }

.sw-page-header__inner { display: grid; gap: var(--gap-l); }

/* The frame holds the size (the image moves inside it, see .sw-parallax) */
.sw-page-header__image { aspect-ratio: 4 / 3; }
.sw-page-header__image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*
 * Load animation of the plus strip next to the image: it opens out from the centre,
 * then a brighter band of plusses sweeps through it once, left to right.
 */
.sw-page-header .sw-band__pattern {
	animation: sw-page-header-open 1200ms cubic-bezier(0.65, 0, 0.35, 1) 200ms both;
}
.sw-page-header .sw-band__pattern::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../../img/patterns/plus-bright.svg");
	background-size: var(--space-40) var(--space-40);
	mask-image: linear-gradient(90deg, transparent, var(--color-heading), transparent);
	mask-size: 10% 100%;
	mask-repeat: no-repeat;
	mask-position: -20% 0;
	animation: sw-page-header-sweep 3000ms linear 900ms both;
}

@keyframes sw-page-header-open {
	from { clip-path: inset(0 50%); opacity: 0; }
	to   { clip-path: inset(0 0); opacity: 1; }
}

/* The strip is three viewports wide, so the band crosses the screen in the middle second */
@keyframes sw-page-header-sweep {
	from { mask-position: -20% 0; }
	to   { mask-position: 120% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sw-page-header .sw-band__pattern,
	.sw-page-header .sw-band__pattern::after { animation: none; }
}

.sw-error-page__inner { display: grid; justify-items: start; gap: var(--gap-m); }

.sw-page-header .sw-section-heading--split { align-items: flex-end; }

@media (min-width: 48em) {
	.sw-page-header__image { aspect-ratio: 1400 / 450; }
}

@media (min-width: 75em) {
	.sw-page-header { padding-block: calc(var(--header-height) + var(--space-64)) var(--space-80); }
	.sw-page-header--has-media { padding-block-end: 0; }
}