/* Lumos floating navbar scroll-safety layer.
   Keeps the premium floating shape while preventing bright page sections
   from visually bleeding through or colliding with the fixed navigation. */

#hero,
#live-preview,
#growth-story,
#contact,
#faq {
  scroll-margin-top: 7rem;
}

nav[data-growth-story-hidden="false"]:has(.navbar-shimmer) {
  isolation: isolate;
}

nav[data-growth-story-hidden="false"]:has(.navbar-shimmer)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 5.75rem;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    hsl(var(--background)) 0%,
    hsl(var(--background) / 0.985) 54%,
    hsl(var(--background) / 0.78) 74%,
    transparent 100%
  );
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

nav[data-growth-story-hidden="false"]:has(.navbar-shimmer) > div {
  position: relative;
  z-index: 1;
}

/* The floating card itself stays visually solid. The glass feeling comes from
   the border, glow and internal controls rather than showing page content
   through the navigation surface. */
nav[data-growth-story-hidden="false"]:has(.navbar-shimmer) > div > div > div:last-child {
  overflow: hidden;
  background: hsl(var(--background)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    0 18px 52px rgba(2, 6, 23, 0.16),
    0 1px 0 hsl(var(--foreground) / 0.035) inset !important;
}

html[data-theme="dark"] nav[data-growth-story-hidden="false"]:has(.navbar-shimmer) > div > div > div:last-child {
  box-shadow:
    0 14px 52px rgba(0, 0, 0, 0.52),
    0 1px 0 rgba(255, 255, 255, 0.035) inset !important;
}

@media (min-width: 640px) {
  nav[data-growth-story-hidden="false"]:has(.navbar-shimmer)::before {
    height: 6.5rem;
  }
}

@media (max-width: 639px) {
  #hero,
  #live-preview,
  #growth-story,
  #contact,
  #faq {
    scroll-margin-top: 5.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  nav[data-growth-story-hidden="false"]:has(.navbar-shimmer)::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}