.extend-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  animation: preloader-hide 0s 2.7s forwards;
}

.preloader-logo-holder {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  animation: logo-fade 0s 1.5s forwards;
}

.extend-logo {
  width: 10rem;
}

.color-1 {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  background-color: hsla(193, 100%, 50%, 1);
  transform: translateX(100%);
  animation: sweep-left 1.8s cubic-bezier(0.76, 0, 0.24, 1) 0.5s forwards;
}

.color-2 {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-color: #5886f9;
  transform: translateX(100%);
  animation: sweep-left 2s cubic-bezier(0.76, 0, 0.24, 1) 0.5s forwards;
}

.color-3 {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  background-color: #00ffc2;
  transform: translateX(100%);
  animation: sweep-left 2.2s cubic-bezier(0.76, 0, 0.24, 1) 0.5s forwards;
}

@keyframes sweep-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes logo-fade {
  to {
    opacity: 0;
  }
}

@keyframes preloader-hide {
  to {
    display: none;
  }
}
/* =============================================================================
   Login Card Surface-Aware Styling
   These rules make card content contrast with the loginCardColor from branding.
   CSS custom properties are set inline on the Card component.
   ============================================================================= */

/* Text color - inherits to all text within card */
.auth-page [data-slot='card-content'] {
  color: var(--login-card-foreground);
}

/* Input backgrounds - light card (12% foreground) */
.auth-page[data-card-theme='light']
  [data-slot='card-content']
  [data-slot='input-group'],
.auth-page[data-card-theme='light']
  [data-slot='card-content']
  [data-slot='input'],
.auth-page[data-card-theme='light']
  [data-slot='card-content']
  [data-slot='input-otp-slot'] {
  background-color: color-mix(
    in srgb,
    var(--login-card-foreground) 12%,
    transparent
  ) !important;
  border-color: var(--login-card-foreground) !important;
}

/* Input backgrounds - dark card (25% foreground for more contrast) */
.auth-page[data-card-theme='dark']
  [data-slot='card-content']
  [data-slot='input-group'],
.auth-page[data-card-theme='dark']
  [data-slot='card-content']
  [data-slot='input'],
.auth-page[data-card-theme='dark']
  [data-slot='card-content']
  [data-slot='input-otp-slot'] {
  background-color: color-mix(
    in srgb,
    var(--login-card-foreground) 25%,
    transparent
  ) !important;
  border-color: var(--login-card-foreground) !important;
}

/* OTP caret color - use foreground color */
.auth-page
  [data-slot='card-content']
  [data-slot='input-otp-slot']
  .animate-caret-blink {
  background-color: var(--login-card-foreground) !important;
}

/* Primary button - uses card-specific button colors */
.auth-page [data-slot='card-content'] button[class*='bg-primary'] {
  --primary: var(--login-card-button);
  --primary-foreground: var(--login-card-button-foreground);
}

/* Secondary/tertiary button - override --primary to use card foreground.
   Targets bg-transparent buttons that lack text-primary-foreground (which only primary has) */
.auth-page
  [data-slot='card-content']
  button[class*='bg-transparent']:not([class*='text-primary-foreground']) {
  --primary: var(--login-card-foreground);
  --primary-text: var(--login-card-foreground);
}

/* Dark card: tertiary/secondary button text - override zen2's
   color-mix(in_oklch, var(--primary-text) 50%, black) which
   always darkens toward black, invisible on dark surfaces */
.auth-page[data-card-theme='dark']
  [data-slot='card-content']
  button[class*='bg-transparent']:not([class*='text-primary-foreground']) {
  color: var(--login-card-foreground) !important;
}

/* Disabled button text - darker on light cards for better contrast */
.auth-page[data-card-theme='light'] [data-slot='card-content'] button:disabled {
  color: rgb(var(--color-neutral-600)) !important;
}

/* Links within card */
.auth-page [data-slot='card-content'] a {
  color: var(--login-card-foreground);
}

/* OTP input slots - use monospace font for better digit alignment */
.auth-page [data-slot='input-otp'] {
  font-family: 'Roboto Mono', monospace !important;
}

/* OTP input - stretch to full width on mobile */
@media (max-width: 640px) {
  .auth-page [data-input-otp-container] {
    width: 100%;
  }

  .auth-page [data-slot='input-otp-group'] {
    width: 100%;
    justify-content: space-between;
  }

  .auth-page [data-slot='input-otp-slot'] {
    flex: 1;
    max-width: 48px;
  }
}