/* DP WP Visual Effects V2 - Frontend */

:root {
  --dpve-duration: 0.8s;
  --dpve-delay: 0s;
}

img.iep-zoom-in, img.iep-zoom-out, img.iep-pulse, img.iep-shake,
img.iep-rotate, img.iep-slide-left, img.iep-slide-right,
img.iep-slide-up, img.iep-slide-down, img.iep-fade-in,
img.iep-bounce, img.iep-blur-in,
img.reveal-image,
img.hover-zoom-in, img.hover-zoom-out, img.hover-slide-up, img.hover-slide-down,
img.hover-bounce, img.hover-blur, img.hover-brightness, img.hover-grayscale,
img.hover-saturate, img.hover-flip-horizontal, img.hover-flip-vertical, img.hover-rotate {
  will-change: transform, opacity, filter, clip-path;
  backface-visibility: hidden;
}

.iep-animated {
  opacity: 0;
  transform: scale(1);
  transition: all var(--dpve-duration) ease;
}
.iep-visible {
  opacity: 1;
  animation-duration: var(--dpve-duration);
  animation-delay: var(--dpve-delay);
  animation-fill-mode: both;
}

.iep-zoom-in.iep-visible { animation-name: iepZoomInCenter; }
.iep-zoom-out.iep-visible { animation-name: iepZoomOutCenter; }
.iep-pulse.iep-visible { animation-name: iepPulse; }
.iep-shake.iep-visible { animation-name: iepShake; }
.iep-rotate.iep-visible { animation-name: iepRotate; }
.iep-slide-left.iep-visible { animation-name: iepSlideLeft; }
.iep-slide-right.iep-visible { animation-name: iepSlideRight; }
.iep-slide-up.iep-visible { animation-name: iepSlideUp; }
.iep-slide-down.iep-visible { animation-name: iepSlideDown; }
.iep-fade-in.iep-visible { animation-name: iepFadeIn; }
.iep-bounce.iep-visible { animation-name: iepBounce; }
.iep-blur-in.iep-visible { animation-name: iepBlurIn; }

@keyframes iepZoomInCenter {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes iepZoomOutCenter {
  0% { transform: scale(1); opacity: 0; }
  50% { transform: scale(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes iepPulse {
  0% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes iepShake {
  0% { transform: translateX(0); opacity: 0; }
  25% { transform: translateX(-5px); opacity: 1; }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes iepRotate {
  0% { transform: rotate(-10deg); opacity: 0; }
  100% { transform: rotate(0); opacity: 1; }
}
@keyframes iepSlideLeft {
  0% { transform: translateX(-100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes iepSlideRight {
  0% { transform: translateX(100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes iepSlideUp {
  0% { transform: translateY(-100px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes iepSlideDown {
  0% { transform: translateY(100px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes iepFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes iepBounce {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes iepBlurIn {
  0% { filter: blur(8px); opacity: 0; }
  100% { filter: blur(0); opacity: 1; }
}

.hover-zoom-in { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; }
.hover-zoom-in:hover { transform: scale(1.1); }

.hover-zoom-out { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; }
.hover-zoom-out:hover { transform: scale(0.9); }

.hover-slide-up { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; }
.hover-slide-up:hover { transform: translateY(-10px); }

.hover-slide-down { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; }
.hover-slide-down:hover { transform: translateY(10px); }

.hover-bounce { transition: transform calc(var(--dpve-duration) * 0.5) ease, filter var(--dpve-duration) ease; }
.hover-bounce:hover { transform: scale(1.05); }

.hover-blur { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; }
.hover-blur:hover { filter: blur(2px); }

.hover-brightness { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; }
.hover-brightness:hover { filter: brightness(1.3); }

.hover-grayscale { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; }
.hover-grayscale:hover { filter: grayscale(100%); }

.hover-saturate { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; }
.hover-saturate:hover { filter: saturate(2); }

.hover-flip-horizontal { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; transform-origin: center center; }
.hover-flip-horizontal:hover { transform: scaleX(-1); }

.hover-flip-vertical { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; transform-origin: center center; }
.hover-flip-vertical:hover { transform: scaleY(-1); }

.hover-rotate { transition: transform var(--dpve-duration) ease, filter var(--dpve-duration) ease; }
.hover-rotate:hover { transform: rotate(10deg); }

.reveal-image {
  opacity: 0;
  position: relative;
  overflow: hidden;
}
.reveal-image.revealed {
  opacity: 1;
  animation-duration: var(--dpve-duration);
  animation-delay: var(--dpve-delay);
  animation-fill-mode: both;
}
.reveal-left.revealed { animation-name: revealFromLeft; }
.reveal-right.revealed { animation-name: revealFromRight; }
.reveal-top.revealed { animation-name: revealFromTop; }
.reveal-bottom.revealed { animation-name: revealFromBottom; }
.reveal-top-left.revealed { animation-name: revealFromTopLeft; }
.reveal-top-right.revealed { animation-name: revealFromTopRight; }
.reveal-bottom-left.revealed { animation-name: revealFromBottomLeft; }
.reveal-bottom-right.revealed { animation-name: revealFromBottomRight; }
.reveal-center-out.revealed { animation-name: revealFromCenterOut; }
.reveal-out-center.revealed { animation-name: revealFromEdgeBandsToCenter; }

@keyframes revealFromLeft {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes revealFromRight {
  0% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes revealFromTop {
  0% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes revealFromBottom {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes revealFromTopLeft {
  0% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes revealFromTopRight {
  0% { clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes revealFromBottomLeft {
  0% { clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes revealFromBottomRight {
  0% { clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes revealFromCenterOut {
  0% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(150% at 50% 50%); }
}
@keyframes revealFromEdgeBandsToCenter {
  0% { clip-path: inset(50% 50% 50% 50%); }
  100% { clip-path: inset(0 0 0 0); }
}