/** @license For full copyright and license information, please see the LICENSE.md file. */

/**
 * @file auth-cosmic.css
 * @description Advanced theme-responsive cosmic starfield, ambient nebula, and glassmorphic auth card.
 *              Compositor-only GPU acceleration (60/120fps), zero JS dependencies, full WCAG 2.2 AA compliance.
 */

/* -------------------------------------------------------------------------
 * 1. Base Container & Viewport Setup
 * ------------------------------------------------------------------------- */
html,
body.auth-body-container {
  background-color: var(--cosmic-bg-start, #04060c) !important;
  color: var(--tblr-body-color, #ffffff);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body.auth-body-container {
  background: transparent !important;
}

.page {
  background: transparent !important;
  background-color: transparent !important;
}

.auth-cosmic-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(ellipse 120% 90% at 50% 10%, var(--cosmic-bg-end) 0%, var(--cosmic-bg-start) 100%);
}

.auth-utility-bar,
.auth-lang-picker,
#main-content {
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------------------
 * 2. Theme Palettes: Dark Mode (Default) & Light Mode
 * ------------------------------------------------------------------------- */
/* Dark Mode - Client Profile (Default / Fallback) */
:root,
[data-bs-theme="dark"] {
  --cosmic-bg-start: #05070f;
  --cosmic-bg-end: #090e1a;
  --cosmic-nebula-1: rgba(6, 182, 212, 0.22);
  --cosmic-nebula-2: rgba(37, 99, 235, 0.20);
  --cosmic-star-deep: rgba(255, 255, 255, 0.75);
  --cosmic-star-mid: rgba(147, 197, 253, 0.90);
  --cosmic-star-near: #ffffff;
  --cosmic-glow-color: rgba(147, 197, 253, 0.80);
  --cosmic-meteor-head: #ffffff;
  --cosmic-meteor-glow: #38bdf8;
  --cosmic-meteor-trail: linear-gradient(90deg, #ffffff, #93c5fd 40%, transparent 100%);
  --cosmic-grid-color: rgba(255, 255, 255, 0.035);
}

/* Dark Mode - Admin Profile (Obsidian Violet & Indigo) */
.auth-cosmic-bg--admin,
[data-bs-theme="dark"] .auth-cosmic-bg--admin {
  --cosmic-bg-start: #04060c;
  --cosmic-bg-end: #080c18;
  --cosmic-nebula-1: rgba(112, 0, 255, 0.24);
  --cosmic-nebula-2: rgba(0, 212, 255, 0.16);
  --cosmic-star-deep: rgba(224, 231, 255, 0.75);
  --cosmic-star-mid: rgba(199, 210, 254, 0.90);
  --cosmic-star-near: #ffffff;
  --cosmic-glow-color: rgba(165, 180, 252, 0.85);
  --cosmic-meteor-head: #ffffff;
  --cosmic-meteor-glow: #818cf8;
  --cosmic-meteor-trail: linear-gradient(90deg, #ffffff, #a5b4fc 40%, transparent 100%);
  --cosmic-grid-color: rgba(139, 92, 246, 0.04);
}

/* Light Mode - Client Profile */
[data-bs-theme="light"],
[data-bs-theme="light"] .auth-cosmic-bg--client {
  --cosmic-bg-start: #f8fafc;
  --cosmic-bg-end: #edf2f7;
  --cosmic-nebula-1: rgba(56, 189, 248, 0.12);
  --cosmic-nebula-2: rgba(99, 102, 241, 0.09);
  --cosmic-star-deep: rgba(37, 99, 235, 0.40);
  --cosmic-star-mid: rgba(6, 182, 212, 0.55);
  --cosmic-star-near: rgba(30, 64, 175, 0.75);
  --cosmic-glow-color: rgba(37, 99, 235, 0.25);
  --cosmic-meteor-head: #2563eb;
  --cosmic-meteor-glow: rgba(37, 99, 235, 0.40);
  --cosmic-meteor-trail: linear-gradient(90deg, #2563eb, #60a5fa 40%, transparent 100%);
  --cosmic-grid-color: rgba(30, 41, 59, 0.035);
}

/* Light Mode - Admin Profile */
[data-bs-theme="light"] .auth-cosmic-bg--admin {
  --cosmic-bg-start: #f8fafc;
  --cosmic-bg-end: #f1f5f9;
  --cosmic-nebula-1: rgba(124, 58, 237, 0.12);
  --cosmic-nebula-2: rgba(99, 102, 241, 0.08);
  --cosmic-star-deep: rgba(99, 102, 241, 0.40);
  --cosmic-star-mid: rgba(124, 58, 237, 0.55);
  --cosmic-star-near: rgba(79, 70, 229, 0.75);
  --cosmic-glow-color: rgba(124, 58, 237, 0.25);
  --cosmic-meteor-head: #7c3aed;
  --cosmic-meteor-glow: rgba(124, 58, 237, 0.40);
  --cosmic-meteor-trail: linear-gradient(90deg, #7c3aed, #a78bfa 40%, transparent 100%);
  --cosmic-grid-color: rgba(99, 102, 241, 0.035);
}

/* -------------------------------------------------------------------------
 * 3. Base Background & Ambient Aurora Nebula
 * ------------------------------------------------------------------------- */
.auth-cosmic-nebula {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  background:
    radial-gradient(ellipse 55% 45% at 20% 25%, var(--cosmic-nebula-1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 30%, var(--cosmic-nebula-2) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 50% 85%, var(--cosmic-nebula-1) 0%, transparent 70%);
  filter: blur(55px);
  animation: cosmicNebulaFloat 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes cosmicNebulaFloat {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  50% { transform: scale(1.06) translate3d(1.5%, -1.5%, 0); }
  100% { transform: scale(0.97) translate3d(-1.5%, 1.5%, 0); }
}

/* -------------------------------------------------------------------------
 * 4. Multi-Plane Parallax Delicate Stars & Particles
 * ------------------------------------------------------------------------- */
.auth-cosmic-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Layer 1: Dense Sharp Micro-Stars (Delicate 0.8px - 1.2px) */
.auth-cosmic-stars--deep {
  background-image:
    radial-gradient(0.8px 0.8px at 25px 35px, var(--cosmic-star-deep), transparent 1px),
    radial-gradient(1px 1px at 75px 120px, var(--cosmic-star-deep), transparent 1.2px),
    radial-gradient(0.8px 0.8px at 150px 60px, var(--cosmic-star-deep), transparent 1px),
    radial-gradient(1.1px 1.1px at 220px 240px, var(--cosmic-star-deep), transparent 1.3px),
    radial-gradient(0.8px 0.8px at 270px 180px, var(--cosmic-star-deep), transparent 1px),
    radial-gradient(1.1px 1.1px at 360px 90px, var(--cosmic-star-deep), transparent 1.3px),
    radial-gradient(0.8px 0.8px at 450px 220px, var(--cosmic-star-deep), transparent 1px),
    radial-gradient(1.1px 1.1px at 540px 140px, var(--cosmic-star-deep), transparent 1.3px);
  background-size: 550px 280px;
  background-repeat: repeat;
  opacity: 0.85;
}

/* Layer 2: Mid-Tier Sparkling Stars (Pulsing Twinkle 6s) */
.auth-cosmic-stars--mid {
  background-image:
    radial-gradient(1.2px 1.2px at 60px 80px, var(--cosmic-star-mid), transparent 1.4px),
    radial-gradient(1.4px 1.4px at 190px 260px, var(--cosmic-star-mid), transparent 1.6px),
    radial-gradient(1.2px 1.2px at 320px 140px, var(--cosmic-star-mid), transparent 1.4px),
    radial-gradient(1.4px 1.4px at 420px 340px, var(--cosmic-star-mid), transparent 1.6px),
    radial-gradient(1.2px 1.2px at 510px 190px, var(--cosmic-star-mid), transparent 1.4px);
  background-size: 480px 380px;
  background-repeat: repeat;
  animation: cosmicStarTwinkleMid 6s ease-in-out infinite alternate;
}

@keyframes cosmicStarTwinkleMid {
  0% { opacity: 0.35; }
  50% { opacity: 0.95; }
  100% { opacity: 0.50; }
}

/* Layer 3: Foreground Brilliant Stars with Soft Glow (Pulsing 4.5s) */
.auth-cosmic-stars--near {
  background-image:
    radial-gradient(1.5px 1.5px at 110px 170px, var(--cosmic-star-near), transparent 1.8px),
    radial-gradient(1.7px 1.7px at 340px 360px, var(--cosmic-star-near), transparent 2px),
    radial-gradient(1.5px 1.5px at 490px 190px, var(--cosmic-star-near), transparent 1.8px);
  background-size: 520px 520px;
  background-repeat: repeat;
  filter: drop-shadow(0 0 3px var(--cosmic-glow-color));
  animation: cosmicStarTwinkleNear 4.5s ease-in-out infinite alternate-reverse;
}

@keyframes cosmicStarTwinkleNear {
  0% { opacity: 0.40; }
  50% { opacity: 1; }
  100% { opacity: 0.60; }
}

/* -------------------------------------------------------------------------
 * 5. Subtle Tech Grid Overlay
 * ------------------------------------------------------------------------- */
.auth-cosmic-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--cosmic-grid-color) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
  opacity: 0.9;
}

.auth-cosmic-bg--admin .auth-cosmic-grid {
  background-size: 32px 32px;
  background-image:
    linear-gradient(to right, var(--cosmic-grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cosmic-grid-color) 1px, transparent 1px);
}

/* -------------------------------------------------------------------------
 * 6. Modern Glassmorphic Auth Card Polish
 * ------------------------------------------------------------------------- */
.auth-card--modern {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
}

[data-bs-theme="dark"] .auth-card--modern {
  background: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 48px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* -------------------------------------------------------------------------
 * 7. Topbar Utility Bar & Theme Switcher Button
 * ------------------------------------------------------------------------- */
.auth-utility-bar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}

.auth-theme-toggle-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color, #e2e8f0);
  color: var(--tblr-body-color, #1e293b);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.auth-theme-toggle-btn:hover {
  background-color: var(--tblr-bg-surface-secondary, #f8fafc);
  color: var(--tblr-primary, #206bc4);
  border-color: var(--tblr-primary, #206bc4);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(32, 107, 196, 0.15);
}

[data-bs-theme="dark"] .auth-theme-toggle-btn {
  background-color: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

[data-bs-theme="dark"] .auth-theme-toggle-btn:hover {
  background-color: #0f172a;
  color: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}

/* -------------------------------------------------------------------------
 * 8. Accessibility & Reduced Motion (WCAG 2.2 Level AA)
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .auth-cosmic-nebula,
  .auth-cosmic-stars {
    animation: none !important;
    transform: none !important;
  }
}