/*
 * Общее движение для всех вариантов: появление при прокрутке, блик на главной кнопке,
 * появление плавающей кнопки. Всё — только если человек не просил убрать анимацию.
 * Анимации идут с fill-mode backwards: после окончания на элементе не остаётся transform,
 * иначе окно записи виджета внутри карточки потеряло бы position: fixed.
 * @author Maksym Mariukhnik <max@absoluteweb.com>
 */
@media (prefers-reduced-motion: no-preference) {
    /* Появление блока при прокрутке */
    html.motion [data-reveal] { opacity: 0; transform: translateY(28px); }
    html.motion [data-reveal].in { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }

    /* Дети контейнера появляются по очереди; при перерисовке (смена языка, этапа, способа показа) — снова */
    html.motion [data-stagger].in > * { animation: m-rise .8s cubic-bezier(.2,.7,.2,1) backwards; }
    html.motion [data-stagger].in > :nth-child(2) { animation-delay: .09s; }
    html.motion [data-stagger].in > :nth-child(3) { animation-delay: .18s; }
    html.motion [data-stagger].in > :nth-child(4) { animation-delay: .27s; }
    html.motion [data-stagger].in > :nth-child(5) { animation-delay: .36s; }
    html.motion [data-stagger].in > :nth-child(6) { animation-delay: .45s; }
    html.motion [data-stagger].in > :nth-child(n+7) { animation-delay: .54s; }
    html.motion [data-stagger]:not(.in) > * { opacity: 0; }

    /* Первый экран: строки выходят одна за другой при загрузке */
    html.motion [data-intro] > * { animation: m-rise 1s cubic-bezier(.2,.7,.2,1) backwards; }
    html.motion [data-intro] > :nth-child(2) { animation-delay: .12s; }
    html.motion [data-intro] > :nth-child(3) { animation-delay: .24s; }
    html.motion [data-intro] > :nth-child(4) { animation-delay: .36s; }
    html.motion [data-intro] > :nth-child(5) { animation-delay: .48s; }

    /* Блик на главной кнопке записи: пробегает раз в несколько секунд */
    .shine, .g-float { position: relative; overflow: hidden; isolation: isolate; }
    .shine::after, .g-float::after {
        content: ""; position: absolute; inset: -2px auto -2px 0; width: 60%; z-index: 1; pointer-events: none;
        background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
        transform: translateX(-120%) skewX(-12deg);
        animation: m-shine 5.5s 2.2s ease-in-out infinite;
    }

    /* Плавающая кнопка «Окно записи» выезжает снизу */
    .g-float-wrap { animation: m-pop .7s cubic-bezier(.2,1.3,.4,1) backwards .3s; }
}

@keyframes m-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes m-pop { from { opacity: 0; transform: translateY(40px) scale(.9); } }
@keyframes m-shine {
    0% { transform: translateX(-120%) skewX(-12deg); }
    28%, 100% { transform: translateX(260%) skewX(-12deg); }
}