/* Mountain nav. Renders the full four-peak scape as a navigation
   element on practice and routine detail pages. Each peak is a
   link back to the home page filtered to that category.

   Visual language mirrors the home-page scape's selection state:
   - Base (no current peak): peaks at original size, per-peak baseline opacity.
   - Selected (one or more peaks current): non-current peaks squash short,
     current peak(s) stretch tall and become fully opaque.
   Mountain-nav is only used on pages with a current category, so the
   selection state is the normal case, but the :has() gate keeps the
   base state available as a clean fallback. */

.mountain-nav { margin: 0 0 var(--space-5); }

.mountain-nav__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mountain-nav .peak {
  transition: transform 1.0s cubic-bezier(0.4, 0, 0.2, 1);
  transform-box: view-box;
}

.mountain-nav .peak path {
  transition: fill-opacity 0.5s ease;
}

/* Baseline fills + per-peak opacity, matching the home-page scape. */
.mountain-nav .peak-quiet path { fill: var(--tag-quiet-bg); fill-opacity: 0.62; }
.mountain-nav .peak-active path { fill: var(--tag-active-bg); fill-opacity: 0.72; }
.mountain-nav .peak-body-intense path { fill: var(--tag-body-bg); fill-opacity: 0.82; }
.mountain-nav .peak-tender path { fill: var(--tag-tender-bg); fill-opacity: 0.9; }

/* Transform origins anchored to the baseline so peaks scale upward. */
.mountain-nav .peak-quiet { transform-origin: 220px 300px; }
.mountain-nav .peak-active { transform-origin: 420px 300px; }
.mountain-nav .peak-body-intense { transform-origin: 600px 300px; }
.mountain-nav .peak-tender { transform-origin: 770px 300px; }

/* Selection state — same scale + opacity language as the home-page scape. */
.mountain-nav:has(.peak.current) .peak { transform: scale(0.95, 0.62); }
.mountain-nav:has(.peak.current) .peak.current { transform: scale(1, 1.9); }
.mountain-nav:has(.peak.current) .peak.current path { fill-opacity: 1; }
/* Active is the tallest baseline; reduce its selected scale to fit. */
.mountain-nav:has(.peak.current) .peak-active.current { transform: scale(1, 1.4); }

/* Hover lifts a non-current peak to full opacity so it reads as clickable. */
.mountain-nav a:hover .peak path { fill-opacity: 1; }

.mountain-nav a:focus { outline: none; }
.mountain-nav a:focus-visible .peak path {
  stroke: var(--color-highlight);
  stroke-width: 2.5;
  stroke-opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mountain-nav .peak,
  .mountain-nav .peak path {
    transition-duration: 0.15s;
  }
  .mountain-nav:has(.peak.current) .peak,
  .mountain-nav:has(.peak.current) .peak.current,
  .mountain-nav:has(.peak.current) .peak-active.current {
    transform: none;
  }
}