/* ==========================================================================
   index.css — Стили главной страницы
   Содержит: hero, секция услуг, о компании, слайдер логотипов, арт-секция,
             ключевые показатели, проекты, карта, FAQ, CTA-форма,
             scroll-reveal анимации, адаптив всех секций
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. ТИПОГРАФИКА — специфичная для главной
   -------------------------------------------------------------------------- */

/* Подзаголовок-лейбл секции (маленький, серый) */

#header{
    background-color: #404a5900;
}


/* --------------------------------------------------------------------------
   1. СЕКЦИЯ HERO (#hero)
   -------------------------------------------------------------------------- */

/* Анимация появления элементов hero при загрузке страницы */
@keyframes heroCta {
    from { opacity: 0; }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-title {
    opacity:   0;
    transform: translateY(24px);
    animation: heroCta 0.9s 0.35s cubic-bezier(.22, .68, 0, 1.2) both;
}
.hero-hr {
    opacity:   0;
    animation: heroCta 0.5s 0.6s ease both;
}
.hero-text {
    opacity:   0;
    transform: translateY(12px);
    animation: heroCta 0.6s 0.7s ease both;
}
.hero-cta {
    opacity:   0;
    transform: translateY(16px);
    animation: heroCta 0.7s 0.9s cubic-bezier(.22, .68, 0, 1.2) both;
}

/* Полотно hero — на всю высоту экрана.
   background ниже — запасной вариант для старых страниц, где ещё нет
   слоёв .hero-bg/.hero-overlay (см. ниже); как только редактор добавляет
   фото/видео через админку, эти слои перекрывают фон полностью. */
#hero {
    position:         relative;
    overflow:         hidden;
    height:           100vh;
    padding-top:      50px;
    padding-bottom:   70px;
    //background:       linear-gradient(
    //                      to right,
    //                      rgba(0, 0, 0, 0.75) 0%,
    //                      rgba(0, 0, 0, 0.65) 100%
    //                  ),
    //                  url('/assets/img/hero-bg.jpg') center / cover no-repeat;
    background:url('/assets/img/hero-bg.jpg') center / cover no-repeat;
}

/* Слой фонового фото/видео (добавляется через админку, вкладка «Тексты и картинки») */
.hero-bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}
.hero-bg-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
/* Видео поверх фото: невидимо, пока не подгрузится, затем плавно проявляется */
.hero-bg-video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0;
    transition: opacity 1s ease;
}
.hero-bg-video.is-ready { opacity: 1; }

/* Затемняющий градиент поверх фото/видео, под текстом */
.hero-overlay {
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: linear-gradient(
                    to right,
                    rgba(0, 0, 0, 0.75) 0%,
                    rgba(0, 0, 0, 0.65) 100%
                );
}

/* Внутренний контейнер — flex-колонка на всю высоту, поверх фона */
.hero-box {
    position:       relative;
    z-index:        2;
    width:          90%;
    margin-left:    auto;
    margin-right:   auto;
    height:         100%;
    display:        flex;
    flex-direction: column;
}

/* Заголовок «прибит» к нижней части hero */
#hero h1 {
    margin-top: auto;
    color:      #fff;
}

/* Горизонтальная линия-разделитель */
.hero-hr {
    background-color: #676767;
    height:           1px;
    border:           0;
    margin-top:       20px;
    margin-bottom:    20px;
}

/* Подзаголовок */
.hero-text {
    max-width: 560px;
    color:     #fff;
    font-size: 18px;
}

/* Строка: текст + кнопка */
.hero-info {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

/* Кнопка CTA в hero */
.hero-cta {
    padding:       14px 30px;
    border-radius: 8px;
    font-size:     18px;
    background:    var(--accent);
    color:         #111;
    font-weight:   500;
    display:       flex;
    align-items:   center;
    gap:           10px;
}
.hero-cta:hover { background: var(--accent-hover); }

/* Стрелка-иконка внутри кнопки */
.hero-cta::after {
    content:             "";
    display:             inline-block;
    width:               28px;
    height:              16px;
    background-image:    url(/assets/img/ico-arrow-right.svg);
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center;
    margin-bottom:       -2px;
}





/* --------------------------------------------------------------------------
   3. СЕКЦИЯ О КОМПАНИИ (#about)
   -------------------------------------------------------------------------- */
#about {
    padding:               100px 0;
    display:               grid;
    grid-template-columns: 1fr 2fr;
    gap:                   20px;
}

/* Текст-столбцы */
.about-text {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   30px;
}

/* Кнопка-ссылка «Подробнее о компании» */
.go-about {
    border:        2px solid var(--accent-dark);
    padding:       16px 22px;
    border-radius: 10px;
    font-size:     16px;
    font-weight:   500;
    display:       flex;
    gap:           20px;
    margin-top:    50px;
    width:         fit-content;
}
.go-about::after {
    content:          "";
    width:            25px;
    height:           20px;
    margin-top:       -2px;
    display:          inline-block;
    background-image: url('/assets/img/ico-top-right.svg');
    background-size:  cover;
}
.go-about:hover {
    background:   var(--accent);
    color:        #111;
    border-color: var(--accent);
}





/* --------------------------------------------------------------------------
   5. АРТ-СЕКЦИЯ (#art) — тёмный блок с крупными цифрами
   -------------------------------------------------------------------------- */
#art {
    position:         relative;
    min-height:       400px;
    background-color: #404a59;
    overflow:         hidden;
}

/* Декоративный SVG-фон справа */
#art::before {
    content:             "";
    position:            absolute;
    inset:               0;
    background-image:    url(/assets/img/art-bg.svg);
    background-position: top right;
    background-repeat:   no-repeat;
    pointer-events:      none;
    z-index:             0;
    opacity: 0.6;
}

/* Контент поверх псевдоэлемента */
#art > * { position: relative; z-index: 1; }

#art .box {
    display:               grid;
    grid-template-columns: 1fr 2fr;
    gap:                   20px;
    padding:               100px 0;
}

#art h2,
#art p { color: #fff; }

#art p {
    font-size:   56px;
    font-weight: 500;
}

#art img {
    height:     550px;
    width:      100%;
    object-fit: cover;
}


/* --------------------------------------------------------------------------
   6. КЛЮЧЕВЫЕ ПОКАЗАТЕЛИ (#info)
   -------------------------------------------------------------------------- */
#info {
    background-color: #f8f8f8;
    padding:          100px 0;
}
#info .false-title{
    margin-bottom: 35px;
}
#info .text-info-block{
    margin-bottom: 60px;
}
/* Сетка статистических блоков */
.stats__list {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   50px;
    margin-top:            50px;
}

/* Один блок статистики */
.stats__item {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

/* Крупная цифра */
.stats__value {
    font-size:   64px;
    font-weight: 700;
    line-height: 1;
    color:       var(--accent-dark);
    transition:  color 0.4s ease; /* подсветка при появлении через JS */
}

/* Горизонтальная линия-разделитель между цифрой и описанием */
.stats__divider {
    display:    block;
    width:      100%;
    height:     1px;
    background: #c5c0c0;
}

/* Текстовое описание показателя */
.stats__description { font-size: 18px; color: #000; }

/* --------------------------------------------------------------------------
   9. СЕКЦИЯ FAQ (#faq)
   -------------------------------------------------------------------------- */
#faq {
    padding:          100px 0;
    background-color: #f8f8f8;
}
#faq p {
    font-size: 16px;
}
/* Один вопрос-ответ */
.faq-item {
    border-bottom: 1px solid #a8a8a8;
    overflow:      hidden;
    transition:    box-shadow 0.2s ease;
}

/* Строка вопроса */
.faq-item summary {
    list-style:      none;
    cursor:          pointer;
    padding:         16px 18px;
    font-size:       20px;
    font-weight:     500;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    position:        relative;
}
.faq-item summary:hover { color: var(--accent-dark); }

/* Убираем стандартный маркер */
.faq-item summary::-webkit-details-marker { display: none; }

/* Иконка «+» / «−» */
.faq-item summary::after {
    content:    "+";
    font-size:  20px;
    transition: transform 0.2s ease;
    color:      #333;
}
.faq-item[open] summary::after { content: "−"; }

/* Блок с ответом */
.faq-content {
    padding:   0 18px 16px 18px;
    color:     #555;
    line-height: 1.6;
    font-size: 14px;
    animation: faqFadeIn 0.25s ease;
}

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




/* --------------------------------------------------------------------------
   11. SCROLL-REVEAL — базовые классы анимации при прокрутке
       (добавляются через JS; .visible — триггер)
   -------------------------------------------------------------------------- */

/* Появление снизу вверх — общий */
.reveal {
    opacity:    0;
    transform:  translateY(32px);
    transition: opacity   0.65s cubic-bezier(.22, .68, 0, 1.2),
                transform 0.65s cubic-bezier(.22, .68, 0, 1.2);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Появление со сдвигом влево (заголовки левых колонок) */
.reveal-left {
    opacity:    0;
    transform:  translateX(-24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

/* Появление справа */
.reveal-right {
    opacity:    0;
    transform:  translateX(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Появление с лёгким масштабированием (карточки) */
.reveal-scale {
    opacity:    0;
    transform:  translateY(24px) scale(0.97);
    transition: opacity   0.55s ease,
                transform 0.55s cubic-bezier(.22, .68, 0, 1.15);
}
.reveal-scale.visible { opacity: 1; transform: translateY(0) scale(1); }

/* Линия-разделитель в статистике */
.reveal-line {
    opacity:          0;
    transform:        scaleX(0);
    transform-origin: left;
    transition:       opacity 0.5s ease, transform 0.6s ease;
}
.reveal-line.visible { opacity: 1; transform: scaleX(1); }

/* Stagger-задержки (0–7) — навешиваются через JS */
.stagger-0 { transition-delay: 0ms   !important; }
.stagger-1 { transition-delay: 80ms  !important; }
.stagger-2 { transition-delay: 160ms !important; }
.stagger-3 { transition-delay: 240ms !important; }
.stagger-4 { transition-delay: 320ms !important; }
.stagger-5 { transition-delay: 400ms !important; }
.stagger-6 { transition-delay: 480ms !important; }
.stagger-7 { transition-delay: 560ms !important; }


/* --------------------------------------------------------------------------
   12. АДАПТИВНОСТЬ 
   -------------------------------------------------------------------------- */

/* Планшет и мобильный (≤ 900 px) */
@media (max-width: 900px) {
    .hero-text  { font-size: 15px !important; max-width: 100% !important; }
    .hero-info  { flex-direction: column; align-items: flex-start; gap: 20px; }
    .hero-cta   { font-size: 16px !important; padding: 12px 22px !important; }

    .stats__description { font-size: 16px;}

    #about      { grid-template-columns: 1fr !important; padding: 60px 0 !important; }
    .about-text { grid-template-columns: 1fr !important; gap: 18px !important; }
    .go-about   { margin-top: 30px !important; }

    #art .box { grid-template-columns: 1fr !important; padding: 60px 0 !important; }
    #art p    { font-size: 36px !important; }
    #art img  { height: 250px !important; }

    #info {
        padding: 60px 0;
    }
    .stats__list  { grid-template-columns: 1fr !important; gap: 30px !important; margin-top: 30px !important; }
    .stats__value { font-size: 48px; }

    #faq           { padding: 60px 0 !important; }
    .faq-item summary { font-size: 16px !important; }
}

/* Маленький мобильный (≤ 560 px) */
@media (max-width: 560px) {
    .hero-info { align-items: flex-start !important; }
    #hero      { height: 85vh; }

    #art p { font-size: 28px !important; }
    #art::before { background-size: 280px; opacity: 0.35; }

    .stats__value { font-size: 36px; }
    .stats__item  {
        display:               grid !important;
        align-items:           center;
        grid-template-columns: 2fr 30px 3fr;
    }
}