/*
 * Sugarcoat Random Letter Swap: the ORIGINAL GLYPHS fall from top to bottom,
 * each in a fresh random stagger order on hover (reverse=false in the
 * Fancy Components API). Leave/focus-out reverses the same smooth motion.
 *
 * Use the same typography as Sugarcoat's existing navbar: do not load
 * a new font, change text casing, increase weight, or restyle the links.
 */
.navbar__links .nav-swap {
    display: inline-flex;
    align-items: baseline;
    vertical-align: baseline;
    white-space: pre;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.nav-swap__slot {
    display: inline-block;
    flex: 0 0 auto;
    height: 1.2em;
    overflow: hidden;
    font: inherit;
    letter-spacing: inherit;
    vertical-align: baseline;
}

.nav-swap__stack {
    display: flex;
    flex-direction: column;
    /*
     * At rest, the UPPER duplicate is clipped off and the lower original
     * is visible. Hover moves the UPPER original DOWN into the viewport.
     */
    transform: translate3d(0, -50%, 0);
    transition-property: transform;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--swap-delay, 0ms);
    will-change: transform;
    font: inherit;
    letter-spacing: inherit;
}

.nav-swap__letter {
    display: block;
    flex: 0 0 auto;
    height: 1.2em;
    line-height: 1.2;
    white-space: pre;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.nav-swap.is-swapping .nav-swap__stack {
    /* Moving from -50% to 0 makes letters visibly travel TOP to BOTTOM. */
    transform: translate3d(0, 0, 0);
}

.navbar__links > a:focus-visible,
.nav-menu__trigger:focus-visible {
    color: var(--brand-primary);
    outline: 2px solid var(--brand-primary);
    outline-offset: 6px;
    border-radius: 3px;
}

@media (max-width: 1050px) {
    .nav-swap__stack,
    .nav-swap.is-swapping .nav-swap__stack {
        transform: translate3d(0, -50%, 0) !important;
        transition: none !important;
        will-change: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-swap__stack,
    .nav-swap.is-swapping .nav-swap__stack {
        transform: translate3d(0, -50%, 0) !important;
        transition: none !important;
        will-change: auto;
    }

    .navbar__links > a,
    .nav-menu__trigger {
        transition: none !important;
    }
}