/* ==========================================================
   PDSTYLE — HERO CROSSFADE
   ========================================================== */


/* ----------------------------------------------------------
   WRAPPER
   ---------------------------------------------------------- */

.pdstyle-hero-crossfade {
	position: relative;
	overflow: hidden;
}


/* ----------------------------------------------------------
   MEDIA LAYER
   ---------------------------------------------------------- */

.pdstyle-hero-crossfade__media {
	position: absolute;
	inset: 0;

	z-index: 0;

	pointer-events: none;
}


/* ----------------------------------------------------------
   SLIDES
   ---------------------------------------------------------- */

.pdstyle-hero-crossfade__slide {
	position: absolute;
	inset: 0;

	opacity: 0;

	transition: opacity 1.6s ease;
}


.pdstyle-hero-crossfade__slide.is-active {
	opacity: 1;
}


/* ----------------------------------------------------------
   IMAGE
   ---------------------------------------------------------- */

.pdstyle-hero-crossfade__image {
	position: absolute;

	display: block;

	max-width: none;
}


/* ----------------------------------------------------------
   OPTIONAL BRAND / MANUFACTURER LOGO
   ---------------------------------------------------------- */

.pdstyle-hero-crossfade__logo {
	position: absolute;

	z-index: 3;

	height: auto;

	opacity: 0;
	transform: translateY(12px);

	transition:
		opacity 0.8s ease 0.45s,
		transform 0.8s ease 0.45s;
}


.pdstyle-hero-crossfade__slide.is-active
.pdstyle-hero-crossfade__logo {
	opacity: 1;
	transform: translateY(0);
}


/* ----------------------------------------------------------
   CONTENT LAYER
   ---------------------------------------------------------- */

.pdstyle-hero-crossfade__content {
	position: relative;

	z-index: 5;
}


/* ----------------------------------------------------------
   DIVI ROW SUPPORT

   Keeps normal Divi row content above the crossfade media
   when the media layer is moved directly under the section.
   ---------------------------------------------------------- */

.pdstyle-hero-crossfade > .et_pb_row {
	position: relative;

	z-index: 5;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.pdstyle-hero-crossfade__slide {
		display: none;

		transition: none;
	}


	.pdstyle-hero-crossfade__slide:first-child {
		display: block;

		opacity: 1;
	}


	.pdstyle-hero-crossfade__logo {
		opacity: 1;
		transform: none;

		transition: none;
	}

}