/* =================================
   REVEAL ANIMATIONS
================================= */

.reveal-card {

  opacity: 0;

  transform: translateY(40px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal-card.active {

  opacity: 1;

  transform: translateY(0);
}

/* =================================
   FADE IN
================================= */

.fade-in {

  animation: fadeIn .8s ease forwards;
}

@keyframes fadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =================================
   SLIDE UP
================================= */

.slide-up {

  animation: slideUp .8s ease forwards;
}

@keyframes slideUp {

  from {

    opacity: 0;

    transform: translateY(40px);
  }

  to {

    opacity: 1;

    transform: translateY(0);
  }
}

/* =================================
   FLOAT
================================= */

.float {

  animation: float 4s ease-in-out infinite;
}

@keyframes float {

  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

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

/* =================================
   COUNTER
================================= */

.counter-animate {

  transition: all 1.5s ease;
}

/* =================================
   BUTTON HOVER
================================= */

.btn,
.skills-btn {

  transition:
    transform .3s ease,
    background .3s ease;
}

.btn:hover,
.skills-btn:hover {

  transform: translateY(-2px);
}

/* =================================
   LOADER
================================= */

.payment-loader {

  width: 60px;
  height: 60px;

  border: 4px solid var(--gray-200);

  border-top: 4px solid var(--primary);

  border-radius: 50%;

  animation: spin 1s linear infinite;
}

@keyframes spin {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}