/* ============================================================
   Section nav — vertical scroll wheel, fixed top-right
   Sits directly beneath the lang-toggle pill.
   ============================================================ */

.section-nav {
  position:      fixed;
  top:           3.05rem;   /* lang-toggle bottom (1.1rem + ~1.85rem height) + gap */
  right:         1.4rem;
  z-index:       9998;
  display:       flex;
  justify-content: flex-end;
}

.section-nav__track {
  display:          flex;
  flex-direction:   column;
  align-items:      flex-end;
  gap:              0.62rem;
  background:       rgba(10, 18, 7, 0.62);
  backdrop-filter:  blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:           1px solid rgba(255, 255, 255, 0.10);
  border-radius:    16px;
  padding:          0.7rem 0.5rem;
  transition:       background 260ms ease, border-color 260ms ease, padding 260ms ease;
}

.section-nav:hover .section-nav__track,
.section-nav.is-active .section-nav__track {
  background:    rgba(10, 18, 7, 0.82);
  border-color:  rgba(255, 255, 255, 0.16);
  padding:       0.7rem 0.85rem;
}

/* ── Dot rows ─────────────────────────────────────────────── */

.section-nav__item {
  display:       flex;
  align-items:   center;
  justify-content: flex-end;
  gap:           0.6rem;
  background:    none;
  border:        none;
  padding:       0.06rem 0;
  cursor:        pointer;
  -webkit-tap-highlight-color: transparent;
}

.section-nav__label {
  font-family:      'Courier New', Courier, monospace;
  font-size:        0.56rem;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  white-space:      nowrap;
  color:            rgba(255, 255, 255, 0.55);
  max-width:        0;
  overflow:         hidden;
  opacity:          0;
  transform:        translateX(4px);
  transition:       max-width 320ms ease, opacity 220ms ease, transform 320ms ease, color 200ms ease;
}

.section-nav:hover .section-nav__label,
.section-nav.is-active .section-nav__label {
  max-width:  160px;
  opacity:    1;
  transform:  translateX(0);
}

.section-nav__item:hover .section-nav__label {
  color: rgba(255, 255, 255, 0.92);
}

.section-nav__dot {
  flex-shrink:    0;
  width:          6px;
  height:         6px;
  border-radius:  50%;
  background:     rgba(255, 255, 255, 0.30);
  transition:     background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.section-nav__item:hover .section-nav__dot {
  background: rgba(255, 255, 255, 0.75);
  transform:  scale(1.2);
}

.section-nav__item.is-current .section-nav__dot {
  background:  #ffffff;
  transform:   scale(1.3);
  box-shadow:  0 0 0 3px rgba(255, 255, 255, 0.14);
}

.section-nav__item.is-current .section-nav__label {
  color: rgba(255, 255, 255, 0.95);
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .section-nav__track,
  .section-nav__label,
  .section-nav__dot {
    transition: none;
  }
}

/* ── Small screens: collapse to dots-only, no hover expand ─── */
@media (max-width: 640px) {
  .section-nav { display: none; }
}