/* =========================================================
   FIRSTSOFT TECHNOLOGIES
   PREMIUM BACK TO TOP
   SCROLL PROGRESS
   ========================================================= */

#fsBackToTop {

    position: fixed;

    right: 26px;
    bottom: 26px;

    width: 54px;
    height: 54px;

    z-index: 9998;

    pointer-events: none;

}


/* =========================================================
   MAIN BUTTON
   ========================================================= */

.fs-back-to-top {

    position: relative;

    width: 54px;
    height: 54px;

    display: flex;

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

    padding: 0;

    border: 1px solid
        rgba(11, 94, 215, 0.14);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px)
        scale(0.75);

    transition:
        opacity 0.45s cubic-bezier(.22,1,.36,1),
        visibility 0.45s ease,
        transform 0.45s cubic-bezier(.22,1,.36,1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;

    box-shadow:
        0 8px 25px
        rgba(13, 45, 90, 0.13);

    pointer-events: auto;

}


/* =========================================================
   VISIBLE
   ========================================================= */

.fs-back-to-top.is-visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    animation:
        fsBackTopFloat 4s ease-in-out infinite;

}


/* =========================================================
   FLOATING ANIMATION
   ========================================================= */

@keyframes fsBackTopFloat {

    0%,
    100% {

        transform:
            translateY(0)
            scale(1);

    }

    50% {

        transform:
            translateY(-4px)
            scale(1);

    }

}


/* =========================================================
   HOVER GLOW
   ========================================================= */

.fs-back-to-top-glow {

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(11, 94, 215, 0.22) 0%,
            rgba(11, 94, 215, 0.08) 38%,
            transparent 70%
        );

    opacity: 0;

    transform:
        scale(0.75);

    transition:
        opacity 0.4s ease,
        transform 0.45s ease;

    pointer-events: none;

}


/* =========================================================
   HOVER BUTTON
   ========================================================= */

.fs-back-to-top:hover {

    border-color:
        rgba(11, 94, 215, 0.30);

    box-shadow:
        0 12px 35px
        rgba(11, 94, 215, 0.20),
        0 0 0 5px
        rgba(11, 94, 215, 0.05);

    transform:
        translateY(-6px)
        scale(1.06);

    animation: none;

}


/* =========================================================
   SHOW GLOW
   ========================================================= */

.fs-back-to-top:hover
.fs-back-to-top-glow {

    opacity: 1;

    transform:
        scale(1);

}


/* =========================================================
   SVG PROGRESS
   ========================================================= */

.fs-back-to-top-progress {

    position: absolute;

    inset: 0;

    width: 54px;
    height: 54px;

    overflow: visible;

    transform:
        rotate(-90deg);

}


/* =========================================================
   BACKGROUND RING
   ========================================================= */

.fs-back-to-top-track {

    fill: none;

    stroke:
        rgba(11, 94, 215, 0.10);

    stroke-width: 2;

}


/* =========================================================
   ACTIVE PROGRESS
   ========================================================= */

.fs-back-to-top-circle {

    fill: none;

    stroke:
        #0b5ed7;

    stroke-width: 2.8;

    stroke-linecap: round;

    filter:
        drop-shadow(
            0 0 3px
            rgba(11, 94, 215, 0.30)
        );

    transition:
        stroke-dashoffset 0.12s linear;

}


/* =========================================================
   CENTER
   ========================================================= */

.fs-back-to-top-center {

    position: relative;

    z-index: 5;

    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f8fd
        );

    box-shadow:
        inset 0 1px 1px
        rgba(255,255,255,0.9),

        0 2px 8px
        rgba(11, 94, 215, 0.08);

    transition:
        background 0.3s ease,
        transform 0.35s cubic-bezier(.22,1,.36,1),
        box-shadow 0.35s ease;

}


/* =========================================================
   ARROW
   ========================================================= */

.fs-back-to-top-arrow {

    width: 19px;
    height: 19px;

    display: flex;

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

    transition:
        transform 0.4s cubic-bezier(.22,1,.36,1);

}


.fs-back-to-top-arrow svg {

    width: 19px;
    height: 19px;

    fill: none;

    stroke:
        #0b5ed7;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        stroke 0.25s ease,
        transform 0.4s cubic-bezier(.22,1,.36,1);

}


/* =========================================================
   HOVER CENTER
   ========================================================= */

.fs-back-to-top:hover
.fs-back-to-top-center {

    background:
        linear-gradient(
            145deg,
            #0b5ed7,
            #084298
        );

    transform:
        scale(1.08);

    box-shadow:
        0 5px 15px
        rgba(11, 94, 215, 0.25);

}


/* =========================================================
   HOVER ARROW
   ========================================================= */

.fs-back-to-top:hover
.fs-back-to-top-arrow {

    transform:
        translateY(-3px);

}


.fs-back-to-top:hover
.fs-back-to-top-arrow svg {

    stroke: #ffffff;

    transform:
        translateY(-1px);

}


/* =========================================================
   CLICK
   ========================================================= */

.fs-back-to-top:active
.fs-back-to-top-center {

    transform:
        scale(0.90);

}


/* =========================================================
   FOCUS
   ========================================================= */

.fs-back-to-top:focus-visible {

    outline: none;

    box-shadow:
        0 0 0 4px
        rgba(11, 94, 215, 0.15),
        0 12px 30px
        rgba(11, 94, 215, 0.18);

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #fsBackToTop {

        right: 17px;

        bottom:
            calc(
                72px + 17px
            );

        width: 48px;
        height: 48px;

    }


    .fs-back-to-top {

        width: 48px;
        height: 48px;

    }


    .fs-back-to-top-progress {

        width: 48px;
        height: 48px;

    }


    .fs-back-to-top-center {

        width: 32px;
        height: 32px;

    }


    .fs-back-to-top-arrow,
    .fs-back-to-top-arrow svg {

        width: 17px;
        height: 17px;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #fsBackToTop {

        right: 14px;

        bottom:
            calc(
                72px + 14px
            );

        width: 45px;
        height: 45px;

    }


    .fs-back-to-top {

        width: 45px;
        height: 45px;

    }


    .fs-back-to-top-progress {

        width: 45px;
        height: 45px;

    }


    .fs-back-to-top-center {

        width: 30px;
        height: 30px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fs-back-to-top.is-visible {

        animation: none;

    }

    .fs-back-to-top,
    .fs-back-to-top-center,
    .fs-back-to-top-arrow,
    .fs-back-to-top-arrow svg {

        transition-duration: 0.01ms;

    }

}