/* ============================================
   Project Section Nav — progress rail + section list
   ============================================ */

body.has-project-nav {
  --project-nav-rail-width: 2px;
  --project-nav-fill-width: 3px;
  --project-nav-rail-height: clamp(10rem, 22vh, 16rem);
  --project-nav-list-gap: var(--space-1);
  --project-nav-link-pad: var(--space-1);
  --project-nav-label-height: calc(
    var(--text-sm) * var(--leading-normal) + (var(--project-nav-link-pad) * 2)
  );
}

.project-nav {
  position: fixed;
  left: max(var(--space-3), calc((100vw - var(--max-width)) / 2 - 11rem));
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-3);
  height: var(--project-nav-rail-height);
  width: auto;
  pointer-events: auto;
  overflow: visible;
}

.project-nav__rail {
  position: relative;
  height: 100%;
  width: var(--project-nav-rail-width);
  flex-shrink: 0;
  pointer-events: none;
}

.project-nav__rail-track {
  position: absolute;
  inset: 0;
  width: var(--project-nav-rail-width);
  background-color: color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: 0;
}

/* Scrolly — progress rail fixed, vertically centered (label does not travel) */
body.has-project-nav:has(.project-scrolly) .project-nav {
  top: 50%;
  transform: translateY(-50%);
  height: var(--project-nav-rail-height);
}

body.has-project-nav:has(.project-scrolly) .project-nav__list-host {
  top: 50%;
  transition: none;
}

.project-nav__rail-fill {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--project-nav-fill-width);
  margin-left: calc(var(--project-nav-fill-width) / -2);
  height: 0%;
  background-color: var(--color-text-primary);
  border-radius: 0;
  transform-origin: top center;
  transition: height 0.35s var(--ease-entrance);
  will-change: height;
}

/* Anchor always on scroll progress — never jumps on hover */
.project-nav__list-host {
  position: absolute;
  left: calc(var(--project-nav-rail-width) + var(--space-3));
  top: var(--project-nav-progress, 0%);
  transform: translateY(-50%);
  width: max-content;
  min-height: var(--project-nav-label-height);
  overflow: visible;
  pointer-events: auto;
  transition: top 0.35s var(--ease-entrance);
}

.project-nav__current {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking);
  color: var(--color-text-primary);
  background: none;
  border: none;
  padding: var(--project-nav-link-pad) 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.project-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: var(--project-nav-list-gap);
  height: auto;
  will-change: transform;
}

.project-nav.is-expanded .project-nav__list {
  display: flex;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: transform 0.35s var(--ease-standard);
}

/* Active label fixed at anchor — list row keeps space but stays invisible */
.project-nav.is-expanded .project-nav__current {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
}

.project-nav__item {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.project-nav.is-expanded .project-nav__item.is-active {
  visibility: hidden;
}

.project-nav.is-expanded .project-nav__item.is-active .project-nav__link {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  filter: none;
}

.project-nav__link {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking);
  color: var(--color-mocha-3);
  background: none;
  border: none;
  padding: var(--project-nav-link-pad) 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  opacity: 0;
  filter: blur(0);
  transition:
    color 0.3s var(--ease-standard),
    opacity 0.3s var(--ease-standard),
    filter 0.3s var(--ease-standard);
}

/* Inactive: blur-fade once when menu opens */
.project-nav.is-expanded:not(.nav-inactive-revealed) .project-nav__item:not(.is-active) .project-nav__link {
  animation: projectNavInactiveReveal 0.36s var(--ease-standard) forwards;
}

.project-nav.is-expanded:not(.nav-inactive-revealed) .project-nav__item:not(.is-active):nth-child(1) .project-nav__link { animation-delay: 0ms; }
.project-nav.is-expanded:not(.nav-inactive-revealed) .project-nav__item:not(.is-active):nth-child(2) .project-nav__link { animation-delay: 30ms; }
.project-nav.is-expanded:not(.nav-inactive-revealed) .project-nav__item:not(.is-active):nth-child(3) .project-nav__link { animation-delay: 60ms; }
.project-nav.is-expanded:not(.nav-inactive-revealed) .project-nav__item:not(.is-active):nth-child(4) .project-nav__link { animation-delay: 90ms; }
.project-nav.is-expanded:not(.nav-inactive-revealed) .project-nav__item:not(.is-active):nth-child(5) .project-nav__link { animation-delay: 120ms; }
.project-nav.is-expanded:not(.nav-inactive-revealed) .project-nav__item:not(.is-active):nth-child(6) .project-nav__link { animation-delay: 150ms; }
.project-nav.is-expanded:not(.nav-inactive-revealed) .project-nav__item:not(.is-active):nth-child(7) .project-nav__link { animation-delay: 180ms; }
.project-nav.is-expanded:not(.nav-inactive-revealed) .project-nav__item:not(.is-active):nth-child(8) .project-nav__link { animation-delay: 210ms; }

.project-nav.is-expanded.nav-inactive-revealed .project-nav__item:not(.is-active) .project-nav__link {
  opacity: 0.42;
  filter: blur(0);
}

.project-nav.is-expanded .project-nav__item:not(.is-active) .project-nav__link:hover,
.project-nav.is-expanded .project-nav__item:not(.is-active) .project-nav__link:focus-visible {
  color: var(--color-mocha-4);
  opacity: 0.65;
  filter: blur(0);
}

@keyframes projectNavInactiveReveal {
  0% {
    opacity: 0;
    filter: blur(0);
  }
  45% {
    opacity: 0.3;
    filter: blur(var(--blur-sm));
  }
  100% {
    opacity: 0.42;
    filter: blur(0);
  }
}

.project-nav__current.is-changing {
  animation: projectNavBlurFade 0.36s var(--ease-standard);
}

@keyframes projectNavBlurFade {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  45% {
    opacity: 0.35;
    filter: blur(var(--blur-sm));
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@media (max-width: 1280px) {
  .project-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-nav__current.is-changing,
  .project-nav.is-expanded:not(.nav-inactive-revealed) .project-nav__item:not(.is-active) .project-nav__link,
  .project-nav.is-expanded.nav-inactive-revealed .project-nav__item:not(.is-active) .project-nav__link {
    animation: none;
  }

  .project-nav.is-expanded.nav-inactive-revealed .project-nav__item:not(.is-active) .project-nav__link {
    opacity: 0.42;
    filter: none;
  }

  .project-nav__rail-fill,
  .project-nav__list-host,
  .project-nav__list,
  .project-nav__link {
    transition: none;
  }
}