/* ==========================================================================
   УРОВЕНЬ БРЕНДА — ремесло, доступное без бюджета
   --------------------------------------------------------------------------
   Подключается последним. Разметку не меняет: только оформление, движение
   и доступность. Отключить: убрать строку подключения в index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ДИЗАЙН-СИСТЕМА
   Одна шкала на весь сайт: отступы, размеры, длительности. Когда всё
   построено на одной шкале, страница выглядит собранной — это и читается
   как «дорого», а не количество эффектов.
   -------------------------------------------------------------------------- */
:root {
    /* Шкала отступов */
    --sp-1: 6px;
    --sp-2: 12px;
    --sp-3: 20px;
    --sp-4: 32px;
    --sp-5: 52px;
    --sp-6: 84px;

    /* Шкала размеров текста: плавно растёт вместе с экраном */
    --fs-display: clamp(34px, 5.4vw, 74px);
    --fs-h2: clamp(28px, 3.6vw, 50px);
    --fs-h3: clamp(19px, 1.5vw, 25px);
    --fs-body: clamp(16px, 1.05vw, 18px);
    --fs-label: 11.5px;
    --tr-tight: -0.02em;
    --tr-label: 0.26em;

    /* Шкала длительностей */
    --dur-1: 220ms;
    --dur-2: 450ms;
    --dur-3: 900ms;
    --ease-out: cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. СЦЕНА ПЕРВОГО ЭКРАНА
   Элементы появляются по очереди, снизу вверх. Это первое, что видит
   человек, и именно это задаёт ощущение «сделано с вниманием».
   -------------------------------------------------------------------------- */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

#hero .hero-logo,
#hero h1,
#hero p,
#hero .hero-buttons,
#hero .scroll-indicator {
    animation: rise-in var(--dur-3) var(--ease-out) both;
}

#hero .hero-logo      { animation-delay: 80ms; }
#hero h1              { animation-delay: 200ms; }
#hero p               { animation-delay: 340ms; }
#hero .hero-buttons   { animation-delay: 480ms; }
#hero .scroll-indicator { animation-delay: 900ms; }

/* Заголовок первого экрана — по размеру шкалы, а не «на глаз» */
#hero h1 {
    font-size: var(--fs-display);
    letter-spacing: var(--tr-tight);
}

/* --------------------------------------------------------------------------
   3. ТИПОГРАФИКА ПО ШКАЛЕ
   -------------------------------------------------------------------------- */
section h2 {
    font-size: var(--fs-h2);
    letter-spacing: var(--tr-tight);
}

.section-subtitle {
    font-size: var(--fs-body);
}

.direction-card h4,
.event-card h3 {
    letter-spacing: -0.01em;
}

/* Мелкие подписи — вразрядку, как в брендовых системах */
.founder-block .founder-company,
section h2::before,
.reel-date {
    letter-spacing: var(--tr-label);
    font-size: var(--fs-label);
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. ГЛУБИНА И МАТЕРИАЛ
   Тонкие линии вместо толстых рамок, деликатная подсветка сверху.
   -------------------------------------------------------------------------- */
.direction-card,
.event-card,
.founder-block {
    border-width: 1px;
}

/* Верхняя подсветка: имитация света, падающего на поверхность */
.direction-card,
.event-card {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 22%);
}

/* Ссылки и кнопки: единая скорость отклика */
a,
button {
    transition: color var(--dur-1) var(--ease-out),
                background-color var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out);
}

/* --------------------------------------------------------------------------
   5. ДОСТУПНОСТЬ
   То, что отличает работу студии от любительской: сайтом можно пользоваться
   с клавиатуры, а слабовидящий человек видит, где находится фокус.
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Мышиный фокус рамку не показывает — только клавиатурный */
:focus:not(:focus-visible) {
    outline: none;
}

::selection {
    background: rgba(200, 162, 77, 0.28);
    color: var(--primary);
}

/* Тонкая полоса прокрутки — деталь, которую замечают бессознательно */
@supports (scrollbar-width: thin) {
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(200, 162, 77, 0.5) transparent;
    }
}

/* --------------------------------------------------------------------------
   6. СКОРОСТЬ
   content-visibility не даёт браузеру рисовать то, что ниже экрана.
   На длинной странице это заметно ускоряет первую отрисовку.
   -------------------------------------------------------------------------- */
@supports (content-visibility: auto) {
    #directions,
    #events,
    #reports {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }
}

/* Картинки не «прыгают» при загрузке — это убирает скачки вёрстки */
img,
video {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   7. УВАЖЕНИЕ К НАСТРОЙКАМ СИСТЕМЫ
   Если человек отключил анимацию в системе (это делают при укачивании
   и для экономии батареи) — мы её отключаем. Это норма, а не мелочь.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    #hero .hero-logo,
    #hero h1,
    #hero p,
    #hero .hero-buttons,
    #hero .scroll-indicator {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   8. ТЕЛЕФОН
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --fs-label: 10.5px;
        --tr-label: 0.2em;
    }
}

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН ИЗ КОНЦЕПЦИИ V2
   --------------------------------------------------------------------------
   Во всю высоту экрана, содержимое прижато к низу, текст по левому краю,
   фотография медленно наезжает. Остальные разделы сайта не меняются.
   ========================================================================== */

#hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

/* Слой с фотографией: наезд за 22 секунды, дальше стоит на месте */
#hero .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../images/background.webp") center / cover no-repeat;
    transform: scale(1.08);
    animation: hero-zoom 22s var(--ease-out) forwards;
}

@keyframes hero-zoom {
    to { transform: scale(1); }
}

/* Затемнение поверх фотографии: сверху и снизу сильнее, в середине слабее */
#hero .overlay {
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(8, 24, 44, 0.74) 0%,
        rgba(8, 24, 44, 0.3) 38%,
        rgba(8, 24, 44, 0.94) 100%
    );
}

#hero .hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    width: 100%;
}

/* Логотип меньше: в концепции он не спорит с заголовком */
#hero .hero-logo {
    width: auto;
    height: clamp(52px, 5.4vw, 82px);
    margin: 0 0 clamp(20px, 3vw, 40px);
}

#hero h1 {
    font-size: clamp(38px, 7.6vw, 132px);
    line-height: 0.94;
    letter-spacing: -0.03em;
    margin-bottom: clamp(16px, 2.2vw, 30px);
}

#hero p {
    font-size: clamp(16px, 1.35vw, 23px);
    max-width: 34ch;
    margin: 0 0 clamp(24px, 3vw, 42px);
    line-height: 1.6;
}

#hero .hero-buttons {
    justify-content: flex-start;
    gap: 14px;
}

/* Мелкая надпись над заголовком */
#hero .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold-light, #E8CE8B);
    margin: 0 0 16px;
    max-width: none;
}

/* Строка гордости внизу экрана, отделённая волосяной линией */
#hero .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 38px;
    margin-top: clamp(28px, 4vw, 54px);
    padding-top: 18px;
    border-top: 1px solid rgba(247, 243, 234, 0.18);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(247, 243, 234, 0.6);
}

/* Колёсико уводим выше строки гордости, чтобы не наезжали друг на друга */
#hero .scroll-indicator {
    z-index: 2;
    bottom: 22px;
}

/* --- Телефон: содержимое должно помещаться в экран --- */
@media (max-width: 992px) {
    #hero {
        padding-top: 84px;
        padding-bottom: 96px;
    }
    #hero .hero-logo {
        height: 48px;
        margin-bottom: 16px;
    }
    #hero h1 {
        font-size: clamp(32px, 10.4vw, 54px);
    }
    #hero p {
        max-width: 30ch;
    }
    #hero .hero-meta {
        gap: 8px 18px;
        font-size: 9.5px;
        letter-spacing: 0.18em;
        margin-top: 26px;
        padding-top: 14px;
    }
}

/* На очень узких экранах строка гордости мешает — показываем две метки */
@media (max-width: 420px) {
    #hero .hero-meta span:nth-child(n + 3) {
        display: none;
    }
}

/* ==========================================================================
   ЗОЛОТО НА ПЕРВОМ ЭКРАНЕ
   --------------------------------------------------------------------------
   Градиент на крупных буквах поверх фотографии давал грязный оливковый
   оттенок и терялся на кадре. Для заголовка берём сплошной светлый тон
   и мягкую тень — так надпись читается на любом фоне. Градиент оставляем
   только цифрам проекта: у них ровный тёмно-синий фон, там он работает.
   ========================================================================== */

:root {
    --gold-bright: linear-gradient(150deg, #FFF4D0 0%, #EFD794 36%, #D9B364 70%, #C09840 100%);
}

/* Выбран вариант 2 — яркое золото. Сплошной тон без градиента: градиент
   на крупных буквах поверх фотографии давал грязный оливковый. */
#hero h1 span {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: #FFD966;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

#stats .stat-card h3 {
    background: var(--gold-bright);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Затемнение мягче: фотография видна, а текст на ней остаётся читаемым */
#hero .overlay {
    background: linear-gradient(
        180deg,
        rgba(8, 24, 44, 0.6) 0%,
        rgba(8, 24, 44, 0.2) 42%,
        rgba(8, 24, 44, 0.88) 100%
    );
}

/* ==========================================================================
   ПОЛОСА ПРОКРУТКИ В ЛЕНТЕ ОТЧЁТОВ
   --------------------------------------------------------------------------
   Браузер рисует полосу только при наведении и почти прозрачной — человек
   не понимает, что лента листается вбок. Задаём свои размер и цвета: тогда
   полоса видна всегда. Золотой бегунок показывает, что это тот же язык,
   что и у всего сайта.
   ========================================================================== */

.reels-row {
    scrollbar-width: thin;                                   /* Firefox */
    scrollbar-color: rgba(200, 162, 77, 0.9) rgba(255, 255, 255, 0.1);
    padding-bottom: 14px;
}

.reels-row::-webkit-scrollbar {
    height: 10px;
}

.reels-row::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
}

.reels-row::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 100px;
}

.reels-row::-webkit-scrollbar-thumb:hover {
    background: #FFD966;
}

/* На светлом фоне дорожка должна быть тёмной, иначе её не видно */
#reports .reels-row {
    scrollbar-color: var(--secondary) rgba(255, 255, 255, 0.12);
}