/* =====================================================================
   HERO SPLIT — 1:1 воспроизведение welcome-аккордеона ideadevelopment.ge,
   адаптировано с 3 панелей на 2. МЕХАНИКА клиента, ЦВЕТА наши (нейтральные
   маски + янтарь --ih-primary), без бирюзы ideadev.

   Аккордеон-рост ширины = «зум»: панель растит width (idle 50/50 -> active 64%
   / inactive 36%), <img> внутри с object-fit:cover укрупняется за счёт роста
   контейнера. Реальный <img> (НЕ background) — именно он даёт плавный рост.
   Единый transition: all 1.2s ease (обычный ease, НЕ cubic) на панели, img,
   масках, заголовке, кнопке — как у клиента.

   Гибрид (как у клиента): :hover панели -> self-reveal (маска уходит, заголовок
   растёт, кнопка проявляется); JS-классы .active/.inactive -> ширина + янтарное
   тонирование соседней (сосед не реагирует на чужой :hover без :has, поэтому JS).
   ===================================================================== */

.hero-split {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    background: var(--ih-hero-bg, #121019);
}

/* ---- wrapper (ideadev .welcome_wrapper) ---- */
.welcome_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* верхняя маска под фиксированную шапку (ideadev .welcome_header_mask:
   бирюза->прозрачн; здесь нейтральный тёмный->прозрачн) */
.welcome_header_mask {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(12, 10, 8, 0.72) 0%, rgba(12, 10, 8, 0) 100%);
}

/* ---- panel (ideadev .welcome_project) ---- */
.welcome_project {
    position: relative;
    /* idle 50/50 (адаптация 3->2 панелей). width — единственный драйвер роста,
       flex:0 0 auto делает width flex-basis'ом, no-grow/no-shrink -> точная сумма. */
    flex: 0 0 auto;
    width: 50%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    display: block;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid rgba(255, 255, 255, 0.9);
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    transition: all 1.2s ease;
    will-change: width;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.welcome_project:first-of-type { border-left: none; }
.welcome_project:last-of-type  { border-right: none; }

/* аккордеон: активная растёт, соседняя сжимается (active ~1.78x inactive) */
.welcome_project.active   { width: 64%; }
.welcome_project.inactive { width: 36%; }

/* ---- базовая тоновая маска (ideadev .welcome_standard_mask):
   нейтральный тёмный, уходит в opacity:0 на активной ---- */
.welcome_standard_mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    background: rgba(10, 8, 6, 0.22);
    transition: all 1.2s ease;
}
.welcome_project.active .welcome_standard_mask {
    opacity: 0;
}

/* ---- маска соседней панели (ideadev .welcome_grayscale_mask):
   у клиента — чёрный grayscale; У НАС — СИЛЬНО ЗАТЕМНЁННЫЙ ТЁПЛО-СЕРЫЙ тон с лёгкой
   оранжевой примесью (не сочный оранж). Два слоя: плотный тёмный тёпло-серый +
   слабый приглушённый оранж. Соседнее фото ощутимо темнеет. Градиент кренится к
   внешнему краю; .reverse (1-я панель) — зеркально. ---- */
.welcome_grayscale_mask {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    background:
        linear-gradient(to left, rgba(30, 26, 20, 0.70) 0%, rgba(30, 26, 20, 0.55) 100%),
        linear-gradient(to left, rgba(235, 147, 21, 0.16) 0%, rgba(235, 147, 21, 0.06) 100%);
    transition: all 1.2s ease;
}
.welcome_grayscale_mask.reverse {
    background:
        linear-gradient(to right, rgba(30, 26, 20, 0.70) 0%, rgba(30, 26, 20, 0.55) 100%),
        linear-gradient(to right, rgba(235, 147, 21, 0.16) 0%, rgba(235, 147, 21, 0.06) 100%);
}
.welcome_project.inactive .welcome_grayscale_mask {
    opacity: 1;
}

/* ---- фото (ideadev .welcome_project_photo > img) — РЕАЛЬНЫЙ <img>, cover.
   Рост идёт от ширины панели; img тянется/кадрируется плавно (transition all). ---- */
.welcome_project_photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    line-height: 0;
    overflow: hidden;
}
.welcome_project_photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 1.2s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---- нижний оверлей с текстом (ideadev .welcome_project_overlay) ---- */
/* Вся подпись собрана вертикальным стеком внизу панели (бейдж -> заголовок ->
   подзаголовок -> Learn more), якорится к низу, растёт вверх — ничего не наслаивается. */
.welcome_project_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 70px 50px 42px;
    z-index: 3;
    opacity: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(20, 16, 10, 0) 0%, rgba(20, 16, 10, 0.72) 100%);
    transition: all 1.2s ease;
}

/* заголовок 26px -> 40px (ideadev .welcome_project_title) */
.welcome_project_title {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
    margin: 0 0 10px 0;
    transition: all 1.2s ease;
}
.welcome_project.active .welcome_project_title {
    font-size: 40px;
    margin: 0 0 12px 0;
}

/* подзаголовок — наше поле (в оригинале нет); тихий, всегда виден */
.welcome_project_sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
    margin: 0;
    transition: all 1.2s ease;
}

/* кнопка "Learn more" — отдельной строкой ниже подзаголовка, в потоке (место
   зарезервировано, opacity 0 -> 1 на активной — без перекрытий). */
.welcome_project_button {
    position: static;
    margin: 16px 0 0 0;
    display: flex;
    align-items: center;
    opacity: 0;
    white-space: nowrap;
    transition: all 1.2s ease;
}
.welcome_project.active .welcome_project_button {
    opacity: 1;
}
.welcome_project_button span {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.welcome_project_button svg {
    display: block;
    transition: transform 0.3s ease;
}
/* ---------------------------------------------------------------------
   HOVER-only reveals — устройства с настоящим hover (десктоп).
   На тач-устройствах :hover «залипает» первым тапом (растит заголовок,
   съедает клик по ссылке), поэтому все hover-ревилы гасим через
   @media (hover: hover). JS-аккордеон (.active/.inactive) — десктоп-only,
   не затрагивается.
   --------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .welcome_project:hover .welcome_standard_mask {
        opacity: 0;
    }
    .welcome_project:hover .welcome_project_title {
        font-size: 40px;
        margin: 0 0 12px 0;
    }
    .welcome_project:hover .welcome_project_button {
        opacity: 1;
    }
    .welcome_project:hover .welcome_project_button svg {
        transform: translateX(5px);
    }
}

/* ---- бейдж — наше поле (в оригинале нет), теперь в потоке над заголовком ---- */
.welcome_badge {
    position: static;
    align-self: flex-start;
    margin: 0 0 16px 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: all 1.2s ease;
}
.welcome_badge--amber {
    background: var(--ih-primary, #eb9315);
    color: #1a1206;
    box-shadow: 0 6px 18px rgba(235, 147, 21, 0.30);
}
.welcome_badge--glass {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* ---------------------------------------------------------------------
   MOBILE (<=1200px): вертикальный стек, hover off (ideadev @media 1200)
   --------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .welcome_wrapper {
        flex-direction: column;
        /* заполняем ровно видимый экран: две панели поделят его поровну */
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .welcome_project,
    .welcome_project.active,
    .welcome_project.inactive {
        width: 100%;
        /* две панели поровну заполняют 100dvh (каждая ~50dvh), без пустоты снизу */
        flex: 1 1 0;
        height: auto;
        min-height: 0;
        border-left: none;
        border-right: none;
        border-top: 2px solid rgba(255, 255, 255, 0.9);
    }
    .welcome_project:first-of-type { border-top: none; }

    /* на тач — без ростов/реакций соседа */
    .welcome_standard_mask { opacity: 0.32; }
    .welcome_grayscale_mask { display: none; }

    /* На мобиле аккордеон/hover не работает -> фото статичны. Оживляем мягким
       ken-burns (как project-hero @keyframes ih-kb-hero): плавный зум+пан,
       работает на тач (не зависит от hover). overflow:hidden на панели и
       .welcome_project_photo не даёт зуму вылезти -> без h-scroll. transition
       на img тут не мешает: ширина/hover на мобиле не меняются. */
    .welcome_project_photo img {
        transform-origin: center center;
        /* transition на мобиле не нужен (ширина/hover не меняются) — снимаем, чтобы
           keyframe-зум ничем не перебивался и шёл абсолютно плавно */
        transition: none;
        animation: ih-kb-hero-split 22s ease-in-out infinite alternate;
    }
    /* вторая панель — сдвиг фазы + другая длительность, чтобы «дышали» не синхронно */
    .welcome_project:nth-of-type(2) .welcome_project_photo img {
        animation-duration: 26s;
        animation-delay: -9s;
    }

    .welcome_header_mask { height: 120px; }

    .welcome_project_overlay {
        height: auto;
        padding: 24px 24px 28px;
    }

    .welcome_project_title,
    .welcome_project.active .welcome_project_title {
        font-size: 22px;
        margin: 0;
    }

    .welcome_project_sub {
        margin: 8px 0 0 0;
    }

    /* кнопка скрыта на мобиле (ideadev .welcome_project_button {display:none}) */
    .welcome_project_button {
        display: none;
    }

    .welcome_badge {
        margin: 0 0 12px 0;
    }
}

@media (max-width: 575.98px) {
    /* панели остаются flex:1 1 0 (делят 100dvh поровну) — жёсткие высоты убраны,
       чтобы первый экран точно заполнял видимый вьюпорт без пустоты снизу */
    .welcome_project,
    .welcome_project.active,
    .welcome_project.inactive {
        flex: 1 1 0;
        height: auto;
        min-height: 0;
    }
    .welcome_header_mask { height: 90px; }
}

/* ---------------------------------------------------------------------
   reduced motion — гасим все переходы
   --------------------------------------------------------------------- */
/* reduced-motion suppression removed: animations must always play (owner requirement) */

/* ---------------------------------------------------------------------
   Ken-burns для фото панелей на мобиле/тач (см. @media max-width:1200px).
   Непрерывный авто-зум 1.05 -> 1.15, infinite alternate, ease-in-out —
   заметно «дышит» без hover (как project-hero ih-kb-hero). ЧИСТЫЙ scale
   без translate: scale всегда >= 1.05, фото гарантированно перекрывает
   панель со всех сторон -> ни щелей по краям, ни горизонтального скролла
   на 375/360. overflow:hidden на .welcome_project и .welcome_project_photo
   удерживает укрупнённое фото внутри панели.
   --------------------------------------------------------------------- */
@keyframes ih-kb-hero-split {
    from { transform: scale(1.05); }
    to   { transform: scale(1.15); }
}