//////////////////////////////
// THEME / MIXINS / ANIMATIONS
//////////////////////////////


@use "../variables/" as var;
@use "../functions/" as func;


// Scroll FX
@mixin scroll-fx($imp:null) {
  --not: calc(1 - var(--bit));
  transition: all 0.5s var.$transition-timing-fn-scroll-fx-stagger;
}


// Fade in on scroll
@mixin fade-in-on-scroll($imp:null) {
  opacity: var(--bit);
}


// Move left on scroll
@mixin move-left-on-scroll($imp:null) {
  transform: translateX(calc(var(--not) * var.$animation-transform-move-left));
}


// Move right on scroll
@mixin move-right-on-scroll($imp:null) {
  transform: translateX(calc(var(--not) * var.$animation-transform-move-right));
}


// Move up on scroll
@mixin move-up-on-scroll($imp:null) {
  transform: translateY(calc(var(--not) * var.$animation-transform-move-up));
}


// Trigger scroll-based animation
@mixin scroll-trigger($imp:null) {
  animation: flipthebit linear both $imp;
  animation-range: var.$animation-range-start-scroll-trigger var.$animation-range-end-scroll-trigger $imp;
  animation-timeline: view() $imp;
}


// Stagger scroll trigger
@mixin scroll-trigger-stagger($imp:null) {
  transition-delay: calc(var(--scroll-fx-count) * 100ms) $imp;
}


// Parallax
@mixin parallax($imp:null) {
  animation: parallax linear;
  animation-timeline: view();
}


@mixin parallax-1($imp:null) { --parallax-offset: #{var.$transform-translate-y-parallax-1}; }
@mixin parallax-2($imp:null) { --parallax-offset: #{var.$transform-translate-y-parallax-2}; }
@mixin parallax-3($imp:null) { --parallax-offset: #{var.$transform-translate-y-parallax-3}; }


@mixin bg-parallax($imp:null) {
  animation: bg-parallax linear;
  animation-timeline: view();
}
