/* ============================================================
   Sticky nav pill — appears after the original Framer nav
   scrolls past the viewport top. Floats centered at the top
   with glass treatment, morphs in smoothly.

   Motion rules:
   - GPU-only (transform + opacity + filter:blur)
   - Custom ease-out cubic-bezier (stronger than CSS default)
   - Asymmetric enter (240ms) / exit (180ms)
   - transform-origin: top center (morphs from where the original nav was)
   - scale starts at 0.96, never 0
   - blur(2px) during transit masks the visual swap
   - prefers-reduced-motion: opacity only
   - hover gated to fine pointer
   ============================================================ */

:root {
  --snav-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

.snav {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px 6px 6px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    0 0.5px 0 rgba(255, 255, 255, 0.7) inset,
    0 -0.5px 0 rgba(0, 0, 0, 0.05) inset,
    0 8px 24px -12px rgba(0, 0, 0, 0.18),
    0 2px 6px -3px rgba(0, 0, 0, 0.08);
  /* Hidden state */
  opacity: 0;
  transform: translate3d(-50%, -10px, 0) scale(0.96);
  filter: blur(2px);
  pointer-events: none;
  transform-origin: top center;
  /* Exit transition (180ms, snappy) */
  transition:
    opacity 180ms var(--snav-ease),
    transform 180ms var(--snav-ease),
    filter 180ms var(--snav-ease);
}

.snav[data-visible="1"] {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
  filter: blur(0);
  pointer-events: auto;
  /* Enter transition (240ms, more presence) */
  transition:
    opacity 240ms var(--snav-ease),
    transform 240ms var(--snav-ease),
    filter 240ms var(--snav-ease);
}

/* Subtle top sheen on the pill itself (glass craft) */
.snav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0) 45%
  );
  mix-blend-mode: overlay;
  opacity: 0.9;
}

/* Logo button */
.snav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #1a1a1a;
  text-decoration: none;
  transition: background-color 160ms var(--snav-ease),
              transform 140ms var(--snav-ease);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.snav-logo svg {
  width: 30px;
  height: 30px;
  display: block;
}
.snav-logo:active { transform: scale(0.94); }

/* Vertical divider after the logo */
.snav-sep {
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

/* Nav links */
.snav-link {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: "Space Grotesk", "Space Grotesk Placeholder", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(0, 0, 0, 0.62);
  text-decoration: none;
  background: transparent;
  position: relative;
  z-index: 1;
  transition:
    color 160ms var(--snav-ease),
    background-color 160ms var(--snav-ease),
    transform 140ms var(--snav-ease);
  white-space: nowrap;
}
.snav-link[aria-current="page"] {
  color: #e8503a;
  font-weight: 700;
}
.snav-link:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .snav-logo:hover { background-color: rgba(0, 0, 0, 0.04); }
  .snav-link:hover { background-color: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 1); }
}

/* Hide on small screens — the original nav still works on mobile */
@media (max-width: 720px) {
  .snav { display: none !important; }
}

/* Reduced motion: opacity-only, no transform, no blur */
@media (prefers-reduced-motion: reduce) {
  .snav {
    transform: translate3d(-50%, 0, 0);
    filter: none;
    transition: opacity 160ms linear;
  }
  .snav[data-visible="1"] {
    transform: translate3d(-50%, 0, 0);
    filter: none;
    transition: opacity 160ms linear;
  }
}