/* Back to Top — a floating pill that appears once the reader reaches the
   bottom of the page. Pair with assets/js/back-to-top.js. */

#backToTop {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 1030;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px 11px 15px;

    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    color: #fff;
    cursor: pointer;

    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;

    box-shadow: 0 8px 22px rgba(79, 70, 229, 0.35);

    /* hidden until the bottom of the page is in reach */
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.96);
    transition:
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.28s,
        box-shadow 0.2s ease;
}

#backToTop.btt-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

#backToTop:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 30px rgba(79, 70, 229, 0.45);
}

#backToTop:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.45);
    outline-offset: 3px;
}

#backToTop svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 520px) {
    #backToTop {
        right: 16px;
        bottom: 16px;
        padding: 9px 15px 9px 12px;
        font-size: 12.5px;
        gap: 6px;
    }

    #backToTop svg {
        width: 15px;
        height: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #backToTop,
    #backToTop.btt-visible,
    #backToTop:hover {
        transform: none;
        transition: opacity 0.2s ease, visibility 0.2s;
    }
}