.scroll-progress {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s, visibility .18s;
    z-index: 1100;
}

    /* SVG kroužek vyplní box a startuje shora */
    .scroll-progress .ring {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }

    .scroll-progress .track {
        fill: none;
        stroke: rgba(0,0,0,.14);
        stroke-width: 8;
    }

    .scroll-progress .indicator {
        fill: none;
        stroke: var(--brand-accent);
        stroke-width: 8;
        stroke-linecap: round;
        /* ⬇ místo animace šipky dáme plynulý přechod pro průběh */
        transition: stroke-dashoffset .10s linear;
    }

    /* šipka uprostřed */
    .scroll-progress .arrow {
        cursor: pointer;
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--brand-accent);
        opacity: .9;
        transition: opacity .18s, transform .18s;
    }
    .scroll-progress.show .arrow {
        animation: arrow-bounce 1.7s ease-in-out infinite;
    }

.scroll-progress.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.scroll-progress .arrow svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

@keyframes arrow-bounce {
    0%,100% {
        transform: translateY(2px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@media (max-width:420px) {
    .scroll-progress {
        right: 10px;
        bottom: 10px;
        width: 50px;
        height: 50px;
    }
}