/* ==========================================================================
   Плавное появление текста hero: заголовок → подзаголовок → две кнопки.
   Грузится ТОЛЬКО на фронте (в редактор не подключается), чтобы блоки
   в админке не мигали при каждой загрузке.
   ========================================================================== */

:root {
    --hero-anim-duration: 1100ms;
    /* длительность каждого элемента */
    --hero-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* очень мягкое замедление в конце */
    --hero-anim-shift: 24px;
    /* на сколько «всплывает» снизу */
    --hero-anim-blur: 6px;
    /* лёгкая расфокусировка в начале (0px — убрать) */
    --hero-anim-start: 150ms;
    /* пауза после загрузки страницы */
    --hero-anim-step: 200ms;
    /* шаг между заголовком, подзаголовком, кнопками */
    --hero-anim-btn-step: 140ms;
    /* разница между первой и второй кнопкой */
}

@keyframes hero-soft-in {
    from {
        opacity: 0;
        transform: translate3d(0, var(--hero-anim-shift), 0);
        filter: blur(var(--hero-anim-blur));
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* backwards: пока идёт задержка, элемент уже скрыт; после конца — обычное состояние без transform/filter */
.hero .hero__title,
.hero .hero__subtitle,
.hero .hero__buttons .wp-block-button {
    animation-name: hero-soft-in;
    animation-duration: var(--hero-anim-duration);
    animation-timing-function: var(--hero-anim-ease);
    animation-fill-mode: backwards;
}

.hero .hero__title {
    animation-delay: var(--hero-anim-start);
}

.hero .hero__subtitle {
    animation-delay: calc(var(--hero-anim-start) + var(--hero-anim-step));
}

.hero .hero__buttons .wp-block-button:nth-child(1) {
    animation-delay: calc(var(--hero-anim-start) + var(--hero-anim-step) * 2);
}

.hero .hero__buttons .wp-block-button:nth-child(2) {
    animation-delay: calc(var(--hero-anim-start) + var(--hero-anim-step) * 2 + var(--hero-anim-btn-step));
}

/* Системная настройка «уменьшить анимацию» — показываем всё сразу */
@media (prefers-reduced-motion: reduce) {

    .hero .hero__title,
    .hero .hero__subtitle,
    .hero .hero__buttons .wp-block-button {
        animation: none;
    }
}