/* Плавающая кнопка звонка.
   Живёт над плавающим telegram-баром (см. telegram-button.css) и показывается
   на тех же ширинах, что и он — до 944px. На десктопе звонок закрывает кнопка
   «ЗАКАЗАТЬ ЗВОНОК» в шапке, поэтому там кнопка скрыта.

   Красный — токен --color-red из tokens.css: литералы фирменных цветов в
   стилях запрещены (см. CLAUDE.md). */

.call-floating {
    /* Просвет над telegram-баром. Один параметр на брейкпоинт вместо
       пересчёта bottom в каждом медиазапросе.
       Планшет: 20px (низ бара) + 44px (высота бара) + 16px просвета. */
    --call-clearance: 80px;
    --call-size: 56px;
    --call-red: var(--color-red);

    position: fixed;
    right: 20px;
    bottom: var(--call-clearance);
    /* Выше контента и шапки (998), но ниже попапа (1000) и открытого
       мобильного меню (1001) — перекрывать их кнопка не должна. */
    z-index: 999;
    display: none;

    opacity: 0;
    transform: scale(0.6);
    animation: callEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.call-floating-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--call-size);
    height: var(--call-size);
    border-radius: 50%;
    background-color: var(--call-red);
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 6px 18px rgba(var(--color-red-rgb), 0.35),
        0 2px 6px rgba(0, 0, 0, 0.18);
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Одиночная волна, расходящаяся от кнопки: зовёт, но не мигает.
   Кликам не мешает. */
.call-floating-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--call-red);
    opacity: 0;
    pointer-events: none;
    animation: callHalo 5s cubic-bezier(0.22, 1, 0.36, 1) 1.2s infinite;
}

.call-icon {
    width: 24px;
    height: 24px;
    animation: callRing 5s ease-in-out 1.2s infinite;
}

.call-floating-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 26px rgba(var(--color-red-rgb), 0.45),
        0 3px 8px rgba(0, 0, 0, 0.22);
}

.call-floating-btn:active {
    transform: scale(0.94);
}

.call-floating-btn:focus-visible {
    outline: 3px solid var(--color-navy);
    outline-offset: 3px;
}

@keyframes callEnter {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes callHalo {
    0%   { opacity: 0.5; transform: scale(1); }
    40%  { opacity: 0;   transform: scale(1.9); }
    100% { opacity: 0;   transform: scale(1.9); }
}

/* Трубка коротко «звонит» раз в пять секунд и снова замирает. */
@keyframes callRing {
    0%        { transform: rotate(0); }
    4%        { transform: rotate(-12deg); }
    9%        { transform: rotate(10deg); }
    14%       { transform: rotate(-7deg); }
    19%       { transform: rotate(4deg); }
    24%, 100% { transform: rotate(0); }
}

@media (max-width: 944px) {
    .call-floating {
        display: block;
    }
}

@media (max-width: 768px) {
    .call-floating {
        /* Полоса Telegram занимает 56px, оставляем 16px просвета. */
        --call-clearance: 72px;
        right: 16px;
    }
}

/* Открытое бургер-меню кнопка перекрывать не должна. Фиксированный элемент
   корневого уровня рисуется поверх стекинг-контекста шапки, поэтому z-index
   тут не спасает — только снятие с показа. Тот же приём уже применён к
   плавающему бару соцсети (css/main-menu.css, body.menu-open). */
body.menu-open .call-floating {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .call-floating {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .call-icon {
        animation: none;
    }

    .call-floating-btn::after {
        animation: none;
    }
}