/*
 * nav.css - canonical AlaskaAutomations top navigation bar shell
 *
 * Provides the bar shell, animated sheen flash, generic right-side action slot,
 * and mobile hamburger toggle. Brand wordmark and content slots are per-page.
 *
 * Anonymous variant (landing): .nav-brand + .nav-links + .nav-login + .nav-cta
 *   (these stay in landing.css since they only apply to the marketing nav)
 *
 * Authed variant (onboarding/connect): .nav-brand + .nav-user + logout button
 *   (.nav-user is defined here; logout button uses canonical .btn from button.css)
 *
 * Required CSS variables (defined in landing :root and auth :root):
 *   --text-primary, --text-secondary, --red, --transition-base
 */

/* ── Navigation ── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 6, 8, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.8);
  transition: border-color var(--transition-base), background var(--transition-base);
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.7),
    0 8px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    /* Subtle inner edge vignette — darkens edges, suggests curved glass depth */
    inset 80px 0 60px -60px rgba(0,0,0,0.15),
    inset -80px 0 60px -60px rgba(0,0,0,0.15);
}

/* Silver sheen flash — tight, concentrated, directional */
.nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20%;
  width: 15%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,210,225,0.02) 25%,
    rgba(200,210,225,0.06) 45%,
    rgba(220,225,235,0.10) 50%,
    rgba(200,210,225,0.06) 55%,
    rgba(200,210,225,0.02) 75%,
    transparent 100%
  );
  pointer-events: none;
  animation: obsidian-flash 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Secondary faint flash — trails the main one for depth */
.nav::after {
  content: '';
  position: absolute;
  top: 0;
  left: -20%;
  width: 25%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180,190,210,0.01) 30%,
    rgba(180,190,210,0.025) 50%,
    rgba(180,190,210,0.01) 70%,
    transparent 100%
  );
  pointer-events: none;
  animation: obsidian-flash 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: -0.3s;
}

@keyframes obsidian-flash {
  0%   { left: -25%; opacity: 0; }
  5%   { opacity: 1; }
  50%  { left: 100%; opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; left: 100%; }
}

.nav.scrolled {
  border-bottom-color: rgba(0,0,0,0.9);
  background: rgba(5, 5, 7, 0.98);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}


/* ── Authed variant: user email display ── */
.nav-user {
  font-size: 13px;
  color: var(--text-secondary, #9b9bab);
  font-weight: 500;
  letter-spacing: -0.1px;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .nav {
      padding: 0 20px;
    }

    .nav-toggle {
      display: flex;
    }
}