/* Главная страница: живые блоки под книгой.
   Книгу этот файл не касается вовсе — у неё своё оформление.

   Появление сделано прокруткой средствами самого браузера (animation-timeline),
   без скриптов: такая анимация идёт в отдельном потоке и не спорит с листанием
   книги. Где браузер этого не умеет, блоки просто видны сразу — страница
   остаётся целой, теряется только движение. */

/* ===== ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ===== */

/* Метку «оживает» ставит скрипт. Пока её нет — всё видно как обычно: страница
   без скриптов не должна остаться пустой.

   Новый способ самого браузера (animation-timeline) пришлось оставить: он есть
   не везде, и в браузере, где его нет, движения не было вовсе. */

.оживает .появление,
.оживает .лента-работ .работа {
    opacity: 0;
    transform: translateY(60px) scale(.97);
    /* Движение только по прозрачности и сдвигу: такие свойства браузер считает
       в отдельном потоке, и прокрутка не дёргается */
    transition: opacity .75s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

/* Карточки работ не всплывают, а мягко проявляются: десяток одновременно
   едущих картинок читался бы как рябь */
.оживает .лента-работ .работа { transform: scale(.94); }

/* Внутренности блока — второй ступенью, с задержкой от скрипта */
.оживает .появление h2,
.оживает .появление h3,
.оживает .появление p,
.оживает .появление .шаги li,
.оживает .появление .главные-кнопки,
.оживает .цифры .цифра {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* Доехало до экрана — встало на место */
.оживает .появление.видно,
.оживает .лента-работ .работа.видно,
.оживает .появление h2.видно,
.оживает .появление h3.видно,
.оживает .появление p.видно,
.оживает .появление .шаги li.видно,
.оживает .появление .главные-кнопки.видно,
.оживает .цифры .цифра.видно {
    opacity: 1;
    transform: none;
}

/* ===== ЦИФРЫ ПЛОЩАДКИ ===== */

/* Три числа вместо абзаца похвалы: сколько стилей, работ и промптов.
   Пустая витрина не убеждает, а числа читаются мгновенно */
.цифры {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.цифра {
    padding: 22px 20px;
    border-radius: 18px;
    border: 1px solid var(--граница);
    background:
        radial-gradient(120% 130% at 0% 0%, rgba(99, 102, 241, .14), transparent 62%),
        var(--фон-карточки);
}

.цифра b {
    display: block;
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(120deg, #fff, var(--салатовый));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.цифра span { display: block; margin-top: 8px; color: var(--текст-тусклый); font-size: 14px; }

/* ===== ФИНАЛЬНЫЙ ПРИЗЫВ ===== */

/* Дочитавшему до конца надо сказать, что делать дальше. Свечение растворяется
   в черноте само — рамки здесь были бы стыком двух разных страниц */
.призыв {
    position: relative;
    margin: 36px 0 10px;
    padding: 48px 32px;
    text-align: center;
}

.призыв::before {
    content: "";
    position: absolute;
    inset: -30px -60px;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 80% at 50% 30%, rgba(99, 102, 241, .26), rgba(99, 102, 241, 0) 70%),
        radial-gradient(50% 70% at 50% 90%, rgba(0, 255, 136, .08), rgba(0, 255, 136, 0) 72%);
}

.призыв > * { position: relative; z-index: 1; }

.призыв h2 {
    font-size: clamp(24px, 3.2vw, 40px);
    line-height: 1.15;
    margin-bottom: 12px;
}
.призыв p { color: var(--текст-тусклый); font-size: 16px; max-width: 640px; margin: 0 auto 22px; }
.призыв .главные-кнопки { justify-content: center; }

/* ===== ЖИВОСТЬ МЕЛОЧЕЙ ===== */

/* Кнопки и карточки чуть отзываются на курсор: движение подсказывает,
   что элемент живой, но не отвлекает от чтения */
.цифра {
    transition: transform .25s ease, border-color .25s ease;
}
.цифра:hover {
    transform: translateY(-3px);
    border-color: rgba(99, 102, 241, .5);
}

/* ===== КОМУ ДВИЖЕНИЕ МЕШАЕТ ===== */

/* Настройка системная, спрашивать о ней человека не нужно: всё показываем
   сразу и на месте */
@media (prefers-reduced-motion: reduce) {
    /* Скрипт при этой настройке не запускается вовсе, но если метка осталась
       от прошлого показа — гасим движение и здесь */
    .оживает .появление,
    .оживает .появление *,
    .оживает .лента-работ .работа,
    .оживает .цифры .цифра {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .цифра { transition: none; }
    .цифра:hover { transform: none; }
}