/* ============================================================
   Side navigation
   Themed via [data-theme] on the nav root, set by nav.js based
   on the active slide's classList:
     - .slide--cover  → data-theme="dark"  (white/translucent)
     - everything else → data-theme="light" (text-secondary + Prism-900)
   The base .side-nav rules use CSS custom properties so each
   theme just overrides the token set, not the rules themselves.
   Default is the dark palette so the very first paint (Slide 1
   cover, before nav.js wires up) lands on the right colors.

   Visibility — the nav is hidden by default and surfaces only
   when (a) the deck advances, or (b) the cursor approaches the
   right edge. nav.js adds .is-visible during slide transitions
   with a quick auto-hide; CSS :hover handles the cursor case via
   an invisible ::before hot zone that extends 80px past the nav.
   ============================================================ */

.side-nav {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 8px;

  /* Hidden by default. Hover (via ::before hot zone) and the
     .is-visible class (set by nav.js on slide change) reveal it.
     pointer-events:none keeps the chrome out of the way of any
     interactive content underneath while invisible. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;

  /* Dark theme tokens (default — covers). */
  --nav-color-inactive: rgba(255, 255, 255, 0.55);
  --nav-color-hover:    rgba(255, 255, 255, 0.95);
  --nav-color-active:   #ffffff;
  --nav-dot-inactive:   rgba(255, 255, 255, 0.28);
  --nav-dot-hover:      rgba(255, 255, 255, 0.85);
  --nav-dot-active:     #ffffff;
}

/* Invisible hover hot zone — extends the hit target 80px to the
   left of the visible nav so it surfaces as the cursor approaches
   the right edge instead of requiring a precise landing on a 20px
   strip. ::before is independently pointer-active even while the
   nav is pointer-events:none, so hover still triggers.

   Sized strictly to the strip LEFT of the visible nav (width 80px,
   flush against the nav's left edge). Don't let it overlap the
   nav's children — absolutely-positioned pseudo-elements stack
   above static-flow siblings, which would steal hover from the
   individual .side-nav__item rows and break label-on-hover. */
.side-nav::before {
  content: "";
  position: absolute;
  top: -16px;
  bottom: -16px;
  left: -80px;
  width: 80px;
  pointer-events: auto;
}

.side-nav:hover,
.side-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Light theme tokens (content slides on neutral-100). Inactive
   color matches the footer's text-secondary for visual harmony;
   active flips to Prism-900 — the deepest brand purple — for a
   strong "you are here" cue against the off-white surface. */
.side-nav[data-theme="light"] {
  --nav-color-inactive: var(--color-text-secondary);
  --nav-color-hover:    var(--color-text-primary);
  --nav-color-active:   var(--color-prism-900);
  --nav-dot-inactive:   rgba(87, 81, 113, 0.50);  /* text-secondary @ 50% */
  --nav-dot-hover:      rgba(26, 21, 63, 0.65);   /* text-primary @ 65% */
  --nav-dot-active:     var(--color-prism-900);
}

.side-nav__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--nav-color-inactive);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 240ms ease;
}

.side-nav__dot {
  width: 20px;
  height: 2px;
  background: var(--nav-dot-inactive);
  border-radius: 2px;
  flex-shrink: 0;
  transition: background 240ms ease, width 240ms ease;
}

.side-nav__label {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 240ms ease, transform 240ms ease;
  white-space: nowrap;
  pointer-events: none;
}

.side-nav__item:hover {
  color: var(--nav-color-hover);
}

.side-nav__item:hover .side-nav__dot {
  background: var(--nav-dot-hover);
  width: 30px;
}

.side-nav__item:hover .side-nav__label,
.side-nav__item.is-active .side-nav__label {
  opacity: 1;
  transform: translateX(0);
}

.side-nav__item.is-active {
  color: var(--nav-color-active);
}

.side-nav__item.is-active .side-nav__dot {
  background: var(--nav-dot-active);
  width: 40px;
}

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