/* site-nav.css — shared top nav for marketing pages.
 *
 * Used by landing / how-it-works / pricing / faq (and any future
 * marketing-side page). Replaces the bare "hero" header those pages
 * had before so visitors can click through to siblings instead of
 * dead-ending on each page's lone CTA.
 *
 * Composition stays inside the journal's visual vocabulary:
 *   - hairline accent line below the bar
 *   - small loryn orb on the left (CSS-only — no SVG cost)
 *   - center link strip in vv-font-label
 *   - small cyan-tinted CTA on the right
 *
 * Active page is signalled by class="is-active" on the matching link.
 * Each page sets it inline so the nav can stay a static stylesheet. */

.site-nav {
  width: 100%;
  padding: 22px 32px 18px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(122,184,245,0.06);
  font-family: var(--vv-font-display);
  z-index: 5;
}
.site-nav .site-nav-accent {
  position: absolute;
  bottom: -1px; left: 32px;
  width: 60px; height: 1px;
  background: var(--vv-cyan-accent);
  box-shadow: 0 0 8px rgba(122,184,245,0.6);
}

/* Brand cluster — sits at the left. Embeds the real Loryn orb (same
   SVG that lives in journal/signup/subscribe/welcome) so the nav
   reads as part of the same product, not a knock-off CSS dot. */
.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--vv-cyan-accent);
  letter-spacing: 0.22em;
  font-weight: 800;
  font-size: 17px;
  text-shadow: 0 0 22px rgba(122,184,245,0.22);
  flex: 0 0 auto;
}
.site-nav-brand:hover { color: #d3e4ff; }

/* Orb shell + animations — lifted from the journal so motion + layer
   composition match pixel-for-pixel. Sized at 34px in the nav. */
.site-nav-brand .loryn-orb {
  width: 34px; height: 34px;
  display: inline-block;
  flex: 0 0 auto;
}
.site-nav-brand .loryn-orb-svg {
  width: 100%; height: 100%;
  display: block; overflow: visible;
}
.site-nav-brand .orb-ring-main {
  transform-origin: 50% 50%; transform-box: fill-box;
  animation: orbRingMainSpin 22s linear infinite;
}
.site-nav-brand .orb-ring-sub {
  transform-origin: 50% 50%; transform-box: fill-box;
  animation: orbRingSubSpin 38s linear infinite reverse;
}
.site-nav-brand .orb-mist {
  transform-origin: 50% 50%; transform-box: fill-box;
  animation: orbMistBreathe 9s ease-in-out infinite;
}
.site-nav-brand .orb-mist-core,
.site-nav-brand .orb-mist-glow,
.site-nav-brand .orb-mist-wisp1,
.site-nav-brand .orb-mist-wisp2 {
  transform-origin: 50% 50%; transform-box: fill-box;
}
.site-nav-brand .orb-mist-wisp1 { animation: orbWispDrift1 14s ease-in-out infinite; }
.site-nav-brand .orb-mist-wisp2 { animation: orbWispDrift2 18s ease-in-out infinite reverse; }
.site-nav-brand .orb-mist-glow  { animation: orbGlowBreathe 7.5s ease-in-out infinite; }
.site-nav-brand .orb-halo, .site-nav-brand .orb-outer {
  transform-origin: 50% 50%; transform-box: fill-box;
}
.site-nav-brand .orb-halo  { animation: orbHaloBreathe 8.5s ease-in-out infinite; }
.site-nav-brand .orb-outer { animation: orbOuterBreathe 11s ease-in-out infinite; }

/* Keyframes — single source of truth here so each marketing page
   doesn't redefine them. Identical timings to the journal. */
@keyframes orbRingMainSpin { from { transform: rotate(0deg);   } to { transform: rotate(360deg); } }
@keyframes orbRingSubSpin  { from { transform: rotate(0deg);   } to { transform: rotate(360deg); } }
@keyframes orbMistBreathe  { 0%,100% { transform: scale(1);    filter: brightness(1); } 50% { transform: scale(0.96); filter: brightness(0.93); } }
@keyframes orbWispDrift1   { 0%,100% { transform: translate(-2px, 1px) scale(1); } 50% { transform: translate(2px, -2px) scale(1.08); } }
@keyframes orbWispDrift2   { 0%,100% { transform: translate(2px, -2px) scale(0.95); } 50% { transform: translate(-3px, 2px) scale(1.05); } }
@keyframes orbGlowBreathe  { 0%,100% { opacity: 0.8; transform: scale(0.94); } 50% { opacity: 1.05; transform: scale(1.06); } }
@keyframes orbHaloBreathe  { 0%,100% { opacity: 1;   transform: scale(1); } 50% { opacity: 0.78; transform: scale(0.94); } }
@keyframes orbOuterBreathe { 0%,100% { opacity: 1;   transform: scale(1); } 50% { opacity: 0.6;  transform: scale(0.96); } }

/* Link strip — centred between brand and CTA. Each link is the same
   vv-font-label small-caps as the section titles on every page so the
   nav reads as part of the typographic system rather than a separate
   chrome layer. */
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1 1 auto;
  justify-content: center;
}
.site-nav-link {
  text-decoration: none;
  font-family: var(--vv-font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vv-text-muted);
  padding: 4px 0;
  position: relative;
  transition: color var(--vv-dur-quick) var(--vv-ease-cinematic);
}
.site-nav-link:hover { color: var(--vv-text-secondary); }
.site-nav-link.is-active { color: var(--vv-cyan-accent); }
.site-nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--vv-cyan-accent);
  box-shadow: 0 0 8px rgba(122,184,245,0.5);
}

/* CTA — text-only "Get started" on the right. NO fill, NO border,
   just cyan label text with a hairline underline beneath, brightening
   on hover. Per Jake's directive 2026-06-07 — borders + filled
   gradients read as cheap SaaS chrome against the journal's text-on-
   void aesthetic. */
.site-nav-cta {
  appearance: none;
  background: none;
  border: none;
  text-decoration: none;
  color: var(--vv-cyan-accent);
  padding: 6px 0;
  font-family: var(--vv-font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  flex: 0 0 auto;
  position: relative;
  transition: color var(--vv-dur-quick) var(--vv-ease-cinematic);
}
.site-nav-cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--vv-cyan-accent);
  opacity: 0.38;
  transition: opacity var(--vv-dur-quick) var(--vv-ease-cinematic);
}
.site-nav-cta:hover { color: #d3e4ff; }
.site-nav-cta:hover::after { opacity: 1; }

/* Tighter layout on smaller screens — collapse the centre link strip
   into a wrap row below the brand row so nothing overflows. */
@media (max-width: 820px) {
  .site-nav {
    flex-wrap: wrap;
    padding: 18px 24px 14px;
    gap: 12px 18px;
  }
  .site-nav-brand { flex: 1 0 auto; }
  .site-nav-cta   { flex: 0 0 auto; }
  .site-nav-links {
    order: 99;
    flex: 1 0 100%;
    justify-content: flex-start;
    gap: 16px;
  }
}