/**
 * Swup page transitions for GUT — staggered multi-colour "stripe" sweep
 * (matches the brand finish-stripe). Five brand-colour bands rise to cover the
 * screen in a diagonal wave, the content is swapped behind them, then they keep
 * rising off the top to reveal the new page.
 * Only .fl-page-content is swapped; header/footer/floating-bar persist.
 */

/* Persistent sticky header above the content. */
header[data-type="header"] {
	position: relative;
	z-index: 100;
}

/* ---- Transition curtain (5 colour bands) ---- */
.gut-curtain {
	position: fixed;
	inset: 0;
	z-index: 99995;
	display: flex;
	pointer-events: none;
}

/* Base: parked below the fold, NO transition (so it snaps back instantly when
   the visit ends — the transition lives only on the active phases below). */
.gut-curtain__col {
	flex: 1 1 20%;
	transform: translateY(101%);
	will-change: transform;
}

.gut-curtain__col:nth-child(1) {
	background: #ec6436;
}

.gut-curtain__col:nth-child(2) {
	background: #febf2c;
}

.gut-curtain__col:nth-child(3) {
	background: #00a184;
}

.gut-curtain__col:nth-child(4) {
	background: #81d4da;
}

.gut-curtain__col:nth-child(5) {
	background: #7d7ebc;
}

/* OUT phase: bands rise to cover, staggered left→right (diagonal wave). */
html.is-leaving .gut-curtain__col {
	transform: translateY(0);
	transition: transform .5s cubic-bezier(.76, 0, .24, 1);
}

/* IN phase: bands keep rising off the top to reveal the swapped content. */
html.is-rendering .gut-curtain__col {
	transform: translateY(-101%);
	transition: transform .5s cubic-bezier(.76, 0, .24, 1);
}

/* Per-band stagger (applies to both phases). */
html.is-leaving .gut-curtain__col:nth-child(2),
html.is-rendering .gut-curtain__col:nth-child(2) {
	transition-delay: .07s;
}

html.is-leaving .gut-curtain__col:nth-child(3),
html.is-rendering .gut-curtain__col:nth-child(3) {
	transition-delay: .14s;
}

html.is-leaving .gut-curtain__col:nth-child(4),
html.is-rendering .gut-curtain__col:nth-child(4) {
	transition-delay: .21s;
}

html.is-leaving .gut-curtain__col:nth-child(5),
html.is-rendering .gut-curtain__col:nth-child(5) {
	transition-delay: .28s;
}

/* Centred isotype — pops in at peak cover, fades out as the bands lift. */
.gut-curtain__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 116px;
	height: auto;
	transform: translate(-50%, -50%) scale(.66);
	opacity: 0;
	filter: brightness(0) invert(1);
	z-index: 2;
	pointer-events: none;
}
html.is-leaving .gut-curtain__logo {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	transition: opacity .34s ease .2s, transform .55s cubic-bezier(.34, 1.56, .64, 1) .2s;
}
html.is-rendering .gut-curtain__logo {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.86);
	transition: opacity .26s ease, transform .3s ease;
}

@media (prefers-reduced-motion: reduce) {

	html.is-leaving .gut-curtain__col,
	html.is-rendering .gut-curtain__col,
	html.is-leaving .gut-curtain__logo,
	html.is-rendering .gut-curtain__logo {
		transition: none;
	}
}

/* Progress bar — brand orange (rarely seen thanks to preloading + the curtain). */
.gut-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	background: var(--gut-orange, #ec6436);
	z-index: 99990;
}