/**
 * Glass hero — Ken Burns slideshow + subtle progress.
 * Zoom runs on an oversized inner layer (scale-only, GPU composited).
 */

.gl-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: var(--st-dark-deep);
	transform: translateZ(0);
	isolation: isolate;
}

.gl-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 0;
	transition: opacity 1.8s ease;
	contain: layout style paint;
}

.gl-hero-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.gl-hero-slide.is-leaving {
	z-index: 2;
	opacity: 1;
}

.gl-hero-slide.is-leaving.is-fading {
	opacity: 0;
}

.gl-hero-slide-zoom {
	position: absolute;
	inset: -14%;
	transform: translate3d(0, 0, 0) scale(1);
	transform-origin: center center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.gl-hero-slide.is-active .gl-hero-slide-zoom {
	animation: glHeroKenBurns 7.5s linear forwards;
}

.gl-hero-slide--dolly-a .gl-hero-slide-zoom {
	transform-origin: 38% 42%;
}

.gl-hero-slide--dolly-b .gl-hero-slide-zoom {
	transform-origin: 62% 38%;
}

.gl-hero-slide--dolly-c .gl-hero-slide-zoom {
	transform-origin: 50% 58%;
}

.gl-hero-slide--dolly-d .gl-hero-slide-zoom {
	transform-origin: 44% 36%;
}

.gl-hero-slide--dolly-b.is-active .gl-hero-slide-zoom {
	animation-name: glHeroKenBurnsB;
}

.gl-hero-slide--dolly-c.is-active .gl-hero-slide-zoom {
	animation-name: glHeroKenBurnsC;
}

.gl-hero-slide--dolly-d.is-active .gl-hero-slide-zoom {
	animation-name: glHeroKenBurnsD;
}

@keyframes glHeroKenBurns {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(0, 0, 0) scale(1.08);
	}
}

@keyframes glHeroKenBurnsB {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(0, 0, 0) scale(1.075);
	}
}

@keyframes glHeroKenBurnsC {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(0, 0, 0) scale(1.085);
	}
}

@keyframes glHeroKenBurnsD {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(0, 0, 0) scale(1.07);
	}
}

.gl-hero-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.06) contrast(1.03);
}

/* ── Progress — center right, minimal ── */
.gl-hero-progress {
	position: absolute;
	right: clamp(1rem, 2.5vw, 2rem);
	top: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.28rem;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0.7;
}

.gl-hero-progress-seg {
	display: block;
	width: 1px;
	height: 0.875rem;
	background: rgb(255 255 255 / 0.18);
	overflow: hidden;
	position: relative;
	transition: opacity 0.35s ease;
}

.gl-hero-progress-seg.is-current {
	opacity: 1;
}

.gl-hero-progress-seg:not(.is-current) {
	opacity: 0.45;
}

.gl-hero-progress-fill {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	background: rgb(255 255 255 / 0.55);
}

.gl-hero-progress-seg.is-active .gl-hero-progress-fill {
	animation: glHeroProgressFill var(--st-hero-slide-ms, 7500ms) linear forwards;
}

@keyframes glHeroProgressFill {
	from {
		height: 0;
	}

	to {
		height: 100%;
	}
}

.gl-hero-shade {
	z-index: 1;
}

.gl-hero-inner {
	z-index: 2;
}

@media (max-width: 768px) {
	.gl-hero-progress {
		right: 0.85rem;
		top: auto;
		bottom: 5.25rem;
		transform: none;
		flex-direction: row;
		gap: 0.22rem;
		opacity: 0.55;
	}

	.gl-hero-progress-seg {
		width: 0.875rem;
		height: 1px;
	}

	.gl-hero-progress-fill {
		bottom: auto;
		left: 0;
		top: 0;
		width: 0;
		height: 100%;
	}

	.gl-hero-progress-seg.is-active .gl-hero-progress-fill {
		animation-name: glHeroProgressFillX;
	}

	@keyframes glHeroProgressFillX {
		from {
			width: 0;
		}

		to {
			width: 100%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.gl-hero-slide {
		transition-duration: 0.01ms;
	}

	.gl-hero-slide.is-active .gl-hero-slide-zoom {
		animation: none;
		transform: translate3d(0, 0, 0) scale(1);
	}

	.gl-hero-progress-seg.is-active .gl-hero-progress-fill {
		animation: none;
		height: 100%;
		width: 100%;
	}
}