.wetzlar-hero-gallery {
	position: relative;
	display: block;
	min-height: var(--wetzlar-hero-height, 100vh);
	overflow: hidden;
	background: #0a0a0a;
	isolation: isolate;
}

.wetzlar-hero-gallery__slides,
.wetzlar-hero-gallery__slide {
	position: absolute;
	inset: 0;
}

.wetzlar-hero-gallery__slide {
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.02);
	filter: blur(0) saturate(1);
	transition:
		opacity var(--wetzlar-hero-transition-duration, 1400ms) ease,
		transform var(--wetzlar-hero-transition-duration, 1400ms) ease,
		filter var(--wetzlar-hero-transition-duration, 1400ms) ease;
	will-change: opacity, transform, filter;
	backface-visibility: hidden;
}

.wetzlar-hero-gallery__slide.is-active,
.wetzlar-hero-gallery__slide.is-incoming,
.wetzlar-hero-gallery__slide.is-outgoing {
	visibility: visible;
}

.wetzlar-hero-gallery__slide.is-active,
.wetzlar-hero-gallery__slide.is-entering {
	opacity: 1;
	transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
	filter: blur(0) saturate(1);
	z-index: 2;
}

.wetzlar-hero-gallery__slide.is-outgoing {
	z-index: 3;
	opacity: 1;
}

.wetzlar-hero-gallery__slide.is-incoming {
	z-index: 4;
}

.wetzlar-hero-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: var(--wetzlar-hero-object-fit, cover);
	display: block;
	filter: var(--wetzlar-hero-filter, none);
	opacity: var(--wetzlar-hero-image-opacity, 0.7);
	transform: scale(1.015);
	transition: transform 8s ease;
}

.wetzlar-hero-gallery__slide.is-active .wetzlar-hero-gallery__image,
.wetzlar-hero-gallery__slide.is-entering .wetzlar-hero-gallery__image {
	transform: scale(1.04);
}

.wetzlar-hero-gallery__overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(8, 8, 8, calc(var(--wetzlar-hero-overlay-opacity, 0.22) + 0.12)) 0%, rgba(8, 8, 8, calc(var(--wetzlar-hero-overlay-opacity, 0.22) * 0.8)) 28%, rgba(8, 8, 8, calc(var(--wetzlar-hero-overlay-opacity, 0.22) * 1.25)) 100%);
	mix-blend-mode: normal;
}

.wetzlar-hero-gallery__indicators {
	position: absolute;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%);
	z-index: 7;
	display: flex;
	gap: 10px;
	align-items: center;
}

.wetzlar-hero-gallery__indicator {
	width: 34px;
	height: 3px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.26);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.wetzlar-hero-gallery__indicator.is-active,
.wetzlar-hero-gallery__indicator:hover {
	background: #ff535b;
	transform: scaleX(1.06);
}

.wetzlar-hero-gallery[data-animation="morph"] .wetzlar-hero-gallery__slide.is-incoming {
	opacity: 0;
	transform: scale(1.1);
	filter: blur(18px) saturate(0.85);
}

.wetzlar-hero-gallery[data-animation="morph"] .wetzlar-hero-gallery__slide.is-outgoing.is-leaving {
	opacity: 0;
	transform: scale(1.14);
	filter: blur(24px) saturate(0.7);
}

.wetzlar-hero-gallery[data-animation="slide"] .wetzlar-hero-gallery__slide.is-incoming {
	opacity: 1;
	transform: translate3d(18%, 0, 0) scale(1.02);
}

.wetzlar-hero-gallery[data-animation="slide"] .wetzlar-hero-gallery__slide.is-outgoing.is-leaving {
	opacity: 0;
	transform: translate3d(-12%, 0, 0) scale(1);
}

.wetzlar-hero-gallery[data-animation="film-frame-slide"]::before,
.wetzlar-hero-gallery[data-animation="film-frame-slide"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 6;
	pointer-events: none;
	height: 32px;
	background:
		/* sprocket holes – 8 evenly spaced rounded rectangles */
		repeating-linear-gradient(
			90deg,
			transparent 0,
			transparent calc(12.5% - 10px),
			rgba(255, 255, 255, 0.13) calc(12.5% - 10px),
			rgba(255, 255, 255, 0.13) calc(12.5% + 10px),
			transparent calc(12.5% + 10px),
			transparent 12.5%
		),
		/* film rail strip */
		linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.45));
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wetzlar-hero-gallery[data-animation="film-frame-slide"]::before {
	top: 0;
	border-top: none;
}

.wetzlar-hero-gallery[data-animation="film-frame-slide"]::after {
	bottom: 0;
	border-bottom: none;
}

/* thin frame border around the image area between rails */
.wetzlar-hero-gallery[data-animation="film-frame-slide"] {
	box-shadow:
		inset 0 32px 0 0 transparent,
		inset 0 33px 0 0 rgba(255, 255, 255, 0.04),
		inset 0 -32px 0 0 transparent,
		inset 0 -33px 0 0 rgba(255, 255, 255, 0.04),
		inset 2px 0 0 0 rgba(255, 255, 255, 0.04),
		inset -2px 0 0 0 rgba(255, 255, 255, 0.04);
}

.wetzlar-hero-gallery[data-animation="film-frame-slide"] .wetzlar-hero-gallery__slide.is-incoming {
	opacity: 1;
	transform: translate3d(28%, 0, 0) scale(1.03);
	filter: contrast(1.05) saturate(0.9);
}

.wetzlar-hero-gallery[data-animation="film-frame-slide"] .wetzlar-hero-gallery__slide.is-outgoing.is-leaving {
	opacity: 0;
	transform: translate3d(-18%, 0, 0) scale(0.98);
	filter: contrast(0.9) saturate(0.8);
}

.wetzlar-hero-gallery[data-animation="rotate"] .wetzlar-hero-gallery__slide.is-incoming {
	opacity: 0;
	transform: rotate(7deg) scale(1.12);
	filter: blur(10px) saturate(0.82);
	transform-origin: 50% 50%;
}

.wetzlar-hero-gallery[data-animation="rotate"] .wetzlar-hero-gallery__slide.is-outgoing.is-leaving {
	opacity: 0;
	transform: rotate(-5deg) scale(1.06);
	filter: blur(12px) saturate(0.78);
	transform-origin: 50% 50%;
}

.wetzlar-hero-gallery__empty {
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #121212;
	color: #e5e2e1;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	text-align: center;
}

.editor-styles-wrapper .wetzlar-hero-gallery {
	min-height: min(70vh, var(--wetzlar-hero-height, 100vh));
	margin-bottom: 24px;
}

@media (max-width: 782px) {
	.wetzlar-hero-gallery__indicators {
		bottom: 24px;
		gap: 8px;
	}

	.wetzlar-hero-gallery__indicator {
		width: 24px;
	}

	.wetzlar-hero-gallery[data-animation="film-frame-slide"]::before,
	.wetzlar-hero-gallery[data-animation="film-frame-slide"]::after {
		height: 22px;
	}

	.wetzlar-hero-gallery[data-animation="film-frame-slide"] {
		box-shadow:
			inset 0 22px 0 0 transparent,
			inset 0 23px 0 0 rgba(255, 255, 255, 0.04),
			inset 0 -22px 0 0 transparent,
			inset 0 -23px 0 0 rgba(255, 255, 255, 0.04),
			inset 2px 0 0 0 rgba(255, 255, 255, 0.04),
			inset -2px 0 0 0 rgba(255, 255, 255, 0.04);
	}

	.editor-styles-wrapper .wetzlar-hero-gallery {
		min-height: 52vh;
	}
}