.nav-dots {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    transition: opacity var(--transition-slow) ease;
}

.nav-dots.visible {
    opacity: 1;
    transition-delay: 1.4s;
}


.nav-dots.idle {
    opacity: 0.45;
    transition: opacity 0.22s ease;
}

.nav-dots.idle:hover {
    opacity: 1;
}


.nav-dots.transitioning {
    opacity: 1 !important;
    transition-delay: 0s !important; 
}

.nav-dot {
    width: 8px;
    height: 8px;
    background: transparent;
    border: 1px solid var(--color-secondary);
    transform: rotate(45deg);
    transition: all 0.4s ease;
}

.nav-dot.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(2.6) translateX(-45%) rotate(45deg);
}

.nav-dot:hover {
    border-color: var(--color-primary);
    transform: scale(2) rotate(45deg);
}