/* ============================================================
   Textout:) — Navigation bar (STYLES)
   ------------------------------------------------------------
   Nav-only styles. Loads AFTER /style.css on every page:

       <link rel="stylesheet" href="/style.css">
       <link rel="stylesheet" href="/nav.css">

   File map:
     1. Shell
     2. Desktop links         (> 900px)
     3. Early-access highlight
     4. ▸▸▸ MOBILE NAV        (<= 900px)     ← simplified menu
     5. Floating early-access tab
     6. Reduced motion
   ============================================================ */

/* ============ 1. SHELL ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 0; pointer-events: none;
}

.nav-inner {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 10px 0 14px; gap: 18px;
  border-radius: 999px;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 45%),
    var(--surface);

  box-shadow:
    6px 6px 16px #000,
    -4px -4px 12px rgba(255, 255, 255, .04),
    0 0 24px var(--glow-soft),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 rgba(0, 0, 0, .65),
    0 0 0 1px rgba(255, 255, 255, .035);

  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}

.nav.scrolled .nav-inner {
  box-shadow:
    9px 9px 22px #000,
    -6px -6px 16px rgba(255, 255, 255, .06),
    0 0 34px var(--glow-soft),
    inset 0 1px 0 rgba(255, 255, 255, .11),
    inset 0 -1px 0 rgba(0, 0, 0, .65),
    0 0 0 1px rgba(255, 255, 255, .045);
}

.brand { display: flex; align-items: center; gap: 12px; padding: 2px 4px 2px 2px; }
.brand-owl {
  height: 36px; width: 36px; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(0, 187, 255, .45));
}
.brand-logo {
  height: 22px; width: auto; opacity: .96;
  filter: drop-shadow(0 0 10px var(--glow));
}

/* ============ 2. DESKTOP LINKS  (> 900px) ============ */
.nav-links {
  display: flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15)), #08080a;
  box-shadow:
    inset 2px 2px 6px #000,
    inset -1px -1px 3px rgba(255, 255, 255, .035),
    0 1px 0 rgba(255, 255, 255, .05);
}
.nav-links a {
  position: relative;
  padding: 8px 18px; border-radius: 999px;
  font-size: .88rem; font-weight: 500; letter-spacing: .15px;
  color: rgba(169, 169, 184, .82);
  transition: color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-links a:hover {
  color: #fff;
  background: linear-gradient(180deg, #1a1a20, #0f0f12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    2px 2px 8px #000,
    -1px -1px 4px rgba(255, 255, 255, .05),
    0 0 16px rgba(0, 16, 155, .55);
}
.nav-links a.active {
  color: #fff; font-weight: 800; letter-spacing: .05px;
  background: linear-gradient(180deg, #050507 0%, #0d0d11 100%);
  box-shadow:
    inset 3px 3px 8px #000,
    inset -2px -2px 6px rgba(255, 255, 255, .05),
    inset 0 0 20px rgba(255, 122, 26, .16),
    0 0 0 1px rgba(255, 122, 26, .32),
    0 1px 0 rgba(255, 255, 255, .04);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.nav-links a.active::after {
  content: "";
  position: absolute; left: 50%; bottom: 4px;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(255, 122, 26, .6),
              inset 0 -1px 1px rgba(0, 0, 0, .4);
}

/* Icons + in-menu CTA only exist for the mobile menu
   (icons are now hidden on mobile too, see section 4) */
.nav-ico { display: none; }
.nav-links a.nav-cta-mobile { display: none; }

.nav .btn-primary {
  background:
    linear-gradient(180deg, rgba(255, 122, 26, .22), rgba(255, 122, 26, .05)),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    5px 5px 12px #000,
    -3px -3px 9px rgba(255, 255, 255, .05),
    0 0 22px rgba(255, 122, 26, .35),
    0 0 0 1px rgba(255, 122, 26, .45);
}
.nav .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    7px 7px 16px #000,
    -4px -4px 12px rgba(255, 255, 255, .06),
    0 0 32px rgba(255, 122, 26, .5),
    0 0 0 1px rgba(255, 122, 26, .6);
}

/* ============ 3. EARLY-ACCESS HIGHLIGHT ============ */
.nav-links a.nav-early {
  color: #fff; font-weight: 700;
  padding-left: 30px;
  background:
    linear-gradient(180deg, rgba(255, 122, 26, .32), rgba(255, 122, 26, .1)),
    #140a04;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 0 0 1px rgba(255, 122, 26, .6),
    0 0 20px rgba(255, 122, 26, .38);
}
.nav-links a.nav-early:hover {
  background:
    linear-gradient(180deg, rgba(255, 122, 26, .45), rgba(255, 122, 26, .16)),
    #140a04;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 0 0 1px rgba(255, 122, 26, .8),
    0 0 28px rgba(255, 122, 26, .55);
}
.nav-links a.nav-early::before {
  content: "";
  position: absolute; left: 14px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 14px rgba(255, 122, 26, .7);
  animation: early-pulse 1.8s ease-in-out infinite;
}
.nav-links a.nav-early.active::after { display: none; }
@keyframes early-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.55); opacity: .55; }
}

@media (min-width: 901px) and (max-width: 1080px) {
  .nav-inner { gap: 12px; }
  .nav-links a { padding: 8px 13px; font-size: .85rem; }
  .nav-links a.nav-early { padding-left: 28px; }
}

/* ============================================================
   ▸▸▸  4. MOBILE NAV  ( <= 900px )  ◂◂◂
   Simplified menu:
     - raised neumorphic outer panel
     - flat text rows (no icons, no chevrons, no per-row shadows)
     - current page = soft highlight + small orange dot (right)
     - Early access = orange tinted row, text aligned with the
       others, dot on the right
     - plain dimmed backdrop (no blur / glow)
   ============================================================ */

.nav-toggle { display: none; }

@media (max-width: 900px) {

  .nav-inner { gap: 8px; }
  .nav .btn-primary { margin-left: auto; }

  /* ---------- backdrop behind the open menu ---------- */
  .nav::before {
    content: "";
    position: fixed; inset: 0; z-index: -1;
    background: rgba(0, 0, 0, .6);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s var(--ease), visibility 0s .25s;
  }
  .nav.open::before {
    opacity: 1; visibility: visible;
    transition: opacity .25s var(--ease), visibility 0s;
  }

  /* ---------- hamburger / close button (flat) ---------- */
  .nav-toggle {
    display: grid; place-items: center; flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    border: 0; padding: 0; margin: 0;
    -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    background: transparent;
    transition: background .2s var(--ease);
  }
  .nav-toggle span {
    grid-area: 1 / 1; display: block; width: 18px; height: 2px;
    border-radius: 2px; background: #fff;
    transition: transform .28s var(--ease), opacity .2s;
  }
  .nav-toggle span:nth-child(1) { transform: translateY(-6px); }
  .nav-toggle span:nth-child(3) { transform: translateY(6px); }
  .nav.open .nav-toggle span:nth-child(1) { transform: rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: rotate(-45deg); }

  .nav-toggle:active { background: rgba(255, 255, 255, .08); }
  .nav-toggle:focus { outline: none; }
  .nav-toggle:focus-visible { outline: 3px solid #4d63ff; outline-offset: 3px; }

  /* ---------- the raised neumorphic panel ---------- */
  .nav-links {
    --row-active-bg: #202027;
    --early-bg: rgba(255, 122, 26, .2);
    --early-ring: inset 0 0 0 1px rgba(255, 122, 26, .65);

    position: absolute; top: calc(100% + 14px); left: 0; right: 0;
    flex-direction: column; gap: 4px; padding: 10px; border-radius: 26px;
    background: linear-gradient(145deg, #151519 0%, #0c0c0f 100%);
    box-shadow:
      12px 12px 26px #000,
      -6px -6px 18px rgba(255, 255, 255, .05),
      0 0 40px var(--glow-soft),
      inset 0 1px 0 rgba(255, 255, 255, .09),
      inset 0 -1px 0 rgba(0, 0, 0, .6),
      0 0 0 1px rgba(255, 255, 255, .04);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98);
    transform-origin: top right; pointer-events: none;
    transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s .28s;
  }
  .nav.open .nav-links {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s;
  }

  /* ---------- flat rows ---------- */
  .nav-links a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; padding: 0 16px; border-radius: 14px;
    font-size: 1rem; font-weight: 500; letter-spacing: 0;
    color: rgba(214, 214, 226, .92);
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
  }

  /* icons are not used in the simplified menu */
  .nav-ico { display: none; }
  .nav-label { min-width: 0; }

  /* neutralise the desktop hover look (so taps never "stick") */
  .nav-links a:hover {
    color: rgba(214, 214, 226, .92);
    background: transparent;
    box-shadow: none;
  }

  /* current page: soft highlight + dot on the right */
  .nav-links a.active {
    color: #fff; font-weight: 600;
    background: var(--row-active-bg);
    box-shadow: none;
  }
  .nav-links a.active:hover { color: #fff; background: var(--row-active-bg); box-shadow: none; }

  /* the dot (current page + early access) */
  .nav-links a.active::after,
  .nav-links a.nav-early::after {
    content: "";
    position: static; left: auto; right: auto; top: auto; bottom: auto;
    flex: none;
    display: block;
    width: 6px; height: 6px; border: 0; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    transform: none; opacity: 1;
  }

  /* Early access: orange tinted row, same left edge as the others */
  .nav-links a.nav-early {
    padding: 0 16px;
    color: #fff; font-weight: 600;
    background: var(--early-bg);
    box-shadow: var(--early-ring);
  }
  .nav-links a.nav-early:hover {
    color: #fff;
    background: var(--early-bg);
    box-shadow: var(--early-ring);
  }
  .nav-links a.nav-early::before { display: none; }
  .nav-links a.nav-early.active::after { display: block; }
}

/* hover (mouse) on narrow desktop windows */
@media (max-width: 900px) and (hover: hover) {
  .nav-toggle:hover:not(:active) { background: rgba(255, 255, 255, .06); }
  .nav-links a:not(.active):not(.nav-early):not(.nav-cta-mobile):hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
  }
  .nav-links a.nav-early:hover {
    background: rgba(255, 122, 26, .28);
  }
}

/* pressed state (comes after the hover rules on purpose) */
@media (max-width: 900px) {
  .nav-links a:not(.active):not(.nav-early):not(.nav-cta-mobile):active {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    transform: scale(.985);
  }
  .nav-links a.nav-early:active {
    background: rgba(255, 122, 26, .3);
    transform: scale(.985);
  }
}

/* small phones: the header "Get the app" button is hidden, so the menu gets its own */
@media (max-width: 420px) {
  .nav .btn-sm { display: none; }
  .nav-toggle { margin-left: auto; }

  .nav-links a.nav-cta-mobile {
    display: flex; justify-content: center; text-align: center;
    margin-top: 6px;
    min-height: 48px; padding: 0 20px; border-radius: 14px;
    color: #1a0d05; font-weight: 600; letter-spacing: .1px;
    background: var(--accent);
    box-shadow: none;
  }
  .nav-links a.nav-cta-mobile::after { display: none; }
  .nav-links a.nav-cta-mobile:hover { color: #1a0d05; background: var(--accent); box-shadow: none; }
  .nav-links a.nav-cta-mobile:active {
    color: #1a0d05;
    transform: scale(.985);
    filter: brightness(.92);
  }
}

/* ============================================================
   5. FLOATING EARLY-ACCESS TAB  (right edge of the viewport)
   ------------------------------------------------------------
   Slides in from the right when the source .early-cta button
   (hero or closing) scrolls out of view — see script.js.

   > 700px : horizontal pill  (dot · Early access · →)
   <= 700px: slim vertical tab (dot on top, text reading top to
             bottom, no arrow)
   ============================================================ */
.early-float {
  position: fixed;
  right: 0;
  top: 50%;
  /* svh = the "small" viewport height. It does NOT change when the phone's
     address bar collapses / expands while scrolling, so the tab no longer
     slides up or down while you scroll fast. */
  top: 50svh;
  z-index: 45;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 18px;
  border-radius: 999px 0 0 999px;

  background:
    linear-gradient(180deg, rgba(255, 122, 26, .38), rgba(255, 122, 26, .14)),
    var(--surface);
  color: #fff;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  white-space: nowrap;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    -6px 6px 18px #000,
    0 0 26px rgba(255, 122, 26, .42),
    0 0 0 1px rgba(255, 122, 26, .6);

  transform: translate3d(100%, -50%, 0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform .45s cubic-bezier(.34, 1.4, .64, 1),
    opacity .3s ease,
    box-shadow .25s ease,
    padding-right .25s ease;
}

.early-float.is-visible {
  transform: translate3d(0, -50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.early-float:hover,
.early-float:focus-visible {
  padding-right: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    -8px 8px 22px #000,
    0 0 36px rgba(255, 122, 26, .6),
    0 0 0 1px rgba(255, 122, 26, .85);
}
.early-float:focus-visible {
  outline: 3px solid #4d63ff;
  outline-offset: 4px;
  border-radius: 999px 0 0 999px;
}

.early-float__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 14px rgba(255, 122, 26, .75);
  animation: early-float-pulse 1.8s ease-in-out infinite;
}

.early-float__arrow {
  display: inline-block;
  transition: transform .25s var(--ease);
}
.early-float:hover .early-float__arrow,
.early-float:focus-visible .early-float__arrow {
  transform: translateX(4px);
}

@keyframes early-float-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.55); opacity: .55; }
}

/* Phones: slim vertical tab.
   Dot on top → "Early access" reading top to bottom (E at the top,
   last s at the bottom). No arrow. */
@media (max-width: 700px) {
  .early-float {
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 38px;
    padding: 16px 0;
    border-radius: 14px 0 0 14px;
    font-size: .82rem;
  }
  .early-float__text {
    writing-mode: vertical-rl;
    letter-spacing: .4px;
  }
  .early-float__arrow { display: none; }
  .early-float__dot { width: 7px; height: 7px; }

  /* no widening on hover/tap, the tab stays slim */
  .early-float:hover,
  .early-float:focus-visible { padding-right: 0; }
  .early-float:focus-visible { border-radius: 14px 0 0 14px; }
}

/* ============ 6. REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .nav-links a.nav-early::before,
  .early-float__dot { animation: none; }
  .nav-links, .nav.open .nav-links, .nav-toggle span,
  .early-float, .early-float__arrow { transition: none; }
  .nav::before, .nav.open::before { transition: none; }
  .nav-links a { transition: none; }
}