.back-to-top {
    display: none;
}

@media (min-width: 1121px) {
    .back-to-top {
        position: fixed;
        right: 32px;
        bottom: 32px;
        z-index: 90;
        display: grid;
        width: 56px;
        height: 56px;
        padding: 0;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(10px);
        transition:
            opacity 220ms ease,
            visibility 220ms ease,
            transform 220ms ease,
            background-color 220ms ease;
    }

    .back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .back-to-top:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .back-to-top:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 4px;
    }

    .back-to-top__progress {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        transform: rotate(-90deg);
    }

    .back-to-top__track,
    .back-to-top__indicator {
        fill: none;
        stroke-width: 1.5;
    }

    .back-to-top__track {
        stroke: rgba(128, 128, 128, 0.42);
    }

    .back-to-top__indicator {
        stroke: var(--color-accent);
        stroke-width: 2;
        stroke-linecap: round;
        transition: stroke-dashoffset 80ms linear;
    }

    .back-to-top__arrow {
        position: relative;
        width: 22px;
        height: 22px;
        color: #fff;
        mix-blend-mode: difference;
        transition: transform 180ms ease;
    }

    .back-to-top__arrow path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .back-to-top:hover .back-to-top__arrow {
        transform: translateY(-2px);
    }

    body.menu-open .back-to-top,
    body.ai-lightbox-open .back-to-top,
    body.contact-modal-open .back-to-top {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(10px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top,
    .back-to-top__indicator,
    .back-to-top__arrow {
        transition: none;
    }
}