/* =====================================================
   BACK TO TOP BUTTON
====================================================== */

.graphic-back-to-top {

    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(8, 14, 39, 0.2);

    border-radius: 50%;

    background: rgba(244, 244, 241, 0.92);

    color: var(--graphic-dark);

    font-size: 0.9rem;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(15px);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;

    z-index: 999;

    backdrop-filter: blur(8px);

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

}


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

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

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

}


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

.graphic-back-to-top:hover {

    background: #080e27;

    color: #ffffff;

    border-color: #080e27;

    transform: translateY(-3px);

}


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

.graphic-back-to-top:active {

    transform: translateY(0) scale(0.94);

}


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

@media (max-width: 768px) {

    .graphic-back-to-top {

        right: 20px;

        bottom: 20px;

        width: 40px;

        height: 40px;

        font-size: 0.85rem;

    }

}


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

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

    .graphic-back-to-top {

        transition: none;

    }

}

/* =====================================================
   LARGER BACK TO TOP BUTTON
====================================================== */

.graphic-back-to-top {
    width: 52px;
    height: 52px;

    font-size: 1.05rem;
}