#footer-nav>li>a {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    margin-bottom: var(--space-xs);
    font-size: var(--text-m);
}

#footer-nav .sub-menu {
    list-style: none;
    padding: 0;
}

#footer-nav>li {
    flex-grow: 1;
}

#footer-nav .sub-menu a {
    font-size: var(--text-s);
    line-height: 2;
}

#footer-nav .sub-menu a:hover {
    text-decoration: underline;
}

/* cta */

.underline-transition {
    position: relative;
    background-image: linear-gradient(to right, var(--dark), var(--dark));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: .8s cubic-bezier(.61, -0.01, .37, .99) all;
}

a:has(.underline-transition):hover .underline-transition {
    background-size: 100% 2px;
}

/* footer logo */
body div.any-logo.footer-logo a {
    display: inline-block;
}

body div.footer-logo h1.nav-title a span:not(.dot) {
    transform: translateY(100%);
}

body.scrolled-bottom div.footer-logo h1.nav-title a span:not(.dot) {
    transform: translateY(0);
}

body div.footer-logo h1.nav-title a span.dot {
    transform: translateY(-100%);
}

body.scrolled-bottom div.footer-logo h1.nav-title a span.dot {
    transform: translateY(0);
}

body.scrolled-bottom div.any-logo.footer-logo a:hover span:is(:nth-child(2), :nth-child(3), :nth-child(4)) {
    transform: translateY(100%);
}

body.scrolled-bottom div.any-logo.footer-logo a:hover span.dot {
    left: var(--center-left);
    transition-delay: 0s;
}

/* sister logo */
body footer div.any-logo.sister .sister-logo a.anim span:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) {
    --translate-y: 0;
    transform: translateY(var(--translate-y));
    animation: translate-y-hide .8s cubic-bezier(0.61, -0.01, 0.37, 0.99) forwards;
    animation-delay: calc(.6s + var(--span-delay));
}

body footer div.any-logo.sister .sister-logo a.anim span.dot {
    left: var(--sister-left);
    animation: transform-dot-sister-left .8s cubic-bezier(0.61, -0.01, 0.37, 0.99) reverse forwards;
    animation-delay: calc(.6s + var(--span-delay));
}

/*scrolled bottom */
body.scrolled-bottom.page-loaded footer div.sister .sister-logo a.transit:not(:hover) span:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) {
    transform: translateY(100%);
    transition-delay: calc(.6s + var(--span-delay));
}

body.scrolled-bottom.page-loaded footer div.sister .sister-logo a.transit:not(:hover) span.dot {
    left: var(--icon-left);
    transition-delay: calc(.6s + var(--span-delay));
}

/* hover */
body.scrolled-bottom footer div.any-logo.sister a:hover span:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) {
    transform: translateY(0);
}

footer .any-logo.sister a:hover span.dot {
    left: var(--sister-left);
}

/* sister interaction */
body.scrolled-bottom footer .footer-logo a span:nth-child(5):after {
    content: "e";
    position: absolute;
    right: 0;
    transform: translateY(-200%);
    transition-delay: 0.6s;
}

body.scrolled-bottom footer div.any-logo.footer-logo.sister a span:nth-child(5):after {
    transform: translateY(-100%);
    opacity: 1;
    transition-delay: 0s;
}

body.scrolled-bottom footer div.any-logo.footer-logo.sister a span:is(:nth-child(2), :nth-child(3), :nth-child(4)) {
    transform: translateY(100%);
}

footer .footer-logo.sister a span.dot {
    left: var(--center-left);
}

body.scrolled-bottom footer div.any-logo.footer-logo.sister h1.nav-title a span:nth-child(5) {
    transform: translateY(100%);
}