/**
 * Image Tilt Assist — front-end styles.
 *
 * Structure, perspective, overlay, glare, 3D depth, card content and graceful
 * fallbacks. Visual values come from CSS variables set inline on the wrapper;
 * the card transform itself is applied by tilt.js.
 *
 * @author Divi Assist
 */

.dia-tilt-image-assist {
	position: relative;
	perspective: var( --dia-tilt-perspective, 1000px );
}

.dia-tilt-card {
	position: relative;
	display: block;
	width: 100%;
	min-height: 400px;
	border-radius: inherit;
	overflow: hidden;
	transform: rotateX( 0 ) rotateY( 0 ) scale( 1 );
	transition: transform var( --dia-tilt-speed, 400ms ) ease-out;
	transform-style: flat;
	color: inherit;
	text-decoration: none;
}

/* Enable real 3D when the 3D content effect is on. */
.dia-tilt-3d-on .dia-tilt-card {
	transform-style: preserve-3d;
}

/* ----- Media / image ----------------------------------------------------- */
.dia-tilt-media {
	position: relative;
	line-height: 0;
	border-radius: inherit;
}

.dia-tilt-bg-image .dia-tilt-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dia-tilt-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	opacity: var( --dia-image-opacity, 1 );
	object-fit: var( --dia-image-fit, cover );
	object-position: var( --dia-image-position, center );
	border-radius: inherit;
	transition: transform var( --dia-tilt-speed, 400ms ) ease-out;
	transform: translateZ( var( --dia-z-image, 0px ) );
}

.dia-tilt-bg-image .dia-tilt-media img {
	min-height: 400px;
}

.dia-tilt-image-assist.dia-tilt-active .dia-tilt-media img {
	transform: translateZ( var( --dia-z-image, 0px ) ) scale( var( --dia-image-scale, 1.05 ) );
}

/* ----- Overlay ----------------------------------------------------------- */
.dia-tilt-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	opacity: var( --dia-overlay-opacity, 1 );
	background-color: rgba( 0, 0, 0, 0.35 );
	mix-blend-mode: var( --dia-overlay-blend, normal );
	transition: background-color 0.4s ease;
}

.dia-tilt-image-assist.dia-tilt-active .dia-tilt-overlay {
	background-color: rgba( 0, 0, 0, 0.45 );
}

/* ----- Glare ------------------------------------------------------------- */
.dia-tilt-glare {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200%;
	height: 200%;
	margin: -100% 0 0 -100%;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	border-radius: 0;
	transform-origin: center;
	mix-blend-mode: var( --dia-glare-blend, screen );
	background: linear-gradient(
		var( --dia-glare-angle, 45deg ),
		var( --dia-glare-color, rgba( 255, 255, 255, 0.5 ) ) 0%,
		transparent var( --dia-glare-size, 60% )
	);
	transition: opacity var( --dia-tilt-speed, 400ms ) ease-out;
}

/* ----- Card Content ------------------------------------------------------ */
/* Outer layer fills the card and positions the inner box (9-way). The inner box
   hugs its content and carries the native background/padding, so the background
   wraps the content, not the whole card. */
.dia-tilt-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 400px;
	box-sizing: border-box;
	justify-content: var( --dia-content-justify, center );
	align-items: var( --dia-content-align, center );
}

/* When the image is a background, the content layer overlays it. */
.dia-tilt-bg-image .dia-tilt-content {
	position: absolute;
	inset: 0;
}

.dia-tilt-content-inner {
	display: flex;
	flex-direction: column;
	align-items: var( --dia-content-align, center );
	gap: 10px;
	width: 60%;
	max-width: 100%;
	padding: 40px;
	box-sizing: border-box;
	overflow: hidden;
	text-align: var( --dia-content-text-align, center );
	border-radius: inherit;
	transform: translateZ( var( --dia-z-content, 0px ) );
	transition: transform var( --dia-tilt-speed, 400ms ) ease-out;
}

/* ----- Card Content: show on hover -------------------------------------- */
/* Hidden until the card is hovered, then eased in per the chosen animation. */
.dia-tilt-show-hover .dia-tilt-content-inner {
	opacity: 0;
	transition:
		opacity var( --dia-content-anim-duration, 400ms ) var( --dia-content-anim-easing, ease-out ),
		transform var( --dia-content-anim-duration, 400ms ) var( --dia-content-anim-easing, ease-out );
}

.dia-tilt-show-hover.dia-tilt-canim-fade_up .dia-tilt-content-inner { transform: translateY( 24px ); }
.dia-tilt-show-hover.dia-tilt-canim-fade_down .dia-tilt-content-inner { transform: translateY( -24px ); }
.dia-tilt-show-hover.dia-tilt-canim-fade_left .dia-tilt-content-inner { transform: translateX( 24px ); }
.dia-tilt-show-hover.dia-tilt-canim-fade_right .dia-tilt-content-inner { transform: translateX( -24px ); }
.dia-tilt-show-hover.dia-tilt-canim-zoom_in .dia-tilt-content-inner { transform: scale( 0.85 ); }
.dia-tilt-show-hover.dia-tilt-canim-zoom_out .dia-tilt-content-inner { transform: scale( 1.15 ); }

.dia-tilt-show-hover.dia-tilt-active .dia-tilt-content-inner {
	opacity: 1;
	transform: none;
}

/* ----- Icon -------------------------------------------------------------- */
.dia-tilt-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --dia-icon-color, #ffffff );
	background-color: transparent;
	/* padding / border-radius / margin are Divi native (Design → Icon: Border + Spacing). */
	margin-bottom: 20px;
	line-height: 1;
	transform: translateZ( var( --dia-z-icon, 0px ) );
	transition: transform var( --dia-tilt-speed, 400ms ) ease-out;
}

.dia-tilt-icon .et-pb-icon,
.dia-tilt-icon span {
	font-size: var( --dia-icon-size, 64px );
	line-height: 1;
}

/* ----- Title / Description ---------------------------------------------- */
.dia-tilt-title {
	margin: 0;
	color: #ffffff;
	transform: translateZ( var( --dia-z-content, 0px ) );
}

.dia-tilt-description {
	margin: 0;
	color: #ffffff;
	transform: translateZ( var( --dia-z-content, 0px ) );
}

.dia-tilt-description :last-child {
	margin-bottom: 0;
}

/* ----- Button (native Divi button) --------------------------------------- */
.dia-tilt-content .et_pb_button_wrapper {
	position: relative;
	z-index: 4;
	max-width: 100%;
	transform: translateZ( var( --dia-z-button, 0px ) );
	transition: transform var( --dia-tilt-speed, 400ms ) ease-out;
}

/* Keep the button on one line and inside the content box (no wrap/overflow). */
.dia-tilt-content .et_pb_button {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ----- 3D popup on hover ------------------------------------------------- */
.dia-tilt-3d-on.dia-tilt-popup.dia-tilt-active .dia-tilt-content {
	transform: translateZ( calc( var( --dia-z-content, 0px ) + 30px ) );
}

.dia-tilt-3d-on.dia-tilt-popup.dia-tilt-active .dia-tilt-content .et_pb_button_wrapper {
	transform: translateZ( calc( var( --dia-z-button, 0px ) + 30px ) );
}

/* ----- Reduced motion / graceful fallback -------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.dia-tilt-card,
	.dia-tilt-media img,
	.dia-tilt-content {
		transform: none !important;
		transition: none !important;
	}

	.dia-tilt-glare {
		display: none;
	}
}

/* Default heading-level sizes for the title/caption (overridable via the
   Title font group in the Design tab). Applies to whichever h1-h6 tag the
   chosen heading level renders. */
h1.dia-tilt-title { font-size: 41px; }
h2.dia-tilt-title { font-size: 31px; }
h3.dia-tilt-title { font-size: 24px; }
h4.dia-tilt-title { font-size: 20px; }
h5.dia-tilt-title { font-size: 17px; }
h6.dia-tilt-title { font-size: 15px; }