/* Right-side scrollspy rail for the landing page. Hidden at the very top of
   the page (the hero already has its own dense UI) and faded in once the
   user has actually started scrolling. */
.section-nav {
    position: fixed;
    top: 50%;
    right: clamp(16px, 2.4vw, 32px);
    z-index: 500;
    transform: translate(12px, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.section-nav.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
}

.section-nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-nav-dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.section-nav-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-4);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.section-nav-dot:hover::before,
.section-nav-dot:focus-visible::before {
    background: var(--brand-bright);
    transform: scale(1.3);
}

.section-nav-dot.is-active::before {
    background: var(--brand-bright);
    transform: scale(1.6);
    box-shadow: 0 0 0 3px var(--brand-tint);
}

.section-nav-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    white-space: nowrap;
    font-family: DM Sans;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.section-nav-dot:hover .section-nav-tooltip,
.section-nav-dot:focus-visible .section-nav-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* A fixed dot rail on the right edge fights for the same thumb space as
   page content on narrow viewports - the desktop-only affordance it is
   everywhere else. */
@media (max-width: 768px) {
    .section-nav {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-nav,
    .section-nav-dot::before,
    .section-nav-tooltip {
        transition: none;
    }
}