/* Background Floating Orbs Animations */
@keyframes float-orb-1 {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes float-orb-2 {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  50% {
    transform: translate(-40px, 40px) scale(1.15);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes float-orb-3 {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  40% {
    transform: translate(40px, 20px) scale(0.9);
  }
  80% {
    transform: translate(-10px, -30px) scale(1.1);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-orb-1 {
  animation: float-orb-1 18s infinite ease-in-out;
}

.animate-orb-2 {
  animation: float-orb-2 15s infinite ease-in-out 2s;
}

.animate-orb-3 {
  animation: float-orb-3 20s infinite ease-in-out 1s;
}

.animate-card {
  animation: card-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Delays for staggered page loading animation */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }

/* Glassmorphism sutil para inputs */
.glass-input {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #1f2937;
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(168, 85, 247, 0.5); /* purple-500 */
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.12);
}

.dark .glass-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #fff;
}

.dark .glass-input:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(168, 85, 247, 0.6); /* purple-500 */
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.18);
}

/* Estilo del checkbox personalizado */
.custom-checkbox {
  appearance: none;
  background-color: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.15);
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.25rem;
  display: grid;
  place-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.custom-checkbox::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background-color: #a855f7; /* purple-500 */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-checkbox:checked {
  border-color: #a855f7;
  background-color: rgba(168, 85, 247, 0.1);
}

.custom-checkbox:checked::before {
  transform: scale(1);
}

.custom-checkbox:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 2px;
}

.dark .custom-checkbox {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Prevent browser autofill from breaking dark glassmorphic input styles */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #1f2937 !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px rgba(0, 0, 0, 0.02) !important;
}

.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover, 
.dark input:-webkit-autofill:focus, 
.dark input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: inset 0 0 20px 20px rgba(255, 255, 255, 0.03) !important;
}

/* Shake animation for incorrect password / api errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-6px); }
  30%, 60%, 90% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}