/* ============================================================
   drops.st — nav.css
   Right-side drawer nav for funnel pages.

   ID selectors (#siteNav, #navBackdrop) are used deliberately
   to beat landing.css's class-level .site-nav rules, which set
   display:none and a fullscreen overlay on .is-open.
   ============================================================ */

/* ── hamburger button ─────────────────────────────────────── */
.nav-hamburger {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 300;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink, #0b0b0b);
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  transition: opacity 150ms, transform 150ms;
  -webkit-tap-highlight-color: transparent;
}
.nav-hamburger:hover  { opacity: 0.75; }
.nav-hamburger:active { transform: scale(0.92); }

/* icon swap via aria-expanded */
.nav-hamburger .icon-open  { display: block; }
.nav-hamburger .icon-close { display: none; }
.nav-hamburger[aria-expanded="true"] .icon-open  { display: none; }
.nav-hamburger[aria-expanded="true"] .icon-close { display: block; }

/* ── backdrop ─────────────────────────────────────────────── */
#navBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 250;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
#navBackdrop:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
#navBackdrop[hidden] { display: none; }

/* ── drawer panel ─────────────────────────────────────────── */
#siteNav {
  /* ID beats landing.css's .site-nav { display:none } and fullscreen override */
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;         /* defeat landing.css left:0 */
  bottom: 0 !important;
  width: min(300px, 82vw) !important;
  background: #0f0f0f;
  z-index: 260;
  padding: 0;
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.55);
  overscroll-behavior: contain;
  /* Closed: off-screen right */
  transform: translateX(105%) !important;
  visibility: hidden;
  transition:
    transform 300ms cubic-bezier(0.32, 0, 0.67, 0),
    visibility 0ms linear 300ms;
  /* smooth open */
  will-change: transform;
}
#siteNav.is-open {
  transform: translateX(0) !important;
  visibility: visible;
  transition:
    transform 340ms cubic-bezier(0.33, 1, 0.68, 1),
    visibility 0ms linear 0ms;
}

/* ── close button ─────────────────────────────────────────── */
.site-nav__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 150ms, color 150ms;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}
.site-nav__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ── nav links list ───────────────────────────────────────── */
.site-nav__links {
  list-style: none;
  padding: 72px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.site-nav__link {
  display: flex;
  align-items: center;
  padding: 0 28px;
  min-height: 64px;          /* thumb-friendly tap target */
  font-size: clamp(20px, 4.5vw, 26px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 120ms, background 120ms,
              opacity 320ms ease, transform 320ms ease;
  /* entrance: each link slides in */
  opacity: 0;
  transform: translateX(18px);
}
.site-nav__links li:last-child .site-nav__link { border-bottom: none; }
.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}
.site-nav__link:active { background: rgba(255, 255, 255, 0.1); }

/* Active page: accent dot instead of bar */
.site-nav__link.is-active {
  color: #fff;
}
.site-nav__link.is-active::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(229, 71, 42, 1);   /* drops accent red */
  margin-left: 10px;
  flex-shrink: 0;
}

/* Staggered entrance — links animate in when panel opens */
#siteNav.is-open .site-nav__link {
  opacity: 1;
  transform: translateX(0);
}
#siteNav.is-open .site-nav__links li:nth-child(1) .site-nav__link { transition-delay: 80ms; }
#siteNav.is-open .site-nav__links li:nth-child(2) .site-nav__link { transition-delay: 140ms; }
#siteNav.is-open .site-nav__links li:nth-child(3) .site-nav__link { transition-delay: 200ms; }

/* ── drawer footer ────────────────────────────────────────── */
.site-nav__footer {
  padding: 20px 28px max(env(safe-area-inset-bottom), 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
}

/* ── logo — nav drawer footer ─────────────────────────────── */
.nav-logo {
  display: block;
  width: 90px;
  height: auto;
  opacity: 0.55;
  transition: opacity 180ms;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
.site-nav__footer:hover .nav-logo { opacity: 0.85; }

/* ── logo — homepage hook slide ────────────────────────────── */
.home-logo {
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
}
.site-logo {
  display: block;
  width: clamp(200px, 54vw, 280px);
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.55));
  transition: transform 220ms ease, filter 220ms ease;
}
.home-logo a:hover .site-logo,
.home-logo a:focus-visible .site-logo {
  transform: scale(1.03);
  filter: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.7));
  outline: none;
}
@media (min-width: 768px) {
  .site-logo { width: clamp(260px, 22vw, 340px); }
}

/* ── body scroll lock ─────────────────────────────────────── */
body.menu-open { overflow: hidden; }