/* ========================================
   SIMPLE FADE + MOVE ANIMATIONS (UPDATED)
   For Elementor & Bricks Builder
======================================== */

/* --- Keyframes for each direction --- */
@keyframes slideInLeft {
  from { transform: translateX(-40px); }
  to   { transform: translateX(0); }
}
.is-animated.animate-slide-in-left {
  animation: slideInLeft 0.8s ease-out forwards;
}
.animate-slide-in-left {
  transform: translateX(-40px);
}



@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeCenter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Default hidden state (before animating) --- */
.animate-fade-up,
.animate-fade-left,
.animate-fade-right,
.animate-fade-center{
  opacity: 0;
}

/* --- Editor visibility overrides ---
   Shows all elements in Elementor or Bricks builder editors, no animation.
*/
body.elementor-editor-active .animate-fade-up,
body.elementor-editor-active .animate-fade-left,
body.elementor-editor-active .animate-fade-right,
body.elementor-editor-active .animate-fade-center,
body.bricks-builder-preview .animate-fade-up,
body.bricks-builder-preview .animate-fade-left,
body.bricks-builder-preview .animate-fade-right,
body.bricks-builder-preview .animate-fade-center {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}

/* --- Animate on scroll trigger --- */
.is-animated.animate-fade-up     { animation: fadeUp 0.8s ease-out forwards; }
.is-animated.animate-fade-left   { animation: fadeLeft 0.8s ease-out forwards; }
.is-animated.animate-fade-right  { animation: fadeRight 0.8s ease-out forwards; }
.is-animated.animate-fade-center { animation: fadeCenter 0.8s ease-out forwards; }

/* Easing Utility Classes */
.ease-linear    { animation-timing-function: linear    !important; }
.ease-ease      { animation-timing-function: ease      !important; }
.ease-in        { animation-timing-function: ease-in   !important; }
.ease-out       { animation-timing-function: ease-out  !important; }
.ease-in-out    { animation-timing-function: ease-in-out !important; }



/* ==========================================================
   ACCESSIBILITY: Respect users who prefer reduced motion
   ========================================================== */
/* @media (prefers-reduced-motion: reduce) {
  .is-animated {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
} */


@media (max-width: 767px) {
  .is-animated.animate-fade-up,
  .is-animated.animate-fade-left,
  .is-animated.animate-fade-right {
    animation: fadeCenter 0.8s ease-out forwards;
  }
}