/* css/nav.css */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  min-height: var(--nav-h);
  background: transparent;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-h);
}

.nav__logo {
  display: flex;
  align-items: center;
  position: relative;
}

.nav__logo-img {
  height: 68px;
  width: auto;
  transform: translate(14px, 18px);
  transition: opacity var(--dur-ui) var(--ease-soft);
}

/* Вторая версия лежит поверх первой и проявляется над светлыми
   секциями — класс is-light на .site-header ставит js/main.js. */
.nav__logo-img--light {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.site-header.is-light .nav__logo-img--dark { opacity: 0; }
.site-header.is-light .nav__logo-img--light { opacity: 1; }

.nav__list {
  display: none;
  align-items: center;
  gap: 32px;
}

.nav__list a {
  display: flex;
  align-items: center;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--c-white);
  transition: color var(--dur-ui) var(--ease-soft);
}

.nav__dot {
  width: 0;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  opacity: 0;
  margin-right: 0;
  transform: scale(0.4);
  transition: width var(--dur-ui) var(--ease-soft),
    opacity var(--dur-ui) var(--ease-soft),
    margin-right var(--dur-ui) var(--ease-soft),
    transform var(--dur-ui) var(--ease-soft);
}

.nav__list a:hover {
  color: var(--c-accent);
}

.nav__list a:hover .nav__dot {
  width: 6px;
  opacity: 1;
  margin-right: 8px;
  transform: scale(1);
}

.nav__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
}

.nav__burger span { display: block; height: 2px; background: var(--c-white); transition: background var(--dur-ui) var(--ease-soft); }

@media (min-width: 768px) {
  .nav__list { display: flex; }
  .nav__burger { display: none; }
}

/* Бургер вернулся вместо нижней навигации. */

.nav__burger span {
  transition: transform var(--dur-ui) var(--ease-soft),
    opacity var(--dur-ui) var(--ease-soft);
}

.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 24px) 20px calc(150px + env(safe-area-inset-bottom));
  background: var(--c-black);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease-soft),
    visibility 0s linear var(--dur-ui);
}

.nav__mobile.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-ui) var(--ease-soft);
}

.nav__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nav__mobile-list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--c-white);
  transition: color var(--dur-ui) var(--ease-soft),
    text-shadow var(--dur-ui) var(--ease-soft);
}

.nav__mobile-list .nav__dot {
  width: 0;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  opacity: 0;
  margin-right: 0;
  transition: width var(--dur-ui) var(--ease-soft),
    opacity var(--dur-ui) var(--ease-soft),
    margin-right var(--dur-ui) var(--ease-soft);
}

.nav__mobile-list a:active .nav__dot,
.nav__mobile-list a:focus-visible .nav__dot {
  width: 6px;
  opacity: 1;
  margin-right: 8px;
}

@media (min-width: 768px) {
  .nav__mobile { display: none; }
}

/* Соцсети внизу оверлея */
.nav__social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 28px;
}

.nav__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--dur-ui) var(--ease-soft);
}

.nav__social-link:active,
.nav__social-link:focus-visible {
  color: var(--c-accent-soft);
}

@media (min-width: 768px) {
  .nav__social { display: none; }
}

/* При открытом меню шапка должна быть НАД оверлеем, иначе крестик
   перекрыт и меню невозможно закрыть. */

.nav {
  position: relative;
  z-index: 51;
}

/* Над светлыми секциями меню перекрашивается в цвет росписи логотипа —
   класс is-light ставит js/main.js. */
.site-header.is-light .nav__list a {
  color: var(--c-ink);
}

.site-header.is-light .nav__list a:hover {
  color: var(--c-accent);
}

/* Бургер темнеет над светлыми секциями. При открытом меню фон чёрный —
   крестик всегда белый, иначе на светлой секции он бы пропал. */
.site-header.is-light .nav__burger span {
  background: var(--c-ink);
}

.site-header.is-menu-open .nav__burger span,
.site-header.is-light.is-menu-open .nav__burger span {
  background: var(--c-white);
}

.nav__mobile-list a:active,
.nav__mobile-list a:focus-visible {
  color: var(--c-logo-red);
  text-shadow: 0 0 24px rgba(226, 0, 15, 0.45);
}

/* Каскад появления пунктов при открытии меню */
.nav__mobile.is-open .nav__mobile-list li {
  animation: navItemIn 0.5s var(--ease-soft) both;
}

.nav__mobile.is-open .nav__mobile-list li:nth-child(1) { animation-delay: 0.06s; }
.nav__mobile.is-open .nav__mobile-list li:nth-child(2) { animation-delay: 0.10s; }
.nav__mobile.is-open .nav__mobile-list li:nth-child(3) { animation-delay: 0.14s; }
.nav__mobile.is-open .nav__mobile-list li:nth-child(4) { animation-delay: 0.18s; }
.nav__mobile.is-open .nav__mobile-list li:nth-child(5) { animation-delay: 0.22s; }
.nav__mobile.is-open .nav__mobile-list li:nth-child(6) { animation-delay: 0.26s; }
.nav__mobile.is-open .nav__mobile-list li:nth-child(7) { animation-delay: 0.30s; }
.nav__mobile.is-open .nav__mobile-list li:nth-child(8) { animation-delay: 0.34s; }

@keyframes navItemIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Мягкое свечение за списком, чтобы фон не был плоским */
.nav__mobile::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78vw;
  height: 78vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(226, 0, 15, 0.10), transparent 65%);
  pointer-events: none;
}

.nav__social {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 60%;
  left: 20%;
  right: 20%;
}

@media (prefers-reduced-motion: reduce) {
  .nav__mobile.is-open .nav__mobile-list li { animation: none; }
}