/* Ensure arg-fade animations work with Elementor containers */
.elementor-container .arg-fade-up,
.elementor-container .arg-fade-down,
.elementor-container .arg-fade-left,
.elementor-container .arg-fade-right {
  opacity: 1; /* Default visible in editor */
  transform: none; /* No transform in editor */
}

/* Editor-specific overrides */
.elementor-editor-active .arg-fade-up,
.elementor-editor-active .arg-fade-down,
.elementor-editor-active .arg-fade-left,
.elementor-editor-active .arg-fade-right {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Preview mode in Elementor */
.elementor-edit-mode .arg-fade-up:not(.arg-fade-active),
.elementor-edit-mode .arg-fade-down:not(.arg-fade-active),
.elementor-edit-mode .arg-fade-left:not(.arg-fade-active),
.elementor-edit-mode .arg-fade-right:not(.arg-fade-active) {
  opacity: 1 !important;
  transform: none !important;
}

/* Frontend only: Apply animations normally */
:not(.elementor-editor-active) .arg-fade-up,
:not(.elementor-editor-active) .arg-fade-down,
:not(.elementor-editor-active) .arg-fade-left,
:not(.elementor-editor-active) .arg-fade-right {
  opacity: 0;
  transform-origin: center;
  will-change: opacity, transform;
}

:not(.elementor-editor-active) .arg-fade-up:not(.arg-fade-active) { 
  opacity: 0; 
  transform: translateY(var(--arg-fade-distance)); 
}
:not(.elementor-editor-active) .arg-fade-down:not(.arg-fade-active) { 
  opacity: 0; 
  transform: translateY(calc(-1 * var(--arg-fade-distance))); 
}
:not(.elementor-editor-active) .arg-fade-left:not(.arg-fade-active) { 
  opacity: 0; 
  transform: translateX(var(--arg-fade-distance)); 
}
:not(.elementor-editor-active) .arg-fade-right:not(.arg-fade-active) { 
  opacity: 0; 
  transform: translateX(calc(-1 * var(--arg-fade-distance))); 
}

/* Rest of the animations remain the same for frontend */
:not(.elementor-editor-active) .arg-fade-up.arg-fade-active { 
  animation: arg-fadeUp var(--arg-fade-duration) var(--arg-fade-easing) forwards; 
}
:not(.elementor-editor-active) .arg-fade-down.arg-fade-active { 
  animation: arg-fadeDown var(--arg-fade-duration) var(--arg-fade-easing) forwards; 
}
:not(.elementor-editor-active) .arg-fade-left.arg-fade-active { 
  animation: arg-fadeLeft var(--arg-fade-duration) var(--arg-fade-easing) forwards; 
}
:not(.elementor-editor-active) .arg-fade-right.arg-fade-active { 
  animation: arg-fadeRight var(--arg-fade-duration) var(--arg-fade-easing) forwards; 
}

/* Include the full CSS from before for keyframes, variations, etc. */
:root {
  --arg-fade-distance: 20px;
  --arg-fade-duration: 0.6s;
  --arg-fade-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --arg-fade-delay: 0.1s;
}

@keyframes arg-fadeUp {
  0% { opacity: 0; transform: translateY(var(--arg-fade-distance)); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes arg-fadeDown {
  0% { opacity: 0; transform: translateY(calc(-1 * var(--arg-fade-distance))); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes arg-fadeLeft {
  0% { opacity: 0; transform: translateX(var(--arg-fade-distance)); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes arg-fadeRight {
  0% { opacity: 0; transform: translateX(calc(-1 * var(--arg-fade-distance))); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Variation: Fast animation (0.3s) */
.arg-fade-fast {
  --arg-fade-duration: 0.3s;
}

/* Variation: Slow animation (0.9s) */
.arg-fade-slow {
  --arg-fade-duration: 0.9s;
}

/* Staggered delays (apply only on frontend) */
:not(.elementor-editor-active) .arg-fade-up:nth-child(1), 
:not(.elementor-editor-active) .arg-fade-down:nth-child(1), 
:not(.elementor-editor-active) .arg-fade-left:nth-child(1), 
:not(.elementor-editor-active) .arg-fade-right:nth-child(1) { 
  animation-delay: calc(var(--arg-fade-delay) * 1); 
}
:not(.elementor-editor-active) .arg-fade-up:nth-child(2), 
:not(.elementor-editor-active) .arg-fade-down:nth-child(2), 
:not(.elementor-editor-active) .arg-fade-left:nth-child(2), 
:not(.elementor-editor-active) .arg-fade-right:nth-child(2) { 
  animation-delay: calc(var(--arg-fade-delay) * 2); 
}
:not(.elementor-editor-active) .arg-fade-up:nth-child(3), 
:not(.elementor-editor-active) .arg-fade-down:nth-child(3), 
:not(.elementor-editor-active) .arg-fade-left:nth-child(3), 
:not(.elementor-editor-active) .arg-fade-right:nth-child(3) { 
  animation-delay: calc(var(--arg-fade-delay) * 3); 
}
:not(.elementor-editor-active) .arg-fade-up:nth-child(4), 
:not(.elementor-editor-active) .arg-fade-down:nth-child(4), 
:not(.elementor-editor-active) .arg-fade-left:nth-child(4), 
:not(.elementor-editor-active) .arg-fade-right:nth-child(4) { 
  animation-delay: calc(var(--arg-fade-delay) * 4); 
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .arg-fade-up,
  .arg-fade-down,
  .arg-fade-left,
  .arg-fade-right {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}