/* Light-touch animations and microinteractions */
:root {
	--accent: #94e0dc;
	--shadow-strong: 0 18px 38px rgba(0, 0, 0, 0.2);
	--shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.navigation a {
	position: relative;
	display: inline-block;
	transition: color 160ms ease;
}

.navigation a::after {
	content: "";
	position: absolute;
	left: 22%;
	right: 22%;
	bottom: 10px;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 180ms ease;
}

.navigation a:hover::after,
.navigation a:focus::after {
	transform: scaleX(1);
}

.logo-underline {
	background: linear-gradient(90deg, #8fded9 0%, #a6e8e4 100%);
}

.slider .slide img,
.lightbox-gallery img {
	transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
	transform-origin: center center;
}

.slider .slide:hover img,
.slider .slide:focus-within img {
	transform: translateY(-4px) scale(1.02);
	box-shadow: var(--shadow-strong);
	filter: saturate(1.05);
}

.slider .slide:hover .slide-text,
.slider .slide:focus-within .slide-text {
	background-color: rgba(102, 102, 102, 0.92);
}

.lightbox-gallery a:hover img,
.lightbox-gallery a:focus img {
	transform: translateY(-6px) scale(1.02);
	box-shadow: var(--shadow-soft);
	filter: saturate(1.06);
}

.imageStrapLine {
	isolation: isolate;
}

.imageStrapLine .strapline {
	opacity: 0;
	transform: translate(-50%, 12px) scale(1.01);
	animation: straplineIntro 900ms ease-out forwards;
}

.imageStrapLine .strapline:nth-child(1) { animation-delay: 60ms; }
.imageStrapLine .strapline:nth-child(2) { animation-delay: 140ms; }
.imageStrapLine .strapline:nth-child(3) { animation-delay: 220ms; }
.imageStrapLine .strapline:nth-child(4) { animation-delay: 300ms; }

@keyframes straplineIntro {
	to {
		opacity: 1;
		transform: translate(-50%, 0) scale(1);
	}
}

.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 450ms ease, transform 450ms ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.navigation a,
	.navigation a::after,
	.slider .slide img,
	.lightbox-gallery img,
	.imageStrapLine .strapline,
	.reveal {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}
