/* ==========================================================================
   Анимации нажатий: кнопки чуть «проседают» и от точки нажатия расходится волна.
   Класс fx-press и волну вешает core/scripts/motion.js на всё, что похоже на кнопку.
   scale (а не transform) не ломает кнопки, которые уже сдвинуты через transform.
   ========================================================================== */

.fx-target {
    transition-property: scale, background-color, border-color, color, filter, box-shadow, opacity;
    transition-duration: .18s;
    transition-timing-function: ease;
}

.fx-press {
    scale: .95;
    transition-duration: .08s;
}

.fx-ripple-wrap {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.fx-ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: .28;
    scale: 0;
    pointer-events: none;
    animation: fx-ripple .55s ease-out forwards;
}

@keyframes fx-ripple {
    to {
        scale: 1;
        opacity: 0;
    }
}

/* Отметка «сохранено/готово» после успешного действия (например, лайк, подписка) */
.fx-pop {
    animation: fx-pop .4s cubic-bezier(.2, 1.6, .4, 1);
}

@keyframes fx-pop {
    0% { scale: 1; }
    40% { scale: 1.18; }
    100% { scale: 1; }
}

/* Плавное появление страницы */
main > :not(.sidebar):not(script) {
    animation: fx-page-in .4s ease both;
}

@keyframes fx-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Выпадающие меню шапки раскрываются, а не появляются рывком */
details[open] > .user-menu__dropdown,
details[open] > .hdrop__panel {
    animation: fx-drop .2s ease both;
}

@keyframes fx-drop {
    from { opacity: 0; translate: 0 -6px; }
    to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-press { scale: 1; }
    .fx-ripple,
    .fx-pop,
    main > :not(.sidebar):not(script),
    details[open] > .user-menu__dropdown,
    details[open] > .hdrop__panel {
        animation: none;
    }
    .fx-ripple { display: none; }
}