/* Блок «Место для идей и визуальных историй» — hero на главной (index.php).
   Оформление — «стекло» в одной палитре (персик → мята → небо), 4 варианта слоёв:
     v1 — только нижний слой: цветной градиентный фон, без панели;
     v2 — только верхний слой: нейтральный фон и светлая матовая панель;
     v3 — градиент + матовая панель насквозь (цвет просвечивает, рамка одна — у блока);
     v4 — белый блок и цветная стеклянная панель внутри.
   Верхняя строка (hero__eyebrow) — без плашки во всех вариантах.
   Стенд: docs/design/hero.html. */

.hero {
    --hero-bg: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 62%, var(--surface-2) 100%);
    --hero-border-color: var(--brand-soft);
    --hero-shadow: none;
    --hero-pad: 37px;
    --hero-title-color: var(--text);
    --hero-title-size: clamp(28px, 5vw, 42px);
    --hero-lead-color: var(--text-muted);
    --hero-eyebrow-color: var(--brand-text);
    --hero-btn-bg: var(--brand);
    --hero-btn-color: var(--text-inverse);
    --hero-btn-shadow: none;
    --hero-link-color: var(--text-muted);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--hero-bg);
    border: 1px solid var(--hero-border-color);
    border-radius: var(--radius-lg);
    padding: var(--hero-pad);
    margin-bottom: 33px;
    box-shadow: var(--hero-shadow);
}

/* ---------- Элементы блока ---------- */

.hero .hero__eyebrow {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--hero-eyebrow-color);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero .hero__title {
    max-width: 560px;
    margin: 12px 0 13px;
    color: var(--hero-title-color);
    font-size: var(--hero-title-size);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.hero .hero__lead {
    max-width: 590px;
    margin: 0;
    color: var(--hero-lead-color);
    font-size: var(--text-md);
    line-height: 1.55;
}

.hero .hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 26px;
}

/* Ряд действий всегда слева, даже когда строки переносятся */
.hero .hero__actions.is-stacked { justify-content: flex-start; }

/* Юзер: кнопка слева, ссылки прижаты к правому краю той же строки */
.hero .hero__actions--user .button + .hero__link { margin-left: auto; }

.hero .hero__actions .button {
    border: 0;
    background: var(--hero-btn-bg);
    color: var(--hero-btn-color);
    font-weight: 700;
    box-shadow: var(--hero-btn-shadow);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.hero .hero__actions .button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.hero .hero__actions .button:active { transform: translateY(0); }

.hero .hero__links {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    flex-basis: 100%;
    justify-content: flex-end;
    gap: 18px;
    margin-left: 0;
}

.hero .hero__link {
    color: var(--hero-link-color);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 3px;
}

.hero .hero__link:hover { color: var(--brand-text); text-decoration: underline; }

/* ---------- Декор ---------- */

.hero__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.hero__blob,
.hero__grain { display: none; }

.hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
}

.hero__grain {
    position: absolute;
    inset: 0;
    opacity: .4;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

/* ---------- V1 «Нижний слой»: только градиентный фон ---------- */

.hero--v1 {
    --hero-bg:
        radial-gradient(85% 120% at 4% 0%, #ffd6bb 0%, rgba(255, 214, 187, 0) 64%),
        radial-gradient(75% 120% at 100% 100%, #c8e9da 0%, rgba(200, 233, 218, 0) 64%),
        linear-gradient(120deg, #fff3e9 0%, #eef7f0 52%, #e3f0fb 100%);
    --hero-border-color: rgba(255, 255, 255, .9);
    --hero-shadow: 0 30px 60px -44px rgba(64, 44, 30, .5);
    --hero-eyebrow-color: var(--brand-text);
    --hero-btn-shadow: 0 14px 30px -14px rgba(198, 81, 56, .75);
}

.hero--v1 .hero__blob { display: block; }
.hero--v1 .hero__blob--1 {
    top: -105px; left: -70px; width: 270px; height: 270px;
    background: radial-gradient(circle, rgba(255, 166, 120, .5) 0%, rgba(255, 166, 120, 0) 70%);
    animation: hero-float 17s ease-in-out infinite;
}
.hero--v1 .hero__blob--2 {
    right: -65px; bottom: -140px; width: 310px; height: 310px;
    background: radial-gradient(circle, rgba(114, 196, 168, .45) 0%, rgba(114, 196, 168, 0) 70%);
    animation: hero-float 21s ease-in-out infinite reverse;
}
.hero--v1 .hero__blob--3 {
    top: 16%; right: 30%; width: 170px; height: 170px;
    background: radial-gradient(circle, rgba(255, 214, 153, .45) 0%, rgba(255, 214, 153, 0) 70%);
}
.hero--v1 .hero__grain { display: block; }

/* ---------- V2 «Верхний слой»: нейтральный фон + светлая панель ---------- */

.hero--v2 {
    --hero-bg: #ebe4db;
    --hero-border-color: #e2dad0;
    --hero-shadow: 0 26px 54px -44px rgba(50, 36, 26, .6);
    --hero-eyebrow-color: var(--brand-text);
    padding: 46px 44px;
}

.hero--v2::before {
    content: "";
    position: absolute;
    inset: 20px;
    z-index: -1;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, .8);
    background: linear-gradient(125deg, rgba(255, 239, 229, .97) 0%, rgba(255, 255, 255, .95) 46%, rgba(237, 247, 243, .97) 100%);
    box-shadow: 0 16px 34px -26px rgba(70, 40, 20, .5), inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* ---------- V3 «Сквозь»: градиент + матовая панель на весь блок ---------- */

.hero--v3 {
    --hero-bg:
        radial-gradient(85% 120% at 4% 0%, #ffddc7 0%, rgba(255, 221, 199, 0) 62%),
        radial-gradient(80% 120% at 100% 100%, #cdeade 0%, rgba(205, 234, 222, 0) 62%),
        linear-gradient(120deg, #fff4ea 0%, #f0f7f1 52%, #e8f2fb 100%);
    --hero-border-color: rgba(255, 255, 255, .9);
    --hero-shadow: 0 14px 29px -19px rgba(64, 44, 30, .258), 0 1px 2px rgba(64, 44, 30, .01);
    --hero-title-color: var(--ink-title);
    --hero-eyebrow-color: var(--brand-text);
    --hero-btn-shadow: 0 8px 16px -11px rgba(198, 81, 56, .41);
}

.hero--v3::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(14px) saturate(1.04);
    backdrop-filter: blur(14px) saturate(1.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.hero--v3 .hero__blob { display: block; }
.hero--v3 .hero__blob--1 {
    top: -120px; left: -80px; width: 290px; height: 290px;
    background: radial-gradient(circle, rgba(255, 138, 96, .55) 0%, rgba(255, 138, 96, 0) 70%);
    animation: hero-float 18s ease-in-out infinite;
}
.hero--v3 .hero__blob--2 {
    right: -70px; bottom: -150px; width: 330px; height: 330px;
    background: radial-gradient(circle, rgba(88, 190, 158, .5) 0%, rgba(88, 190, 158, 0) 70%);
    animation: hero-float 22s ease-in-out infinite reverse;
}
.hero--v3 .hero__blob--3 {
    top: 12%; right: 32%; width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(255, 206, 140, .55) 0%, rgba(255, 206, 140, 0) 70%);
}
.hero--v3 .hero__grain { display: block; }

/* Компактная версия под сессией: тот же градиент v3, но не сжатый до высоты блока —
   он нарисован в габаритах гостевого hero и обрезается по верху, поэтому
   верхняя полоса совпадает с гостевой. Блобы ставим в тех же координатах,
   что у гостя (нижний мята-блоб в верхнюю полосу не попадает — скрыт). */
.hero--v3.hero--compact {
    --hero-pad: 30px 26px;
    --hero-shadow: 0 14px 29px -22px rgba(64, 44, 30, .3);
    background-size: 100% 368px;
    background-position: top left;
    background-repeat: no-repeat;
}

.hero--v3.hero--compact .hero__blob--2 { display: none; }
.hero--v3.hero--compact .hero__blob--3 { top: 44px; }

.hero--compact .hero__actions { margin-top: 0; }

/* ---------- V4 «Цветная панель»: белый блок и стеклянная панель внутри ---------- */

.hero--v4 {
    --hero-bg: var(--surface);
    --hero-border-color: var(--line);
    --hero-shadow: 0 28px 56px -46px rgba(50, 36, 26, .55);
    --hero-eyebrow-color: var(--brand-text);
    padding: 44px 42px;
}

.hero--v4::before {
    content: "";
    position: absolute;
    inset: 16px;
    z-index: -1;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, .9);
    background:
        radial-gradient(90% 130% at 6% 0%, #ffd9c2 0%, rgba(255, 217, 194, 0) 66%),
        radial-gradient(85% 130% at 100% 100%, #c6e8da 0%, rgba(198, 232, 218, 0) 66%),
        linear-gradient(120deg, #fff4e9 0%, #f1f8f3 55%, #e9f3fc 100%);
    box-shadow: 0 18px 38px -28px rgba(64, 44, 30, .55);
}

.hero--v4 .hero__grain { display: block; opacity: .3; }

/* ---------- Тени: 8 уровней от «мягкой» (sh1) до «средней» (sh8), класс hero--sh1…sh8 ---------- */

.hero--sh1 {
    --hero-shadow: 0 12px 24px -18px rgba(64, 44, 30, .22);
    --hero-btn-shadow: 0 6px 14px -10px rgba(198, 81, 56, .35);
}

.hero--sh2 {
    --hero-shadow: 0 13px 26px -18px rgba(64, 44, 30, .235);
    --hero-btn-shadow: 0 7px 15px -10px rgba(198, 81, 56, .375);
}

.hero--sh3 {
    --hero-shadow: 0 14px 28px -19px rgba(64, 44, 30, .25);
    --hero-btn-shadow: 0 8px 16px -11px rgba(198, 81, 56, .4);
}

/* середина между sh3 и sh5 */
.hero--sh4 {
    --hero-shadow: 0 14px 29px -19px rgba(64, 44, 30, .258), 0 1px 2px rgba(64, 44, 30, .01);
    --hero-btn-shadow: 0 8px 16px -11px rgba(198, 81, 56, .41);
}

.hero--sh5 {
    --hero-shadow: 0 15px 30px -19px rgba(64, 44, 30, .265), 0 1px 3px rgba(64, 44, 30, .02);
    --hero-btn-shadow: 0 8px 17px -11px rgba(198, 81, 56, .425);
}

.hero--sh6 {
    --hero-shadow: 0 16px 32px -19px rgba(64, 44, 30, .28), 0 1px 4px rgba(64, 44, 30, .03);
    --hero-btn-shadow: 0 9px 18px -11px rgba(198, 81, 56, .45);
}

.hero--sh7 {
    --hero-shadow: 0 17px 34px -20px rgba(64, 44, 30, .3), 0 2px 5px rgba(64, 44, 30, .04);
    --hero-btn-shadow: 0 9px 19px -12px rgba(198, 81, 56, .475);
}

.hero--sh8 {
    --hero-shadow: 0 18px 36px -20px rgba(64, 44, 30, .32), 0 2px 6px rgba(64, 44, 30, .05);
    --hero-btn-shadow: 0 10px 20px -12px rgba(198, 81, 56, .5);
}

/* ---------- Анимации ---------- */

@keyframes hero-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(14px, -18px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__blob { animation: none !important; }
}

/* ---------- Адаптив ---------- */

@media (max-width: 760px) {
    .hero { --hero-pad: 26px 22px; }
    .hero--v3.hero--compact { --hero-pad: 24px 20px; background-size: 100% 100vw; }
    .hero--v2 { padding: 34px 26px; }
    .hero--v2::before { inset: 12px; }
    .hero--v4 { padding: 32px 26px; }
    .hero--v4::before { inset: 10px; }
    .hero .hero__title { max-width: none; }
}