/**
 * Обложка главной (hero) — стили дочерней темы (redesign Zoobiznes).
 *
 * Файл подключается из functions.php (zoobiznes_hero_assets) ПОСЛЕ стилей
 * родительской темы, поэтому переопределяет их без !important.
 *
 * ВАЖНО: все правила ограничены областью обложки (.zb-hero), чтобы не влиять
 * на остальной сайт. Интерактив и графики (canvas) живут строго внутри
 * .zb-hero — секция самодостаточная, без position:fixed и без влияния на
 * прокрутку страницы.
 *
 * Источник интерактива: макет Figma (обложка) + tochki-v3.html (адаптивный
 * canvas с точками и графиками).
 */

.zb-hero {
    /* ——— токены обложки (замерено с макета) ——— */
    --zb-hero-bg:      #fefaee;
    --zb-hero-ink:     #041a19;
    --zb-hero-g1:      #01503d;
    --zb-hero-g2:      #00a152; /* он же цвет точки «.» и активных графиков */
    --zb-hero-g3:      #5dcf70;
    --zb-hero-g4:      #b9f078;

    --zb-hero-flow:    7s;      /* период перелива градиента заголовка */
    --zb-hero-acc-pad: 0.35em;  /* запас бокса под выносные элементы градиента */

    /* типографика заголовка: 120px / lh 80% / ls -0.04em */
    --zb-hero-display: clamp(34px, 8.8vw, 120px);
    --zb-hero-lh:      0.8;
    --zb-hero-ls:      -0.04em;

    position: relative;
    height: 700px;
    overflow: hidden;
    background: var(--zb-hero-bg);
    isolation: isolate;

    /* Full-bleed: секция во всю ширину экрана, даже если вставлена внутрь
       узкой колонки контента темы. Так сетка точек идёт от края до края,
       как в макете. */
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
}

.zb-hero *,
.zb-hero *::before,
.zb-hero *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Канвас: точки + графики. Занимает всю секцию, кликами не мешает.
   ========================================================================== */
.zb-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}

/* ==========================================================================
   Сцена с заголовком
   ========================================================================== */
.zb-hero__stage {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: min(1069px, 92%);
    pointer-events: none; /* клики проходят к канвасу; слово-триггер включает их обратно */
    user-select: none;
}

/* Типографика заголовка задана с !important строго внутри .zb-hero, чтобы
   правила темы (.entry-content h1 и т.п.) её не перебивали. На остальной
   сайт это не влияет. */
.zb-hero .zb-hero__headline {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    text-align: center;
    font-family: "Gentium Plus", Georgia, serif !important;
    font-size: var(--zb-hero-display) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--zb-hero-lh) !important;
    letter-spacing: var(--zb-hero-ls) !important;
    color: var(--zb-hero-ink);
}

.zb-hero .zb-hero__line {
    display: block;
    font-family: "Gentium Plus", Georgia, serif !important;
    font-size: inherit !important;
    line-height: var(--zb-hero-lh) !important;
    letter-spacing: inherit !important;
}

/* WordPress (wpautop) вставляет <br> между строками заголовка. Строки уже
   display:block, поэтому лишние переносы только раздувают высоту заголовка
   и выталкивают график за пределы обложки. Прячем их. */
.zb-hero .zb-hero__headline br {
    display: none !important;
}

/* ——— первое слово: живой градиент по тексту, кликабельно ——— */
.zb-hero__accent {
    position: relative;
    display: block;
    padding-block: var(--zb-hero-acc-pad);
    margin-block: calc(-1 * var(--zb-hero-acc-pad));

    background: linear-gradient(90deg,
        var(--zb-hero-g1) 0.105%,
        var(--zb-hero-g2) 15.870%,
        var(--zb-hero-g3) 41.095%,
        var(--zb-hero-g4) 49.980%,
        var(--zb-hero-g4) 50.020%,
        var(--zb-hero-g3) 58.905%,
        var(--zb-hero-g2) 84.130%,
        var(--zb-hero-g1) 99.895%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    animation: zb-hero-flow var(--zb-hero-flow) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: background-position, transform;
}

@keyframes zb-hero-flow {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

.zb-hero__accent:hover  { transform: scale(1.012); }
.zb-hero__accent:active { transform: scale(0.985); }
.zb-hero__accent:focus-visible {
    outline: 2px solid var(--zb-hero-g2);
    outline-offset: 10px;
    border-radius: 4px;
}

/* ——— зелёная точка «.» после «зообизнеса» ———
   Inter Bold (по запросу — не Italic), 120px, line-height 80%,
   letter-spacing -4.8px, цвет #00A152. Размер/трекинг наследуются от заголовка. */
.zb-hero .zb-hero__dot {
    font-family: "Inter", sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: inherit !important;
    line-height: var(--zb-hero-lh) !important;
    letter-spacing: var(--zb-hero-ls) !important;
    color: var(--zb-hero-g2) !important;
    -webkit-text-fill-color: var(--zb-hero-g2) !important;
}

/* ==========================================================================
   Кликабельный заголовок текущего графика (ссылка на исследование)
   ========================================================================== */
/* Цвет форсируем через .zb-hero + !important, чтобы стили ссылок темы
   (.entry-content a и т.п.) не перекрашивали ссылку графика. Как в
   tochki-v3: приглушённый по умолчанию, зелёный при наведении. */
.zb-hero .zb-hero__source {
    position: absolute;
    z-index: 3;
    transform: translateX(-50%);
    max-width: 92%;
    text-align: center;
    font-family: "Inter", sans-serif !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.3;
    color: rgba(4, 26, 25, 0.55) !important;
    text-decoration: none !important;
    white-space: nowrap;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--zb-hero-g2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, color 0.2s ease;
}

.zb-hero .zb-hero__source.is-show {
    opacity: 1;
    pointer-events: auto;
}

.zb-hero .zb-hero__source:hover,
.zb-hero .zb-hero__source:focus {
    color: var(--zb-hero-g2) !important;
}

.zb-hero .zb-hero__source:focus-visible {
    outline: 2px solid var(--zb-hero-g2);
    outline-offset: 5px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .zb-hero__accent {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 640px) {
    .zb-hero {
        /* Заголовок на мобильном крупнее (~+18–20px к прежним 34px), но
           масштабируется по ширине экрана, чтобы длинные слова не переполняли
           узкие экраны. График всегда встаёт ниже заголовка (см. layout в
           hero.js), поэтому не перекрывается. */
        --zb-hero-display: clamp(44px, 14vw, 66px);
        height: 620px;
    }

    .zb-hero__stage {
        top: 72px;
        width: 94%;
    }

    .zb-hero__source {
        white-space: normal;
        font-size: 10px;
        letter-spacing: 0.06em;
    }
}

@media (max-width: 400px) {
    .zb-hero {
        height: 560px;
    }

    .zb-hero__stage {
        top: 56px;
    }
}