@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Kaleidoscope Animations */
@keyframes kaleidoscope-rotate {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes kaleidoscope-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes kaleidoscope-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(90deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
  75% { transform: translateY(-10px) rotate(270deg); }
}

@keyframes kaleidoscope-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes kaleidoscope-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Custom Utility Classes */
.kaleidoscope-bg {
  background: linear-gradient(-45deg, #2c3e50, #34495e, #3498db, #2980b9);
  background-size: 400% 400%;
  animation: kaleidoscope-gradient 15s ease infinite;
}

.kaleidoscope-rotate {
  animation: kaleidoscope-rotate 20s linear infinite;
}

.kaleidoscope-pulse {
  animation: kaleidoscope-pulse 3s ease-in-out infinite;
}

.kaleidoscope-float {
  animation: kaleidoscope-float 6s ease-in-out infinite;
}

.kaleidoscope-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200% 100%;
  animation: kaleidoscope-shimmer 2s infinite;
}

.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-effect-dark {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Custom Form Styles */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  color: white;
  outline: none;
  transition: all 0.3s ease;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.form-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  border-color: transparent;
}

.btn-primary {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(to right, #3498db, #2980b9);
  color: white;
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.btn-primary:hover {
  background: linear-gradient(to right, #2980b9, #1f5f8b);
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px #3498db, 0 0 0 4px transparent;
}

/* Google Button Styling */
.btn-google {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background-color: #ffffff;
  color: #1f2937;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.btn-google:hover {
  background-color: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.btn-google:active {
  transform: translateY(0);
}

.btn-google:focus {
  outline: none;
  box-shadow: 0 0 0 2px #d1d5db, 0 0 0 4px transparent;
}

/* Mobile Responsive Enhancements */
@media (max-width: 640px) {
  .form-input {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .btn-primary,
  .btn-google {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
  
  .logo-animation img {
    width: 4rem;
    height: 4rem;
  }
}