/* =============================================================================
   ANIMATIONS - ProCom Academy
   ============================================================================= */

.appear-animation { opacity: 0; }
.appear-animation-visible { opacity: 1; }

@keyframes fadeInUpShorter {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInUpShorter { animation-name: fadeInUpShorter; }

@keyframes fadeInUpShorterPlus {
  from { opacity: 0; transform: translate3d(0, 50px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInUpShorterPlus { animation-name: fadeInUpShorterPlus; }

@keyframes fadeInLeftShorterPlus {
  from { opacity: 0; transform: translate3d(-50px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInLeftShorterPlus { animation-name: fadeInLeftShorterPlus; }

@keyframes maskUp {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.maskUp { animation-name: maskUp; }

@keyframes expandIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
.expandIn { animation-name: expandIn; }

@keyframes kenBurnsToLeft {
  from { transform: scale(1.2); }
  to { transform: scale(1) translateX(-10%); }
}
.kenBurnsToLeft { animation-name: kenBurnsToLeft; animation-timing-function: linear; }

.animated { animation-duration: 1s; animation-fill-mode: both; }
.animated.fast { animation-duration: 0.5s; }
.animated.slow { animation-duration: 2s; }