/* ==========================================================
   WAHID AUTH ANIMATION
========================================================== */

/* Animated Background */

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.auth-wrapper {
  background-size: 300% 300%;

  animation: gradientMove 18s ease infinite;
}

/*==========================================================*/
/* Fade Up */

@keyframes fadeUp {
  from {
    opacity: 0;

    transform: translateY(35px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

.fade-up {
  animation: fadeUp 0.8s ease forwards;
}

/*==========================================================*/
/* Fade Left */

@keyframes fadeLeft {
  from {
    opacity: 0;

    transform: translateX(-60px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

.fade-left {
  animation: fadeLeft 1s ease forwards;
}

/*==========================================================*/
/* Fade Right */

@keyframes fadeRight {
  from {
    opacity: 0;

    transform: translateX(60px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

.fade-right {
  animation: fadeRight 1s ease forwards;
}

/*==========================================================*/
/* Floating */

@keyframes floating {
  0% {
    transform: translateY(0);
  }

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

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

.floating {
  animation: floating 5s ease-in-out infinite;
}

/*==========================================================*/
/* Logo Glow */

@keyframes logoGlow {
  0% {
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.2));
  }

  50% {
    filter: drop-shadow(0 0 20px rgba(255, 215, 64, 0.8));
  }

  100% {
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.2));
  }
}

.auth-logo {
  animation: floating 5s ease-in-out infinite, logoGlow 4s ease infinite;
}

/*==========================================================*/
/* Card */

.auth-card {
  transition: 0.35s;
}

.auth-card:hover {
  transform: translateY(-6px);

  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.18);
}

/*==========================================================*/
/* Input */

.input-group {
  transition: 0.25s;
}

.input-group:focus-within {
  transform: translateX(4px);
}

/*==========================================================*/
/* Button */

.btn-login {
  transition: 0.35s;

  position: relative;

  overflow: hidden;
}

.btn-login:hover {
  transform: translateY(-3px);
}

.btn-login::before {
  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

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

.btn-login:hover::before {
  left: 100%;

  transition: 0.7s;
}

/*==========================================================*/
/* Feature */

.auth-feature-item {
  transition: 0.25s;
}

.auth-feature-item:hover {
  transform: translateX(10px);
}

/*==========================================================*/
/* Statistik */

.stat-card {
  transition: 0.35s;
}

.stat-card:hover {
  transform: translateY(-8px);

  background: rgba(255, 255, 255, 0.18);
}

/*==========================================================*/
/* Link */

.auth-link {
  position: relative;
}

.auth-link::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -2px;

  width: 0;

  height: 2px;

  background: var(--secondary);

  transition: 0.3s;
}

.auth-link:hover::after {
  width: 100%;
}

/*==========================================================*/
/* Circle */

.gradient-circle {
  animation: floating 12s ease-in-out infinite;
}

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

.circle-3 {
  animation-delay: 4s;
}

/*==========================================================*/
/* Pulse Counter */

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.stat-number {
  animation: pulse 3s infinite;
}

/*==========================================================*/
/* Loading */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner-auth {
  width: 18px;

  height: 18px;

  border: 2px solid rgba(255, 255, 255, 0.3);

  border-top: 2px solid #fff;

  border-radius: 50%;

  animation: spin 0.8s linear infinite;
}

/*==========================================================*/
/* Page */

.auth-left {
  animation: fadeLeft 0.9s ease;
}

.auth-right {
  animation: fadeRight 0.9s ease;
}

/*==========================================================*/
/* Delay */

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

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

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

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

/* Ripple */

.btn-login {
  position: relative;

  overflow: hidden;
}

.ripple {
  position: absolute;

  border-radius: 50%;

  transform: scale(0);

  background: rgba(255, 255, 255, 0.4);

  animation: ripple 0.7s linear;
}

@keyframes ripple {
  to {
    transform: scale(4);

    opacity: 0;
  }
}

/*==========================================================
    PARTICLES
==========================================================*/

#particles {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  pointer-events: none;

  z-index: 5;
}

.particle {
  position: absolute;

  display: block;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.15));

  box-shadow: 0 0 15px rgba(255, 255, 255, 0.45);

  animation: particleMove linear infinite;
}

@keyframes particleMove {
  0% {
    transform: translateY(40px) scale(0.8);

    opacity: 0;
  }

  20% {
    opacity: 0.5;
  }

  50% {
    transform: translateY(-40px) translateX(20px) scale(1.2);
  }

  100% {
    transform: translateY(-120px) translateX(-30px) scale(0.8);

    opacity: 0;
  }
}