/*
 * KimLink biolink polish, loaded after link-custom.css on every public biolink page.
 * Colors, borders and shadows stay with each block's own settings (inline styles);
 * this file only sets rhythm, type, focus, motion and the footer.
 */

body.link-body {
    border-top: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.link-content {
    padding-top: max(2.75rem, env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
}

/* Type */
#links h1, #links h2, #links h3, #links h4, #links h5, #links h6 {
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

#links [data-paragraph-body] {
    line-height: 1.6;
}

/* Avatar: a soft ring and lift so a logo on a plain background still reads as a profile */
#links .link-image.link-avatar-round,
#links .link-image.link-avatar-rounded {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .16), 0 14px 34px -10px rgba(0, 0, 0, .38);
}

#links .link-image.link-avatar-rounded {
    border-radius: 1.25rem;
}

/* Buttons */
.link-btn {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .005em;
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
    -webkit-tap-highlight-color: transparent;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .2s ease, opacity .3s ease;
}

.link-btn-rounded {
    border-radius: .9rem;
}

.link-btn:hover {
    filter: brightness(1.04);
}

.link-btn:focus-visible,
.biolink-social-icon__link:focus-visible,
#links .link-hover-animation-smooth:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Social icons */
.biolink-social-icon {
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s ease;
}

.biolink-social-icon--rounded,
.biolink-social-icon--outline {
    border-radius: .85rem;
}

.biolink-social-icon:hover {
    filter: brightness(1.12);
}

/* Footer */
.link-footer {
    margin: 2.75rem 0 2rem;
}

.link-footer-branding--pill {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .45rem .95rem;
    border-radius: 50rem;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.2;
    background: rgba(127, 127, 127, .14);
    background: color-mix(in srgb, currentColor 10%, transparent);
    opacity: .85;
    transition: opacity .2s ease;
}

.link-footer-branding--pill:hover {
    opacity: 1;
}

.link-footer-branding--pill a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

/* Blocks rise in one after another; `translate` leaves `transform` free for :target and hover */
@keyframes kl-block-in {
    from {
        opacity: 0;
        translate: 0 10px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    #links > .row > [data-biolink-block-id],
    .link-footer {
        animation: kl-block-in .55s cubic-bezier(.2, .8, .2, 1) both;
    }

    #links > .row > [data-biolink-block-id]:nth-child(2) { animation-delay: .04s; }
    #links > .row > [data-biolink-block-id]:nth-child(3) { animation-delay: .08s; }
    #links > .row > [data-biolink-block-id]:nth-child(4) { animation-delay: .12s; }
    #links > .row > [data-biolink-block-id]:nth-child(5) { animation-delay: .16s; }
    #links > .row > [data-biolink-block-id]:nth-child(6) { animation-delay: .2s; }
    #links > .row > [data-biolink-block-id]:nth-child(7) { animation-delay: .24s; }
    #links > .row > [data-biolink-block-id]:nth-child(8) { animation-delay: .28s; }
    #links > .row > [data-biolink-block-id]:nth-child(n+9) { animation-delay: .32s; }
    .link-footer { animation-delay: .36s; }
}