/* Divello Hero Slider — the slides are moved into the row background, so they
   always take the exact size of the hero row. */
.divello-hero-slider {
	display: none;
}

.dhs-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
}

.dhs-layer .dhs-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: var(--dhs-position, center bottom);
	opacity: 0;
	transition: opacity var(--dhs-fade, 1.5s) ease-in-out;
	will-change: opacity, transform;
}

.dhs-layer .dhs-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.dhs-layer .dhs-slide.is-leaving {
	opacity: 0;
	z-index: 2;
}

.dhs-layer.dhs-zoom .dhs-slide.is-active,
.dhs-layer.dhs-zoom .dhs-slide.is-leaving {
	animation: dhs-zoom-out var(--dhs-duration, 7.5s) linear forwards;
}

.dhs-layer.dhs-zoom .dhs-slide.is-leaving {
	animation-play-state: paused;
}

@keyframes dhs-zoom-out {
	from { transform: scale(1.12); }
	to   { transform: scale(1); }
}

/* The theme's own background image and its zoom stay underneath as a
   fallback until the first slide has loaded. */
.dhs-ready > .row-bg-wrap .row-bg {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.dhs-layer.dhs-zoom .dhs-slide.is-active,
	.dhs-layer.dhs-zoom .dhs-slide.is-leaving {
		animation: none;
	}
}