/* Full-screen background carousel. Hand-written, kept out of main.css so a Tailwind rebuild can't wipe it. */

.carousel {
	position: absolute;
	inset: 0;
	z-index: 10;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: #111;
}

/* Soft shading top and bottom so the white text stays readable on light photos */
.carousel::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0) 22%,
		rgba(0, 0, 0, 0) 75%,
		rgba(0, 0, 0, 0.4) 100%
	);
}

.carousel-slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

/* The incoming slide fades in over the outgoing one, which stays fully visible underneath */
.carousel-slide.is-leaving {
	z-index: 1;
	opacity: 1;
	transition: none;
}

.carousel-slide.is-active {
	z-index: 2;
	opacity: 1;
}

.carousel-slide picture,
.carousel-slide img {
	display: block;
	width: 100%;
	height: 100%;
}

.carousel-slide img {
	object-fit: cover;
	object-position: center;
}

/* Contact icons, bottom right (phone, Instagram, email, LinkedIn) */
.contact-icons {
	position: absolute;
	z-index: 20;
	/* Offset by the tap area padding so the icons line up with the page margin.
	   Tap area is 36 x 44px; icon is 22px (24px on desktop) */
	right: calc(1.5rem - 7px);
	bottom: calc(1.5rem - 11px);
	display: flex;
}

.contact-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem; /* tap area; the narrow width sets the gap between icons */
	height: 2.75rem;
	color: #fff;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.contact-icons a:hover,
.contact-icons a:focus-visible {
	transform: scale(1.15);
}

.contact-icons a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.contact-icons svg {
	width: 22px;
	height: 22px;
}

@media (min-width: 1024px) {
	.contact-icons {
		right: calc(3rem - 6px);
		bottom: calc(3rem - 10px);
	}

	.contact-icons svg {
		width: 24px;
		height: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-icons a {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.carousel-slide {
		transition: none;
	}
}