@use '../../abstracts/mixins/animations/mixin' as *;
@use '../../abstracts/variables/animation/variables' as *;
@use '../../abstracts/mixins/animations/poke-mixin' as *;
@use '../../abstracts/mixins/animations/reveal-mixin' as *;
@use '../../abstracts/mixins/animations/rotate-mixin' as *;
@use '../../abstracts/mixins/animations/spin-mixin' as *;
@use '../../abstracts/mixins/animations/snap-mixin' as *;
@use '../../abstracts/mixins/animations/flip-mixin' as *;
@use '../../abstracts/mixins/animations/fade-mixin' as *;
@use '../../abstracts/mixins/animations/bounce-mixin' as *;
@use '../../abstracts/mixins/animations/twist-mixin' as *;
@use '../../abstracts/mixins/animations/pop-mixin' as *;
@use '../../abstracts/mixins/animations/form-mixin' as *;
@use '../../abstracts/mixins/animations/clip-path' as *;

.animate {
  -webkit-animation-duration: 750ms;
  -webkit-animation-fill-mode: both;
  animation-duration: 750ms;
  animation-fill-mode: both;
}

// single animations
.spin {
  @include animationname(spin);
  @include backfacevisibility(hidden);

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
.pulse {
  @include animationname(pulse);
  @include transformorigin(center);
}

@keyframes pulse {
  0% {
    @include animationtimingfunction(linear);
    @include transform(scale3d(1, 1, 1));
  }
  50% {
    @include transform(scale3d(0.8, 0.8, 0.8));
  }
  100% {
    @include animationtimingfunction($cubic);
    @include transform(scale3d(1, 1, 1));
  }
}

.flash {
  @include animationname(flash);
  @include cubic($cubic);
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.poke-top {
  @include animationname(pokeTop);
  @include backfacevisibility(hidden);
  @include pokeKeyframe(pokeTop, 0, translateY(25px), rotate(2deg));
}
.poke-right {
  @include animationname(pokeRight);
  @include backfacevisibility(hidden);
  @include pokeKeyframe(pokeRight, 0, translateX(-25px), rotate(-2deg));
}
.poke-bottom {
  @include animationname(pokeBottom);
  @include backfacevisibility(hidden);
  @include pokeKeyframe(pokeBottom, 0, translateY(-25px), rotate(-2deg));
}
.poke-left {
  @include animationname(pokeLeft);
  @include backfacevisibility(hidden);
  @include pokeKeyframe(pokeLeft, 0, translateX(25px), rotate(2deg));
}

.jolt {
  @include animationname(jolt);
  @include cubic($cubic);
}
@keyframes jolt {
  10% {
    @include transform(translateX(-5px));
  }
  20% {
    @include transform(translateX(10px));
  }
  30% {
    @include transform(translateX(-5px));
  }
  40% {
    @include transform(translateX(10px));
  }
  50% {
    @include transform(translateX(-5px));
  }
  60% {
    @include transform(translateX(10px));
  }
  70% {
    @include transform(translateX(-5px));
  }
  80% {
    @include transform(translateX(10px));
  }
  90% {
    @include transform(translateX(-5px));
  }
}

.jump {
  @include animationname(jump);
}

@keyframes jump {
  0% {
    @include cubic(cubic-bezier(0.2, 0.9, 0.3, 1.3));
    @include transform(translate3d(0, 5px, 0));
  }
  25% {
    @include cubic(cubic-bezier(0.4, 0, 1, 1));
    @include transform(translate3d(0, -50px, 0));
  }
  35% {
    @include cubic(cubic-bezier(0, 0, 0.6, 1));
    @include transform(translate3d(0, 0, 0));
  }
  50% {
    @include cubic(cubic-bezier(0.4, 0, 1, 1));
    @include transform(translate3d(0, -20px, 0));
  }
  70% {
    @include cubic(cubic-bezier(0, 0, 0.6, 1));
    @include transform(translate3d(0, 0, 0));
  }
  85% {
    @include cubic(cubic-bezier(0.4, 0, 1, 1));
    @include transform(translate3d(0, -10px, 0));
  }
  100% {
    @include cubic(cubic-bezier(0.4, 0, 0.6, 1));
    @include transform(translate3d(0, 0, 0));
  }
}

// REVEAL
.reveal-up {
  @include animationname(revealUp);
  @include backfacevisibility(hidden);
  @include revealMixin(revealUp, center bottom, scale3d(0, 0, 0), scale3d(1, 0, 1), scale3d(1, 1, 1));
}
.reveal-down {
  @include animationname(revealDown);
  @include backfacevisibility(hidden);
  @include revealMixin(revealDown, center top, scale3d(0, 0, 0), scale3d(1, 0, 1), scale3d(1, 1, 1));
}
.reveal-left {
  @include animationname(revealLeft);
  @include backfacevisibility(hidden);
  @include revealMixin(revealLeft, center left, scale3d(0, 1, 1), scale3d(0, 1, 1), scale3d(1, 1, 1));
}
.reveal-right {
  @include animationname(revealRight);
  @include backfacevisibility(hidden);
  @include revealMixin(revealRight, center right, scale3d(0, 1, 1), scale3d(0, 1, 1), scale3d(1, 1, 1));
}

// Rotate
.rotate-in-left {
  @include animationname(rotateInLeft);
  @include cubic($cubic);
  @include backfacevisibility(hidden);
  @include rotateMixin(
    rotateInLeft,
    scale3d(0.75, 0.75, 0.75) rotate(-45deg),
    scale3d(1.25, 1.25, 1.25) rotate(15deg),
    scale3d(0.75, 0.75, 0.75) rotate(-15deg),
    scale3d(1, 1, 1) rotate(0deg)
  );
}
.rotate-out-left {
  @include animationname(rotateOutLeft);
  @include cubic($cubic);
  @include backfacevisibility(hidden);
  @include rotateMixin(
    rotateOutLeft,
    scale3d(1, 1, 1) rotate(0deg),
    scale3d(0.75, 0.75, 0.75) rotate(-15deg),
    scale3d(1.25, 1.25, 1.25) rotate(15deg),
    scale3d(0.75, 0.75, 0.75) rotate(-45deg),
    false
  );
}
.rotate-in-right {
  @include animationname(rotateInRight);
  @include cubic($cubic);
  @include backfacevisibility(hidden);
  @include rotateMixin(
    rotateInRight,
    scale3d(0.75, 0.75, 0.75) rotate(45deg),
    scale3d(1.25, 1.25, 1.25) rotate(-15deg),
    scale3d(0.75, 0.75, 0.75) rotate(15deg),
    scale3d(1, 1, 1) rotate(0deg)
  );
}
.rotate-out-right {
  @include animationname(rotateOutRight);
  @include cubic($cubic);
  @include backfacevisibility(hidden);
  @include rotateMixin(
    rotateOutRight,
    scale3d(1, 1, 1) rotate(0deg),
    scale3d(0.75, 0.75, 0.75) rotate(15deg),
    scale3d(1.25, 1.25, 1.25) rotate(-15deg),
    scale3d(0.75, 0.75, 0.75) rotate(45deg),
    false
  );
}

// spin
.spin-in-left {
  @include animationname(spinInLeft);
  @include backfacevisibility(hidden);
  @include spinMixin(spinInLeft, translateX(-100px) rotate(540deg), translateX(45px) rotate(45deg), translateX(0) rotate(0deg));
}
.spin-in-right {
  @include animationname(spinInRight);
  @include backfacevisibility(hidden);
  @include spinMixin(spinInRight, translateX(100px) rotate(-540deg), translateX(45px) rotate(-45deg), translateX(0) rotate(0deg));
}
.spin-in-top {
  @include animationname(spinInTop);
  @include backfacevisibility(hidden);
  @include spinMixin(spinInTop, translateY(-100px) rotate(-540deg), translateY(45px) rotate(-45deg), translateY(0) rotate(0deg));
}
.spin-in-bottom {
  @include animationname(spinInBottom);
  @include backfacevisibility(hidden);
  @include spinMixin(
    spinInBottom,
    translateY(100px) rotate(-540deg),
    translateY(45px) rotate(-45deg),
    translateY(0) rotate(0deg)
  );
}

.spin-out-left {
  @include animationname(spinOutLeft);
  @include backfacevisibility(hidden);
  @include spinMixin(
    spinOutLeft,
    translateX(0) rotate(0deg),
    translateX(45px) rotate(45deg),
    translateX(-100px) rotate(540deg),
    false
  );
}
.spin-out-right {
  @include animationname(spinOutRight);
  @include backfacevisibility(hidden);
  @include spinMixin(
    spinOutRight,
    translateX(0) rotate(0deg),
    translateX(45px) rotate(-45deg),
    translateX(100px) rotate(-540deg),
    false
  );
}
.spin-out-top {
  @include animationname(spinOutTop);
  @include backfacevisibility(hidden);
  @include spinMixin(
    spinOutTop,
    translateY(0) rotate(0deg),
    translateY(45px) rotate(-45deg),
    translateY(-100px) rotate(-540deg),
    false
  );
}
.spin-out-bottom {
  @include animationname(spinOutBottom);
  @include backfacevisibility(hidden);
  @include spinMixin(
    spinOutBottom,
    translateY(0) rotate(0deg),
    translateY(45px) rotate(-45deg),
    translateY(100px) rotate(-540deg),
    false
  );
}

// snap
.snap-in {
  @include animationname(snapIn);
  @include backfacevisibility(hidden);
  @include snapMixin(
    snapIn,
    scale3d(0, 0, 0),
    ease-in,
    scale3d(1.1, 1.1, 1.1),
    cubic-bezier(0.45, 0, 0.65, 1),
    scale3d(1, 1, 1),
    cubic-bezier(0.45, 0, 0.65, 1),
    scale3d(1.05, 1.05, 1.05),
    ease-out,
    scale3d(1, 1, 1)
  );
}
.snap-in-left {
  @include animationname(snapInLeft);
  @include backfacevisibility(hidden);
  @include snapMixin(
    snapInLeft,
    translate3d(-300px, 0, 0) scale3d(0.25, 0.25, 0.25),
    ease-in,
    translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1, 1, 1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1.05, 1.05, 1.05),
    ease-out,
    scale3d(1, 1, 1)
  );
}
.snap-in-right {
  @include animationname(snapInRight);
  @include backfacevisibility(hidden);
  @include snapMixin(
    snapInRight,
    translate3d(300px, 0, 0) scale3d(0.25, 0.25, 0.25),
    ease-in,
    translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1, 1, 1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1.05, 1.05, 1.05),
    ease-out,
    scale3d(1, 1, 1)
  );
}
.snap-in-top {
  @include animationname(snapInTop);
  @include backfacevisibility(hidden);
  @include snapMixin(
    snapInTop,
    translate3d(0, -300px, 0) scale3d(0.25, 0.25, 0.25),
    ease-in,
    translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1, 1, 1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1.05, 1.05, 1.05),
    ease-out,
    scale3d(1, 1, 1)
  );
}
.snap-in-bottom {
  @include animationname(snapInBottom);
  @include backfacevisibility(hidden);
  @include snapMixin(
    snapInBottom,
    translate3d(0, 300px, 0) scale3d(0.25, 0.25, 0.25),
    ease-in,
    translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1, 1, 1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1.05, 1.05, 1.05),
    ease-out,
    scale3d(1, 1, 1)
  );
}
.snap-out {
  @include animationname(snapOut);
  @include backfacevisibility(hidden);
  @include snapMixin(
    snapOut,
    scale3d(1, 1, 1),
    ease-out,
    scale3d(1.05, 1.05, 1.05),
    scale3d(1, 1, 1),
    cubic-bezier(0.25, 0, 0.85, 1),
    translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1),
    cubic-bezier(0.25, 0, 0.85, 1),
    ease-in,
    scale3d(0.25, 0.25, 0.25),
    false
  );
}
.snap-out-left {
  @include animationname(snapOutLeft);
  @include backfacevisibility(hidden);
  @include snapMixin(
    snapOutLeft,
    scale3d(1, 1, 1) translate3d(0, 0, 0),
    ease-out,
    scale3d(1.05, 1.05, 1.05) translate3d(0, 0, 0),
    translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1, 1, 1),
    cubic-bezier(0.25, 0, 0.85, 1),
    ease-in,
    scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0),
    false
  );
}
.snap-out-right {
  @include animationname(snapOutRight);
  @include backfacevisibility(hidden);
  @include snapMixin(
    snapOutRight,
    scale3d(1, 1, 1) translate3d(0, 0, 0),
    ease-out,
    scale3d(1.05, 1.05, 1.05) translate3d(0, 0, 0),
    translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1, 1, 1),
    cubic-bezier(0.25, 0, 0.85, 1),
    ease-in,
    scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0),
    false
  );
}
.snap-out-top {
  @include animationname(snapOutTop);
  @include backfacevisibility(hidden);
  @include snapMixin(
    snapOutTop,
    scale3d(1, 1, 1) translate3d(0, 0, 0),
    ease-out,
    scale3d(1.05, 1.05, 1.05) translate3d(0, 0, 0),
    translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1, 1, 1),
    cubic-bezier(0.25, 0, 0.85, 1),
    ease-in,
    scale3d(0.5, 0.5, 0.5) translate3d(0, -300px, 0),
    false
  );
}
.snap-out-bottom {
  @include animationname(snapOutBottom);
  @include backfacevisibility(hidden);
  @include snapMixin(
    snapOutBottom,
    scale3d(1, 1, 1) translate3d(0, 0, 0),
    ease-out,
    scale3d(1.05, 1.05, 1.05) translate3d(0, 0, 0),
    translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1),
    cubic-bezier(0.25, 0, 0.85, 1),
    scale3d(1, 1, 1),
    cubic-bezier(0.25, 0, 0.85, 1),
    ease-in,
    scale3d(0.5, 0.5, 0.5) translate3d(0, 300px, 0),
    false
  );
}

// flip
// $name, $transform1, $cubic1, $transform2, $cubic2, $transform3, $cubic3, $isTrue: true
.flip {
  @include animationname(flip);
  @include flipMixin(
    flip,
    perspective(250px) rotateY(-360deg) scale3d(1, 1, 1),
    ease-in,
    perspective(250px) rotateY(-180deg) scale3d(1.1, 1.1, 1.1),
    ease-out,
    perspective(250px) rotateY(0deg) scale3d(1, 1, 1),
    ease-in-out
  );
}
.flip-in-left {
  @include animationname(flipInLeft);
  @include flipMixin(
    flipInLeft,
    perspective(250px) rotateY(-90deg) scale3d(1.1, 1.1, 1.1),
    ease-in,
    perspective(250px) rotateY(-45deg) scale3d(0.95, 0.95, 0.95),
    ease-out,
    perspective(250px) rotateY(0deg) scale3d(1, 1, 1),
    ease-in-out
  );
}
.flip-in-right {
  @include animationname(flipInRight);
  @include flipMixin(
    flipInRight,
    perspective(250px) rotateY(90deg) scale3d(1.1, 1.1, 1.1),
    ease-in,
    perspective(250px) rotateY(45deg) scale3d(0.95, 0.95, 0.95),
    ease-out,
    perspective(250px) rotateY(0deg) scale3d(1, 1, 1),
    ease-in-out
  );
}
.flip-in-top {
  @include animationname(flipInTop);
  @include flipMixin(
    flipInTop,
    perspective(250px) rotateX(90deg) scale3d(1.1, 1.1, 1.1),
    ease-in,
    perspective(250px) rotateX(45deg) scale3d(0.95, 0.95, 0.95),
    ease-out,
    perspective(250px) rotateX(0deg) scale3d(1, 1, 1),
    ease-in-out
  );
}
.flip-in-bottom {
  @include animationname(flipInBottom);
  @include flipMixin(
    flipInBottom,
    perspective(250px) rotateX(-90deg) scale3d(1.1, 1.1, 1.1),
    ease-in,
    perspective(250px) rotateX(-45deg) scale3d(0.95, 0.95, 0.95),
    ease-out,
    perspective(250px) rotateX(0deg) scale3d(1, 1, 1),
    ease-in-out
  );
}

.flip-out-left {
  @include animationname(flipOutLeft);
  @include flipMixin(
    flipOutLeft,
    perspective(250px) rotateY(0deg) scale3d(1, 1, 1),
    ease-out,
    perspective(250px) rotateY(-45deg) scale3d(0.95, 0.95, 0.95),
    ease-in,
    perspective(250px) rotateY(-90deg) scale3d(1.1, 1.1, 1.1),
    ease-in-out,
    false
  );
}
.flip-out-right {
  @include animationname(flipOutRight);
  @include flipMixin(
    flipOutRight,
    perspective(250px) rotateY(0deg) scale3d(1, 1, 1),
    ease-out,
    perspective(250px) rotateY(45deg) scale3d(0.95, 0.95, 0.95),
    ease-in,
    perspective(250px) rotateY(90deg) scale3d(1.1, 1.1, 1.1),
    ease-in-out,
    false
  );
}
.flip-out-top {
  @include animationname(flipOutTop);
  @include flipMixin(
    flipOutTop,
    perspective(250px) rotateX(0deg) scale3d(1, 1, 1),
    ease-out,
    perspective(250px) rotateX(45deg) scale3d(0.95, 0.95, 0.95),
    ease-in,
    perspective(250px) rotateX(90deg) scale3d(1.1, 1.1, 1.1),
    ease-in-out,
    false
  );
}
.flip-out-bottom {
  @include animationname(flipOutBottom);
  @include flipMixin(
    flipOutBottom,
    perspective(250px) rotateX(0deg) scale3d(1, 1, 1),
    ease-out,
    perspective(250px) rotateX(-45deg) scale3d(0.95, 0.95, 0.95),
    ease-in,
    perspective(250px) rotateX(-90deg) scale3d(1.1, 1.1, 1.1),
    ease-in-out,
    false
  );
}

// Fade
.fade-in {
  @include animationname(fadeIn);
  @include backfacevisibility(hidden);
  @include cubic(ease-in-out);
  @include fadeMixin(fadeIn, '', '');
}
.fade-in-right {
  @include animationname(fadeInRight);
  @include backfacevisibility(hidden);
  @include cubic(ease-in-out);
  @include fadeMixin(fadeInRight, translate3d(200px, 0, 0), translate3d(0, 0, 0));
}
.fade-in-left {
  @include animationname(fadeInLeft);
  @include backfacevisibility(hidden);
  @include cubic(ease-in-out);
  @include fadeMixin(fadeInLeft, translate3d(-200px, 0, 0), translate3d(0, 0, 0));
}

.fade-in-top {
  @include animationname(fadeInTop);
  @include backfacevisibility(hidden);
  @include cubic(ease-in-out);
  @include fadeMixin(fadeInTop, translate3d(0, -200px, 0), translate3d(0, 0, 0));
}
.fade-in-bottom {
  @include animationname(fadeInBottom);
  @include backfacevisibility(hidden);
  @include cubic(ease-in-out);
  @include fadeMixin(fadeInBottom, translate3d(0, 200px, 0), translate3d(0, 0, 0));
}

.fade-out {
  @include animationname(fadeOut);
  @include backfacevisibility(hidden);
  @include cubic(ease-in-out);
  @include fadeMixin(fadeOut, '', '', false);
}

.fade-out-left {
  @include animationname(fadeOutLeft);
  @include backfacevisibility(hidden);
  @include cubic(ease-in-out);
  @include fadeMixin(fadeOutLeft, translate3d(0, 0, 0), translate3d(-200px, 0, 0), false);
}
.fade-out-right {
  @include animationname(fadeOutRight);
  @include backfacevisibility(hidden);
  @include cubic(ease-in-out);
  @include fadeMixin(fadeOutRight, translate3d(0, 0, 0), translate3d(200px, 0, 0), false);
}

.fade-out-top {
  @include animationname(fadeOutTop);
  @include backfacevisibility(hidden);
  @include cubic(ease-in-out);
  @include fadeMixin(fadeOutTop, translate3d(0, 0, 0), translate3d(0, -200px, 0), false);
}

.fade-out-bottom {
  @include animationname(fadeOutBottom);
  @include backfacevisibility(hidden);
  @include cubic(ease-in-out);
  @include fadeMixin(fadeOutBottom, translate3d(0, 0, 0), translate3d(0, 200px, 0), false);
}

// bounce
.bounce-in-left {
  @include animationname(bounceInLeft);
  @include backfacevisibility(hidden);
  @include bounceMixin(bounceInLeft, translate3d(-200px, 0, 0), translate3d(20px, 0, 0), translate3d(0, 0, 0));
}
.bounce-in-right {
  @include animationname(bounceInRight);
  @include backfacevisibility(hidden);
  @include bounceMixin(bounceInRight, translate3d(200px, 0, 0), translate3d(-20px, 0, 0), translate3d(0, 0, 0));
}
.bounce-in-top {
  @include animationname(bounceInTop);
  @include backfacevisibility(hidden);
  @include bounceMixin(bounceInTop, translate3d(0, -200px, 0), translate3d(0, 20px, 0), translate3d(0, 0, 0));
}
.bounce-in-bottom {
  @include animationname(bounceInBottom);
  @include backfacevisibility(hidden);
  @include bounceMixin(bounceInBottom, translate3d(0, 200px, 0), translate3d(0, -20px, 0), translate3d(0, 0, 0));
}
.bounce-out-left {
  @include animationname(bounceOutLeft);
  @include backfacevisibility(hidden);
  @include bounceMixin(bounceOutLeft, translate3d(0, 0, 0), translate3d(20px, 0, 0), translate3d(-200px, 0, 0), false);
}
.bounce-out-right {
  @include animationname(bounceOutLeft);
  @include backfacevisibility(hidden);
  @include bounceMixin(bounceOutLeft, translate3d(0, 0, 0), translate3d(-20px, 0, 0), translate3d(200px, 0, 0), false);
}
.bounce-out-top {
  @include animationname(bounceOutTop);
  @include backfacevisibility(hidden);
  @include bounceMixin(bounceOutTop, translate3d(0, 0, 0), translate3d(0, 20px, 0), translate3d(0, -200px, 0), false);
}
.bounce-out-bottom {
  @include animationname(bounceOutBottom);
  @include backfacevisibility(hidden);
  @include bounceMixin(bounceOutBottom, translate3d(0, 0, 0), translate3d(0, -20px, 0), translate3d(0, 200px, 0), false);
}

// twist
.twist {
  @include animationname(twist);
  @include backfacevisibility(hidden);
  @include twistMixin(
    twist,
    ease-in,
    rotateZ(0deg),
    ease-out,
    rotateZ(-45deg),
    ease-in-out,
    rotateZ(405deg),
    ease-in,
    rotateZ(360deg)
  );
}
.twist-in {
  @include animationname(twistIn);
  @include backfacevisibility(hidden);
  @include twistMixin(
    twistIn,
    ease-out,
    rotateZ(0deg) scale3d(0, 0, 0),
    linear,
    rotateZ(-45deg) scale3d(0.6, 0.6, 0.6),
    linear,
    rotateZ(405deg) scale3d(0.8, 0.8, 0.8),
    ease-in,
    rotateZ(360deg) scale3d(1, 1, 1)
  );
}
.twist-out {
  @include animationname(twistOut);
  @include backfacevisibility(hidden);
  @include twistMixin(
    twistOut,
    ease-out,
    rotateZ(0deg) scale3d(1, 1, 1),
    linear,
    rotateZ(405deg) scale3d(0.8, 0.8, 0.8),
    linear,
    rotateZ(-45deg) scale3d(0.6, 0.6, 0.6),
    ease-in,
    rotateZ(360deg) scale3d(0, 0, 0),
    false
  );
}

// pop
.pop-in-left {
  @include animationname(popInLeft);
  @include backfacevisibility(hidden);
  @include popMixin(
    popInLeft,
    ease-in,
    scaleX(1.25) translate3d(-200px, 0, 0),
    linear,
    scaleX(1.15) translate3d(20px, 0, 0),
    linear,
    scaleX(1.05) translate3d(-20px, 0, 0),
    ease-out,
    scaleX(1) translate3d(20px, 0, 0),
    ease-in-out,
    scaleX(1) translate3d(0, 0, 0)
  );
}
.pop-in-right {
  @include animationname(popInRight);
  @include backfacevisibility(hidden);
  @include popMixin(
    popInRight,
    ease-in,
    scaleX(1.25) translate3d(200px, 0, 0),
    linear,
    scaleX(1.15) translate3d(-20px, 0, 0),
    linear,
    scaleX(1.05) translate3d(20px, 0, 0),
    ease-out,
    scaleX(1) translate3d(-20px, 0, 0),
    ease-in-out,
    scaleX(1) translate3d(0, 0, 0)
  );
}
.pop-in-top {
  @include animationname(popInTop);
  @include backfacevisibility(hidden);
  @include popMixin(
    popInTop,
    ease-in,
    scaleX(1.25) translate3d(0, -200px, 0),
    linear,
    scaleX(1.15) translate3d(0, 20px, 0),
    linear,
    scaleX(1.05) translate3d(0, -20px, 0),
    ease-out,
    scaleX(1) translate3d(0, 20px, 0),
    ease-in-out,
    scaleX(1) translate3d(0, 0, 0)
  );
}
.pop-in-bottom {
  @include animationname(popInBottom);
  @include backfacevisibility(hidden);
  @include popMixin(
    popInBottom,
    ease-in,
    scaleX(1.25) translate3d(0, 200px, 0),
    linear,
    scaleX(1.15) translate3d(0, -20px, 0),
    linear,
    scaleX(1.05) translate3d(0, 20px, 0),
    ease-out,
    scaleX(1) translate3d(0, -20px, 0),
    ease-in-out,
    scaleX(1) translate3d(0, 0, 0)
  );
}
.pop-out-left {
  @include animationname(popOutLeft);
  @include backfacevisibility(hidden);
  @include popMixin(
    popOutLeft,
    ease-in-out,
    scaleX(1) translate3d(0, 0, 0),
    ease-out,
    scaleX(1) translate3d(20px, 0, 0),
    linear,
    scaleX(1.05) translate3d(-20px, 0, 0),
    linear,
    scaleX(1.15) translate3d(20px, 0, 0),
    ease-in,
    scaleX(1.25) translate3d(-200px, 0, 0),
    false
  );
}
.pop-out-right {
  @include animationname(popOutRight);
  @include backfacevisibility(hidden);
  @include popMixin(
    popOutRight,
    ease-in-out,
    scaleX(1) translate3d(0, 0, 0),
    ease-out,
    scaleX(1) translate3d(-20px, 0, 0),
    linear,
    scaleX(1.05) translate3d(20px, 0, 0),
    linear,
    scaleX(1.15) translate3d(-20px, 0, 0),
    ease-in,
    scaleX(1.25) translate3d(200px, 0, 0),
    false
  );
}
.pop-out-top {
  @include animationname(popOutTop);
  @include backfacevisibility(hidden);
  @include popMixin(
    popOutTop,
    ease-in-out,
    scaleX(1) translate3d(0, 0, 0),
    ease-out,
    scaleX(1) translate3d(0, 20px, 0),
    linear,
    scaleX(1.05) translate3d(0, -20px, 0),
    linear,
    scaleX(1.15) translate3d(0, 20px, 0),
    ease-in,
    scaleX(1.25) translate3d(0, -200px, 0),
    false
  );
}
.pop-out-bottom {
  @include animationname(popOutBottom);
  @include backfacevisibility(hidden);
  @include popMixin(
    popOutBottom,
    ease-in-out,
    scaleX(1) translate3d(0, 0, 0),
    ease-out,
    scaleX(1) translate3d(0, -20px, 0),
    linear,
    scaleX(1.05) translate3d(0, 20px, 0),
    linear,
    scaleX(1.15) translate3d(0, -20px, 0),
    ease-in,
    scaleX(1.25) translate3d(0, 200px, 0),
    false
  );
}

// turn
//------------------------------------------------------------------------------

.form-out {
  @include animationname(form);
  @include formMixin(
    form,
    ease-out,
    scale3d(1, 1, 1),
    ease-in-out,
    scale3d(1, 0.66, 1),
    ease-out,
    scale3d(0.33, 0.33, 1),
    ease-in,
    scale3d(0.25, 0.25, 0.25)
  );
}
.form-in {
  @include animationname(deform);
  @include formMixin(
    deform,
    ease-out,
    scale3d(0, 0, 0),
    ease-out,
    scale3d(0.33, 0.33, 1),
    ease-in-out,
    scale3d(1, 0.66, 1),
    ease-in,
    scale3d(1, 1, 1),
    false
  );
}

// clip path
.clip-circle-in {
  @include animationname(clipCircleIn);
  @include clipMixin(clipCircleIn, circle(0%), circle(100%));
}
.clip-circle-in-top {
  @include animationname(clipCircleInTop);
  @include clipMixin(clipCircleInTop, circle(0% at 50% 0), circle(100%));
}
.clip-circle-in-topright {
  @include animationname(clipCircleInTopRight);
  @include clipMixin(clipCircleInTopRight, circle(0% at 100% 0), circle(100%));
}
.clip-circle-in-right {
  @include animationname(clipCircleInRight);
  @include clipMixin(clipCircleInRight, circle(0% at 100% 50%), circle(100%));
}
.clip-circle-in-bottom {
  @include animationname(clipCircleInBottom);
  @include clipMixin(clipCircleInBottom, circle(0% at 50% 100%), circle(100%));
}
.clip-circle-in-left {
  @include animationname(clipCircleInLeft);
  @include clipMixin(clipCircleInLeft, circle(0% at 0 50%), circle(100%));
}
.clip-circle-in-topleft {
  @include animationname(clipCircleInTopLeft);
  @include clipMixin(clipCircleInTopLeft, circle(0% at 0 0), circle(100%));
}

.clip-circle-out {
  @include animationname(clipCircleOut);
  @include clipMixin(clipCircleOut, circle(100%), circle(0%));
}
.clip-circle-out-top {
  @include animationname(clipCircleOutTop);
  @include clipMixin(clipCircleOutTop, circle(100%), circle(0% at 50% 0));
}
.clip-circle-out-topright {
  @include animationname(clipCircleOutTopRight);
  @include clipMixin(clipCircleOutTopRight, circle(100%), circle(0% at 100% 0));
}
.clip-circle-out-right {
  @include animationname(clipCircleOutRight);
  @include clipMixin(clipCircleOutRight, circle(100%), circle(0% at 100% 50%));
}
.clip-circle-out-bottom {
  @include animationname(clipCircleOutBottom);
  @include clipMixin(clipCircleOutBottom, circle(100%), circle(0% at 50% 100%));
}
.clip-circle-out-left {
  @include animationname(clipCircleOutLeft);
  @include clipMixin(clipCircleOutLeft, circle(100%), circle(0% at 0 50%));
}
.clip-circle-out-topleft {
  @include animationname(clipCircleOutTopLeft);
  @include clipMixin(clipCircleOutTopLeft, circle(100%), circle(0% at 0 0));
}

.clip-arrow-right {
  @include animationname(clipArrowRight);
  @include clipMixin(
    clipArrowRight,
    polygon(0 50%, 0 50%, 0 50%, 0 50%, 0 50%, 0 50%, 0 50%),
    polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)
  );
}
.clip-arrow-left {
  @include animationname(clipArrowLeft);
  @include clipMixin(
    clipArrowLeft,
    polygon(100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%),
    polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)
  );
}
.clip-trapezoid-in {
  @include animationname(clipTrapezoidIn);
  @include clipMixin(
    clipTrapezoidIn,
    polygon(0 100%, 100% 100%, 100% 100%, 0% 100%),
    polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%)
  );
}
.clip-trapezoid-out {
  @include animationname(clipTrapezoidOut);
  @include clipMixin(
    clipTrapezoidOut,
    polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%),
    polygon(0 100%, 100% 100%, 100% 100%, 0% 100%)
  );
}
.clip-parallelogram-in {
  @include animationname(clipparallelogramIn);
  @include clipMixin(
    clipparallelogramIn,
    polygon(100% 0, 100% 0, 100% 100%, 100% 100%),
    polygon(100% 0, 0 0, 0 100%, 100% 100%),
    true,
    polygon(100% 0, 25% 0, 0 100%, 75% 100%)
  );
}
.clip-parallelogram-out {
  @include animationname(clipparallelogramout);
  @include clipMixin(
    clipparallelogramout,
    polygon(100% 0, 0 0, 0 100%, 100% 100%),
    polygon(100% 0, 100% 0, 100% 100%, 100% 100%),
    true,
    polygon(100% 0, 25% 0, 0 100%, 75% 100%)
  );
}
.clip-inset-in {
  @include animationname(clipInsetIn);
  @include clipMixin(clipInsetIn, inset(50% 50% 50% 50%), inset(100% 0 100% 0));
}
.clip-inset-in-top {
  @include animationname(clipInsetInTop);
  @include clipMixin(clipInsetInTop, inset(0 0 100% 0), inset(0 0 0 0));
}
.clip-inset-in-topright {
  @include animationname(clipInsetInTopRight);
  @include clipMixin(clipInsetInTopRight, inset(0 0 100% 100%), inset(0 0 0 0));
}
.clip-inset-in-right {
  @include animationname(clipInsetInRight);
  @include clipMixin(clipInsetInRight, inset(0 0 0 100%), inset(0 0 0 0));
}
.clip-inset-in-bottom {
  @include animationname(clipInsetInBottom);
  @include clipMixin(clipInsetInBottom, inset(100% 0 0 0), inset(0 0 0 0));
}
.clip-inset-in-left {
  @include animationname(clipInsetInLeft);
  @include clipMixin(clipInsetInLeft, inset(0 100% 0 0), inset(0 0 0 0));
}
.clip-inset-in-topleft {
  @include animationname(clipInsetInTopLeft);
  @include clipMixin(clipInsetInTopLeft, inset(0 100% 100% 0), inset(0 0 0 0));
}
.clip-inset-out {
  @include animationname(clipInsetOut);
  @include clipMixin(clipInsetOut, inset(100% 0 100% 0), inset(50% 50% 50% 50%));
}
.clip-inset-out-top {
  @include animationname(clipInsetOutTop);
  @include clipMixin(clipInsetOutTop, inset(0 0 0 0), inset(0 0 100% 0));
}
.clip-inset-out-topright {
  @include animationname(clipInsetOutTopRight);
  @include clipMixin(clipInsetOutTopRight, inset(0 0 0 0), inset(0 0 100% 100%));
}
.clip-inset-out-right {
  @include animationname(clipInsetOutRight);
  @include clipMixin(clipInsetOutRight, inset(0 0 0 0), inset(0 0 0 100%));
}
.clip-inset-out-bottom {
  @include animationname(clipInsetOutBottom);
  @include clipMixin(clipInsetOutBottom, inset(0 0 0 0), inset(100% 0 0 0));
}
.clip-inset-out-left {
  @include animationname(clipInsetOutLeft);
  @include clipMixin(clipInsetOutLeft, inset(0 0 0 0), inset(0 100% 0 0));
}
.clip-inset-out-topleft {
  @include animationname(clipInsetOutTopLeft);
  @include clipMixin(clipInsetOutTopLeft, inset(0 0 0 0), inset(0 100% 100% 0));
}
.clip-reveal-top {
  @include animationname(clipRevealTop);
  @include clipMixin(clipRevealTop, inset(0 0 100% 0), inset(100% 0 0 0), true, inset(0 0 0 0));
}
.clip-reveal-right {
  @include animationname(clipRevealRight);
  @include clipMixin(clipRevealRight, inset(100% 0 100% 100%), inset(100% 100% 100% 0), true, inset(100% 0 100% 0));
}
.clip-reveal-bottom {
  @include animationname(clipRevealBottom);
  @include clipMixin(clipRevealBottom, inset(100% 100% 0 100%), inset(0 100% 100% 100%), true, inset(100% 100% 100% 100%));
}
.clip-reveal-left {
  @include animationname(clipRevealLeft);
  @include clipMixin(clipRevealLeft, inset(0 100% 0 0), inset(0 0 0 100%), true, inset(0 100% 0 100%));
}