/* Кнопка «наверх» — левый нижний угол.
   Правый занят виджетами чата/консента у большинства сайтов, и владелец
   просил именно левый. */

.back-to-top {
    position: fixed;
    left: clamp(16px, 2.5vw, 32px);
    bottom: clamp(16px, 2.5vw, 32px);
    z-index: 90;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px — минимальная цель для пальца (WCAG 2.5.5). */
    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;

    /* Скрыта, пока страница не прокручена: не перекрывает первый экран. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    color: var(--color-text);
    border-color: var(--color-brand);
    background: var(--color-surface);
}

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

.back-to-top .p26m-icon {
    width: 20px;
    height: 20px;
}

/* На узких экранах кнопка меньше и ближе к краю — на 390px она иначе
   наезжает на контент футера. */
@media (max-width: 767px) {
    .back-to-top {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: opacity var(--dur-fast) linear, visibility var(--dur-fast) linear;
        transform: none;
    }
}