/*=====================================================

EFFECTS

=====================================================*/

.fade-up {
  animation: fadeUp 0.55s ease both;
}

.delay-1 {
  animation-delay: 0.08s;
}

.delay-2 {
  animation-delay: 0.16s;
}

.delay-3 {
  animation-delay: 0.24s;
}

.delay-4 {
  animation-delay: 0.32s;
}

@keyframes fadeUp {
  from {
    opacity: 0;

    transform: translateY(18px);
  }

  to {
    opacity: 1;

    transform: none;
  }
}

/*--------------------------------------------------*/

.card {
  overflow: hidden;
}

.card::before {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );

  transform: translateX(-120%);

  transition: transform 0.9s ease;

  pointer-events: none;
}

.card:hover::before {
  transform: translateX(120%);
}

/*--------------------------------------------------*/

.btn {
  position: relative;

  overflow: hidden;
}

.btn::after {
  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.28),
    transparent 70%
  );

  opacity: 0;

  transition: opacity 0.25s;
}

.btn:hover::after {
  opacity: 1;
}

/*--------------------------------------------------*/

.input {
  transition: all 0.22s ease;
}

/*--------------------------------------------------*/

.logo {
  transition: transform 0.35s ease;
}

.logo:hover {
  transform: rotate(-4deg) scale(1.03);
}