/* ============================================
   Elementor Hover Effects Pro - Frontend CSS
   ============================================ */

/* Base transition setup via JS */
.ehe-hover-element {
  position: relative;
  overflow: hidden;
}

/* Prevent inner images from overflowing on zoom */
.ehe-hover-element.ehe-effect-zoom-in,
.ehe-hover-element.ehe-effect-zoom-out {
  overflow: hidden;
}

/* ---- ZOOM IN ---- */
.ehe-effect-zoom-in:hover {
  transform: scale(var(--ehe-scale, 1.08));
}

/* ---- ZOOM OUT ---- */
.ehe-effect-zoom-out {
  transform: scale(var(--ehe-scale-out, 1.08));
}
.ehe-effect-zoom-out:hover {
  transform: scale(1);
}

/* ---- FADE UP ---- */
.ehe-effect-fade-up:hover {
  transform: translateY(calc(var(--ehe-move, 12px) * -1));
  opacity: 0.92;
}

/* ---- FADE DOWN ---- */
.ehe-effect-fade-down:hover {
  transform: translateY(var(--ehe-move, 12px));
  opacity: 0.92;
}

/* ---- FADE LEFT ---- */
.ehe-effect-fade-left:hover {
  transform: translateX(calc(var(--ehe-move, 12px) * -1));
  opacity: 0.92;
}

/* ---- FADE RIGHT ---- */
.ehe-effect-fade-right:hover {
  transform: translateX(var(--ehe-move, 12px));
  opacity: 0.92;
}

/* ---- ROTATE ---- */
.ehe-effect-rotate:hover {
  transform: rotate(var(--ehe-rotate, 6deg));
}

/* ---- FLIP X ---- */
.ehe-effect-flip-x:hover {
  transform: scaleX(-1);
}

/* ---- FLIP Y ---- */
.ehe-effect-flip-y:hover {
  transform: scaleY(-1);
}

/* ---- SKEW ---- */
.ehe-effect-skew:hover {
  transform: skewX(var(--ehe-skew, 5deg));
}

/* ---- BOUNCE ---- */
@keyframes ehe-bounce {
  0%, 100% { transform: translateY(0); }
  30%       { transform: translateY(calc(var(--ehe-move, 14px) * -1)); }
  60%       { transform: translateY(calc(var(--ehe-move, 14px) * -0.4)); }
  80%       { transform: translateY(calc(var(--ehe-move, 14px) * -0.15)); }
}
.ehe-effect-bounce:hover {
  animation: ehe-bounce var(--ehe-dur, 0.7s) var(--ehe-timing, ease) forwards;
}

/* ---- PULSE ---- */
@keyframes ehe-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(var(--ehe-scale, 1.06)); }
  100% { transform: scale(1); }
}
.ehe-effect-pulse:hover {
  animation: ehe-pulse var(--ehe-dur, 0.6s) var(--ehe-timing, ease-in-out) infinite;
}

/* ---- SHAKE ---- */
@keyframes ehe-shake {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(calc(var(--ehe-move, 8px) * -1)); }
  40%  { transform: translateX(var(--ehe-move, 8px)); }
  60%  { transform: translateX(calc(var(--ehe-move, 8px) * -0.5)); }
  80%  { transform: translateX(calc(var(--ehe-move, 8px) * 0.5)); }
}
.ehe-effect-shake:hover {
  animation: ehe-shake var(--ehe-dur, 0.5s) var(--ehe-timing, ease) forwards;
}

/* ---- GLOW ---- */
.ehe-effect-glow:hover {
  box-shadow: 0 0 var(--ehe-glow-spread, 25px) var(--ehe-color, #6EC1E4);
}

/* ---- SHADOW LIFT ---- */
.ehe-effect-shadow-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 var(--ehe-shadow-y, 20px) var(--ehe-shadow-blur, 40px) var(--ehe-color-alpha, rgba(0,0,0,0.2));
}

/* ---- COLOR SHIFT ---- */
.ehe-effect-color-shift::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--ehe-color, #6EC1E4);
  opacity: 0;
  transition: opacity var(--ehe-dur, 0.4s) var(--ehe-timing, ease);
  pointer-events: none;
  z-index: 1;
}
.ehe-effect-color-shift:hover::after {
  opacity: var(--ehe-opacity, 0.25);
}

/* ---- BORDER DRAW ---- */
.ehe-effect-border-draw::before,
.ehe-effect-border-draw::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.ehe-effect-border-draw::before {
  top: 0; left: 0;
  width: 0; height: 0;
  border-top: 3px solid var(--ehe-color, #6EC1E4);
  border-right: 3px solid var(--ehe-color, #6EC1E4);
  transition: width var(--ehe-dur-half, 0.2s) var(--ehe-timing, ease),
              height var(--ehe-dur-half, 0.2s) var(--ehe-timing, ease) var(--ehe-dur-half, 0.2s);
}
.ehe-effect-border-draw::after {
  bottom: 0; right: 0;
  width: 0; height: 0;
  border-bottom: 3px solid var(--ehe-color, #6EC1E4);
  border-left: 3px solid var(--ehe-color, #6EC1E4);
  transition: width var(--ehe-dur-half, 0.2s) var(--ehe-timing, ease),
              height var(--ehe-dur-half, 0.2s) var(--ehe-timing, ease) var(--ehe-dur-half, 0.2s);
}
.ehe-effect-border-draw:hover::before,
.ehe-effect-border-draw:hover::after {
  width: 100%;
  height: 100%;
}

/* ---- SLIDE BACKGROUND ---- */
.ehe-effect-slide-bg::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 0;
  background-color: var(--ehe-color, #6EC1E4);
  opacity: var(--ehe-opacity, 0.25);
  transition: height var(--ehe-dur, 0.4s) var(--ehe-timing, ease);
  pointer-events: none;
  z-index: 1;
}
.ehe-effect-slide-bg:hover::before {
  height: 100%;
}

/* ---- BLUR IN ---- */
.ehe-effect-blur-in {
  filter: blur(0px);
}
.ehe-effect-blur-in:hover {
  filter: blur(var(--ehe-blur, 3px));
  opacity: 0.85;
}

/* ---- TILT 3D (handled via JS) ---- */
.ehe-effect-tilt {
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* ---- IMAGE REVEAL ---- */
/*
  The image layer is injected as a ::before pseudo-element via JS CSS vars.
  We fade opacity from 0 → target on hover.
*/
.ehe-effect-image-reveal {
  isolation: isolate;
}

/* The image layer (injected by JS as a child div .ehe-image-layer) */
.ehe-image-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  /* transition set inline by JS */
}

.ehe-image-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: inherit;
}

/* Ensure element children render above the image layer */
.ehe-effect-image-reveal > *:not(.ehe-image-layer):not(.ehe-image-overlay) {
  position: relative;
  z-index: 2;
}

/* ============================================
   Editor preview styles
   ============================================ */
.elementor-editor-active .ehe-hover-element {
  outline: 1px dashed rgba(110,193,228,0.5);
}