/**
 * Scroll Animate CSS
 * YupDesign Contao Scroll-Animate Bundle
 * Compiled from scroll-animate.scss
 */

/* Wrapper Element - no special layout properties to avoid affecting child layout */
.scroll-animate-wrapper {
}

[data-scroll-animate] {
  --sa-delay: 0ms;
  --sa-duration: 600ms;
  --sa-easing: ease-out;
  --sa-translate-x: 0;
  --sa-translate-y: 0;
  --sa-scale: 1;
  --sa-rotate: 0deg;
  --sa-opacity: 1;
}

[data-scroll-animate="trigger"] {
  opacity: 0;
  transform: translateX(var(--sa-translate-x)) translateY(var(--sa-translate-y)) scale(var(--sa-scale)) rotate(var(--sa-rotate));
  transition: opacity var(--sa-duration) var(--sa-easing) var(--sa-delay), transform var(--sa-duration) var(--sa-easing) var(--sa-delay);
  will-change: opacity, transform;
}
[data-scroll-animate="trigger"][data-animate-type="fade"] {
  --sa-opacity: 0;
}
[data-scroll-animate="trigger"][data-animate-type="slide-up"] {
  --sa-translate-y: 30px;
}
[data-scroll-animate="trigger"][data-animate-type="slide-down"] {
  --sa-translate-y: -30px;
}
[data-scroll-animate="trigger"][data-animate-type="slide-left"] {
  --sa-translate-x: 30px;
}
[data-scroll-animate="trigger"][data-animate-type="slide-right"] {
  --sa-translate-x: -30px;
}
[data-scroll-animate="trigger"][data-animate-type="scale-up"] {
  --sa-scale: 0.9;
}
[data-scroll-animate="trigger"][data-animate-type="scale-down"] {
  --sa-scale: 1.1;
}
[data-scroll-animate="trigger"][data-animate-type="rotate"] {
  --sa-rotate: -5deg;
}
[data-scroll-animate="trigger"].is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1) rotate(0deg);
}

@supports (animation-timeline: view()) {
  [data-scroll-animate="scroll-sync"] {
    animation-timeline: view();
    animation-fill-mode: both;
    animation-timing-function: var(--sa-easing);
    animation-range: var(--sa-range-start, entry 0%) var(--sa-range-end, cover 50%);
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="fade"] {
    animation-name: sa-scroll-fade;
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="slide-up"] {
    animation-name: sa-scroll-slide-up;
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="slide-down"] {
    animation-name: sa-scroll-slide-down;
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="slide-left"] {
    animation-name: sa-scroll-slide-left;
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="slide-right"] {
    animation-name: sa-scroll-slide-right;
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="scale-up"] {
    animation-name: sa-scroll-scale-up;
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="scale-down"] {
    animation-name: sa-scroll-scale-down;
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="rotate"] {
    animation-name: sa-scroll-rotate;
  }

  @keyframes sa-scroll-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes sa-scroll-slide-up {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes sa-scroll-slide-down {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes sa-scroll-slide-left {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes sa-scroll-slide-right {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes sa-scroll-scale-up {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes sa-scroll-scale-down {
    from {
      opacity: 0;
      transform: scale(1.1);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes sa-scroll-rotate {
    from {
      opacity: 0;
      transform: rotate(-5deg);
    }
    to {
      opacity: 1;
      transform: rotate(0deg);
    }
  }
}

@supports not (animation-timeline: view()) {
  [data-scroll-animate="scroll-sync"] {
    --scroll-progress: 0;
    transition: none;
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="fade"] {
    opacity: var(--scroll-progress);
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="slide-up"] {
    opacity: var(--scroll-progress);
    transform: translateY(calc(30px * (1 - var(--scroll-progress))));
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="slide-down"] {
    opacity: var(--scroll-progress);
    transform: translateY(calc(-30px * (1 - var(--scroll-progress))));
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="slide-left"] {
    opacity: var(--scroll-progress);
    transform: translateX(calc(30px * (1 - var(--scroll-progress))));
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="slide-right"] {
    opacity: var(--scroll-progress);
    transform: translateX(calc(-30px * (1 - var(--scroll-progress))));
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="scale-up"] {
    opacity: var(--scroll-progress);
    transform: scale(calc(0.9 + 0.1 * var(--scroll-progress)));
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="scale-down"] {
    opacity: var(--scroll-progress);
    transform: scale(calc(1.1 - 0.1 * var(--scroll-progress)));
  }
  [data-scroll-animate="scroll-sync"][data-animate-type="rotate"] {
    opacity: var(--scroll-progress);
    transform: rotate(calc(-5deg * (1 - var(--scroll-progress))));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-animate] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  [data-scroll-animate][data-scroll-animate="trigger"] {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-scroll-animate][data-scroll-animate="scroll-sync"] {
    opacity: 1 !important;
    transform: none !important;
    --scroll-progress: 1 !important;
  }
}

/* User override via toggle button (data attribute on html element) */
[data-reduced-motion="true"] [data-scroll-animate] {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}
[data-reduced-motion="true"] [data-scroll-animate][data-scroll-animate="trigger"] {
  opacity: 1 !important;
  transform: none !important;
}
[data-reduced-motion="true"] [data-scroll-animate][data-scroll-animate="scroll-sync"] {
  opacity: 1 !important;
  transform: none !important;
  --scroll-progress: 1 !important;
}