/* ═══════════════════════════════════════════════
   OPALINE — NAVBAR
   Transparent hero state → Navy glass post-hero
   ═══════════════════════════════════════════════ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--section-h);
  transition:
    background var(--dur-popup-in) var(--ease-smooth),
    backdrop-filter var(--dur-popup-in) var(--ease-smooth),
    -webkit-backdrop-filter var(--dur-popup-in) var(--ease-smooth),
    padding 0.4s var(--ease-smooth);
}

/* === TRANSPARENT STATE (During hero scroll) === */
.navbar--transparent {
  background: transparent;
}

/* === SCROLLED STATE (After hero) === */
.navbar--scrolled {
  background: rgba(13, 27, 42, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px var(--section-h);
}

/* === BRAND WORDMARK === */
.navbar__brand {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--ivory-stone);
}

/* === RESERVE PILL BUTTON === */
.navbar__cta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--ivory-stone);
  text-decoration: none;
  padding: 10px 28px;
  border: 1px solid rgba(232, 222, 202, 0.4);
  border-radius: var(--radius-pill);
  transition:
    background var(--dur-button-hover) var(--ease-elegant),
    border-color var(--dur-button-hover) var(--ease-elegant),
    color var(--dur-button-hover) var(--ease-elegant);
}

.navbar__cta:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(232, 222, 202, 0.8);
}

/* Post-hero: CTA becomes amber */
.navbar--scrolled .navbar__cta {
  background: var(--amber-warm);
  border-color: var(--amber-warm);
  color: var(--navy-twilight);
}

.navbar--scrolled .navbar__cta:hover {
  background: var(--gold-edge);
  border-color: var(--gold-edge);
}