/* ═══════════════════════════════════════════════════════════════════════════
   misa.lol landing · navigation
   ───────────────────────────────────────────────────────────────────────────
   Landing-only styling of the shared header. navigation.css (shared with the
   inner pages) loads first and keeps the structure, colours and the TOS
   dropdown; this file turns the bar into the floating pill, adds the
   hide-on-scroll state that landing/nav.js drives, the phone menu that the
   shared mobile-header.js toggles, and the fixed scroll-progress bar.

   Selectors keep the `.landing-atmosphere` prefix so they outrank the shared
   rules by specificity, not only by load order. The pill's background stays
   at (0,2,0) so render-mode's `html.gpu-lite .site-nav` (0,2,1) still wins on
   software renderers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll progress ── */

/* Fixed 2px bar; nav.js scales it on the compositor (transform only). */
.progress {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  z-index: 80;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--crimson), #ff6a8a);
  transform: scaleX(0) translateZ(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

/* ── Persistent Top Navigation Bar (Consistent with all public pages) ── */

/* Hide during homepage door opening cover */
body:has(#cover) .site-nav,
body.intro .site-nav,
body:has(#cover) .misa-mobile-dock,
body.intro .misa-mobile-dock,
#cover ~ .site-nav,
#cover ~ .misa-mobile-dock {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-20px) !important;
}

.site-nav,
.misa-mobile-dock {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s !important;
}

.landing-atmosphere .site-nav--pill {
  position: sticky;
  top: 0;
  width: 100%;
  min-height: 70px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 48px);
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none;
  z-index: 70;
}

.landing-atmosphere .site-nav--pill .site-nav__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1540px;
  margin-inline: auto;
  padding: 0;
}

/* 1. Brand Logo directly on page */
.landing-atmosphere .site-nav--pill .site-nav__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(23px, 1.8vw, 29px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.landing-atmosphere .site-nav--pill .site-nav__brand:hover {
  opacity: 0.92;
}

.landing-atmosphere .site-nav--pill .site-nav__mark {
  width: 22px;
  height: 36px;
  fill: #f00646;
  filter: drop-shadow(0 0 10px rgba(240, 6, 70, 0.65));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

.landing-atmosphere .site-nav--pill .site-nav__brand:hover .site-nav__mark {
  transform: rotate(-12deg) translateY(-2px) scale(1.08);
  filter: drop-shadow(0 0 16px rgba(240, 6, 70, 0.9));
}

/* 2. Floating Centered Pill Menu */
.landing-atmosphere .site-nav--pill .site-nav__links {
  justify-self: center;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 9999px;
  background: rgba(14, 12, 18, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  gap: 0;
  z-index: 10;
}

.landing-atmosphere .site-nav--pill .site-nav__links > a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  line-height: 1;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #a49f98;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}

.landing-atmosphere .site-nav--pill .site-nav__links > a:hover,
.landing-atmosphere .site-nav--pill .site-nav__links > a[aria-current="page"],
.landing-atmosphere .site-nav--pill .site-nav__links > a.is-active {
  color: #ffffff;
}

.landing-atmosphere .site-nav--pill .site-nav__links > a::after {
  display: none !important;
}

/* Sliding active pill indicator */
.nav-pill-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  height: 34px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
  will-change: transform, width, opacity;
  z-index: 1;
}

/* 3. Action Buttons */
.landing-atmosphere .site-nav--pill .site-nav__cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  z-index: 20;
}

.landing-atmosphere .site-nav--pill .site-nav__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: #a49f98;
  border-radius: 9999px;
  transition: color 0.2s ease, background 0.2s ease;
  text-decoration: none;
}

.landing-atmosphere .site-nav--pill .site-nav__login:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.landing-atmosphere .site-nav--pill .site-nav__signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #f00646 0%, #ff2d6c 100%);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(240, 6, 70, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.landing-atmosphere .site-nav--pill .site-nav__signup:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(240, 6, 70, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  filter: brightness(1.06);
}


/* ── Hidden while scrolling down (nav.js toggles .hide) ── */

.landing-atmosphere .site-nav--pill.hide {
  transform: translateY(calc(-100% - env(safe-area-inset-top, 0px) - 32px));
  pointer-events: none;
}

/* Keyboard focus, the open phone menu and the open TOS dropdown keep it on screen. */
.landing-atmosphere .site-nav--pill:focus-within,
.landing-atmosphere .site-nav--pill.mobile-menu-open,
.landing-atmosphere .site-nav--pill.nav-details-open {
  transform: none;
  pointer-events: auto;
}

/* ── Phone controls (hidden until the breakpoints below show them) ── */

.mobile-dashboard,
.mobile-menu-toggle {
  display: none;
}

.landing-atmosphere .site-nav--pill .site-nav__links > .mobile-nav-dashboard {
  display: none;
}

/* ── Short desktop viewports ── */

/* Below 1051px the phone header's margin:0 wins, so the old min-width:601px range is effectively this one. */
@media (min-width: 1051px) and (max-height: 500px) {
  .landing-atmosphere .site-nav--pill {
    margin-block: 6px;
  }
}

/* ── ≤1099px: links tighten one step before the phone header takes over ── */

@media (max-width: 1099px) {
  .landing-atmosphere .site-nav--pill .site-nav__links > a,
  .landing-atmosphere .site-nav--pill .site-nav__tos > summary {
    min-height: 36px;
    padding-block: 6px;
  }
}

/* ── Immediate zero-flicker CSS active pill fallback on homepage ── */
.landing-atmosphere .site-nav--pill .site-nav__links:not(.is-ready):not(:hover) a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.landing-atmosphere .site-nav--pill .site-nav__links:hover a[aria-current="page"]:not(:hover),
.landing-atmosphere .site-nav--pill .site-nav__links.is-ready a[aria-current="page"] {
  background: transparent !important;
  box-shadow: none !important;
}
.landing-atmosphere .site-nav--pill .site-nav__links:hover a[aria-current="page"]:not(:hover) {
  color: #a49f98;
}

/* ── Mobile Top Header (Clean Borderless Bar with Logo + Compact Sign In & Claim Button) ── */
@media (max-width: 880px) {
  :root { --nav-h: 56px; }
  body {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 82px) !important;
  }
  .landing-atmosphere .site-nav--pill,
  .landing-atmosphere .site-nav--pill.hide {
    position: sticky !important;
    top: env(safe-area-inset-top, 0px) !important;
    min-height: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .landing-atmosphere .site-nav--pill .site-nav__in {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 8px !important;
  }
  .landing-atmosphere .site-nav--pill .site-nav__brand {
    font-size: 20px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .landing-atmosphere .site-nav--pill .site-nav__links {
    display: none !important;
  }
  .landing-atmosphere .site-nav--pill .site-nav__cta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .landing-atmosphere .site-nav--pill .site-nav__login {
    display: inline-flex !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9999px !important;
    color: #eee8e2 !important;
  }
  .landing-atmosphere .site-nav--pill .site-nav__signup {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #f00646 0%, #ff2d6c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(240, 6, 70, 0.4) !important;
    white-space: nowrap !important;
  }
  .mobile-menu-toggle,
  .mobile-dashboard,
  .site-nav__tos {
    display: none !important;
  }
}

/* ── Floating Mobile Dock (4-Item Equal Grid Navigation Capsule) ── */
.misa-mobile-dock {
  display: none;
}

@media (max-width: 880px) {
  .misa-mobile-dock svg,
  .misa-mobile-dock__item svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    display: block !important;
    flex: none !important;
  }
  .misa-mobile-dock {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    position: fixed !important;
    bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    left: 0 !important;
    right: 0 !important;
    margin-inline: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    width: min(calc(100vw - 32px), 310px) !important;
    max-width: calc(100vw - 32px) !important;
    height: 56px !important;
    border-radius: 9999px !important;
    background: rgba(14, 12, 18, 0.90) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.85), 
                0 0 0 1px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    z-index: 9999999 !important;
    padding: 5px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }
}

.mobile-dock-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
  will-change: transform, width, opacity;
  z-index: 1;
}

.misa-mobile-dock:not(.dock-indicator-visible) .misa-mobile-dock__item.is-active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}

.misa-mobile-dock__item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  border-radius: 9999px;
  text-decoration: none;
  color: #8e8882;
  transition: color 0.18s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  margin: 0;
}

.misa-mobile-dock__item svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.18s ease, transform 0.18s ease;
}

.misa-mobile-dock__item .misa-mobile-dock__label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color 0.18s ease;
}

.misa-mobile-dock__item:hover,
.misa-mobile-dock__item:focus-visible,
.misa-mobile-dock__item.is-active {
  color: #ffffff;
}

.misa-mobile-dock__item.is-active svg {
  stroke: #ffffff;
  transform: scale(1.06);
}

.misa-mobile-dock__item.is-active .misa-mobile-dock__label {
  color: #ffffff;
}

.misa-mobile-dock__item.is-active::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav *, .misa-mobile-dock, .misa-mobile-dock * {
    transition: none !important;
  }
}