/* LEON Position Controls */
.leon-position-enabled-yes {
  --leon-translate-x: 0px;
  --leon-translate-y: 0px;
  --leon-scale: 1;
  transform: translate3d(var(--leon-translate-x), var(--leon-translate-y), 0) scale(var(--leon-scale));
}

/* Elementor editor helper */
.elementor-editor-active .leon-position-enabled-yes {
  outline-offset: 0;
}


/* -------------------------------------------------------
 * LEON Native Elementor Entrance Animations
 * These are added to Elementor > Advanced > Motion Effects > Entrance Animation.
 * Elementor handles waypoint, delay, duration and invisible state.
 * ------------------------------------------------------- */

@keyframes leonFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.leonFadeUp {
  animation-name: leonFadeUp;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes leonBlurUp {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

.leonBlurUp {
  animation-name: leonBlurUp;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes leonSoftScale {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 18px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

.leonSoftScale {
  animation-name: leonSoftScale;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes leonSlideUp {
  from {
    opacity: 0;
    transform: translate3d(0, 54px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.leonSlideUp {
  animation-name: leonSlideUp;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes leonMaskReveal {
  from {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

.leonMaskReveal {
  animation-name: leonMaskReveal;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path, transform;
}

@keyframes leonFloatIn {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 36px, 0) scale(0.985);
  }
  65% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -4px, 0) scale(1);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

.leonFloatIn {
  animation-name: leonFloatIn;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Keep Elementor invisible system intact, but make sure LEON animations can safely end visible. */
.animated.leonGlassFade,
.animated.leonGlassLift,
.animated.leonFadeUp,
.animated.leonBlurUp,
.animated.leonSoftScale,
.animated.leonSlideUp,
.animated.leonMaskReveal,
.animated.leonFloatIn {
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .animated.leonFadeUp,
  .animated.leonBlurUp,
  .animated.leonSoftScale,
  .animated.leonSlideUp,
  .animated.leonMaskReveal,
  .animated.leonFloatIn {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
    transform: none !important;
  }
}


/* -------------------------------------------------------
 * LEON Glass Safe Animations
 * Designed for elements using backdrop-filter.
 * These avoid filter/clip-path animation and keep transform minimal.
 * ------------------------------------------------------- */

@keyframes leonGlassFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.leonGlassFade {
  animation-name: leonGlassFade;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes leonGlassLift {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.leonGlassLift {
  animation-name: leonGlassLift;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.animated.leonGlassFade,
.animated.leonGlassLift {
  animation-fill-mode: both;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .animated.leonGlassFade,
  .animated.leonGlassLift {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}