/* ─────────────────────────────────────────────────────────────────────────────
   e13-progress.css — section progress indicators + reading progress bar
   Depends on: e13-progress.js
───────────────────────────────────────────────────────────────────────────── */

/* ── 1. Top reading-progress bar ── */
#vybly-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(
    90deg,
    oklch(93% 0.27 122) 0%,
    oklch(74% 0.20 246) 100%
  );
  z-index: 10000;
  pointer-events: none;
  transform-origin: left center;
  transition: width 0.08s linear;
}

#vybly-progress::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(93% 0.27 122);
  box-shadow: 0 0 6px 2px oklch(93% 0.27 122 / 0.5);
  opacity: 0;
  transition: opacity 0.2s;
}

#vybly-progress.progress-active::after {
  opacity: 1;
}

/* ── 2. Section navigation dots (right edge) ── */
#section-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

#section-nav.nav-dots-visible {
  opacity: 1;
  pointer-events: auto;
}

.section-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(60% 0.015 265);
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform   0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background  0.3s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow  0.3s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
}

.section-dot:hover {
  transform: scale(1.6);
  background: oklch(80% 0.10 122);
}

.section-dot.dot-active {
  transform: scale(1.4);
  background: oklch(93% 0.27 122);
  box-shadow: 0 0 8px 2px oklch(93% 0.27 122 / 0.4);
}

/* Tooltip label on hover */
.section-dot::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(70% 0.015 265);
  background: oklch(8% 0.018 265 / 0.85);
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity   0.2s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.section-dot:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Hide dots on mobile */
@media (max-width: 768px) {
  #section-nav {
    display: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #vybly-progress,
  .section-dot {
    transition: none !important;
  }
}