/* =========================================
   Elementor-like Animation System
========================================= */

.animation {
  --anim-x: 0px;
  --anim-y: 0px;
  --anim-scale: 1;
  --anim-rotate: 0deg;
  --anim-blur: 0px;

  --anim-from-opacity: 0;
  --anim-to-opacity: 1;

  /* Elementor-like default */
  --anim-duration: 1.25s;
  --anim-delay: 0s;
  --anim-ease: ease;

  opacity: var(--anim-from-opacity);

  animation-duration: var(--anim-duration);
  animation-delay: var(--anim-delay);
  animation-timing-function: var(--anim-ease);
  animation-fill-mode: both;
  animation-name: none;

  will-change: opacity, transform, filter;
}

.animation.is-visible {
  animation-name: animReveal;
}

@keyframes animReveal {
  from {
    opacity: var(--anim-from-opacity);
    transform: translate3d(var(--anim-x), var(--anim-y), 0)
      scale(var(--anim-scale)) rotate(var(--anim-rotate));
    filter: blur(var(--anim-blur));
  }

  to {
    opacity: var(--anim-to-opacity);
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

/* =========================================
   Basic
========================================= */

.fade-in {
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.fade-out {
  --anim-from-opacity: 1;
  --anim-to-opacity: 0;
  opacity: 1;
}

.fade-out.is-visible {
  animation-name: animFadeOut;
}

@keyframes animFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* =========================================
   Elementor-like Fade Direction
========================================= */

/*
  Elementor fadeInUp:
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
*/

.fade-in-up {
  --anim-y: 100%;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.fade-in-down {
  --anim-y: -100%;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.fade-in-left {
  --anim-x: -100%;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.fade-in-right {
  --anim-x: 100%;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

/* =========================================
   Zoom
========================================= */

.zoom-in {
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.zoom-in.is-visible {
  animation-name: zoomIn;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.zoom-out {
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.zoom-out.is-visible {
  animation-name: zoomOut;
}

@keyframes zoomOut {
  from {
    opacity: 0;
    transform: scale3d(1.3, 1.3, 1.3);
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.zoom-in-soft {
  --anim-scale: 0.85;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.zoom-in-strong {
  --anim-scale: 0.3;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.zoom-out-soft {
  --anim-scale: 1.1;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.zoom-out-strong {
  --anim-scale: 1.45;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

/* =========================================
   Blur
========================================= */

.blur-in {
  --anim-blur: 8px;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.blur-in-soft {
  --anim-blur: 4px;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.blur-in-strong {
  --anim-blur: 14px;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

/* =========================================
   Rotate
========================================= */

.rotate-in-left {
  --anim-x: -100%;
  --anim-rotate: -8deg;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.rotate-in-right {
  --anim-x: 100%;
  --anim-rotate: 8deg;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.rotate-in-up {
  --anim-y: 100%;
  --anim-rotate: 6deg;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

/* =========================================
   Combined
========================================= */

.fade-in-up-zoom {
  --anim-y: 100%;
  --anim-scale: 0.85;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.fade-in-down-zoom {
  --anim-y: -100%;
  --anim-scale: 0.85;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.fade-in-left-zoom {
  --anim-x: -100%;
  --anim-scale: 0.85;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.fade-in-right-zoom {
  --anim-x: 100%;
  --anim-scale: 0.85;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.fade-in-up-blur {
  --anim-y: 100%;
  --anim-blur: 8px;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.fade-in-left-blur {
  --anim-x: -100%;
  --anim-blur: 8px;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.zoom-in-blur {
  --anim-scale: 0.82;
  --anim-blur: 10px;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.zoom-out-blur {
  --anim-scale: 1.16;
  --anim-blur: 10px;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

/* =========================================
   Screen Based
========================================= */

.from-left-screen {
  --anim-x: -100vw;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.from-right-screen {
  --anim-x: 100vw;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.from-top-screen {
  --anim-y: -100vh;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

.from-bottom-screen {
  --anim-y: 100vh;
  --anim-from-opacity: 0;
  --anim-to-opacity: 1;
}

/* =========================================
   Distance Utilities
   این‌ها برای وقتی هستند که نمی‌خوای 100% المنتوری باشد
========================================= */

.from-left-20 {
  --anim-x: -2rem;
}

.from-left-40 {
  --anim-x: -4rem;
}

.from-left-60 {
  --anim-x: -6rem;
}

.from-left-80 {
  --anim-x: -8rem;
}

.from-left-100 {
  --anim-x: -10rem;
}

.from-left-140 {
  --anim-x: -14rem;
}

.from-right-20 {
  --anim-x: 2rem;
}

.from-right-40 {
  --anim-x: 4rem;
}

.from-right-60 {
  --anim-x: 6rem;
}

.from-right-80 {
  --anim-x: 8rem;
}

.from-right-100 {
  --anim-x: 10rem;
}

.from-right-140 {
  --anim-x: 14rem;
}

.from-top-20 {
  --anim-y: -2rem;
}

.from-top-40 {
  --anim-y: -4rem;
}

.from-top-60 {
  --anim-y: -6rem;
}

.from-top-80 {
  --anim-y: -8rem;
}

.from-top-100 {
  --anim-y: -10rem;
}

.from-top-140 {
  --anim-y: -14rem;
}

.from-bottom-20 {
  --anim-y: 2rem;
}

.from-bottom-40 {
  --anim-y: 4rem;
}

.from-bottom-60 {
  --anim-y: 6rem;
}

.from-bottom-80 {
  --anim-y: 8rem;
}

.from-bottom-100 {
  --anim-y: 10rem;
}

.from-bottom-140 {
  --anim-y: 14rem;
}

/* =========================================
   Elementor Duration Utilities
========================================= */

.duration-fast {
  --anim-duration: 0.75s;
}

.duration-normal {
  --anim-duration: 1.25s;
}

.duration-slow {
  --anim-duration: 2s;
}

/* =========================================
   Duration Utilities
========================================= */

.duration-650 {
  --anim-duration: 0.65s;
}

.duration-750 {
  --anim-duration: 0.75s;
}

.duration-900 {
  --anim-duration: 0.9s;
}

.duration-1000 {
  --anim-duration: 1s;
}

.duration-1250 {
  --anim-duration: 1.25s;
}

.duration-1500 {
  --anim-duration: 1.5s;
}

.duration-1600 {
  --anim-duration: 1.6s;
}

.duration-1800 {
  --anim-duration: 1.8s;
}

.duration-2000 {
  --anim-duration: 2s;
}

.duration-2500 {
  --anim-duration: 2.5s;
}

/* =========================================
   Delay Utilities
========================================= */

.delay-0 {
  --anim-delay: 0s;
}

.delay-100 {
  --anim-delay: 0.1s;
}

.delay-150 {
  --anim-delay: 0.15s;
}

.delay-200 {
  --anim-delay: 0.2s;
}

.delay-250 {
  --anim-delay: 0.25s;
}

.delay-300 {
  --anim-delay: 0.3s;
}

.delay-350 {
  --anim-delay: 0.35s;
}

.delay-400 {
  --anim-delay: 0.4s;
}

.delay-450 {
  --anim-delay: 0.45s;
}

.delay-500 {
  --anim-delay: 0.5s;
}

.delay-550 {
  --anim-delay: 0.55s;
}

.delay-600 {
  --anim-delay: 0.6s;
}

.delay-650 {
  --anim-delay: 0.65s;
}

.delay-700 {
  --anim-delay: 0.7s;
}

.delay-750 {
  --anim-delay: 0.75s;
}

.delay-800 {
  --anim-delay: 0.8s;
}

.delay-850 {
  --anim-delay: 0.85s;
}

.delay-900 {
  --anim-delay: 0.9s;
}

.delay-950 {
  --anim-delay: 0.95s;
}

.delay-1000 {
  --anim-delay: 1s;
}

.delay-1050 {
  --anim-delay: 1.05s;
}

/* =========================================
   Easing Utilities
========================================= */

.ease {
  --anim-ease: ease;
}

.ease-in {
  --anim-ease: ease-in;
}

.ease-out {
  --anim-ease: ease-out;
}

.ease-in-out {
  --anim-ease: ease-in-out;
}

.ease-smooth {
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================
   Parent Clip
========================================= */

.anim-clip {
  overflow: hidden;
}

/* =========================================
   Reduced Motion
========================================= */

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