.brand-cluster {
    --dashboard-proximity: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand-cluster .brand {
    position: relative;
    z-index: 2;
}

.header-dashboard-link {
    position: relative;
    z-index: 1;
    opacity: var(--dashboard-proximity);
    transform: translateX(calc(-58px + var(--dashboard-proximity) * 58px));
    pointer-events: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    will-change: opacity, transform;
}

.header-dashboard-link::after {
    content: '';
    position: absolute;
    right: 100%;
    bottom: -5px;
    left: 0;
    height: 1px;
    background: currentColor;
    transition: right .22s ease;
}

.brand-cluster.dashboard-link-active .header-dashboard-link,
.brand-cluster.is-dashboard-hovered .header-dashboard-link,
.header-dashboard-link:focus-visible {
    pointer-events: auto;
}

.brand-cluster.is-dashboard-hovered {
    --dashboard-proximity: 1 !important;
}

.header-dashboard-link:hover::after,
.header-dashboard-link:focus-visible::after { right: 0; }

.header-dashboard-link:focus-visible {
    opacity: 1;
    transform: translateX(0);
    outline: 2px solid currentColor;
    outline-offset: 6px;
}

@media (hover: none), (pointer: coarse) {
    .brand-cluster { --dashboard-proximity: 1; gap: 18px; }
    .header-dashboard-link { pointer-events: auto; }
}

@media (max-width: 520px) {
    .header-dashboard-link { font-size: 11px; }
    .header-dashboard-link span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .header-dashboard-link { will-change: auto; }
}