/* Auth Portal Premium Styling & Animations for EmployeeOS */

.auth-body {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto; /* Enable natural vertical scrolling if screen height is constrained */
  background-color: var(--color-bg-main); /* Cool light base */
  padding: var(--space-6) 0; /* Add safety margins for mobile devices */
}

/* Background blob containers */
.auth-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.auth-blob {
  position: absolute;
  border-radius: var(--radius-round);
  filter: blur(120px);
  opacity: 0.22;
  mix-blend-mode: multiply; /* Perfect watercolor pool effect on light bg */
  animation: blob-float 15s ease-in-out infinite alternate;
}

.auth-blob-1 {
  width: 500px;
  height: 500px;
  background-color: var(--color-primary-light);
  top: -10%;
  left: -5%;
}

.auth-blob-2 {
  width: 450px;
  height: 450px;
  background-color: var(--color-accent-light);
  bottom: -5%;
  right: -5%;
  animation-delay: 3s;
}

.auth-blob-3 {
  width: 400px;
  height: 400px;
  background-color: #e0f2fe; /* Light sky blue */
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 6s;
}

/* Animation keyframes */
@keyframes blob-float {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  50% {
    transform: translate(40px, -60px) scale(1.1);
  }
  100% {
    transform: translate(-30px, 30px) scale(0.9);
  }
}

/* 3D Brand Orb Container & Style */
.brand-orb-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-5);
}

.brand-orb {
  width: 95px;
  height: 95px;
  background: radial-gradient(circle at 30% 30%, #7dd3fc 0%, #0ea5e9 45%, #06b6d4 90%);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  box-shadow: 0 16px 36px rgba(14, 165, 233, 0.32);
  animation: morph-liquid-blob 10s ease-in-out infinite alternate;
}

@keyframes morph-liquid-blob {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  33% {
    border-radius: 50% 60% 70% 30% / 40% 60% 40% 60%;
    transform: translateY(-5px) scale(1.03) rotate(120deg);
  }
  66% {
    border-radius: 30% 70% 50% 50% / 60% 40% 60% 40%;
    transform: translateY(3px) scale(0.97) rotate(240deg);
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translateY(0) scale(1) rotate(360deg);
  }
}

/* Auth card glassmorphic enhancements */
.auth-content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: var(--space-4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-content .card {
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  background: rgba(255, 255, 255, 0.88) !important; /* Premium semi-transparent white */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-xl), 0 8px 32px rgba(14, 165, 233, 0.04) !important;
  color: var(--color-text-main) !important;
  border-radius: var(--radius-md) !important; /* 24px */
}

/* Text overrides */
.auth-content h2, 
.auth-content h3 {
  color: var(--color-text-main) !important;
  font-family: 'Manrope', sans-serif;
}

.auth-content p {
  color: var(--color-text-muted) !important;
}

.auth-content label {
  color: var(--color-text-muted) !important;
}

.auth-content input,
.auth-content textarea,
.auth-content select {
  background-color: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-main) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.auth-content input:focus,
.auth-content textarea:focus,
.auth-content select:focus {
  border-color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.12) !important;
}

/* Onboarding Step transition animations */
.step-fade-in {
  animation: step-slide-fade 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes step-slide-fade {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-content input::placeholder {
  color: var(--color-text-light) !important;
}

.auth-content .btn-secondary {
  background-color: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-main) !important;
}

.auth-content .btn-secondary:hover {
  background-color: var(--color-bg-main) !important;
  border-color: var(--color-border-hover) !important;
}

.auth-content a {
  color: var(--color-primary) !important;
  font-weight: var(--font-weight-medium);
}

.auth-content a:hover {
  color: var(--color-primary-hover) !important;
}

.auth-content .form-error {
  color: var(--color-danger) !important;
}

/* Password Toggle Control styling */
.password-toggle-btn {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.password-toggle-btn:hover {
  color: var(--color-primary);
}