/**
 * BASIC ANIMATIONS
 */

/* stylelint-disable order/properties-order, keyframe-selector-notation */
/* stylelint-disable keyframe-block-no-duplicate-selectors, rule-empty-line-before, declaration-empty-line-before */

html,
body {
  overflow-x: clip;
}

.animod {
  --anim-duration: var(--motion-duration-slow, 1000ms);
  --anim-delay: 200ms;
  --anim-js-next-effect-delay: 0ms; /* INFO: Used by JS */

  animation-delay: calc(var(--anim-delay) + var(--anim-js-next-effect-delay));
  animation-duration: var(--anim-duration);
  animation-fill-mode: both;
}

.anim-pulse {
  animation-name: anim-pulse;
  animation-timing-function: ease-in-out;
}

.anim-heartBeat {
  animation-name: anim-heartBeat;
  animation-duration: calc(var(--anim-duration) * 1.3);
  animation-timing-function: ease-in-out;
}

.anim-bounce {
  animation-name: anim-bounce;
  transform-origin: center bottom;
}

.anim-flash {
  animation-name: anim-flash;
}

.anim-tada {
  animation-name: anim-tada;
}

.anim-jello {
  animation-name: anim-jello;
  transform-origin: center;
}

.anim-bounceInLeft {
  animation-name: anim-bounceInLeft;
}

.anim-bounceInRight {
  animation-name: anim-bounceInRight;
}

.anim-fadeIn {
  animation-name: anim-fadeIn;
}

.anim-fadeInDown {
  animation-name: anim-fadeInDown;
}

.anim-fadeInLeft {
  animation-name: anim-fadeInLeft;
}

.anim-fadeInRight {
  animation-name: anim-fadeInRight;
}

.anim-fadeInUp {
  animation-name: anim-fadeInUp;
}

.anim-fadeInTopLeft {
  animation-name: anim-fadeInTopLeft;
}

.anim-fadeInTopRight {
  animation-name: anim-fadeInTopRight;
}

.anim-fadeInBottomLeft {
  animation-name: anim-fadeInBottomLeft;
}

.anim-fadeInBottomRight {
  animation-name: anim-fadeInBottomRight;
}

.anim-flip {
  animation-name: anim-flip;
  backface-visibility: visible;
}

.anim-flipInX {
  animation-name: anim-flipInX;
  backface-visibility: visible !important;
}

.anim-flipInY {
  animation-name: anim-flipInY;
  backface-visibility: visible !important;
}

.anim-rotateInDownLeft {
  animation-name: anim-rotateInDownLeft;
  transform-origin: left bottom;
}

.anim-rotateInDownRight {
  animation-name: anim-rotateInDownRight;
  transform-origin: right bottom;
}

.anim-rotateInUpLeft {
  animation-name: anim-rotateInUpLeft;
  transform-origin: left bottom;
}

.anim-rotateInUpRight {
  animation-name: anim-rotateInUpRight;
  transform-origin: right bottom;
}

.anim-zoomIn {
  animation-name: anim-zoomIn;
}

.anim-zoomInDown {
  animation-name: anim-zoomInDown;
}

.anim-zoomInLeft {
  animation-name: anim-zoomInLeft;
}

.anim-zoomInRight {
  animation-name: anim-zoomInRight;
}

.anim-zoomInUp {
  animation-name: anim-zoomInUp;
}

.anim-jackInTheBox {
  animation-name: anim-jackInTheBox;
}

.anim-rollIn {
  animation-name: anim-rollIn;
}

@keyframes anim-pulse {
  from { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.05, 1.05, 1.05); }
  to { transform: scale3d(1, 1, 1); }
}

@keyframes anim-heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

@keyframes anim-bounce {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transform: translate3d(0, 0, 0) scaleY(.95);
  }

  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@keyframes anim-flash {
  from,
  50%,
  to { opacity: 1; }

  25%,
  75% { opacity: 0; }
}

@keyframes anim-tada {
  from { transform: scale3d(1, 1, 1); }

  10%,
  20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

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

@keyframes anim-jello {
  from,
  11.1%,
  to { transform: translate3d(0, 0, 0); }

  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); }
  77.7% { transform: skewX(.390625deg) skewY(.390625deg); }
  88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); }
}

@keyframes anim-bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% { transform: translate3d(-10px, 0, 0) scaleX(.98); }
  90% { transform: translate3d(5px, 0, 0) scaleX(.995); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes anim-bounceInRight {
  from,
  60%,
  75%,
  90%,
  to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% { transform: translate3d(10px, 0, 0) scaleX(.98); }
  90% { transform: translate3d(-5px, 0, 0) scaleX(.995); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes anim-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes anim-fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-fadeInTopLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-fadeInTopRight {
  from {
    opacity: 0;
    transform: translate3d(100%, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-fadeInBottomLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-fadeInBottomRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-flip {
  from {
    animation-timing-function: ease-out;
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
  }

  40% {
    animation-timing-function: ease-out;
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  }

  50% {
    animation-timing-function: ease-in;
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  }

  80% {
    animation-timing-function: ease-in;
    transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
  }

  to {
    animation-timing-function: ease-in;
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
  }
}

@keyframes anim-flipInX {
  from {
    opacity: 0;
    animation-timing-function: ease-in;
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  }

  40% {
    animation-timing-function: ease-in;
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  }

  60% {
    opacity: 1;
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  }

  80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to { transform: perspective(400px); }
}

@keyframes anim-flipInY {
  from {
    opacity: 0;
    animation-timing-function: ease-in;
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  }

  40% {
    animation-timing-function: ease-in;
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  }

  60% {
    opacity: 1;
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  }

  80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { transform: perspective(400px); }
}

@keyframes anim-rotateInDownLeft {
  from {
    opacity: 0;
    transform: rotate3d(0, 0, 1, -45deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-rotateInDownRight {
  from {
    opacity: 0;
    transform: rotate3d(0, 0, 1, 45deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-rotateInUpLeft {
  from {
    opacity: 0;
    transform: rotate3d(0, 0, 1, 45deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-rotateInUpRight {
  from {
    opacity: 0;
    transform: rotate3d(0, 0, 1, -90deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes anim-zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% { opacity: 1; }
}

@keyframes anim-zoomInDown {
  from {
    opacity: 0;
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  }

  60% {
    opacity: 1;
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  }
}

@keyframes anim-zoomInLeft {
  from {
    opacity: 0;
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
  }

  60% {
    opacity: 1;
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
  }
}

@keyframes anim-zoomInRight {
  from {
    opacity: 0;
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
  }

  60% {
    opacity: 1;
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
  }
}

@keyframes anim-zoomInUp {
  from {
    opacity: 0;
    animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
  }

  60% {
    opacity: 1;
    animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
  }
}

@keyframes anim-jackInTheBox {
  from {
    opacity: 0;
    transform: scale(.1) rotate(30deg);
    transform-origin: center bottom;
  }

  50% { transform: rotate(-10deg); }
  70% { transform: rotate(3deg); }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes anim-rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}