/* ==========================================
   Base Image Wrapper
   ========================================== */
.sv-image-wrapper {
  position: relative;
}

.sv-image {
  display: block;
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease;
}

/* ==========================================
   Basic Effects - Hover Swap
   ========================================== */
.sv-image-wrapper.has-swap-image {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.sv-image-hover-swap {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  -o-object-fit: cover;
     object-fit: cover;
}

.sv-image-wrapper:hover .sv-image-hover-swap {
  opacity: 1;
}

.sv-image-wrapper.has-swap-image:hover .sv-image {
  opacity: 0;
}

/* ==========================================
   Overlay Effects
   ========================================== */
.sv-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.sv-image-wrapper:hover .sv-image-overlay {
  opacity: 1;
}

.sv-overlay-text {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
}

/* ==========================================
   Caption
   ========================================== */
.sv-image-caption {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

/* ==========================================
   CSS Transform Animations
   ========================================== */
/* Rotate Animations */
@keyframes rotate-360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate-180 {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
}
@keyframes rotate-y {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
@keyframes rotate-x {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}
.sv-css-animate-rotate-360 {
  animation: rotate-360 2s infinite linear;
}

.sv-css-animate-rotate-180 {
  animation: rotate-180 2s infinite ease-in-out;
}

.sv-css-animate-rotate-continuous {
  animation: rotate-360 3s infinite linear;
}

.sv-css-animate-rotate-y {
  animation: rotate-y 3s infinite ease-in-out;
}

.sv-css-animate-rotate-x {
  animation: rotate-x 3s infinite ease-in-out;
}

/* Scale Animations */
@keyframes scale-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes scale-heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
}
.sv-css-animate-scale-pulse {
  animation: scale-pulse 2s infinite ease-in-out;
}

.sv-css-animate-scale-heartbeat {
  animation: scale-heartbeat 2s infinite ease-in-out;
}

/* Shake Animations */
@keyframes shake-horizontal {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
@keyframes shake-vertical {
  0%, 100% {
    transform: translateY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateY(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateY(10px);
  }
}
@keyframes shake-rotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-5deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(5deg);
  }
}
.sv-css-animate-shake-horizontal {
  animation: shake-horizontal 1s infinite ease-in-out;
}

.sv-css-animate-shake-vertical {
  animation: shake-vertical 1s infinite ease-in-out;
}

.sv-css-animate-shake-rotate {
  animation: shake-rotate 1s infinite ease-in-out;
}

/* Float Animations */
@keyframes float-up-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
@keyframes float-left-right {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
}
.sv-css-animate-float-up-down {
  animation: float-up-down 3s infinite ease-in-out;
}

.sv-css-animate-float-left-right {
  animation: float-left-right 3s infinite ease-in-out;
}

/* Perspective Animations */
.sv-css-animate-perspective-flip-x,
.sv-css-animate-perspective-flip-y {
  perspective: 1000px;
}

@keyframes perspective-flip-x {
  0%, 100% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
}
@keyframes perspective-flip-y {
  0%, 100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
}
.sv-css-animate-perspective-flip-x .sv-image {
  animation: perspective-flip-x 3s infinite ease-in-out;
  transform-style: preserve-3d;
}

.sv-css-animate-perspective-flip-y .sv-image {
  animation: perspective-flip-y 3s infinite ease-in-out;
  transform-style: preserve-3d;
}

/* Glow Effects */
@keyframes glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
  }
}
@keyframes border-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  }
}
.sv-css-animate-glow-pulse {
  animation: glow-pulse 2s infinite ease-in-out;
}

.sv-css-animate-border-glow .sv-image {
  animation: border-glow 2s infinite ease-in-out;
}

/* ==========================================
   Hover Zoom Effect
   ========================================== */
.sv-image-wrapper.hover-zoom .sv-image {
  transition: transform 0.5s ease;
}

.sv-image-wrapper.hover-zoom:hover .sv-image {
  transform: scale(1.1);
}

/* ==========================================
   Hover Color Effect
   ========================================== */
.sv-image-wrapper.hover-grayscale .sv-image {
  transition: filter 0.3s ease;
}

.sv-image-wrapper.hover-grayscale:hover .sv-image {
  filter: grayscale(100%);
}

.sv-image-wrapper.hover-saturate .sv-image {
  transition: filter 0.3s ease;
}

.sv-image-wrapper.hover-saturate:hover .sv-image {
  filter: saturate(2);
}

/* ==========================================
   Hover Shine Effect
   ========================================== */
.sv-image-wrapper.hover-shine {
  position: relative;
  overflow: hidden;
}

.sv-image-wrapper.hover-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transition: left 0.5s ease;
  z-index: 3;
}

.sv-image-wrapper.hover-shine:hover::before {
  left: 100%;
}

/* ==========================================
   Tilt Effect (3D)
   ========================================== */
.sv-image-wrapper.tilt-effect {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

/* ==========================================
   Mouse Parallax Effect
   ========================================== */
.sv-image-parallax {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* ==========================================
   Magnetic Effect
   ========================================== */
.sv-image-magnetic {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* ==========================================
   Scroll Animation Preparation
   ========================================== */
.sv-image-wrapper[data-scroll-animation] {
  will-change: transform, opacity;
}

/* ==========================================
   Responsive Adjustments
   ========================================== */
@media (max-width: 768px) {
  .sv-overlay-text {
    font-size: 16px;
    padding: 15px;
  }
  /* Reduce animation intensity on mobile */
  .sv-css-animate-shake-horizontal,
  .sv-css-animate-shake-vertical {
    animation-duration: 1.5s;
  }
  @keyframes shake-horizontal {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }
  @keyframes shake-vertical {
    0%, 100% {
      transform: translateY(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateY(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateY(5px);
    }
  }
}
/* ==========================================
   Performance Optimizations
   ========================================== */
.sv-image {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .sv-image-wrapper *,
  .sv-image-wrapper *::before,
  .sv-image-wrapper *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* SV Image Editor Controls */
.sv-animation-editor-controls {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.sv-animation-editor-controls:hover {
  opacity: 1;
}

.sv-animation-editor-controls button {
  transition: all 0.2s;
  min-width: 20px;
  text-align: center;
}

.sv-animation-editor-controls button:hover {
  transform: scale(1.1);
}

/* Ensure animations are visible in editor */
.elementor-editor-active .sv-image-wrapper {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Make sure mouse effects work in editor */
.elementor-edit-mode .sv-image-parallax,
.elementor-edit-mode .sv-image-tilt,
.elementor-edit-mode .sv-image-magnetic {
  pointer-events: auto !important;
  cursor: pointer;
}

/* Animation preview states */
.sv-animation-preview-mode .sv-image {
  animation-play-state: running !important;
}/*# sourceMappingURL=sv-image.css.map */