/* ============================================
   Connection Map — Three-tier link system
   ============================================ */

.connection-map {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-border-strong);
}

/* Tiers */
.connection-tier {
    margin-bottom: 2rem;
}

.connection-tier:last-child {
    margin-bottom: 0;
}

.tier-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.tier-label--direct {
    color: var(--color-terracotta);
}

.tier-label--near {
    color: var(--color-near);
}

.tier-label--distant {
    color: var(--color-distant);
}

/* Link lists within tiers */
.connection-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

/* Individual connection link */
.connection-link {
    display: inline-block;
    text-decoration: none;
    transition: color var(--transition-base), opacity var(--transition-base);
}

.connection-link--direct {
    color: var(--color-terracotta);
    font-size: 1rem;
    font-weight: 450;
}

.connection-link--direct:hover {
    color: var(--color-text);
}

.connection-link--near {
    color: var(--color-sandstone);
    opacity: 0.6;
    font-size: 0.9375rem;
}

.connection-link--near:hover {
    opacity: 1;
    color: var(--color-terracotta);
}

.connection-link--distant {
    color: var(--color-sandstone);
    opacity: 0.3;
    font-size: 0.8125rem;
}

.connection-link--distant:hover {
    opacity: 0.7;
    color: var(--color-sandstone);
}

/* Arrival pulse — connection map fades in when scrolled into view */
.connection-map.is-visible .connection-tier {
    animation: tier-arrive 600ms var(--ease-out) forwards;
    opacity: 0;
}

.connection-map.is-visible .connection-tier:nth-child(1) {
    animation-delay: 0ms;
}

.connection-map.is-visible .connection-tier:nth-child(2) {
    animation-delay: 150ms;
}

.connection-map.is-visible .connection-tier:nth-child(3) {
    animation-delay: 300ms;
}

@keyframes tier-arrive {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state */
.connection-map--loading {
    min-height: 100px;
}

.connection-map--loading::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-sandstone);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
    margin: 2rem auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}