/* =============================================================================
   Divi Image Hover Effects — Frontend Styles
   Version: 1.0.0
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Custom Properties (defaults — overridden per-module via inline style)
   ----------------------------------------------------------------------------- */
:root {
	--dihe-speed:   0.4s;
	--dihe-ease:    ease;
	--dihe-overlay: rgba(0, 0, 0, 0.72);
}

/* -----------------------------------------------------------------------------
   Module shell
   ----------------------------------------------------------------------------- */
.dihe-module {
	position: relative;
	display:  block;
	width:    100%;
}

/* -----------------------------------------------------------------------------
   Wrapper  (position reference for the overlay)
   ----------------------------------------------------------------------------- */
.dihe-wrapper {
	position:   relative;
	display:    block;
	overflow:   hidden;
	cursor:     pointer;
	-webkit-transform: translateZ(0); /* GPU-layer for smoother transitions */
	transform:  translateZ(0);
}

/* -----------------------------------------------------------------------------
   Image container
   ----------------------------------------------------------------------------- */
.dihe-image-container {
	position: relative;
	display:  block;
	overflow: hidden;
	width:    100%;
	line-height: 0; /* remove phantom space under inline images */
}

/* -----------------------------------------------------------------------------
   Image
   ----------------------------------------------------------------------------- */
.dihe-image {
	display:            block;
	width:              100%;
	height:             auto;
	object-fit:         cover;
	-webkit-transition: all var(--dihe-speed) var(--dihe-ease);
	transition:         all var(--dihe-speed) var(--dihe-ease);
	-webkit-transform:  translateZ(0);
	transform:          translateZ(0);
}

/* -----------------------------------------------------------------------------
   Overlay (default hidden state)
   ----------------------------------------------------------------------------- */
.dihe-overlay {
	position:           absolute;
	top:    0;
	left:   0;
	right:  0;
	bottom: 0;
	background:         var(--dihe-overlay);
	display:            flex;
	align-items:        center;
	justify-content:    center;
	-webkit-transition: all var(--dihe-speed) var(--dihe-ease);
	transition:         all var(--dihe-speed) var(--dihe-ease);
	-webkit-transform:  translateZ(0);
	transform:          translateZ(0);
	z-index:            2;
}

/* -----------------------------------------------------------------------------
   Overlay content block
   ----------------------------------------------------------------------------- */
.dihe-overlay-content {
	position:        relative;
	z-index:         3;
	padding:         24px 28px;
	text-align:      center;
	width:           100%;
	display:         -webkit-box;
	display:         -ms-flexbox;
	display:         flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction:  column;
	-webkit-box-align: center;
	-ms-flex-align:  center;
	align-items:     center;
	-webkit-transition: all var(--dihe-speed) var(--dihe-ease);
	transition:         all var(--dihe-speed) var(--dihe-ease);
}

/* -----------------------------------------------------------------------------
   Content position variants
   ----------------------------------------------------------------------------- */
.dihe-pos-top,
.dihe-pos-top-center    { }
.dihe-pos-top    .dihe-overlay,
.dihe-pos-top-center .dihe-overlay { align-items: flex-start; }

.dihe-pos-bottom .dihe-overlay,
.dihe-pos-bottom-center .dihe-overlay { align-items: flex-end; }

.dihe-pos-top-left .dihe-overlay {
	align-items:     flex-start;
	justify-content: flex-start;
}
.dihe-pos-top-left .dihe-overlay-content { text-align: left; }

.dihe-pos-top-right .dihe-overlay {
	align-items:     flex-start;
	justify-content: flex-end;
}
.dihe-pos-top-right .dihe-overlay-content { text-align: right; }

.dihe-pos-bottom-left .dihe-overlay {
	align-items:     flex-end;
	justify-content: flex-start;
}
.dihe-pos-bottom-left .dihe-overlay-content { text-align: left; }

.dihe-pos-bottom-right .dihe-overlay {
	align-items:     flex-end;
	justify-content: flex-end;
}
.dihe-pos-bottom-right .dihe-overlay-content { text-align: right; }

/* -----------------------------------------------------------------------------
   Icon
   ----------------------------------------------------------------------------- */
.dihe-icon {
	display:     block;
	font-family: ETmodules;
	font-size:   40px;
	color:       #fff;
	margin-bottom: 12px;
	line-height: 1;
}

/* -----------------------------------------------------------------------------
   Title — (0,2,0) beats theme/VB heading resets on h1–h6
   ----------------------------------------------------------------------------- */
.dihe-overlay-content .dihe-title,
.dihe-flip-back .dihe-title {
	color:       #fff;
	font-size:   22px;
	font-weight: 700;
	line-height: 1.3;
	margin:      0 0 10px;
	padding:     0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* -----------------------------------------------------------------------------
   Description — (0,2,0) for consistency
   ----------------------------------------------------------------------------- */
.dihe-overlay-content .dihe-description,
.dihe-flip-back .dihe-description {
	color:       rgba(255, 255, 255, 0.9);
	font-size:   14px;
	line-height: 1.65;
	margin:      0 0 18px;
	padding:     0;
}

/* -----------------------------------------------------------------------------
   Button
   ----------------------------------------------------------------------------- */
.dihe-button {
	display:         inline-block;
	background:      #fff;
	color:           #333;
	padding:         10px 26px;
	border-radius:   4px;
	text-decoration: none;
	font-size:       14px;
	font-weight:     700;
	letter-spacing:  0.02em;
	border:          2px solid #fff;
	-webkit-transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	transition:         background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

:where(.dihe-module):not(.dihe-vb) .dihe-button:hover,
:where(.dihe-module):not(.dihe-vb) .dihe-button:focus {
	background:   transparent;
	color:        #fff;
	border-color: #fff;
	outline:      none;
}


/* =============================================================================
   EFFECT 1 — FADE
   Simple opacity fade-in of the overlay.
   ============================================================================= */
.dihe-effect-fade .dihe-overlay {
	opacity: 0;
}
.dihe-effect-fade:hover .dihe-overlay {
	opacity: 1;
}

/* Content subtle rise on hover */
.dihe-effect-fade .dihe-overlay-content {
	-webkit-transform: translateY(6px);
	transform:         translateY(6px);
	opacity: 0;
	-webkit-transition: all var(--dihe-speed) var(--dihe-ease);
	transition:         all var(--dihe-speed) var(--dihe-ease);
	-webkit-transition-delay: 0.05s;
	transition-delay:         0.05s;
}
.dihe-effect-fade:hover .dihe-overlay-content {
	-webkit-transform: translateY(0);
	transform:         translateY(0);
	opacity: 1;
}

/* =============================================================================
   EFFECT 2 — SLIDE UP
   Overlay slides in from the bottom.
   ============================================================================= */
.dihe-effect-slide-up .dihe-overlay {
	-webkit-transform: translateY(101%);
	transform:         translateY(101%);
	opacity: 0;
}
.dihe-effect-slide-up:hover .dihe-overlay {
	-webkit-transform: translateY(0);
	transform:         translateY(0);
	opacity: 1;
}

/* =============================================================================
   EFFECT 3 — SLIDE DOWN
   Overlay slides in from the top.
   ============================================================================= */
.dihe-effect-slide-down .dihe-overlay {
	-webkit-transform: translateY(-101%);
	transform:         translateY(-101%);
	opacity: 0;
}
.dihe-effect-slide-down:hover .dihe-overlay {
	-webkit-transform: translateY(0);
	transform:         translateY(0);
	opacity: 1;
}

/* =============================================================================
   EFFECT 4 — SLIDE LEFT
   Overlay slides in from the right edge.
   ============================================================================= */
.dihe-effect-slide-left .dihe-overlay {
	-webkit-transform: translateX(101%);
	transform:         translateX(101%);
	opacity: 0;
}
.dihe-effect-slide-left:hover .dihe-overlay {
	-webkit-transform: translateX(0);
	transform:         translateX(0);
	opacity: 1;
}

/* =============================================================================
   EFFECT 5 — SLIDE RIGHT
   Overlay slides in from the left edge.
   ============================================================================= */
.dihe-effect-slide-right .dihe-overlay {
	-webkit-transform: translateX(-101%);
	transform:         translateX(-101%);
	opacity: 0;
}
.dihe-effect-slide-right:hover .dihe-overlay {
	-webkit-transform: translateX(0);
	transform:         translateX(0);
	opacity: 1;
}

/* =============================================================================
   EFFECT 6 — ZOOM IN
   Image scales up; overlay fades in on top.
   ============================================================================= */
.dihe-effect-zoom-in .dihe-overlay {
	opacity: 0;
}
.dihe-effect-zoom-in:hover .dihe-image {
	-webkit-transform: scale(1.08);
	transform:         scale(1.08);
}
.dihe-effect-zoom-in:hover .dihe-overlay {
	opacity: 1;
}
.dihe-effect-zoom-in .dihe-overlay-content {
	-webkit-transform: scale(0.92);
	transform:         scale(0.92);
	opacity: 0;
	-webkit-transition: all var(--dihe-speed) var(--dihe-ease);
	transition:         all var(--dihe-speed) var(--dihe-ease);
	-webkit-transition-delay: 0.05s;
	transition-delay:         0.05s;
}
.dihe-effect-zoom-in:hover .dihe-overlay-content {
	-webkit-transform: scale(1);
	transform:         scale(1);
	opacity: 1;
}

/* =============================================================================
   EFFECT 7 — ZOOM OUT
   Image starts scaled up, shrinks back; overlay fades in.
   ============================================================================= */
.dihe-effect-zoom-out .dihe-image {
	-webkit-transform: scale(1.1);
	transform:         scale(1.1);
}
.dihe-effect-zoom-out .dihe-overlay {
	opacity: 0;
}
.dihe-effect-zoom-out:hover .dihe-image {
	-webkit-transform: scale(1);
	transform:         scale(1);
}
.dihe-effect-zoom-out:hover .dihe-overlay {
	opacity: 1;
}

/* =============================================================================
   EFFECT 8 — FLIP HORIZONTAL
   Full card flip on the Y axis.
   ============================================================================= */
.dihe-effect-flip-h {
	-webkit-perspective:      1000px;
	perspective:              1000px;
	-webkit-transform-style:  preserve-3d;
	transform-style:          preserve-3d;
	overflow: visible !important;
}
.dihe-effect-flip-h .dihe-flip-inner {
	position:             relative;
	width:  100%;
	-webkit-transform-style: preserve-3d;
	transform-style:         preserve-3d;
	-webkit-transition: -webkit-transform var(--dihe-speed) var(--dihe-ease);
	transition:         transform         var(--dihe-speed) var(--dihe-ease);
}
.dihe-effect-flip-h:hover .dihe-flip-inner {
	-webkit-transform: rotateY(180deg);
	transform:         rotateY(180deg);
}
.dihe-effect-flip-h .dihe-flip-front,
.dihe-effect-flip-h .dihe-flip-back {
	width:  100%;
	-webkit-backface-visibility: hidden;
	backface-visibility:         hidden;
}
.dihe-effect-flip-h .dihe-flip-front {
	position: relative;
	z-index:  2;
}
.dihe-effect-flip-h .dihe-flip-back {
	position: absolute;
	top:    0;
	right:  0;
	bottom: 0;
	left:   0;
	display:            flex;
	align-items:        center;
	justify-content:    center;
	-webkit-transform:  rotateY(180deg);
	transform:          rotateY(180deg);
	z-index: 1;
}

/* =============================================================================
   EFFECT 9 — FLIP VERTICAL
   Full card flip on the X axis.
   ============================================================================= */
.dihe-effect-flip-v {
	-webkit-perspective:      1000px;
	perspective:              1000px;
	-webkit-transform-style:  preserve-3d;
	transform-style:          preserve-3d;
	overflow: visible !important;
}
.dihe-effect-flip-v .dihe-flip-inner {
	position:             relative;
	width:  100%;
	-webkit-transform-style: preserve-3d;
	transform-style:         preserve-3d;
	-webkit-transition: -webkit-transform var(--dihe-speed) var(--dihe-ease);
	transition:         transform         var(--dihe-speed) var(--dihe-ease);
}
.dihe-effect-flip-v:hover .dihe-flip-inner {
	-webkit-transform: rotateX(180deg);
	transform:         rotateX(180deg);
}
.dihe-effect-flip-v .dihe-flip-front,
.dihe-effect-flip-v .dihe-flip-back {
	width:  100%;
	-webkit-backface-visibility: hidden;
	backface-visibility:         hidden;
}
.dihe-effect-flip-v .dihe-flip-front {
	position: relative;
	z-index:  2;
}
.dihe-effect-flip-v .dihe-flip-back {
	position: absolute;
	top:    0;
	right:  0;
	bottom: 0;
	left:   0;
	display:            flex;
	align-items:        center;
	justify-content:    center;
	-webkit-transform:  rotateX(180deg);
	transform:          rotateX(180deg);
	z-index: 1;
}

/* Content position adjustments inside flip-back */
.dihe-pos-top    .dihe-flip-back,
.dihe-pos-top-center .dihe-flip-back { align-items: flex-start; }
.dihe-pos-bottom .dihe-flip-back,
.dihe-pos-bottom-center .dihe-flip-back { align-items: flex-end; }
.dihe-pos-top-left    .dihe-flip-back,
.dihe-pos-bottom-left .dihe-flip-back  { justify-content: flex-start; }
.dihe-pos-top-right   .dihe-flip-back,
.dihe-pos-bottom-right .dihe-flip-back { justify-content: flex-end;   }
.dihe-pos-top-left    .dihe-flip-back .dihe-overlay-content,
.dihe-pos-bottom-left .dihe-flip-back .dihe-overlay-content { text-align: left;  }
.dihe-pos-top-right   .dihe-flip-back .dihe-overlay-content,
.dihe-pos-bottom-right .dihe-flip-back .dihe-overlay-content { text-align: right; }

/* =============================================================================
   EFFECT 10 — BLUR
   Image blurs (+ slight scale) while overlay fades in.
   ============================================================================= */
.dihe-effect-blur .dihe-overlay {
	opacity: 0;
}
.dihe-effect-blur:hover .dihe-image {
	-webkit-filter: blur(4px);
	filter:         blur(4px);
	-webkit-transform: scale(1.04);
	transform:         scale(1.04);
}
.dihe-effect-blur:hover .dihe-overlay {
	opacity: 1;
}

/* =============================================================================
   EFFECT 11 — GRAYSCALE
   Image desaturates while overlay fades in.
   ============================================================================= */
.dihe-effect-grayscale .dihe-overlay {
	opacity: 0;
}
.dihe-effect-grayscale:hover .dihe-image {
	-webkit-filter: grayscale(100%);
	filter:         grayscale(100%);
	-webkit-transform: scale(1.03);
	transform:         scale(1.03);
}
.dihe-effect-grayscale:hover .dihe-overlay {
	opacity: 1;
}

/* =============================================================================
   EFFECT 12 — SHINE
   A light glare sweeps across the image on hover.
   ============================================================================= */
.dihe-effect-shine .dihe-overlay {
	opacity: 0;
}
.dihe-effect-shine .dihe-image-container::after {
	content:    '';
	position:   absolute;
	top:    -50%;
	left:   -100%;
	width:  60%;
	height: 200%;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0)   0%,
		rgba(255, 255, 255, 0.5) 50%,
		rgba(255, 255, 255, 0)   100%
	);
	-webkit-transform: skewX(-20deg);
	transform:         skewX(-20deg);
	z-index: 10;
	pointer-events: none;
	/* no transition here — controlled by animation */
}
.dihe-effect-shine:hover .dihe-image-container::after {
	-webkit-animation: dihe-shine var(--dihe-speed) var(--dihe-ease) forwards;
	animation:         dihe-shine var(--dihe-speed) var(--dihe-ease) forwards;
}
.dihe-effect-shine:hover .dihe-overlay {
	opacity: 1;
}
@-webkit-keyframes dihe-shine {
	0%   { left: -100%; }
	100% { left:  150%; }
}
@keyframes dihe-shine {
	0%   { left: -100%; }
	100% { left:  150%; }
}

/* =============================================================================
   EFFECT 13 — BOUNCE IN
   Overlay bounces in elastically from the bottom.
   ============================================================================= */
.dihe-effect-bounce .dihe-overlay {
	-webkit-transform: translateY(110%);
	transform:         translateY(110%);
	opacity: 0;
	/* override generic transition — animation handles motion */
	-webkit-transition: opacity var(--dihe-speed) var(--dihe-ease);
	transition:         opacity var(--dihe-speed) var(--dihe-ease);
}
.dihe-effect-bounce:hover .dihe-overlay {
	opacity: 1;
	-webkit-animation: dihe-bounce var(--dihe-speed) var(--dihe-ease) forwards;
	animation:         dihe-bounce var(--dihe-speed) var(--dihe-ease) forwards;
}
@-webkit-keyframes dihe-bounce {
	0%   { -webkit-transform: translateY(110%); transform: translateY(110%); }
	55%  { -webkit-transform: translateY(-6%);  transform: translateY(-6%);  }
	75%  { -webkit-transform: translateY(3%);   transform: translateY(3%);   }
	90%  { -webkit-transform: translateY(-2%);  transform: translateY(-2%);  }
	100% { -webkit-transform: translateY(0);    transform: translateY(0);    }
}
@keyframes dihe-bounce {
	0%   { -webkit-transform: translateY(110%); transform: translateY(110%); }
	55%  { -webkit-transform: translateY(-6%);  transform: translateY(-6%);  }
	75%  { -webkit-transform: translateY(3%);   transform: translateY(3%);   }
	90%  { -webkit-transform: translateY(-2%);  transform: translateY(-2%);  }
	100% { -webkit-transform: translateY(0);    transform: translateY(0);    }
}

/* =============================================================================
   EFFECT 14 — REVEAL LEFT → RIGHT  (curtain)
   Overlay is clipped from the left, expanding to the right.
   ============================================================================= */
.dihe-effect-reveal-lr .dihe-overlay {
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path:         inset(0 100% 0 0);
	-webkit-transition: -webkit-clip-path var(--dihe-speed) var(--dihe-ease);
	transition:         clip-path         var(--dihe-speed) var(--dihe-ease);
}
.dihe-effect-reveal-lr:hover .dihe-overlay {
	-webkit-clip-path: inset(0 0% 0 0);
	clip-path:         inset(0 0% 0 0);
}

/* =============================================================================
   EFFECT 15 — REVEAL RIGHT → LEFT  (curtain)
   Overlay is clipped from the right, expanding to the left.
   ============================================================================= */
.dihe-effect-reveal-rl .dihe-overlay {
	-webkit-clip-path: inset(0 0 0 100%);
	clip-path:         inset(0 0 0 100%);
	-webkit-transition: -webkit-clip-path var(--dihe-speed) var(--dihe-ease);
	transition:         clip-path         var(--dihe-speed) var(--dihe-ease);
}
.dihe-effect-reveal-rl:hover .dihe-overlay {
	-webkit-clip-path: inset(0 0 0 0%);
	clip-path:         inset(0 0 0 0%);
}

/* =============================================================================
   Divi Builder (Visual Builder) — in-editor preview helpers
   ============================================================================= */

/* Force overlay always visible in the builder */
.et-fb-app .dihe-overlay {
	opacity:              1 !important;
	-webkit-transform:    none !important;
	transform:            none !important;
	-webkit-clip-path:    none !important;
	clip-path:            none !important;
}
.et-fb-app .dihe-overlay-content {
	opacity:           1 !important;
	-webkit-transform: none !important;
	transform:         none !important;
}
.et-fb-app .dihe-flip-inner {
	-webkit-transform: none !important;
	transform:         none !important;
}
.et-fb-app .dihe-flip-back {
	-webkit-transform:           none !important;
	transform:                   none !important;
	-webkit-backface-visibility: visible !important;
	backface-visibility:         visible !important;
	z-index:                     3 !important;
}

/* VB hover mode: show hover styles when hover toggle is active */
.et_vb_hover .dihe-vb .dihe-button {
	background:   transparent;
	color:        #fff;
	border-color: #fff;
	outline:      none;
}

/* Force GPU compositing on all animated elements */
.dihe-overlay,
.dihe-image,
.dihe-overlay-content {
	will-change: transform, opacity;
}

/* =============================================================================
   Accessibility — respect prefers-reduced-motion
   ============================================================================= */

/* =============================================================================
   Accessibility — respect prefers-reduced-motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
	.dihe-image,
	.dihe-overlay,
	.dihe-flip-inner,
	.dihe-overlay-content {
		-webkit-transition: none !important;
		transition:         none !important;
		-webkit-animation:  none !important;
		animation:          none !important;
	}
	.dihe-effect-fade .dihe-overlay,
	.dihe-effect-slide-up .dihe-overlay,
	.dihe-effect-slide-down .dihe-overlay,
	.dihe-effect-slide-left .dihe-overlay,
	.dihe-effect-slide-right .dihe-overlay,
	.dihe-effect-zoom-in .dihe-overlay,
	.dihe-effect-zoom-out .dihe-overlay,
	.dihe-effect-blur .dihe-overlay,
	.dihe-effect-grayscale .dihe-overlay,
	.dihe-effect-shine .dihe-overlay,
	.dihe-effect-bounce .dihe-overlay,
	.dihe-effect-reveal-lr .dihe-overlay,
	.dihe-effect-reveal-rl .dihe-overlay {
		opacity: 0 !important;
		-webkit-transform: none !important;
		transform: none !important;
		-webkit-clip-path: none !important;
		clip-path: none !important;
	}
	.dihe-effect-fade:focus-within .dihe-overlay,
	.dihe-effect-slide-up:focus-within .dihe-overlay,
	.dihe-effect-zoom-in:focus-within .dihe-overlay,
	.dihe-effect-blur:focus-within .dihe-overlay {
		opacity: 1 !important;
	}
}