/* ═══════════════════════════════════════════════════
   AUTH PAGE — CSS Bridge (Login ↔ Dashboard Unity)
   Connects the black login page with the global theme
   ═══════════════════════════════════════════════════ */

/* Auth overlay - only block clicks when visible */
.auth-overlay {
  pointer-events: none;
}

.auth-overlay:not(.hidden) {
  pointer-events: auto;
}

/* Auth panels must always be clickable */
.auth-left, .auth-right, .auth-form-wrap {
  pointer-events: auto;
}

/* Auth switch buttons - ensure they're always on top and clickable */
.auth-switch {
  position: relative;
  z-index: 100;
}

.asw {
  position: relative;
  z-index: 100;
  cursor: pointer;
  pointer-events: auto;
}

/* Enhanced auth left panel glow effect */
.auth-left::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(232,160,48,0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: authGlow 8s ease-in-out infinite;
}

@keyframes authGlow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50% { transform: translate(10%, -10%) scale(1.1); opacity: 0.8; }
}

/* Auth brand pulse to match dashboard logo */
.auth-brand {
  animation: brandPulse 4s ease-in-out infinite;
}

@keyframes brandPulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 20px rgba(232,160,48,0.3); }
  50% { opacity: 0.85; text-shadow: 0 0 10px rgba(232,160,48,0.15); }
}

/* Input focus glow matching dashboard accent */
.af-input:focus {
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

/* Submit button enhanced hover with shine effect */
.af-submit {
  position: relative;
  overflow: hidden;
}

.af-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s;
}

.af-submit:hover::before {
  left: 100%;
}

/* Auth switch tab underline animation */
.asw {
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.asw::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
  pointer-events: none;
}

.asw.active::after {
  width: 100%;
}

/* Error message shake animation */
.auth-error.visible {
  animation: errorShake 0.4s ease;
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Google button sync with theme */
.btn-google {
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-google:active {
  transform: scale(0.98);
}

/* Auth form entrance animation enhancement */
.auth-form-wrap {
  animation: authFormSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Particle-like decoration on auth left */
.auth-left-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(232,160,48,0.03) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(232,160,48,0.03) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(232,160,48,0.02) 1px, transparent 1px),
    radial-gradient(circle at 60% 20%, rgba(232,160,48,0.02) 1px, transparent 1px);
  background-size: 100px 100px, 150px 150px, 200px 200px, 250px 250px;
  opacity: 0.6;
}

/* Auth left panel enhanced gradient */
.auth-left {
  background: linear-gradient(
    160deg,
    rgba(26,21,8,1) 0%,
    rgba(23,20,12,0.95) 40%,
    rgba(15,14,12,0.9) 70%,
    rgba(8,8,7,0.85) 100%
  );
}

/* Sync dot animation for login status */
.auth-sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text3);
  display: inline-block;
  margin-left: 6px;
  transition: background 0.3s;
}

.auth-sync-dot.syncing {
  background: var(--accent);
  animation: authPulse 0.8s infinite;
}

.auth-sync-dot.synced {
  background: #2ec4a0;
}

.auth-sync-dot.error {
  background: #e05840;
}

@keyframes authPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Responsive adjustments */
@media (max-width: 700px) {
  .auth-left-particles {
    display: none;
  }
}