/* ligo-app-shell.css — reusable bottom-nav + swipeable-sections shell.
   First instance: Off Shift Stays (sites/offshiftstays). Tokens consume the
   page's :root vars so each host can re-skin without forking this file. */

.shell { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--navy, #0a0e1a); color: var(--cream, #f5f5f5); overflow: hidden; }
.shell__viewport { flex: 1 1 auto; position: relative; overflow: hidden; -webkit-overflow-scrolling: touch; }
.shell__track {
  display: flex; height: 100%;
  transition: transform 360ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.shell__track.is-dragging { transition: none; }
.shell__section {
  flex: 0 0 100%; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 96px; /* clear bottom nav */
  scrollbar-width: thin;
}
.shell__section::-webkit-scrollbar { width: 6px; }
.shell__section::-webkit-scrollbar-thumb { background: rgba(255,193,7,0.2); border-radius: 3px; }

/* Bottom nav */
/* `top: auto` + `align-items: start` are defensive overrides: several host
   pages (ligolaunch-home, pricing, investors, …) carry a legacy bare-element
   `nav { position: sticky; top: 0; align-items: center; … }` rule from their
   pre-shell layout. Without these resets that `top: 0` combines with our
   `bottom: 0` to stretch the bottom nav to the full viewport height — which
   blanks the page above and centers the nav buttons mid-screen. */
.shell__nav {
  position: absolute; top: auto; bottom: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: start; justify-items: stretch;
  background: rgba(10,14,26,0.88);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,193,7,0.22);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  gap: 2px;
}
.shell__navbtn {
  appearance: none; background: transparent; border: 0; color: rgba(245,245,245,0.62);
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px; border-radius: 10px; cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
  position: relative;
}
.shell__navbtn:active { transform: scale(0.94); }
.shell__navbtn .ico { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; stroke-width: 1.8; }
.shell__navbtn.is-active { color: var(--gold, #ffc107); }
.shell__navbtn.is-active::after {
  content: ""; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 2px; background: var(--gold, #ffc107);
  box-shadow: 0 0 12px rgba(255,193,7,0.5);
}

/* Brand bar (top) — slim, sticky inside the section so scrolling looks app-like */
.shell__brand {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(10,14,26,0.96) 60%, rgba(10,14,26,0));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.shell__brand-name { font-weight: 800; letter-spacing: 0.04em; color: var(--cream, #f5f5f5); font-size: 15px; }
.shell__brand-name em { font-style: normal; color: var(--gold, #ffc107); }
.shell__brand-tag { font-size: 11px; color: rgba(245,245,245,0.6); font-weight: 500; }

/* Toast */
.shell__toast-wrap { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 60; }
.shell__toast {
  background: rgba(10,14,26,0.95); color: var(--cream, #f5f5f5);
  border: 1px solid rgba(255,193,7,0.4); border-radius: 999px;
  padding: 10px 18px; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transform: translateY(20px); opacity: 0; transition: transform 240ms ease, opacity 240ms ease;
  pointer-events: auto; max-width: 88vw;
}
.shell__toast.is-shown { transform: translateY(0); opacity: 1; }

/* Scroll-reveal helper — JS adds .is-revealed when in view */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; }
.reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* Lock body when in shell mode */
html.shell-mode, html.shell-mode body { height: 100%; overflow: hidden; }

/* === Scroll affordances (2026-05-26) ============================
   David flagged: bottom tab bar advertises sideways navigation, but nothing
   hinted at vertical content. Two cues:
     A. Peek — cap the FIRST content block per section so the next block's
        top edge peeks ~56px above the tab bar on first paint.
     B. Chevron — a gentle bobbing arrow above the tab bar that fades out
        on first scroll (mounted by ligo-app-shell.js).
   Hosts can tune with --shell-tabbar-h and --shell-peek-h on :root or .shell. */
.shell { --shell-tabbar-h: 96px; --shell-peek-h: 56px; }

/* Peek: heroes that set min-height: 100vh / 100svh artificially fill the
   viewport, hiding the content below the fold. We nuke the floor so the
   hero collapses to its natural content height — the next block then has
   room to peek above the bottom tab bar. Uses !important because the
   filler min-height is usually set directly on .hero. */
.shell__section > section:first-of-type:not(.shell__brand),
.shell__section > .shell__brand + section,
.shell__section > .shell__brand + .hero,
.shell__section > .hero:first-of-type {
  min-height: 0 !important;
}

/* Chevron */
.shell__scrollcue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--shell-tabbar-h) + env(safe-area-inset-bottom, 0px) + 4px);
  transform: translate(-50%, 0);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold, #ffc107);
  opacity: 0.6;
  pointer-events: none;
  z-index: 45;
  animation: shell-scrollcue-bob 1.5s ease-in-out infinite;
  transition: opacity 360ms ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.shell__scrollcue svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shell__scrollcue.is-hidden { opacity: 0; }
@keyframes shell-scrollcue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 3px); }
}
@media (prefers-reduced-motion: reduce) {
  .shell__scrollcue { animation: none; }
}