/* ==================================================
   BASIC JUDO - SCROLL TO TOP
================================================== */

/* 01 - Base Button
-------------------------------------------------- */

.bj-scroll-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 999;

    width: 58px;
    height: 58px;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(18px) scale(0.92);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease;
}

.bj-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 02 - Progress Ring
-------------------------------------------------- */

.bj-scroll-top__ring {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    background:
        conic-gradient(
            #b78a3c var(--scroll-progress, 0deg),
            rgba(183, 138, 60, 0.18) 0deg
        );

    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}

.bj-scroll-top__ring::after {
    content: "";

    position: absolute;
    inset: 4px;

    border-radius: 50%;

    background: rgba(17, 17, 17, 0.88);

    backdrop-filter: blur(14px);
}

/* 03 - Inner Button
-------------------------------------------------- */

.bj-scroll-top__inner {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    margin: 6px;

    color: #fff;

    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 45%),
        linear-gradient(135deg, #181818, #050505);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.bj-scroll-top i {
    font-size: 15px;

    transition: transform 0.3s ease;
}

/* 04 - Hover
-------------------------------------------------- */

.bj-scroll-top:hover .bj-scroll-top__inner {
    color: #111;

    background: #b78a3c;

    box-shadow: 0 0 0 8px rgba(183, 138, 60, 0.16);
}

.bj-scroll-top:hover i {
    transform: translateY(-3px);
}

/* 05 - Mobile
-------------------------------------------------- */

@media (max-width: 575px) {

    .bj-scroll-top {
        right: 18px;
        bottom: 18px;

        width: 52px;
        height: 52px;
    }

    .bj-scroll-top__inner {
        width: 40px;
        height: 40px;
    }

}