/**
 * Module: FlipTwist Animation
 * Filename: ca__FlipTwist.css
 */
.flipTwistRight {
  animation-name: flipTwistRight;
  transform-origin: center right;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}

@keyframes flipTwistRight {
  0% {
    transform: perspective(1000px) rotateY(90deg) rotateZ(-25deg);
    opacity: 0;
  }

  60% {
    transform: perspective(1000px) rotateY(-10deg) rotateZ(5deg);
    opacity: 1;
  }

  100% {
    transform: perspective(1000px) rotateY(0deg) rotateZ(0deg);
  }
}

.flipTwistLeft {
  animation-name: flipTwistLeft;
  transform-origin: center left;
  animation-timing-function: ease-out;
  will-change: transform, opacity;
}

@keyframes flipTwistLeft {
  0% {
    transform: perspective(1000px) rotateY(-90deg) rotateZ(25deg);
    opacity: 0;
  }

  60% {
    transform: perspective(1000px) rotateY(10deg) rotateZ(-5deg);
    opacity: 1;
  }

  100% {
    transform: perspective(1000px) rotateY(0deg) rotateZ(0deg);
  }
}

.flipTwistTop {
  animation-name: flipTwistTop;
  transform-origin: top center;
  will-change: transform, opacity;
}

@keyframes flipTwistTop {
  0% {
    transform: perspective(800px) rotateX(90deg) rotateZ(20deg) translateY(-80%);
    opacity: 0;
  }

  50% {
    transform: perspective(800px) rotateX(-10deg) rotateZ(-10deg);
    opacity: 1;
  }

  100% {
    transform: perspective(800px) rotateX(0deg) rotateZ(0deg);
  }
}

.flipTwistBottom {
  animation-name: flipTwistBottom;
  transform-origin: bottom center;
  will-change: transform, opacity;
}

@keyframes flipTwistBottom {
  0% {
    transform: perspective(800px) rotateX(-90deg) rotateZ(-20deg) translateY(80%);
    opacity: 0;
  }

  50% {
    transform: perspective(800px) rotateX(10deg) rotateZ(10deg);
    opacity: 1;
  }

  100% {
    transform: perspective(800px) rotateX(0deg) rotateZ(0deg);
  }
}

.flipTwistPop {
  animation-name: flipTwistPop;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes flipTwistPop {
  0% {
    transform: perspective(600px) rotateY(60deg) rotateZ(-10deg) scale(0.8);
    opacity: 0;
  }

  60% {
    transform: perspective(600px) rotateY(-10deg) rotateZ(5deg) scale(1.05);
    opacity: 1;
  }

  100% {
    transform: perspective(600px) rotateY(0deg) rotateZ(0deg) scale(1);
  }
}

.flipTwistCombo {
  animation-name: flipTwistCombo;
  animation-duration: 1.5s;
  transform-origin: top right;
  will-change: transform, opacity;
  animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1);
}

@keyframes flipTwistCombo {
  0% {
    transform: perspective(1000px) rotateX(90deg) rotateY(60deg) rotateZ(-30deg) translate(50%, -100%);
    opacity: 0;
  }

  50% {
    transform: perspective(1000px) rotateX(-10deg) rotateY(-10deg) rotateZ(5deg);
    opacity: 1;
  }

  100% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(0%, 0%);
  }
}

.flipTwistVertical {
  animation-name: flipTwistVertical;
  transform-origin: center top;
  will-change: transform, opacity;
}

@keyframes flipTwistVertical {
  0% {
    transform: perspective(900px) rotateX(-90deg) rotateZ(15deg);
    opacity: 0;
  }

  50% {
    transform: perspective(900px) rotateX(15deg) rotateZ(-5deg);
    opacity: 1;
  }

  100% {
    transform: perspective(900px) rotateX(0deg) rotateZ(0deg);
  }
}

.flipTwistDiagonal {
  animation-name: flipTwistDiagonal;
  transform-origin: top right;
  will-change: transform, opacity;
}

@keyframes flipTwistDiagonal {
  0% {
    transform: perspective(1000px) rotateX(-60deg) rotateY(60deg) rotateZ(25deg);
    opacity: 0;
  }

  50% {
    transform: rotateX(10deg) rotateY(-10deg) rotateZ(-5deg);
    opacity: 1;
  }

  100% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}

.flipTwistSlam {
  animation-name: flipTwistSlam;
  transform-origin: center left;
  will-change: transform, opacity;
  animation-timing-function: cubic-bezier(0.3, 1.5, 0.4, 1);
}

@keyframes flipTwistSlam {
  0% {
    transform: perspective(800px) rotateY(-120deg) rotateZ(20deg);
    opacity: 0;
  }

  70% {
    transform: rotateY(15deg) rotateZ(-10deg);
    opacity: 1;
  }

  100% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
}

.flipTwistZoom {
  animation-name: flipTwistZoom;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes flipTwistZoom {
  0% {
    transform: perspective(1000px) rotateY(75deg) scale(1.3);
    opacity: 0;
  }

  60% {
    transform: rotateY(-15deg) scale(0.95);
    opacity: 1;
  }

  100% {
    transform: rotateY(0deg) scale(1);
  }
}

.flipTwistDrop {
  animation-name: flipTwistDrop;
  transform-origin: top center;
  will-change: transform, opacity;
}

@keyframes flipTwistDrop {
  0% {
    transform: perspective(800px) rotateX(80deg) translateY(-80%);
    opacity: 0;
  }

  50% {
    transform: rotateX(-15deg) translateY(5%);
    opacity: 1;
  }

  100% {
    transform: rotateX(0deg) translateY(0%);
  }
}

.flipTwistTiltIn {
  animation-name: flipTwistTiltIn;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes flipTwistTiltIn {
  0% {
    transform: perspective(900px) rotateY(90deg) rotateZ(-30deg);
    opacity: 0;
  }

  40% {
    transform: rotateY(-20deg) rotateZ(10deg);
    opacity: 1;
  }

  100% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
}

.flipTwistHover {
  display: inline-block;
  transform-origin: center;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}

.flipTwistHover:hover {
  transform: perspective(800px) rotateY(15deg) rotateZ(-5deg) scale(1.05);
  opacity: 0.95;
}

.flipTwistTiltHover {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
}

.flipTwistTiltHover:hover {
  transform: perspective(900px) rotateZ(10deg) rotateY(20deg);
}

.flipTwistZoomHover {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.6s ease-out;
}

.flipTwistZoomHover:hover {
  transform: perspective(1000px) rotateY(-15deg) scale(1.1);
}

.flipTwistOutRight {
  animation-name: flipTwistOutRight;
  transform-origin: center right;
  will-change: transform, opacity;
}

@keyframes flipTwistOutRight {
  0% {
    transform: rotateY(0deg) rotateZ(0deg);
    opacity: 1;
  }

  60% {
    transform: rotateY(-20deg) rotateZ(10deg);
    opacity: 0.7;
  }

  100% {
    transform: rotateY(90deg) rotateZ(-15deg);
    opacity: 0;
  }
}

.flipTwistOutLeft {
  animation-name: flipTwistOutLeft;
  transform-origin: center left;
  will-change: transform, opacity;
}

@keyframes flipTwistOutLeft {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }

  60% {
    transform: rotateY(20deg) rotateZ(-10deg);
    opacity: 0.6;
  }

  100% {
    transform: rotateY(-90deg) rotateZ(10deg);
    opacity: 0;
  }
}

.flipTwistOutTop {
  animation-name: flipTwistOutTop;
  transform-origin: top center;
  will-change: transform, opacity;
}

@keyframes flipTwistOutTop {
  0% {
    transform: rotateX(0deg);
    opacity: 1;
  }

  50% {
    transform: rotateX(20deg);
    opacity: 0.6;
  }

  100% {
    transform: rotateX(-90deg) translateY(-60%);
    opacity: 0;
  }
}

.flipTwistOutZoom {
  animation-name: flipTwistOutZoom;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes flipTwistOutZoom {
  0% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }

  60% {
    transform: rotateY(-15deg) scale(0.9);
    opacity: 0.6;
  }

  100% {
    transform: rotateY(75deg) scale(0.5);
    opacity: 0;
  }
}