/*
 * pill-nav.css — Phase 3, glassmorphic floating navigation (Commit 3).
 *
 * Архитектура:
 *   - .pill-nav  — фиксирована снизу-по-центру, glass-blur background.
 *   - <ul> внутри — flex row, position:relative для будущего .pill-indicator
 *     (Commit 4 — morphing indicator под активным item'ом).
 *   - <a>      — pills, padding + border-radius + hover/active states.
 *   - .pill-cta — primary CTA "Связаться", акцентный фон.
 *
 * Scroll-driven swap (toggled by scripts/pill-nav.js):
 *   - body БЕЗ .nav-pill-active   (scrollY < 100): header виден, pill-nav скрыт.
 *   - body С    .nav-pill-active  (scrollY >= 100): header скрыт, pill-nav виден.
 *
 * visibility: hidden — убирает скрытый элемент из tab-order (a11y).
 * Transitions с visibility-задержкой избегают мерцания при swap.
 *
 * Backdrop-filter fallback (Firefox старые версии, embedded WebViews):
 *   @supports not (backdrop-filter) → background плотный, без blur.
 *
 * Mobile (Q1=A, full-width pill с progressive compaction):
 *   ≥768px: padding 8px,  item 8px 16px, font 14px, "Связаться"
 *   480-767: padding 6px,  item 6px 12px, font 13px, "Связаться"
 *   <480px:  padding 4px,  item 5px 10px, font 12px, "Контакт" (CSS swap)
 *   <360px:  CTA становится border-only (background:transparent), чтобы вписать.
 *
 * Hover states только на (hover: hover); на touch — :active flash 100ms.
 *
 * Pending Commit 4:
 *   .pill-indicator (morphing background под активным item)
 *   .is-active / aria-current на <a> по IntersectionObserver
 *   focus-visible ring (наследуется из tokens.css globally)
 */

/* ========== Header swap (скрываем при scrollY >= 100) ========== */

header {
  transition: transform 300ms var(--ease-brand),
              opacity   300ms var(--ease-brand),
              visibility 0s linear 0s;
}

body.nav-pill-active header {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  /* visibility-задержка = duration: visually fade out THEN remove from tab-order */
  transition: transform 300ms var(--ease-brand),
              opacity   300ms var(--ease-brand),
              visibility 0s linear 300ms;
}

/* ========== Pill-nav контейнер ========== */

.pill-nav {
  position: fixed;
  bottom: 24px;
  left: 50%;
  /* Initial: ниже viewport, прозрачный, вне tab-order */
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
  visibility: hidden;

  z-index: var(--z-nav);
  padding: 8px;

  background: rgba(15, 15, 23, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(108, 92, 231, 0.2);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 1px 0 rgba(255, 255, 255, 0.05) inset;

  transition: transform 300ms var(--ease-brand),
              opacity   300ms var(--ease-brand),
              visibility 0s linear 300ms;

  /* На очень узких — не выпадаем за края viewport */
  max-width: calc(100vw - 24px);
}

body.nav-pill-active .pill-nav {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 300ms var(--ease-brand),
              opacity   300ms var(--ease-brand),
              visibility 0s linear 0s;
}

/* Backdrop-filter fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pill-nav {
    background: rgba(15, 15, 23, 0.92);
  }
}

/* ========== UL / LI (flex row) ========== */

.pill-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  position: relative;  /* anchor для .pill-indicator (Commit 4) */
}

.pill-nav li {
  display: inline-block;
}

/* ========== Item (<a>) ========== */

.pill-nav a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--r-pill);

  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;

  position: relative;
  z-index: 1;  /* поверх .pill-indicator (Commit 4) */

  transition: background 200ms var(--ease-brand),
              color      200ms var(--ease-brand);
}

/* Hover — только на устройствах с реальным hover (desktop) */
@media (hover: hover) {
  .pill-nav a:not(.pill-cta):hover {
    background: rgba(255, 255, 255, 0.05);
  }
}

/* Active (touch-feedback) — flash 100ms */
.pill-nav a:not(.pill-cta):active {
  background: rgba(255, 255, 255, 0.10);
  transition-duration: 100ms;
}

/* ========== Morphing indicator (Commit 4) ==========
 * JS пишет inline left/width/height/opacity при смене активной секции.
 * Sits под item-text (item z-index 1, indicator z-index 0).
 * CTA (.pill-cta) не получает индикатор — у неё свой solid background.
 */
.pill-indicator {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  border-radius: var(--r-pill);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  /* Initial transform — translateX(0); JS обновляет на init и при смене active */
  transform: translateX(0);
  transition: transform 400ms var(--ease-brand),
              width     400ms var(--ease-brand),
              height    400ms var(--ease-brand),
              opacity   200ms var(--ease-brand);
  will-change: transform, width;
}

/* Reduce motion — instant swap без анимации morphing */
@media (prefers-reduced-motion: reduce) {
  .pill-indicator {
    transition: opacity 1ms linear !important;
  }
}

/* Primary CTA */
.pill-nav a.pill-cta {
  background: var(--accent);
  color: var(--on-accent);
}

@media (hover: hover) {
  .pill-nav a.pill-cta:hover {
    background: var(--accent-hover);
  }
}

/* ========== Adaptive label на CTA (Q1=A compaction) ========== */

.pill-cta__short { display: none; }
.pill-cta__full  { display: inline; }

@media (max-width: 479px) {
  .pill-cta__full  { display: none; }
  .pill-cta__short { display: inline; }
}

/* ========== Mobile compaction ========== */

@media (max-width: 767px) {
  .pill-nav {
    bottom: 16px;
    padding: 6px;
  }
  .pill-nav a {
    padding: 6px 12px;
    font-size: 13px;
  }
}

@media (max-width: 479px) {
  .pill-nav {
    padding: 4px;
  }
  .pill-nav a {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* На очень узких — CTA теряет background, остаётся border-only */
@media (max-width: 359px) {
  .pill-nav a.pill-cta {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
  }
  @media (hover: hover) {
    .pill-nav a.pill-cta:hover {
      background: var(--accent-soft);
    }
  }
}

/* ========== Reduce motion: snap без slide-in/out ========== */

@media (prefers-reduced-motion: reduce) {
  header,
  body.nav-pill-active header,
  .pill-nav,
  body.nav-pill-active .pill-nav {
    transition: opacity 1ms linear,
                visibility 0s linear 0s;
  }
  /* Убираем translateY (slide), сохраняем translateX(-50%) для центровки */
  body.nav-pill-active .pill-nav {
    transform: translateX(-50%);
  }
  .pill-nav {
    transform: translateX(-50%);
  }
  body.nav-pill-active header {
    /* header снимаем через opacity+visibility, transform не используем */
    transform: none;
  }
}