/*
 * User-side atmosphere and glass navigation.
 * Loaded after app.css / landing.css so the existing theme tokens remain
 * the source of truth for every accent colour.
 */

/* ── Layered starfield ───────────────────────────────────────── */
.tj-starfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.tj-starfield--hero {
  z-index: 0;
  color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(ellipse at bottom, rgba(27, 39, 53, 0.35), transparent 72%),
    linear-gradient(180deg, rgba(9, 10, 15, 0.12), rgba(9, 10, 15, 0.45));
}

.tj-starfield--app {
  position: fixed;
  z-index: 0;
  color: color-mix(in srgb, var(--tj-accent) 64%, #64748b);
  opacity: 0.25;
  background:
    radial-gradient(ellipse at bottom, color-mix(in srgb, var(--tj-accent) 9%, transparent), transparent 68%),
    transparent;
}

html[data-bs-theme="dark"] .tj-starfield--app {
  color: rgba(255, 255, 255, 0.72);
  opacity: 0.32;
  background:
    radial-gradient(ellipse at bottom, color-mix(in srgb, var(--tj-accent) 13%, #1b2735), transparent 74%),
    linear-gradient(180deg, transparent, rgba(9, 10, 15, 0.18));
}

body.has-app-nav > .app-shell-wrap {
  position: relative;
  z-index: 1;
}

.tj-stars {
  position: absolute;
  inset: -45%;
  background-repeat: repeat;
  will-change: transform;
}

.tj-stars--fine {
  opacity: 0.72;
  background-image:
    radial-gradient(circle at 8% 18%, currentColor 0 1px, transparent 1.2px),
    radial-gradient(circle at 31% 73%, currentColor 0 1px, transparent 1.2px),
    radial-gradient(circle at 57% 29%, currentColor 0 1px, transparent 1.2px),
    radial-gradient(circle at 79% 81%, currentColor 0 1px, transparent 1.2px),
    radial-gradient(circle at 92% 46%, currentColor 0 1px, transparent 1.2px);
  background-size: 178px 193px;
  animation: tj-stars-rise 52s linear infinite;
}

.tj-stars--medium {
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 16% 64%, currentColor 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 48% 12%, currentColor 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 83% 51%, currentColor 0 1.5px, transparent 1.8px);
  background-size: 287px 311px;
  animation: tj-stars-rise 88s linear infinite;
}

.tj-stars--large {
  opacity: 0.42;
  background-image:
    radial-gradient(circle at 24% 26%, currentColor 0 2px, transparent 2.4px),
    radial-gradient(circle at 71% 78%, currentColor 0 2px, transparent 2.4px);
  background-size: 421px 457px;
  animation: tj-stars-rise 132s linear infinite;
}

@keyframes tj-stars-rise {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -28%, 0); }
}

/* ── Theme-aware glass pill navbar ───────────────────────────── */
.navbar {
  --tj-nav-glass: color-mix(in srgb, var(--tj-accent-2) 82%, transparent);
  --tj-nav-border: rgba(255, 255, 255, 0.28);
  z-index: 1090 !important;
  isolation: isolate;
  padding: 0.55rem clamp(0.5rem, 2vw, 1rem) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
}

html[data-bs-theme="dark"] .navbar {
  --tj-nav-glass: rgba(4, 7, 12, 0.76);
  --tj-nav-border: color-mix(in srgb, var(--tj-accent) 32%, rgba(255, 255, 255, 0.16));
}

.navbar > .container-fluid {
  position: relative;
  isolation: isolate;
  width: min(100%, 1440px);
  min-height: 3.1rem;
  margin-inline: auto;
  padding: 0.4rem 0.7rem !important;
  border: 1px solid var(--tj-nav-border);
  border-radius: 999rem;
  background: var(--tj-nav-glass);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.12),
    inset 1px 1px 2px rgba(255, 255, 255, 0.22),
    inset -1px -1px 2px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(175%);
  -webkit-backdrop-filter: blur(16px) saturate(175%);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    border-radius 0.22s ease;
}

.navbar > .container-fluid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 2px 2px 5px -2px rgba(255, 255, 255, 0.38),
    inset -2px -2px 5px -2px rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(255, 255, 255, 0.1);
}

.navbar.navbar-scrolled > .container-fluid {
  background: color-mix(in srgb, var(--tj-nav-glass) 92%, #000 8%);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.2),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2);
}

.navbar .navbar-brand {
  padding: 0.45rem 0.75rem !important;
}

.navbar .nav-link {
  position: relative;
  padding: 0.55rem 0.82rem !important;
  border-radius: 999rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.24s ease !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.navbar .nav-link.active {
  color: var(--tj-accent-2) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

html[data-bs-theme="dark"] .navbar .nav-link.active {
  color: #ffffff !important;
  background: color-mix(in srgb, var(--tj-accent) 42%, rgba(255, 255, 255, 0.12)) !important;
}

.navbar .header-control,
.navbar .ld-nav-login,
.navbar .ld-nav-cta {
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-fg: #ffffff;
  background: var(--btn-bg) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 999rem !important;
  color: var(--btn-fg) !important;
}

.navbar .header-control:hover,
.navbar .ld-nav-login:hover,
.navbar .ld-nav-cta:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #ffffff !important;
  color: var(--tj-accent-2) !important;
}

.navbar .navbar-toggler {
  margin-right: 0.25rem;
  border-color: rgba(255, 255, 255, 0.42) !important;
  border-radius: 999rem;
  background: rgba(255, 255, 255, 0.1);
}

.navbar .navbar-toggler-icon {
  filter: invert(1) !important;
}

html[data-bs-theme="dark"] .navbar .navbar-toggler-icon {
  filter: none !important;
}

@media (max-width: 1199.98px) {
  .navbar > .container-fluid {
    min-height: 3rem;
  }

  .navbar .navbar-collapse {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    right: 0;
    z-index: 1080;
    padding: 0.75rem !important;
    border: 1px solid var(--tj-nav-border) !important;
    border-radius: 1.25rem;
    background: var(--tj-nav-glass) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(18px) saturate(175%);
    -webkit-backdrop-filter: blur(18px) saturate(175%);
  }

  .navbar .navbar-nav {
    gap: 0.25rem;
  }

  .navbar .nav-link {
    padding: 0.65rem 0.85rem !important;
  }

  .navbar .prefs-bar {
    align-items: stretch;
  }
}

@media (max-width: 575.98px) {
  .navbar {
    padding-inline: 0.35rem !important;
  }

  .navbar > .container-fluid {
    padding-inline: 0.45rem !important;
  }

  .navbar .navbar-brand {
    padding-inline: 0.45rem !important;
  }

  .tj-stars {
    inset: -60%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tj-stars {
    animation: none !important;
  }

  .navbar .nav-link {
    transition: none !important;
  }
}