/* ==========================================================================
   ПРЕМИАЛЬНАЯ ОТДЕЛКА — уровень 1
   --------------------------------------------------------------------------
   Файл подключается после style.css и только дорабатывает оформление.
   Разметка не менялась: ни одной правки в HTML-структуре.
   Отключить всё сразу: убрать строку подключения в index.html.
   ========================================================================== */

:root {
    /* Металлическое золото вместо плоской заливки: свет сверху слева,
       тень снизу справа — так металл читается объёмным. */
    --gold-metal: linear-gradient(135deg, #F2DFAC 0%, #C8A24D 45%, #96702A 100%);
    --gold-line: rgba(200, 162, 77, 0.28);
    --radius-lg: 18px;
    --shadow-soft: 0 10px 30px rgba(11, 35, 69, 0.07);
    --shadow-lift: 0 30px 70px rgba(11, 35, 69, 0.15);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --------------------------------------------------------------------------
   1. РИТМ И ВОЗДУХ
   Дорогой сайт — просторный. Отступы секций увеличены со 110 до 140 px.
   -------------------------------------------------------------------------- */
section {
    padding: 140px 0;
}

/* --------------------------------------------------------------------------
   2. ЗАГОЛОВКИ
   Крупнее, плотнее по трекингу. Над каждым — номер раздела: приём, который
   сразу читается как продуманная вёрстка.
   -------------------------------------------------------------------------- */
section h2 {
    font-size: 50px;
    line-height: 1.12;
    letter-spacing: -0.01em;
    padding-bottom: 26px;
}

section h2::before {
    display: block;
    margin-bottom: 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.34em;
    color: var(--secondary);
    opacity: 0.8;
}

#about h2::before      { content: '01'; }
#directions h2::before { content: '02'; }
#stats h2::before      { content: '03'; }
#events h2::before     { content: '04'; }
#reports h2::before    { content: '05'; }

/* Золотая черта под заголовком — металлом, а не одним цветом */
section h2::after {
    width: 96px;
    height: 3px;
    background: var(--gold-metal);
}

.section-subtitle {
    font-size: 19px;
    line-height: 1.75;
    max-width: 640px;
}

/* --------------------------------------------------------------------------
   3. ЗОЛОТО
   Акцентное слово в первом заголовке и кнопки — металлический градиент.
   -------------------------------------------------------------------------- */
#hero h1 {
    letter-spacing: 0.02em;
    line-height: 1.06;
}

#hero h1 span {
    color: var(--secondary);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    #hero h1 span {
        background: var(--gold-metal);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.hero-buttons .gold,
.header-button {
    background: var(--gold-metal);
    letter-spacing: 0.12em;
    box-shadow: 0 14px 34px rgba(200, 162, 77, 0.32);
}

.hero-buttons .gold:hover,
.header-button:hover {
    box-shadow: 0 22px 50px rgba(200, 162, 77, 0.48);
}

/* --------------------------------------------------------------------------
   4. ЕДИНАЯ ШКАЛА ПОВЕРХНОСТЕЙ
   Один радиус, две тени вместо десятка разных.
   -------------------------------------------------------------------------- */
.direction-card,
.event-card,
.founder-block {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.direction-card:hover,
.event-card:hover,
.founder-block:hover {
    box-shadow: var(--shadow-lift);
}

/* Иконки направлений: тонкий контур вместо плотной заливки */
.direction-card .icon {
    width: 72px;
    height: 72px;
    background: transparent;
    border: 1px solid var(--gold-line);
    font-size: 28px;
}

.direction-card:hover .icon {
    background: rgba(200, 162, 77, 0.08);
    border-color: var(--secondary);
}

/* Плашка основателя: контурная, спокойнее по виду */
.founder-block .founder-badge {
    background: #FFFFFF;
    color: var(--secondary);
    border: 1px solid var(--gold-line);
    box-shadow: 0 6px 20px rgba(200, 162, 77, 0.18);
    letter-spacing: 0.2em;
    font-size: 11px;
    padding: 7px 24px;
}

/* --------------------------------------------------------------------------
   5. ДВИЖЕНИЕ
   Медленнее и с достоинством: 900 мс вместо 600, подъём 28 px.
   -------------------------------------------------------------------------- */
.fade-in {
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transform: translateY(28px);
}

.fade-in.visible {
    transform: translateY(0);
}

.direction-card,
.event-card,
.founder-block,
.hero-buttons .btn,
.header-button {
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
                border-color 0.45s var(--ease), background 0.45s var(--ease);
}

/* --------------------------------------------------------------------------
   6. ТЕЛЕФОН
   Возвращаем компактные отступы: 140 px на узком экране — это пол-экрана.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    section {
        padding: 92px 0;
    }
    section h2 {
        font-size: 34px;
        padding-bottom: 20px;
    }
    section h2::before {
        margin-bottom: 14px;
        font-size: 11px;
    }
    .section-subtitle {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    section {
        padding: 74px 0;
    }
    section h2 {
        font-size: 28px;
    }
}

/* ==========================================================================
   УРОВЕНЬ 2 — ТЁМНАЯ ТЕМА
   --------------------------------------------------------------------------
   Светлые разделы становятся глубокого синего цвета, поверхности —
   полупрозрачными с золотой волосяной рамкой. Страница читается как
   вечерняя съёмка: тёмный фон, тёплый свет, фотографии в полную силу.
   ========================================================================== */

:root {
    --night: #08182C;
    --night-soft: rgba(255, 255, 255, 0.045);
    --night-line: rgba(200, 162, 77, 0.24);
    --on-night: #F5F1E8;
    --on-night-muted: rgba(245, 241, 232, 0.62);
    --on-night-soft: rgba(245, 241, 232, 0.78);
}

#about,
#directions,
#events,
#reports {
    background: var(--night);
}

/* --- Заголовки и подписи на тёмном --- */
#about h2,
#directions h2,
#events h2,
#reports h2,
#about .founders-title,
#events .map-title {
    color: var(--on-night);
}

#about .section-subtitle,
#directions .section-subtitle,
#events .section-subtitle,
#reports .section-subtitle {
    color: var(--on-night-muted);
}

#about .about-text-content p,
#about .founder-desc {
    color: var(--on-night-soft);
}

#about .founder-company {
    color: var(--on-night-muted);
}

/* --- Поверхности: полупрозрачные, с золотой волосяной рамкой --- */
#directions .direction-card,
#events .event-card,
#about .founder-block {
    background: var(--night-soft);
    border: 1px solid var(--night-line);
    box-shadow: none;
    backdrop-filter: blur(6px);
}

#directions .direction-card:hover,
#events .event-card:hover,
#about .founder-block:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(200, 162, 77, 0.5);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

/* Карточка события: слева сохраняем золотой акцент */
#events .event-card {
    border-left: 3px solid var(--secondary);
}

#directions .direction-card h4,
#events .event-card h3 {
    color: var(--on-night);
}

#directions .direction-card p,
#events .event-card .place,
#events .event-card .event-desc {
    color: var(--on-night-muted);
}

#events .event-card .date {
    background: rgba(200, 162, 77, 0.18);
    color: #EBD49A;
}

/* --- Иконки направлений: линейные, золотые --- */
.direction-card .icon svg {
    width: 30px;
    height: 30px;
    color: var(--secondary);
}

/* --- Фильтры карты: тёмные пилюли вместо белых --- */
#events .map-filter {
    background: rgba(255, 255, 255, 0.06);
    color: var(--on-night);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

#events .map-filter:hover {
    border-color: var(--secondary);
}

#events .map-filter.is-active {
    background: var(--secondary);
    color: #08182C;
    border-color: var(--secondary);
}

/* Сама карта — светлая, поэтому даём ей тонкую золотую рамку */
#events #yandex-map {
    border: 1px solid var(--night-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* --- Видео и ролики --- */
#about .about-video {
    border: 1px solid var(--night-line);
    border-radius: var(--radius-lg);
}

.reel-title,
.reel-date {
    color: var(--on-night);
}

.reel-date {
    color: var(--on-night-muted);
}

/* Кнопка «Смотреть клип в ВК» — светлая на тёмном */
.reel-link,
.reel-info a {
    background: rgba(255, 255, 255, 0.08);
    color: var(--on-night);
    border-color: rgba(255, 255, 255, 0.16);
}

.reel-link:hover,
.reel-info a:hover {
    background: var(--secondary);
    color: #08182C;
}

/* --------------------------------------------------------------------------
   Телефон: на тёмном фоне тени не читаются, поэтому опираемся на рамку
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    #directions .direction-card:hover,
    #events .event-card:hover,
    #about .founder-block:hover {
        box-shadow: none;
    }
}

/* ==========================================================================
   УРОВЕНЬ 2, ВАРИАНТ Б — ЧЕРЕДОВАНИЕ ВМЕСТО СПЛОШНОЙ ТЕМНОТЫ
   --------------------------------------------------------------------------
   Сплошной тёмный фон выглядел мрачно. Теперь тёмный цвет работает
   акцентом: он остаётся на цифрах проекта и на отчётах, а основные
   разделы возвращаются к светлому — но не к белому, а к тёплому
   кремовому, который читается дороже холодной белизны.
   ========================================================================== */

:root {
    --warm-light: #FAF7F1;
    --warm-text: #4E5C70;
}

/* --- Фон: светлый и тёплый --- */
body {
    background-color: var(--warm-light);
}

#about,
#directions,
#events {
    background: var(--warm-light);
}

/* --- Текст снова тёмный --- */
#about h2,
#directions h2,
#events h2,
#about .founders-title,
#events .map-title {
    color: var(--primary);
}

#about .section-subtitle,
#directions .section-subtitle,
#events .section-subtitle {
    color: rgba(11, 35, 69, 0.6);
}

#about .about-text-content p,
#about .founder-desc {
    color: var(--text);
}

#about .founder-company {
    color: rgba(11, 35, 69, 0.55);
}

/* --- Карточки снова светлые, с золотой рамкой --- */
#directions .direction-card,
#events .event-card,
#about .founder-block {
    background: #FFFFFF;
    border: 1px solid rgba(200, 162, 77, 0.22);
    box-shadow: var(--shadow-soft);
    backdrop-filter: none;
}

#directions .direction-card:hover,
#events .event-card:hover,
#about .founder-block:hover {
    background: #FFFFFF;
    border-color: var(--secondary);
    box-shadow: var(--shadow-lift);
}

#directions .direction-card h4,
#events .event-card h3 {
    color: var(--primary);
}

#directions .direction-card p,
#events .event-card .place,
#events .event-card .event-desc {
    color: var(--warm-text);
}

#events .event-card .date {
    background: rgba(200, 162, 77, 0.12);
    color: var(--secondary);
}

/* --- Фильтры карты снова светлые --- */
#events .map-filter {
    background: #FFFFFF;
    color: var(--primary);
    border: 1px solid rgba(11, 35, 69, 0.12);
}

#events .map-filter.is-active {
    background: var(--primary);
    color: #FFFFFF;
    border-color: var(--primary);
}

/* --- Тёмными остаются только цифры проекта и отчёты --- */
#stats {
    background: var(--primary);
}

#reports {
    background: #0C2340;
}

#reports h2,
#reports .section-subtitle,
.reel-title {
    color: var(--on-night);
}

#reports .section-subtitle,
.reel-date {
    color: var(--on-night-muted);
}