/* Login page — animated gradient background, glassmorphism card, floating blobs.
   Used by devise/sessions/new and devise/passwords/new. */

/* Animated gradient background */
.login-bg {
  background: linear-gradient(-45deg, var(--color-base-300), var(--color-base-200), color-mix(in oklab, var(--color-primary) 12%, var(--color-base-300)), color-mix(in oklab, var(--color-accent) 10%, var(--color-base-300)));
  background-size: 400% 400%;
  animation: loginGradientShift 18s ease infinite;
}
@keyframes loginGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating gradient blobs for depth */
.login-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.2;
  pointer-events: none;
}
.login-blob-1 {
  width: 400px; height: 400px;
  background: var(--color-primary);
  top: -10%; left: -10%;
  animation: loginFloat1 22s ease-in-out infinite;
}
.login-blob-2 {
  width: 350px; height: 350px;
  background: var(--color-accent);
  bottom: -15%; right: -10%;
  animation: loginFloat2 26s ease-in-out infinite;
}
.login-blob-3 {
  width: 300px; height: 300px;
  background: var(--color-info);
  top: 40%; left: 60%;
  animation: loginFloat3 30s ease-in-out infinite;
}
@keyframes loginFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes loginFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -60px) scale(1.2); }
}
@keyframes loginFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 50px) scale(0.9); }
}

/* Logo glow pulse */
.login-logo-glow {
  animation: loginLogoGlow 4s ease-in-out infinite;
}
@keyframes loginLogoGlow {
  0%, 100% { box-shadow: 0 0 20px color-mix(in oklab, var(--color-primary) 40%, transparent); }
  50% { box-shadow: 0 0 40px color-mix(in oklab, var(--color-primary) 70%, transparent); }
}

/* Animated accent bar — primary to accent (no pink/magenta) */
.login-accent-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-info), var(--color-accent), var(--color-primary));
  background-size: 200% 100%;
  animation: loginAccentShift 6s linear infinite;
}
@keyframes loginAccentShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Glassmorphism card */
.login-card-glass {
  backdrop-filter: blur(12px);
  background: color-mix(in oklab, var(--color-base-100) 85%, transparent);
}

/* Gradient title text — uses DaisyUI CSS variables directly */
.login-title-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-info), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Input focus glow */
.login-input-wrap input:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
  border-color: var(--color-primary);
}

/* Submit button — solid primary, subtle hover lift */
.login-submit-btn {
  background: var(--color-primary);
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.login-submit-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--color-primary) 35%, transparent);
}
.login-submit-btn:active {
  transform: translateY(0);
}