/* State: Home — Frame 1: лого центр (966), низ (329) = точка схода пунктиров */
.state-home:not(.state-chat) .header-brand {
    left: 880px !important;   /* 966 - 86: центр лого 966 */
    top: 173px !important;
}

/* State: Home — Frame 1: лого, ai_status, tagline */
.state-home:not(.state-chat) .header-brand .logo-text {
    left: 160px !important;
    top: -10px !important;
}

.state-home:not(.state-chat) .header-brand .tagline {
    left: 160px !important;
    top: 55px !important;
}

.state-home .sections {
    opacity: 1;
    transform: translateY(0);
}

.state-home .section-details {
    display: none;
}

/* Кнопка назад: скрыта только на главной без чата */
.state-home:not(.state-chat) .back-button {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

/* Показать кнопку назад при открытом чате (Frame 5, Frame 6) */
.state-chat .back-button {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Поднять footer (tg/почта/робот) на высоту кнопки назад */
.state-chat .footer,
.state-section-create .footer,
.state-section-implement .footer,
.state-section-train .footer {
    bottom: 34px;   /* высота кнопки назад */
}

.state-home .chat-panel {
    transform: translateX(100%);
}

/* State: Section Opened — Frame 2 (без чата), Figma node 39-24 */

/* Frame 2: лого 776,98; ai_status 854,105; создадим 874,130 */
.state-section-create:not(.state-chat) .header-brand,
.state-section-implement:not(.state-chat) .header-brand,
.state-section-train:not(.state-chat) .header-brand {
    left: 776px !important;
    top: 98px !important;
    transform: none;
}

/* Frame 6: при открытии чата лого просто сдвигается левее (253), top как в Frame 2 */
.state-section-create.state-chat .header-brand,
.state-section-implement.state-chat .header-brand,
.state-section-train.state-chat .header-brand {
    left: 253px !important;
    top: 98px !important;
    transform: none;
}

/* Frame 6: ai_status и заголовок раздела — те же высоты что в простом режиме */
.state-section-create.state-chat .header-brand .logo-text,
.state-section-implement.state-chat .header-brand .logo-text,
.state-section-train.state-chat .header-brand .logo-text {
    left: 92px !important;
    top: -18px !important;
}

.state-section-create.state-chat .header-brand .section-title-in-header,
.state-section-implement.state-chat .header-brand .section-title-in-header,
.state-section-train.state-chat .header-brand .section-title-in-header {
    left: 92px !important;
    top: 5px !important;
}

.state-section-create .header-brand .logo,
.state-section-implement .header-brand .logo,
.state-section-train .header-brand .logo {
    left: 0 !important;
    top: 0 !important;
}

.state-section-create .header-brand .logo-pyramid,
.state-section-implement .header-brand .logo-pyramid,
.state-section-train .header-brand .logo-pyramid {
    width: 84px !important;
    height: 84px !important;
}

.state-section-create .header-brand .logo-image,
.state-section-implement .header-brand .logo-image,
.state-section-train .header-brand .logo-image {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.state-section-create .header-brand .logo-text,
.state-section-implement .header-brand .logo-text,
.state-section-train .header-brand .logo-text {
    left: 98px !important;
    top: -18px !important;
}

.state-section-create .header-brand .section-title-in-header,
.state-section-implement .header-brand .section-title-in-header,
.state-section-train .header-brand .section-title-in-header {
    left: 98px !important;
    top: 5px !important;
    font-size: 80px !important;
}

/* Заголовок раздела под ai_status, серый #A5A5A5 */
.state-section-create .section-title-in-header,
.state-section-implement .section-title-in-header,
.state-section-train .section-title-in-header {
    opacity: 1;
    color: #A5A5A5;
}

.state-section-create .header-brand .tagline,
.state-section-implement .header-brand .tagline,
.state-section-train .header-brand .tagline {
    opacity: 0;
}

/* Разделы главной исчезают */
.state-section-create .sections .section,
.state-section-implement .sections .section,
.state-section-train .sections .section {
    opacity: 0;
    pointer-events: none;
}

/* Исправление мерцания: скрываем текст всех разделов, если любой раздел открыт */
body[class*="state-section-"] .sections .section .section-title,
body[class*="state-section-"] .sections .section .section-description {
    opacity: 0 !important;
    transition: none !important;
}

/* Во время перехода: кликнутый раздел виден (но заголовок скрыт — летит копия), заголовок в шапке скрыт */
.state-section-transition.state-section-create .sections .section[data-section="create"] { opacity: 1 !important; pointer-events: none; }
.state-section-transition.state-section-implement .sections .section[data-section="implement"] { opacity: 1 !important; pointer-events: none; }
.state-section-transition.state-section-train .sections .section[data-section="train"] { opacity: 1 !important; pointer-events: none; }
.state-section-transition.state-section-create .sections .section[data-section="create"] .section-title,
.state-section-transition.state-section-create .sections .section[data-section="create"] .section-description { opacity: 0 !important; }
.state-section-transition.state-section-implement .sections .section[data-section="implement"] .section-title,
.state-section-transition.state-section-implement .sections .section[data-section="implement"] .section-description { opacity: 0 !important; }
.state-section-transition.state-section-train .sections .section[data-section="train"] .section-title,
.state-section-transition.state-section-train .sections .section[data-section="train"] .section-description { opacity: 0 !important; }
.state-section-transition .header-brand .section-title-in-header { opacity: 0 !important; transition: none !important; }
/* Слово прилетело — показываем заголовок в шапке ДО снятия fly, чтобы не было моргания */
.state-section-transition.state-section-phase2 .header-brand .section-title-in-header { opacity: 1 !important; transition: none !important; }

/* При снятии transition-класса — headerTitle без transition, мгновенно виден */
.state-section-create .section-title-in-header,
.state-section-implement .section-title-in-header,
.state-section-train .section-title-in-header {
    transition: none !important;
}

/*
 * Закрытие — всё параллельно в одном rAF:
 *   - Подразделы уезжают вниз (JS) и обрезаются (CSS overflow:hidden).
 *   - Слово летит вниз (JS).
 *   - Линии сжимаются (JS).
 *   - Лого/шапка возвращаются в home (CSS transition).
 */

/* Контейнер подразделов обрезает уезжающий контент */
.subsections {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden; /* Ключевое для эффекта «ухода за край» */
}

/* При закрытии панель подразделов должна быть видна, пока JS их двигает.
   Показываем только подразделы ТЕКУЩЕГО закрываемого раздела. */
body.state-section-closing[data-closing-section="create"] #section-create,
body.state-section-closing[data-closing-section="implement"] #section-implement,
body.state-section-closing[data-closing-section="train"] #section-train {
    display: block !important;
    opacity: 1 !important;
    pointer-events: none;
}

/* Во время закрытия: подразделы полностью управляются JS (rAF loop),
   CSS не вмешивается ни transition ни animation */
body.state-section-closing .subsection {
    transition: none !important;
    animation: none !important;
}

/* Скрываем остальные, чтобы не было «каши» из 9 подразделов */
body.state-section-closing[data-closing-section="create"] #section-implement,
body.state-section-closing[data-closing-section="create"] #section-train,
body.state-section-closing[data-closing-section="implement"] #section-create,
body.state-section-closing[data-closing-section="implement"] #section-train,
body.state-section-closing[data-closing-section="train"] #section-create,
body.state-section-closing[data-closing-section="train"] #section-implement {
    display: none !important;
}

/* Убираем старые CSS-анимации фаз */
body.state-section-closing:not(.state-section-transition)[data-closing-section="create"] #section-create .subsection:nth-child(3),
body.state-section-closing:not(.state-section-transition)[data-closing-section="implement"] #section-implement .subsection:nth-child(3),
body.state-section-closing:not(.state-section-transition)[data-closing-section="train"] #section-train .subsection:nth-child(3),
body.state-section-closing:not(.state-section-transition)[data-closing-section="create"] #section-create .subsection:nth-child(2),
body.state-section-closing:not(.state-section-transition)[data-closing-section="implement"] #section-implement .subsection:nth-child(2),
body.state-section-closing:not(.state-section-transition)[data-closing-section="train"] #section-train .subsection:nth-child(2),
body.state-section-closing:not(.state-section-transition)[data-closing-section="create"] #section-create .subsection:nth-child(1),
body.state-section-closing:not(.state-section-transition)[data-closing-section="implement"] #section-implement .subsection:nth-child(1),
body.state-section-closing:not(.state-section-transition)[data-closing-section="train"] #section-train .subsection:nth-child(1) {
    animation: none !important;
}

[data-closing-section="create"] .sections .section[data-section="create"] .section-title,
[data-closing-section="create"] .sections .section[data-section="create"] .section-description { opacity: 0 !important; }
[data-closing-section="implement"] .sections .section[data-section="implement"] .section-title,
[data-closing-section="implement"] .sections .section[data-section="implement"] .section-description { opacity: 0 !important; }
[data-closing-section="train"] .sections .section[data-section="train"] .section-title,
[data-closing-section="train"] .sections .section[data-section="train"] .section-description { opacity: 0 !important; }
body.state-section-closing .back-button {
    opacity: 0;
    pointer-events: none;
}

/* Без transition при открытии — шапка «прыгает» в позицию раздела */
.state-section-transition:not(.state-section-closing) .header,
.state-section-transition:not(.state-section-closing) .header-brand {
    transition: none !important;
}

/* Ф2: дерево разделов — JS управляет opacity/transform через setProperty('...', '...', 'important') */
body.state-section-closing.state-section-transition .sections .section {
    pointer-events: none;
}

/* Ф2: header-brand → home-позиция */
body.state-section-closing.state-section-transition:not(.state-chat) .header-brand {
    left: 880px !important;
    top: 173px !important;
}
body.state-section-closing.state-section-transition .header-brand .logo {
    top: 25px !important;
}
body.state-section-closing.state-section-transition .header-brand .logo-pyramid {
    width: 172px !important;
    height: 131px !important;
}
body.state-section-closing.state-section-transition:not(.state-chat) .header-brand .logo-text {
    left: 160px !important;
    top: -10px !important;
}
body.state-section-closing.state-section-transition:not(.state-chat) .header-brand .tagline {
    left: 160px !important;
    top: 55px !important;
    opacity: 0 !important;
}

/* Tagline появляется отдельно — через JS с задержкой */

/* 550ms с задержкой 100ms — параллельно с полётом слова */
body.state-section-closing.state-section-transition:not(.state-chat) .header-brand,
body.state-section-closing.state-section-transition .header-brand .logo,
body.state-section-closing.state-section-transition .header-brand .logo-pyramid,
body.state-section-closing.state-section-transition:not(.state-chat) .header-brand .logo-text,
body.state-section-closing.state-section-transition:not(.state-chat) .header-brand .tagline,
body.state-section-closing.state-section-transition .sections .section {
    transition-duration: 0.55s !important;
    transition-delay: 0.1s !important;
    transition-timing-function: ease-out !important;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ф3: соседи управляются JS — только transition для плавности */
body.state-section-closing .sections .section {
    pointer-events: none;
}

/* Frame 2: подразделы — те же позиции что в main (200,710,1220) */
.state-section-create:not(.state-chat) #section-create .subsection:nth-child(1),
.state-section-implement:not(.state-chat) #section-implement .subsection:nth-child(1),
.state-section-train:not(.state-chat) #section-train .subsection:nth-child(1) {
    left: var(--content-margin-x) !important;
    top: 451px !important;
    width: 500px !important;
}

.state-section-create:not(.state-chat) #section-create .subsection:nth-child(2),
.state-section-implement:not(.state-chat) #section-implement .subsection:nth-child(2),
.state-section-train:not(.state-chat) #section-train .subsection:nth-child(2) {
    left: 750px !important;
    top: 451px !important;
    width: 500px !important;
}

.state-section-create:not(.state-chat) #section-create .subsection:nth-child(3),
.state-section-implement:not(.state-chat) #section-implement .subsection:nth-child(3),
.state-section-train:not(.state-chat) #section-train .subsection:nth-child(3) {
    left: 1300px !important;
    top: 451px !important;
    width: 500px !important;
}

/* внедрим: контейнер «автоматизация процессов» шире на 20px */
.state-section-implement:not(.state-chat) #section-implement .subsection:nth-child(3) {
    width: 520px !important;
}

/* Подразделы появляются — Frame 2 и Frame 6 */
.state-section-create #section-create,
.state-section-implement #section-implement,
.state-section-train #section-train {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}


.state-section-create .back-button,
.state-section-implement .back-button,
.state-section-train .back-button {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* State: Chat Opened — анимация Frame 1 → Frame 5 (Figma) */

/* Frame 5: надпись у робота скрыта, закладка остаётся у правого края */
.state-chat .robot-label {
    opacity: 0;
    pointer-events: none;
}

/* Frame 5: home+chat — скрыть подразделы */
.state-home.state-chat .section-details {
    display: none;
}

/* Frame 6: section+chat — показать подразделы открытого раздела */
.state-section-create.state-chat #section-create,
.state-section-implement.state-chat #section-implement,
.state-section-train.state-chat #section-train {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.state-section-create.state-chat #section-implement,
.state-section-create.state-chat #section-train,
.state-section-implement.state-chat #section-create,
.state-section-implement.state-chat #section-train,
.state-section-train.state-chat #section-create,
.state-section-train.state-chat #section-implement {
    display: none;
}

/* Frame 5: Header — лого 2×, центр над линиями (243), низ на y=329 */
.state-home.state-chat .header-brand {
    left: 71px !important;   /* 243 - 172 */
    top: 67px !important;   /* 329 - 262 */
    transform: none;
}

.state-home.state-chat .header-brand .logo { left: 0 !important; top: 0 !important; }
.state-home.state-chat .header-brand .logo-text { left: 182px !important; top: -8px !important; }   /* рядом с лого, чуть выше */
.state-home.state-chat .header-brand .tagline { left: 185px !important; top: 32px !important; }

/* Frame 6: подразделы выровнены по --content-margin-x */
.state-section-create.state-chat #section-create .subsection:nth-child(1),
.state-section-implement.state-chat #section-implement .subsection:nth-child(1),
.state-section-train.state-chat #section-train .subsection:nth-child(1) {
    left: var(--content-margin-x) !important;
    top: 663px !important;
    width: 383px !important;
}

.state-section-create.state-chat #section-create .subsection:nth-child(2),
.state-section-implement.state-chat #section-implement .subsection:nth-child(2),
.state-section-train.state-chat #section-train .subsection:nth-child(2) {
    left: 778px !important;
    top: 664px !important;
    width: 395px !important;
}

.state-section-create.state-chat #section-create .subsection:nth-child(3),
.state-section-implement.state-chat #section-implement .subsection:nth-child(3),
.state-section-train.state-chat #section-train .subsection:nth-child(3) {
    left: 778px !important;
    top: 389px !important;
    width: 402px !important;
}

/* Frame 6: скрыть главные секции (дерево), показаны только подразделы */
.state-section-create.state-chat .sections,
.state-section-implement.state-chat .sections,
.state-section-train.state-chat .sections {
    opacity: 0;
    pointer-events: none;
}

/* Frame 6: короткие тексты подразделов (Figma), Frame 2 — полные */
.subsection-content-f6 {
    display: none;
}

.state-section-create.state-chat .subsection-content:not(.subsection-content-f6),
.state-section-implement.state-chat .subsection-content:not(.subsection-content-f6),
.state-section-train.state-chat .subsection-content:not(.subsection-content-f6) {
    display: none;
}

.state-section-create.state-chat .subsection-content-f6,
.state-section-implement.state-chat .subsection-content-f6,
.state-section-train.state-chat .subsection-content-f6 {
    display: block;
    margin-bottom: 12px;   /* в режиме чата меньше, чем var(--spacing-lg) */
    line-height: 1.25em;
}

/* Frame 2, Frame 5, Frame 6: контент виден и кликабелен */
.state-section-create .main-content-wrapper,
.state-section-implement .main-content-wrapper,
.state-section-train .main-content-wrapper {
    z-index: 1;
}

.state-section-create #section-create,
.state-section-implement #section-implement,
.state-section-train #section-train {
    z-index: 2;
}

/* Frame 5: секции видны, кликабельны */
.state-home.state-chat .main-content-wrapper {
    z-index: 1;
}

.state-home.state-chat .sections {
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 2;
}

.state-home.state-chat .sections .section {
    opacity: 1 !important;
    pointer-events: auto;
}

/* Режим чата: контейнеры с текстами — больше по высоте (445+10=455px) */
.state-home.state-chat .sections .section {
    max-height: 455px;
    overflow-y: auto;
}

.state-section-create.state-chat .subsection,
.state-section-implement.state-chat .subsection,
.state-section-train.state-chat .subsection {
    max-height: 455px !important;
    overflow-y: auto;
}

/* Режим чата: уменьшенные расстояния заголовок–подзаголовок–цены */
.state-home.state-chat .sections .section .section-title {
    margin-bottom: 6px !important;
}

.state-section-create.state-chat .subsection-title,
.state-section-implement.state-chat .subsection-title,
.state-section-train.state-chat .subsection-title {
    margin-bottom: 6px !important;
}

.state-section-create.state-chat .price-info,
.state-section-implement.state-chat .price-info,
.state-section-train.state-chat .price-info {
    margin-top: 8px !important;
}

/* Frame 5: секции выровнены по --content-margin-x */
.state-home.state-chat .sections .section:nth-child(1) {
    left: var(--content-margin-x) !important;
    top: 663px !important;
    width: 383px !important;
}

.state-home.state-chat .sections .section:nth-child(2) {
    left: 778px !important;
    top: 664px !important;
    width: 395px !important;
}

.state-home.state-chat .sections .section:nth-child(3) {
    left: 778px !important;
    top: 389px !important;
    width: 402px !important;
}

/* Chat wrapper — выезжает вместе с чатом */
.chat-wrapper {
    position: absolute;
    left: 1319px;   /* 1249 + 70: сдвиг вправо */
    top: 53px;      /* 103 - 50: ещё на 50px выше */
    width: 507px;   /* 457 + 50 */
    z-index: 50;
    transform: translateX(671px); /* за правой границей (1920 - 1249) */
    pointer-events: none;
    transition: transform 0.35s ease-out, filter 0.35s ease;
}

.state-chat .chat-wrapper {
    transform: translateX(0);
    pointer-events: auto;
}

/* Блог-панель: контент и чат сдвигаются вправо */
.state-blog .main-content-wrapper {
    transform: translateX(560px);
}

.state-blog.state-chat .chat-wrapper {
    transform: translateX(560px);
}

.state-blog:not(.state-chat) .chat-wrapper {
    transform: translateX(calc(671px + 560px));
}

/* Chat внутри фрейма — 507×833 (+50 по ширине и высоте) */
.chat-in-frame {
    position: relative;
    width: 507px;
    height: 833px;
    background: rgba(0, 254, 201, 0.15);
    border: 0.5px dashed rgba(0, 254, 201, 0.4);
    border-radius: var(--radius-xl);
    box-shadow: 3px 3px 10px 0 rgba(212, 219, 217, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* State: Chat Opened (Mobile) — чат на зелёном фоне внутри фрейма */
@media (max-width: 767px) {
    .state-chat .header {
        opacity: 0.3;
    }

    .state-chat .main {
        opacity: 0;
        pointer-events: none;
    }

    .state-chat .footer {
        opacity: 0;
    }

    .state-chat .mobile-contacts-btn {
        opacity: 0;
        pointer-events: none;
    }
}

/* State: Contacts Popup */
.state-contacts .contacts-popup {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.state-contacts::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay);
}

/* State: Keyboard (Mobile) */
.state-keyboard .header,
.state-keyboard .main,
.state-keyboard .footer,
.state-keyboard .back-button,
.state-keyboard .mobile-contacts-btn {
    opacity: 0;
    pointer-events: none;
}

/* Animation keyframes */
@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Те же 30px / 0.35s что fadeInUp; ease-out — без «залипания» в конце кадра */
@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.subsection-content {
    overflow: visible;
}

/* Появление подразделов только у открытой панели и не во время закрытия
   (иначе глобальный fadeInUp в конце файла перебивает reverse при «назад») */
.state-section-create:not(.state-section-closing) #section-create .subsection:nth-child(1),
.state-section-implement:not(.state-section-closing) #section-implement .subsection:nth-child(1),
.state-section-train:not(.state-section-closing) #section-train .subsection:nth-child(1) {
    animation: fadeInUp 0.35s ease-out 0.1s both;
}
.state-section-create:not(.state-section-closing) #section-create .subsection:nth-child(2),
.state-section-implement:not(.state-section-closing) #section-implement .subsection:nth-child(2),
.state-section-train:not(.state-section-closing) #section-train .subsection:nth-child(2) {
    animation: fadeInUp 0.35s ease-out 0.2s both;
}
.state-section-create:not(.state-section-closing) #section-create .subsection:nth-child(3),
.state-section-implement:not(.state-section-closing) #section-implement .subsection:nth-child(3),
.state-section-train:not(.state-section-closing) #section-train .subsection:nth-child(3) {
    animation: fadeInUp 0.35s ease-out 0.3s both;
}

/* Tooltip animation */
.robot-tooltip {
    animation: fadeIn 0.3s ease-out 3s both;
}

/* Transition classes for state changes — 350ms как везде */
.state-transitioning * {
    transition: all 0.35s ease-out !important;
}

/* Smooth transitions between states */
body {
    transition: all var(--transition-normal);
}

.main {
    transition: transform var(--transition-fast);
}

.sections {
    transition: left 0.35s ease-out, top 0.35s ease-out, transform 0.35s ease-out, opacity 0.35s ease-out;
}

.section-details {
    transition: left 0.35s ease-out, top 0.35s ease-out, transform 0.35s ease-out, opacity 0.35s ease-out;
}

/* Hover effects */
.section:hover .section-title {
    color: var(--color-primary);
    transform: translateY(-5px);
}

.section:hover .section-description {
    color: var(--color-black);
    opacity: 1;
}

/* Focus states */
.section:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}


/* Loading states */
.loading {
    pointer-events: none;
    opacity: 0.7;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--color-gray-light);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}