/*
 * ИИАТОМ-Маркет — home.css (шаблон templates/public/home.php).
 *
 * .am-tool-card и .am-before-after — общие компоненты (parts/tool-card.php, parts/before-after.php),
 * переиспользуемые catalog.php/category.php тоже — их стили вынесены в assets/css/public.css
 * (грузится на каждой публичной странице автоматически, inc/class-am-assets.php::enqueue_public()).
 * Раньше были продублированы байт-в-байт в трёх page-css — не дублируем здесь.
 *
 * Только var(--am-*) — см. tokens.css. Радиальные акценты hero строятся через color-mix() поверх
 * готовых токенов (--am-blue/--am-magenta/--am-lime), а не новыми rgba-литералами: список
 * линейных градиентов в tokens.css закрытый, а сами акцентные пятна в нём не токенизированы.
 */

/* =========================================================================================
 * 1. Hero
 * =======================================================================================*/

.am-home-hero {
    position: relative;
    overflow: hidden;
    max-width: var(--am-container);
    margin-top: var(--am-s-6);
    margin-inline: auto;
    padding: var(--am-pad-section);
    border-radius: var(--am-r-2xl);
    background: var(--am-grad-hero);
    box-shadow: var(--am-sh-hero);
    color: var(--am-text-on-dark);
}

/* Радиальные пятна поверх тёмного градиента — geometry как в макете, цвет только из токенов. */
.am-home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 420px at 12% 0%, color-mix(in srgb, var(--am-blue) 40%, transparent), transparent 60%),
        radial-gradient(700px 400px at 92% 8%, color-mix(in srgb, var(--am-magenta) 32%, transparent), transparent 62%),
        radial-gradient(600px 500px at 60% 100%, color-mix(in srgb, var(--am-lime) 16%, transparent), transparent 60%);
}

.am-home-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--am-s-8);
    align-items: center;
}

.am-home-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--am-s-4);
    /* Первая загрузка публичной страницы — единственное место в теме, где уместна лёгкая
     * hero-хореография (impeccable: brand-регистр разрешает ambitious first-load motion).
     *
     * 30.08.2026, замер: этот блок содержит LCP-элемент главной (заголовок и лид). Пока он
     * выезжал ИЗ opacity:0, разрыв LCP−FCP держался на 588 мс при длительности анимации 520 мс —
     * то есть самый крупный элемент страницы «появлялся» для браузера только к концу
     * хореографии. Движение оставлено полностью (тот же сдвиг на 12 px, та же длительность
     * и кривая), убрано только затухание прозрачности: текст читается сразу, а едет по-прежнему. */
    animation: am-rise-in var(--am-dur-hero) var(--am-ease-out-soft) both;
}

.am-home-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--am-s-2);
}

.am-home-hero__badge {
    background: var(--am-border-dark);
    color: var(--am-white);
    border-color: transparent;
}

.am-home-hero__title {
    color: var(--am-white);
    text-wrap: balance;
}

.am-home-hero__lead {
    max-width: 56ch;
}

.am-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--am-s-3);
}

.am-home-hero__disclaimer {
    max-width: 52ch;
    color: var(--am-text-on-dark-subtle);
}

/* Факты hero — намеренно ОДНИМ начертанием, без крупных цифр: "большая цифра + подпись +
 * метрики рядом" запрещена заданием как SaaS-клише. Контент из макета сохранён, подача — строкой
 * спецификации, а не плашками-KPI. */
.am-home-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--am-s-2) var(--am-s-5);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--am-fs-xs);
    color: var(--am-text-on-dark-muted);
}

.am-home-hero__facts li {
    position: relative;
    padding-left: var(--am-s-4);
}

.am-home-hero__facts li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--am-action);
}

.am-home-hero__art {
    justify-self: center;
}

.am-home-hero__art img {
    max-width: min(240px, 60vw);
    height: auto;
    /* rgba(8,11,32,.5) из макета — это ровно --am-navy-900 на 50%, через color-mix(), а не новый литерал. */
    filter: drop-shadow(0 22px 40px color-mix(in srgb, var(--am-navy-900) 50%, transparent));
}

@media (min-width: 860px) {
    .am-home-hero__inner {
        grid-template-columns: 1.3fr .7fr;
    }

    .am-home-hero__art img {
        max-width: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .am-home-hero__copy {
        animation: none;
    }
}

/* Лёгкий параллакс акцентных пятен hero (пакет W2) — чисто декоративный слой (::before, тот же,
 * что рисует радиальные пятна выше), сдвигается на пару десятков пикселей, пока hero проходит
 * через экран. Named view-timeline: анимируем не сам .am-home-hero (трекаемый элемент), а его
 * ::before — modern-web-guidance/parallax-scroll-effects требует именно это для не-subject-слоёв.
 * @supports — фича без полифилла (Firefox её пока не поддерживает): эффект декоративный, поэтому
 * по гайду фолбэк не нужен — без поддержки просто ничего не двигается, hero не ломается.
 * will-change точечно: живёт только внутри самого @supports-блока, не на статичных браузерах. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .am-home-hero {
            view-timeline: --am-hero-view block;
        }

        .am-home-hero::before {
            animation: am-hero-parallax linear both;
            animation-timeline: --am-hero-view;
            will-change: transform;
        }

        @keyframes am-hero-parallax {
            from { transform: translateY(0); }
            to   { transform: translateY(28px); }
        }
    }
}

/* =========================================================================================
 * 2. Как работает ИИАТОМ-Маркет (закрывает требование "путь товара в ИИАТОМ-Маркете", см. докблок home.php)
 * =======================================================================================*/

.am-home-flow__lead {
    max-width: 60ch;
    margin-top: var(--am-s-2);
}

.am-home-flow__list {
    margin-top: var(--am-s-6);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--am-s-4);
    counter-reset: none;
}

.am-home-flow__item {
    display: flex;
    align-items: baseline;
    gap: var(--am-s-3);
    padding: var(--am-s-4);
    background: var(--am-surface);
    border: 1px solid var(--am-border-soft);
    border-radius: var(--am-r-lg);
}

.am-home-flow__num {
    flex-shrink: 0;
    color: var(--am-link-hover);
    font-weight: var(--am-fw-bold);
}

.am-home-flow__text {
    color: var(--am-text);
    font-weight: var(--am-fw-semi);
}

/* =========================================================================================
 * 3. Четыре направления (НОВОЕ 29.07 — REDESIGN_2026_07_29 Решение 7) + превью популярных
 *    инструментов. Направления заменили собой плоскую сетку 6 marketplace-категорий — сама
 *    категория теперь на уровень ниже направления (см. catalog.php).
 * =======================================================================================*/

.am-home-directions__lead {
    max-width: 60ch;
    margin-top: var(--am-s-2);
}

.am-home-directions__grid {
    margin-top: var(--am-s-6);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--am-gap-grid);
}

.am-home-dir {
    display: flex;
    flex-direction: column;
    gap: var(--am-s-2);
    text-decoration: none;
    text-align: center;
    align-items: center;
}

/* ВОЛНА 1 (02.08.2026): было 4 направления с картинкой (design/uploads/categories/*.png),
 * стало 7 категорий — своих иллюстраций для новых (текст/SEO/брендинг) нет и заказывать их
 * генерацией (Polza) не входит в это задание. Иконка (am_theme_category_icon(),
 * inc/class-am-pages.php) в цветной плашке — тот же приём, что уже применён в .am-catalog-card__icon. */
.am-home-dir__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--am-r-lg);
    background: var(--am-state-progress-bg);
    color: var(--am-link);
}

.am-home-dir__name {
    color: var(--am-text);
}

.am-home-dir__desc {
    color: var(--am-text-muted);
    max-width: 32ch;
}

.am-home-dir__count {
    margin-top: auto;
    color: var(--am-text-subtle);
    font-size: var(--am-fs-2xs);
}

/* Stagger карточек направлений (пакет W2) — скрыто, ТОЛЬКО пока секция ждёт reveal: селектор
 * завязан на .am-observe (components.css §21, добавляет assets/js/animations.js), поэтому без
 * JS карточки видны сразу, как обычно, а не спрятаны безусловно. */
.am-section.am-observe .am-home-directions__grid > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--am-dur-slow) var(--am-ease-out-soft),
                transform var(--am-dur-slow) var(--am-ease-out-soft);
}

.am-section.am-observe.am-inview .am-home-directions__grid > * {
    opacity: 1;
    transform: none;
}

.am-home-directions__grid > *:nth-child(1) { transition-delay: 0ms; }
.am-home-directions__grid > *:nth-child(2) { transition-delay: 70ms; }
.am-home-directions__grid > *:nth-child(3) { transition-delay: 140ms; }
.am-home-directions__grid > *:nth-child(4) { transition-delay: 210ms; }
.am-home-directions__grid > *:nth-child(5) { transition-delay: 280ms; }
.am-home-directions__grid > *:nth-child(6) { transition-delay: 350ms; }
/* Потолок задержки — 7 категорий по CONTRACT.md §1, дальше не растягиваем линейно на весь хвост. */
.am-home-directions__grid > *:nth-child(n+7) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
    .am-home-directions__grid > * {
        opacity: 1;
        transform: none;
    }
}

.am-home-catalog__lead {
    max-width: 60ch;
    margin-top: var(--am-s-2);
}

.am-home-catalog__grid {
    margin-top: var(--am-s-8);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--am-gap-grid);
}

.am-home-catalog__more {
    margin-top: var(--am-s-6);
    display: flex;
    justify-content: center;
}

/* =========================================================================================
 * 4. Конструктор — витрина главного инструмента
 * =======================================================================================*/

.am-home-constructor__inner {
    padding: var(--am-pad-section);
    border-radius: var(--am-r-2xl);
    background: var(--am-grad-panel);
    color: var(--am-text-on-dark);
}

.am-home-constructor__copy {
    max-width: 62ch;
    display: flex;
    flex-direction: column;
    gap: var(--am-s-4);
}

/* .am-h2/.am-body по умолчанию красят текст под светлый фон (base.css) — на тёмной панели
 * это надо перебить явно, как уже сделано для .am-hero-title на главном hero. */
.am-home-constructor__copy .am-h2 {
    color: var(--am-white);
}

.am-home-constructor__lead {
    color: var(--am-text-on-dark-muted);
}

.am-home-constructor__facts {
    color: var(--am-text-on-dark-muted);
}

.am-home-constructor__facts li::before {
    background: var(--am-action);
}

/* =========================================================================================
 * 5. Примеры до/после — переключатель на нативных radio, без JS (клавиатура работает из коробки)
 * =======================================================================================*/

.am-home-examples__tabs {
    margin-top: var(--am-s-6);
}

.am-home-examples__tab {
    display: inline-flex;
    margin: 0 var(--am-s-2) var(--am-s-3) 0;
    cursor: pointer;
}

.am-home-examples__radio:checked + .am-home-examples__tab {
    background: var(--am-navy-600);
    color: var(--am-white);
    border-color: var(--am-navy-600);
}

.am-home-examples__radio:focus-visible + .am-home-examples__tab {
    outline: 2px solid var(--am-focus);
    outline-offset: 2px;
}

.am-home-examples__panel {
    display: none;
    margin-top: var(--am-s-2);
}

#am-example-0:checked ~ #am-example-panel-0 { display: block; }
#am-example-1:checked ~ #am-example-panel-1 { display: block; }
#am-example-2:checked ~ #am-example-panel-2 { display: block; }
#am-example-3:checked ~ #am-example-panel-3 { display: block; }
#am-example-4:checked ~ #am-example-panel-4 { display: block; }
#am-example-5:checked ~ #am-example-panel-5 { display: block; }

.am-home-examples__more {
    margin-top: var(--am-s-6);
}

/* =========================================================================================
 * 5b. Фото/видео/аудио — витрина стиля (НЕ «до/после»: реальных запусков этих инструментов
 *     ещё не было, см. докблок home.php). Просто галерея, без переключателя и без метрик.
 * =======================================================================================*/

.am-home-samples__lead {
    max-width: 62ch;
    margin-top: var(--am-s-2);
    color: var(--am-text-muted);
}

.am-home-samples__grid {
    margin-top: var(--am-s-8);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--am-gap-grid);
}

.am-home-samples__col {
    display: flex;
    flex-direction: column;
    gap: var(--am-s-3);
}

.am-home-samples__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--am-s-2);
}

.am-home-samples__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--am-r-lg);
    border: 1px solid var(--am-border-soft);
}

.am-home-samples__link {
    align-self: flex-start;
}

/* =========================================================================================
 * 6. FAQ + база знаний
 * =======================================================================================*/

.am-home-faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--am-s-10);
}

/* .am-faq (parts/faq.php) — та же минимальная обвязка, что в tool.css/tool-unit.css/group.css:
 * общего public.css в раскладке темы пока нет, поэтому дублируется в каждом page-css. */
.am-faq {
    margin-top: 0;
}

.am-faq__heading {
    margin-bottom: var(--am-s-4);
}

.am-home-kb {
    margin-top: var(--am-s-5);
    display: flex;
    flex-direction: column;
    gap: var(--am-s-4);
}

.am-home-kb__item {
    padding-bottom: var(--am-s-4);
    border-bottom: 1px solid var(--am-border-soft);
}

.am-home-kb__meta {
    display: block;
    color: var(--am-text-subtle);
    margin-bottom: 4px;
}

.am-home-kb__title {
    color: var(--am-text);
    font-weight: var(--am-fw-semi);
}

.am-home-kb__title:hover {
    color: var(--am-link);
}

.am-home-kb__more {
    margin-top: var(--am-s-4);
}

@media (min-width: 860px) {
    .am-home-faq__inner {
        grid-template-columns: 1.2fr .8fr;
    }
}

/* Карточка инструмента и блок "до/после" — assets/css/public.css, см. докблок файла. */

/* Движение hero-копи без затухания — см. докблок у .am-home-hero__copy выше.
   Общий am-fade-up-in (components.css) не трогаем: он работает на блоках, которые LCP не держат. */
@keyframes am-rise-in {
    from { transform: translateY(12px); }
    to   { transform: translateY(0); }
}