/* ============================================================
   Elementor Image Animator Pro - animations.css
   Premium Animation Effects | All Devices Responsive
   ============================================================ */

/* ─── CSS Custom Properties ─── */
.eia-widget-wrapper {
  --eia-duration: 0.4s;
  --eia-ease: ease;
  --eia-anim-duration: 3s;
  display: block;
  width: 100%;
}

/* ─── Base Wrapper ─── */
.eia-image-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  will-change: transform;
  transition: transform var(--eia-duration) var(--eia-ease),
              box-shadow var(--eia-duration) var(--eia-ease);
}

.eia-main-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--eia-duration) var(--eia-ease),
              filter var(--eia-duration) var(--eia-ease),
              opacity var(--eia-duration) var(--eia-ease);
  transform-origin: center center;
}

/* ─── Link Wrapper ─── */
.eia-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ─── Overlay Base ─── */
.eia-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(0,0,0,0.7);
  transition: all var(--eia-duration) var(--eia-ease);
  z-index: 5;
}

/* ─── Caption ─── */
.eia-caption {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 0 20px;
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.4s ease;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.eia-image-wrapper:hover .eia-caption {
  transform: translateY(0);
  opacity: 1;
}

/* ─── Shine Layer ─── */
.eia-shine-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,0.35) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 250% 250%;
  background-position: -100% 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: background-position 0.7s ease, opacity 0.2s ease;
}

/* ─── Border Draw Layer ─── */
.eia-border-draw {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.eia-border-draw::before,
.eia-border-draw::after {
  content: '';
  position: absolute;
  transition: all 0.4s ease;
}

/* ============================================================
   ██████╗  HOVER EFFECTS
   ============================================================ */

/* Zoom In */
.eia-hover-zoom-in:hover .eia-main-image {
  transform: scale(1.1);
}

/* Zoom Out */
.eia-hover-zoom-out .eia-main-image {
  transform: scale(1.1);
}
.eia-hover-zoom-out:hover .eia-main-image {
  transform: scale(1.0);
}

/* Zoom & Rotate */
.eia-hover-zoom-rotate:hover .eia-main-image {
  transform: scale(1.12) rotate(3deg);
}

/* Slide Directions */
.eia-hover-slide-up:hover .eia-main-image    { transform: translateY(-8px) scale(1.05); }
.eia-hover-slide-down:hover .eia-main-image  { transform: translateY(8px) scale(1.05); }
.eia-hover-slide-left:hover .eia-main-image  { transform: translateX(-8px) scale(1.05); }
.eia-hover-slide-right:hover .eia-main-image { transform: translateX(8px) scale(1.05); }

/* Flip Horizontal */
.eia-hover-flip-h:hover .eia-main-image {
  transform: scaleX(-1);
}

/* Flip Vertical */
.eia-hover-flip-v:hover .eia-main-image {
  transform: scaleY(-1);
}

/* Blur In */
.eia-hover-blur-in .eia-main-image {
  filter: blur(4px);
}
.eia-hover-blur-in:hover .eia-main-image {
  filter: blur(0);
  transform: scale(1.05);
}

/* Grayscale to Color */
.eia-hover-grayscale .eia-main-image {
  filter: grayscale(100%);
  transform: scale(1.02);
}
.eia-hover-grayscale:hover .eia-main-image {
  filter: grayscale(0%);
  transform: scale(1.0);
}

/* Sepia Reveal */
.eia-hover-sepia .eia-main-image {
  filter: sepia(80%);
}
.eia-hover-sepia:hover .eia-main-image {
  filter: sepia(0%);
  transform: scale(1.05);
}

/* Flash */
.eia-hover-flash:hover {
  animation: eiaFlash 0.6s ease;
}
@keyframes eiaFlash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%      { opacity: 0.5; }
}

/* Shine Sweep */
.eia-hover-shine:hover .eia-shine-layer {
  opacity: 1;
  background-position: 200% 0;
  transition: background-position 0.7s ease, opacity 0.1s ease;
}
.eia-hover-shine:hover .eia-main-image {
  transform: scale(1.05);
}

/* Bounce */
.eia-hover-bounce:hover {
  animation: eiaHoverBounce 0.6s ease;
}
@keyframes eiaHoverBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.12); }
  60%  { transform: scale(0.96); }
  80%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Wobble */
.eia-hover-wobble:hover {
  animation: eiaWobble 0.8s ease;
}
@keyframes eiaWobble {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(-5deg) scale(1.05); }
  30%      { transform: rotate(4deg); }
  45%      { transform: rotate(-3deg); }
  60%      { transform: rotate(2deg); }
  75%      { transform: rotate(-1deg); }
}

/* Shake */
.eia-hover-shake:hover {
  animation: eiaShake 0.6s ease;
}
@keyframes eiaShake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-8px); }
  30%      { transform: translateX(8px); }
  45%      { transform: translateX(-6px); }
  60%      { transform: translateX(6px); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(3px); }
}

/* Pulse */
.eia-hover-pulse:hover {
  animation: eiaPulse 0.8s ease;
}
@keyframes eiaPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Rubber Band */
.eia-hover-rubber-band:hover {
  animation: eiaRubberBand 0.8s ease;
}
@keyframes eiaRubberBand {
  0%   { transform: scaleX(1) scaleY(1); }
  30%  { transform: scaleX(1.25) scaleY(0.75); }
  40%  { transform: scaleX(0.75) scaleY(1.25); }
  50%  { transform: scaleX(1.15) scaleY(0.85); }
  65%  { transform: scaleX(0.95) scaleY(1.05); }
  75%  { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scaleX(1) scaleY(1); }
}

/* Push Down */
.eia-hover-push:hover {
  transform: scale(0.96);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

/* Lift Up Shadow */
.eia-hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 50px rgba(0,0,0,0.35) !important;
}

/* Glitch */
.eia-hover-glitch:hover {
  animation: eiaGlitch 0.5s ease;
}
@keyframes eiaGlitch {
  0%   { transform: translate(0); clip-path: none; }
  10%  { transform: translate(-3px, 1px); }
  20%  { transform: translate(3px, -1px); filter: hue-rotate(90deg); }
  30%  { transform: translate(-2px, 2px); }
  40%  { transform: translate(2px, -2px); filter: hue-rotate(-90deg); }
  50%  { transform: translate(-1px, 1px); }
  60%  { transform: translate(1px, -1px); filter: none; }
  70%  { transform: translate(-2px, 0); }
  80%  { transform: translate(2px, 0); }
  90%  { transform: translate(-1px, 0); }
  100% { transform: translate(0); }
}

/* Float (hover) */
.eia-hover-float:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25) !important;
}

/* ─── Overlay Types ─── */
.has-overlay .eia-overlay { opacity: 0; }
.has-overlay:hover .eia-overlay { opacity: 1; }

.eia-overlay-slide-up .eia-overlay    { transform: translateY(100%); opacity: 1; }
.eia-overlay-slide-down .eia-overlay  { transform: translateY(-100%); opacity: 1; }
.eia-overlay-slide-left .eia-overlay  { transform: translateX(100%); opacity: 1; }
.eia-overlay-slide-right .eia-overlay { transform: translateX(-100%); opacity: 1; }
.eia-overlay-zoom .eia-overlay        { transform: scale(0.5); opacity: 0; }
.eia-overlay-diagonal .eia-overlay    { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1; }
.eia-overlay-radial .eia-overlay      { clip-path: circle(0% at 50% 50%); opacity: 1; }

.has-overlay.eia-overlay-slide-up:hover .eia-overlay    { transform: translateY(0); }
.has-overlay.eia-overlay-slide-down:hover .eia-overlay  { transform: translateY(0); }
.has-overlay.eia-overlay-slide-left:hover .eia-overlay  { transform: translateX(0); }
.has-overlay.eia-overlay-slide-right:hover .eia-overlay { transform: translateX(0); }
.has-overlay.eia-overlay-zoom:hover .eia-overlay        { transform: scale(1); opacity: 1; }
.has-overlay.eia-overlay-diagonal:hover .eia-overlay    { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.has-overlay.eia-overlay-radial:hover .eia-overlay      { clip-path: circle(75% at 50% 50%); }

/* Color Overlay Effect */
.eia-hover-color-overlay:hover .eia-overlay {
  opacity: 1;
}
.eia-hover-color-overlay:hover .eia-main-image {
  transform: scale(1.05);
}

/* Reveal Caption */
.eia-hover-reveal-text .eia-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
  opacity: 1;
  transform: translateY(100%);
}
.eia-hover-reveal-text:hover .eia-overlay {
  transform: translateY(0);
}
.eia-hover-reveal-text:hover .eia-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Border Draw */
.eia-hover-border-draw:hover .eia-border-draw::before {
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255,255,255,0.8);
  border-radius: inherit;
  top: 0; left: 0;
}
.eia-border-draw::before {
  width: 0; height: 0;
  border: 3px solid transparent;
  top: 0; left: 0;
  transition: all 0.5s ease;
}

/* ============================================================
   🔄 CONTINUOUS ANIMATIONS
   ============================================================ */

/* Float */
.eia-continuous-float {
  animation: eiaFloat var(--eia-anim-duration, 3s) ease-in-out infinite;
}
@keyframes eiaFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* Pulse */
.eia-continuous-pulse {
  animation: eiaContPulse var(--eia-anim-duration, 3s) ease-in-out infinite;
}
@keyframes eiaContPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

/* Spin */
.eia-continuous-spin {
  animation: eiaSpin var(--eia-anim-duration, 3s) linear infinite;
}
@keyframes eiaSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Swing */
.eia-continuous-swing {
  transform-origin: top center;
  animation: eiaSwing var(--eia-anim-duration, 3s) ease-in-out infinite;
}
@keyframes eiaSwing {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(5deg); }
  75%       { transform: rotate(-5deg); }
}

/* Heartbeat */
.eia-continuous-heartbeat {
  animation: eiaHeartbeat var(--eia-anim-duration, 3s) ease-in-out infinite;
}
@keyframes eiaHeartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.1); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.1); }
  56%       { transform: scale(1); }
}

/* Breathing */
.eia-continuous-breath {
  animation: eiaBreath var(--eia-anim-duration, 3s) ease-in-out infinite;
}
@keyframes eiaBreath {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%       { transform: scale(1.03); filter: brightness(1.1); }
}

/* Wobble Loop */
.eia-continuous-wobble {
  animation: eiaWobbleLoop var(--eia-anim-duration, 3s) ease-in-out infinite;
}
@keyframes eiaWobbleLoop {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-3deg); }
  40%       { transform: rotate(3deg); }
  60%       { transform: rotate(-2deg); }
  80%       { transform: rotate(2deg); }
}

/* Flip Loop */
.eia-continuous-flip-loop {
  animation: eiaFlipLoop var(--eia-anim-duration, 3s) ease-in-out infinite;
}
@keyframes eiaFlipLoop {
  0%, 100% { transform: perspective(400px) rotateY(0deg); }
  50%       { transform: perspective(400px) rotateY(180deg); }
}

/* Shake Loop */
.eia-continuous-shake-loop {
  animation: eiaShakeLoop var(--eia-anim-duration, 3s) ease-in-out infinite;
}
@keyframes eiaShakeLoop {
  0%, 90%, 100% { transform: translateX(0); }
  92%            { transform: translateX(-4px); }
  94%            { transform: translateX(4px); }
  96%            { transform: translateX(-3px); }
  98%            { transform: translateX(3px); }
}

/* Zoom Loop */
.eia-continuous-zoom-loop {
  animation: eiaZoomLoop var(--eia-anim-duration, 3s) ease-in-out infinite;
}
@keyframes eiaZoomLoop {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

/* Color Shift */
.eia-continuous-color-shift {
  animation: eiaColorShift var(--eia-anim-duration, 3s) linear infinite;
}
@keyframes eiaColorShift {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Glitch Loop */
.eia-continuous-glitch-loop {
  animation: eiaGlitchLoop var(--eia-anim-duration, 3s) steps(1) infinite;
}
@keyframes eiaGlitchLoop {
  0%, 95%, 100% { transform: translate(0); filter: none; }
  96%            { transform: translate(-3px, 1px); filter: hue-rotate(90deg); }
  97%            { transform: translate(3px, -1px); filter: hue-rotate(-90deg) saturate(2); }
  98%            { transform: translate(-2px, 2px); filter: none; }
  99%            { transform: translate(2px, -2px); filter: brightness(1.5); }
}

/* Neon Glow */
.eia-continuous-neon-glow {
  animation: eiaNeonGlow var(--eia-anim-duration, 3s) ease-in-out infinite;
}
@keyframes eiaNeonGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(0,255,255,0.3), 0 0 20px rgba(0,255,255,0.1); }
  50%       { box-shadow: 0 0 15px rgba(0,255,255,0.8), 0 0 40px rgba(0,255,255,0.4), 0 0 80px rgba(0,255,255,0.2); }
}

/* Pause on Hover */
.eia-pause-hover:hover {
  animation-play-state: paused !important;
}

/* ============================================================
   🚀 ENTRANCE ANIMATIONS
   ============================================================ */

/* Base hidden state — hidden only while waiting to animate */
[data-entrance]:not(.eia-animated) {
  opacity: 0;
}

/* Safety fallback: if JS fails or takes too long, reveal the image after 3 s
   so the image is never permanently invisible on live pages.             */
@keyframes eiaFallbackReveal {
  to { opacity: 1; }
}
[data-entrance]:not(.eia-animated) {
  animation: eiaFallbackReveal 0.5s ease 3s forwards;
}

/* Fade In */
@keyframes eiaEntrFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade Up */
@keyframes eiaEntrFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade Down */
@keyframes eiaEntrFadeDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade Left */
@keyframes eiaEntrFadeLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade Right */
@keyframes eiaEntrFadeRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Zoom In */
@keyframes eiaEntrZoomIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Zoom Out */
@keyframes eiaEntrZoomOut {
  from { opacity: 0; transform: scale(1.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* Flip X */
@keyframes eiaEntrFlipX {
  from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  to   { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

/* Flip Y */
@keyframes eiaEntrFlipY {
  from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
  to   { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

/* Rotate In */
@keyframes eiaEntrRotateIn {
  from { opacity: 0; transform: rotate(-180deg) scale(0.5); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Slide Up */
@keyframes eiaEntrSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Bounce In */
@keyframes eiaEntrBounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 0.9; transform: scale(1.15); }
  70%  { transform: scale(0.9); }
  85%  { transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}

/* Swing In */
@keyframes eiaEntrSwingIn {
  from { opacity: 0; transform: perspective(400px) rotateX(-90deg); transform-origin: top; }
  to   { opacity: 1; transform: perspective(400px) rotateX(0deg); transform-origin: top; }
}

/* Rubber Band In */
@keyframes eiaEntrRubberBand {
  0%   { opacity: 0; transform: scale(0.1); }
  50%  { opacity: 1; transform: scaleX(1.3) scaleY(0.8); }
  70%  { transform: scaleX(0.85) scaleY(1.15); }
  85%  { transform: scaleX(1.08) scaleY(0.95); }
  100% { transform: scaleX(1) scaleY(1); }
}

/* Jack In The Box */
@keyframes eiaEntrJack {
  0%   { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; }
  50%  { transform: rotate(-10deg); }
  70%  { transform: rotate(7deg); }
  80%  { transform: rotate(-7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Roll In */
@keyframes eiaEntrRollIn {
  from { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* Light Speed */
@keyframes eiaEntrLightSpeed {
  from { opacity: 0; transform: translateX(100%) skewX(-30deg); }
  60%  { opacity: 1; transform: skewX(20deg); }
  80%  { transform: skewX(-5deg); }
  100% { opacity: 1; transform: translateX(0) skewX(0deg); }
}

/* Reveal (Curtain) */
@keyframes eiaEntrReveal {
  from { clip-path: inset(0 100% 0 0); opacity: 1; }
  to   { clip-path: inset(0 0% 0 0); opacity: 1; }
}

/* Split Reveal */
@keyframes eiaEntrSplitTop {
  from { clip-path: inset(50% 0 50% 0); opacity: 1; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ============================================================
   ✨ PARTICLE EFFECTS
   ============================================================ */

.eia-particles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 8;
}

.eia-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: eiaParticleFloat 1.5s ease-out forwards;
}

@keyframes eiaParticleFloat {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px, 0px), var(--py, -50px)) scale(0.2); }
}

/* ============================================================
   📱 RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .eia-main-image {
    transition-duration: 0.35s;
  }
}

@media (max-width: 768px) {
  /* Reduce transform intensity on tablets */
  .eia-hover-zoom-in:hover .eia-main-image   { transform: scale(1.06); }
  .eia-hover-slide-up:hover .eia-main-image  { transform: translateY(-5px) scale(1.03); }
  .eia-hover-slide-down:hover .eia-main-image { transform: translateY(5px) scale(1.03); }
  .eia-hover-lift:hover { transform: translateY(-5px); }
  .eia-caption { font-size: 14px; }
}

@media (max-width: 480px) {
  /* Simplified effects on mobile */
  .eia-hover-zoom-in:hover .eia-main-image  { transform: scale(1.04); }
  .eia-hover-zoom-rotate:hover .eia-main-image { transform: scale(1.06) rotate(1.5deg); }
  .eia-hover-lift:hover { transform: translateY(-4px); }
  .eia-caption { font-size: 13px; padding: 0 12px; }
  /* Disable heavy continuous animations on mobile */
  .eia-continuous-glitch-loop { animation: none; }
  .eia-continuous-color-shift { animation-duration: 6s; }
}

/* Touch Device: disable hover transforms that feel broken */
@media (hover: none) {
  .eia-hover-flip-h:hover .eia-main-image { transform: none; }
  .eia-hover-flip-v:hover .eia-main-image { transform: none; }
  .eia-overlay { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .eia-caption { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   🎨 ELEMENTOR EDITOR VISIBILITY
   ============================================================ */
.elementor-editor-active [data-entrance]:not(.eia-animated) {
  opacity: 1;
}