/* --- Секции --- */
.section-container {
    padding: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    z-index: 1;
}

/* Контейнер теперь более стильный и контрастный */
.hero-content {
    max-width: 900px;
    padding: 50px 40px;
    
    /* Глубокий градиент: в центре темнее, к краям прозрачнее */
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 0%, rgba(20, 10, 5, 0.6) 100%);
    
    border: 1px solid rgba(212, 140, 40, 0.3); /* Тонкая золотая рамка */
    border-radius: 30px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); /* Сильная тень под блоком */
    backdrop-filter: blur(5px); /* Размытие фона за блоком */
    
    display: flex; flex-direction: column; align-items: center;
}

/* ЛОГОТИП И ЕГО МАГИЯ */
.logo-wrapper {
    margin-bottom: 20px;
    /* Чтобы свечение не обрезалось краями блока */
    padding: 10px; 
}

.hero-logo {
    max-width: 100%; /* Чтобы не вылезал на мобильных */
    width: 650px;    /* Оптимальный размер для десктопа (исходник 770px может быть великоват) */
    height: auto;
    
    /* Анимация магического свечения */
    filter: drop-shadow(0 0 5px rgba(212, 140, 40, 0.5));
    animation: epicGlow 4s infinite ease-in-out;
}

/* Пульсация света: от тусклого янтаря до яркого золота */
@keyframes epicGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(212, 140, 40, 0.3));
        transform: scale(1);
    }
    50% {
        /* Яркое свечение + легкое увеличение */
        filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8)); 
        transform: scale(1.02);
    }
    100% {
        filter: drop-shadow(0 0 5px rgba(212, 140, 40, 0.3));
        transform: scale(1);
    }
}

/* Тексты под логотипом */
.hero-content .subtitle {
    font-size: 1.5em;
    font-family: 'Cormorant Garamond', serif; /* Более красивый шрифт для подзаголовка */
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 4px; /* Разряженный текст для эпичности */
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.hero-content .hero-desc {
    font-size: 1.1em;
    font-family: 'Montserrat', sans-serif;
    color: #ccc;
    font-style: italic;
    margin-bottom: 35px;
}

.play-button {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    transition: transform 0.3s, background 0.3s;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.play-button:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 1);
}

.play-button span {
    font-size: 1.8em;
    color: #d87d4a;
    position: relative; left: 3px;
}

/* --- LEGEND SECTION (Intro) --- */
.legend-section {
    text-align: center;
    padding: 60px 20px;
}

.legend-content {
    display: inline-block;
    max-width: 800px;
    padding: 40px 60px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #d87d4a;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(216, 125, 74, 0.3);
    margin-bottom: 40px;
}

.legend-content h2 {
    font-size: 2.5em;
    font-family: 'Cormorant Garamond', serif;
    color: #d87d4a;
    text-shadow: 0 0 8px rgba(216, 125, 74, 0.6);
    margin-bottom: 20px;
}

.legend-content p {
    font-size: 1.2em;
    font-family: 'Montserrat', sans-serif;
    color: #e0d8c3;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
    line-height: 1.6;
}

/* КНОПКИ (ДЛЯ КВЕСТА И МОДАЛКИ ЩИТА) */
.btn-quest, .btn-values {
    background: #d87d4a;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    transition: background 0.3s, transform 0.3s;
    display: inline-block;
    margin-top: 10px;
}

.btn-quest:hover, .btn-values:hover {
    background: #b8653a;
    transform: scale(1.05);
}

.experienced-text {
    margin-top: 30px; margin-bottom: 15px;
    font-size: 0.9em; opacity: 0.8; font-style: italic;
}

/* --- ГАДАНИЕ (Demo Draw) --- */
.demo-section {
    text-align: center;
    min-height: 900px; /* Увеличили высоту секции, чтобы всё влезло */
    padding-bottom: 60px;
}

.demo-section h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

/* СЦЕНА КАРТЫ */
.card-scene {
    /* 1. ГЕОМЕТРИЯ под формат 70x113 */
    width: 300px; 
    height: 485px; /* 300 * (113/70) ≈ 485 */
    
    margin: 40px auto;
    perspective: 1200px; /* Чуть усилил перспективу */
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.card-object {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Эффект пружинки при перевороте */
}

.card-object.flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden;
    border-radius: 18px; /* Чуть больше скругление */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Глубокая тень */
    border: 1px solid rgba(212, 140, 40, 0.3); /* Тонкая обводка */
}

/* ЛИЦО */
.card-front {
    transform: rotateY(180deg);
    background: #000;
}
.card-front img {
    width: 100%; height: 100%; object-fit: cover;
}

/* РУБАШКА (ЗАДНИК) */
.card-back {
    background-color: #2a1a10;
    
    /* 2. КАРТИНКА РУБАШКИ */
    background-image: url('../img/ui/card_back.jpg'); 
    background-size: cover; 
    background-position: center;
    
    /* Внутренняя тень для объема */
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
    
    border: 2px solid #d48c28; /* Золотая рамка рубашки */
}

/* БЛОК ТОЛКОВАНИЯ (ТЕКСТ) */
.interpretation-box {
    max-width: 700px; /* Сделали пошире */
    margin: 40px auto;
    padding: 30px 40px;
    
    /* 3. ЧИТАЕМОСТЬ ТЕКСТА */
    background: rgba(18, 12, 8, 0.95); /* Почти непрозрачный темный фон */
    border: 2px solid #d48c28; /* Золотая рамка */
    border-radius: 15px;
    box-shadow: 0 0 50px rgba(0,0,0, 0.8); /* Свечение вокруг блока */
    
    opacity: 1; 
    transform: translateY(0);
    transition: all 0.6s ease-out;
}

.interpretation-box.hidden {
    opacity: 0; 
    transform: translateY(20px); /* Текст выезжает снизу */
    pointer-events: none;
}

/* Заголовок карты */
.interpretation-box h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2em;
    color: #ffd700;
    margin-top: 0;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Мета-данные (Стихия | Тип) */
.card-meta {
    color: #d48c28;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(212, 140, 40, 0.3);
    padding-bottom: 15px;
    display: inline-block;
}

/* Сам текст толкования */
.interpretation-box p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15em; /* Крупнее */
    line-height: 1.8;  /* Больше воздуха между строк */
    color: #e0d8c3;    /* Светлый пергамент */
    text-align: left;  /* Читать удобнее слева */
}
/* --- СЕКЦИЯ ОБ АВТОРЕ --- */
.author-section {
    position: relative;
    padding: 100px 20px;
    z-index: 10;
}

.author-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start; /* Выравнивание по верху */
    justify-content: space-between;
    gap: 60px; /* Расстояние между текстом и фото */
}

/* --- АДАПТИВ БЛОКА ОБ АВТОРЕ --- */
@media (max-width: 900px) {
    .author-content {
        /* Выстраиваем в колонку */
        display: flex;
        flex-direction: column-reverse; /* REVERSE: Сначала фото (2), потом текст (1) */
        align-items: center; /* Центрируем всё */
        gap: 30px; /* Отступ между фото и текстом */
    }

    /* Настройки для Фото */
    .author-photo {
        /* ВАЖНО: Отключаем "липкость", чтобы не наезжало */
        position: static !important; 
        
        /* Сбрасываем ограничения ширины десктопа */
        flex: none;
        width: 100%; 
        max-width: 280px; /* Аккуратный размер для телефона */
        
        margin-bottom: 20px;
    }

    /* Настройки для Текста */
    .author-text {
        width: 100%;
        padding: 30px 20px; /* Чуть меньше отступы внутри */
    }
}

/* ЛЕВАЯ КОЛОНКА: ТЕКСТ */
.author-text {
    flex: 1; /* Занимает всё свободное место */
    background: rgba(18, 12, 8, 0.9); /* Темная подложка (90% непрозрачности) */
    padding: 50px;
    border-radius: 20px;
    border: 1px solid rgba(212, 140, 40, 0.3); /* Тонкая золотая рамка */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    
    /* Типографика */
    font-family: 'Montserrat', sans-serif;
    color: #e0d8c3;
    font-size: 1.1em;
    line-height: 1.8; /* Воздух между строками */
    text-align: left;
}

.author-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5em;
    color: #ffd700;
    margin-top: 0;
    margin-bottom: 30px;
    border-bottom: 2px solid #d48c28;
    padding-bottom: 15px;
    display: inline-block;
}

/* Эффект "Буквицы" (Первая буква большая, как в сказках) */
.author-text p:first-of-type::first-letter {
    float: left;
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5em;
    line-height: 0.8;
    color: #d48c28;
    padding-right: 10px;
    padding-top: 5px;
}

/* ПРАВАЯ КОЛОНКА: ФОТО */
.author-photo {
    /* Жестко фиксируем ширину фото */
    flex: 0 0 350px; 
    position: sticky; /* Фото будет "прилипать" при скролле, если текст длинный */
    top: 100px;
}

.author-photo img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    
    /* Оформление рамки */
    border: 3px solid #d48c28;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    
    /* Легкий фильтр для атмосферы */
    filter: sepia(0.2) contrast(1.1);
    transition: all 0.5s ease;
}

.author-photo img:hover {
    filter: sepia(0) contrast(1);
    transform: scale(1.02);
}

/* АДАПТИВ (Мобильные) */
@media (max-width: 900px) {
    .author-content {
        flex-direction: column-reverse; /* Сначала фото, потом текст */
        align-items: center;
    }

    .author-photo {
        flex: none;
        width: 100%;
        max-width: 300px; /* Ограничение фото на телефоне */
    }

    .author-text {
        width: 100%;
        padding: 30px 20px;
        box-sizing: border-box; /* Чтобы padding не ломал ширину */
    }
}

/* --- ГАЛЕРЕЯ --- */
#gallery {
    text-align: center;
    position: relative;
    z-index: 5;
}

/* ========================================= */
/* --- ЕДИНЫЙ СТИЛЬ ЗАГОЛОВКОВ СЕКЦИЙ --- */
/* ========================================= */

#gallery h2,    /* Галерея */
#shop h2,       /* Тайники леса */
#reviews h2,    /* Шёпот путников */
#demo h2        /* Спроси у Лиса */
{
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8em; /* Чуть увеличил для эпичности */
    color: #ffd700;   /* Яркое золото */
    margin-bottom: 40px; /* Больше воздуха под заголовком */
    text-align: center;
    
    /* Та самая жирная тень и свечение */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 
                 0 0 25px rgba(212, 140, 40, 0.5);
    
    position: relative;
    z-index: 5;
}

/* Опционально: можно добавить небольшую декоративную линию под заголовками */
#gallery h2::after,
#shop h2::after,
#reviews h2::after,
#demo h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #d48c28;
    margin: 15px auto 0;
    box-shadow: 0 0 10px #d48c28;
    opacity: 0.7;
}

/* НОВЫЙ КЛАСС ОБЁРТКИ (Маска) */
.gallery-wrapper {
    position: relative;
    width: 100%;
    
    /* Магия градиента: 
       0% (прозрачно) -> 10% (полностью видно) ... 90% (видно) -> 100% (прозрачно) 
    */
    -webkit-mask-image: linear-gradient(to right, 
        transparent 0%, 
        black 10%, 
        black 90%, 
        transparent 100%
    );
    mask-image: linear-gradient(to right, 
        transparent 0%, 
        black 10%, 
        black 90%, 
        transparent 100%
    );
    
    /* Чтобы маска не ломала взаимодействие мышкой */
    pointer-events: none; 
}

/* Возвращаем взаимодействие внутрь, иначе нельзя будет скроллить */
.gallery-scroll {
    pointer-events: auto; 
    display: flex;
    overflow-x: auto; /* Горизонтальная прокрутка */
    gap: 30px; /* Расстояние между картами */
    
    /* !!! ВАЖНО: ОТСТУПЫ ДЛЯ УВЕЛИЧЕНИЯ !!! 
       Мы даем место сверху и снизу (по 60px), чтобы карта при увеличении 
       не упиралась в края блока и не обрезалась */
    padding: 60px 40px; 
    
    /* Скрываем полосу прокрутки (красиво для Chrome/Safari/Opera) */
    scrollbar-width: thin;
    scrollbar-color: #d48c28 rgba(0,0,0,0.3);
}

/* Скрываем скроллбар для Chrome/Safari */
.gallery-scroll::-webkit-scrollbar {
    height: 8px;
}
.gallery-scroll::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}
.gallery-scroll::-webkit-scrollbar-thumb {
    background-color: #d48c28;
    border-radius: 4px;
}

.gallery-item {
    min-width: 220px; /* Базовый размер */
    text-align: center;
    position: relative;
    
    /* Плавность всех анимаций */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1; /* Обычный слой */
}

/* --- ЭФФЕКТ ПРИ НАВЕДЕНИИ --- */
.gallery-item:hover {
    /* Увеличиваем на 35% */
    transform: scale(1.15); 
    z-index: 10; /* Вытаскиваем поверх остальных карт */
}

.gallery-item img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    transition: all 0.4s ease;
    
    /* Легкое затемнение, пока не навели */
    filter: brightness(0.9);
}

/* Свечение картинки при наведении */
.gallery-item:hover img {
    /* Золотое свечение */
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 
                0 0 10px rgba(255, 215, 0, 0.8);
    filter: brightness(1.1); /* Делаем чуть ярче */
}

/* Подпись под картой */
.gallery-item p {
    margin-top: 15px;
    font-family: 'Montserrat', sans-serif;
    color: #e0d8c3;
    font-size: 0.9em;
    opacity: 0.7;
    transition: opacity 0.3s;
}

/* При увеличении карты подпись можно скрывать или подсвечивать.
   Давай сделаем ярче */
.gallery-item:hover p {
    color: #ffd700;
    opacity: 1;
    text-shadow: 0 0 5px #000;
}

/* --- СЕКЦИЯ ГЛУБОКИЙ ЛЕС (ТРИГГЕРЫ) --- */

.triggers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 60px; /* Чуть больше отступ от заголовка */
}

.trigger-card {
    /* ПРОЗРАЧНЫЙ ФОН + РАЗМЫТИЕ */
    background: rgba(20, 12, 8, 0.6); /* Темно-коричневый, 60% прозрачности */
    backdrop-filter: blur(10px);      /* Эффект матового стекла */
    
    /* Рамка и форма */
    border: 1px solid rgba(212, 140, 40, 0.3);
    border-radius: 20px;
    padding: 50px 30px; /* Больше воздуха внутри */
    text-align: center;
    cursor: pointer;
    
    /* Анимации */
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    
    /* Тень блока */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Эффект при наведении на карточку */
.trigger-card:hover {
    transform: translateY(-10px); /* Всплывает вверх */
    background: rgba(20, 12, 8, 0.8); /* Чуть темнее */
    border-color: #ffd700; /* Золотая рамка */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 
                0 0 20px rgba(212, 140, 40, 0.2); /* Свечение */
}

/* СТИЛИ ДЛЯ ИКОНОК-КАРТИНОК */
.trigger-icon {
    width: 200px;  /* Размер иконки */
    height: 200px;
    object-fit: contain; /* Чтобы не сплющило */
    margin-bottom: 25px;
    
    /* Мягкое свечение иконки */
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.3));
    transition: transform 0.4s;
}

/* Иконка растет при наведении */
.trigger-card:hover .trigger-icon {
    transform: scale(1.15) rotate(5deg); /* Легкий поворот для динамики */
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.6));
}

/* Заголовки карточек */
.trigger-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2em;
    color: #ffd700;
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.trigger-card p {
    font-family: 'Montserrat', sans-serif;
    color: #e0d8c3;
    font-size: 1.05em;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Кнопка внутри карточки */
.btn-trigger {
    background: transparent;
    border: 1px solid #d48c28;
    color: #d48c28;
    padding: 12px 30px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: all 0.3s;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
}

.trigger-card:hover .btn-trigger {
    background: #d48c28;
    color: #1a1008; /* Темный текст на золотом фоне */
    box-shadow: 0 0 15px rgba(212, 140, 40, 0.5);
}

/* --- ОТЗЫВЫ (ШЁПОТ ПУТНИКОВ) --- */
.reviews-grid {
    display: grid;
    /* Адаптивная сетка: карточки не уже 350px, заполняют ширину */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.review-card {
    /* Стиль "Матовое стекло" как в магазине */
    background: rgba(20, 12, 8, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(212, 140, 40, 0.3);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, border-color 0.3s;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

.review-card:hover {
    border-color: #ffd700;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

/* ШАПКА КАРТОЧКИ */
.review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Аватар */
.review-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #d48c28;
}

.review-avatar-placeholder {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #2a1a10;
    color: #d48c28;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: bold;
    border: 2px solid #d48c28;
}

/* Инфо об авторе */
.header-info {
    flex: 1; /* Занимает всё место между фото и ссылкой */
    display: flex; flex-direction: column; text-align: left;
}

.header-info h3 {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4em;
    color: #ffd700;
}

.regalia {
    font-size: 0.85em;
    color: #aaa;
    margin-top: 3px;
    font-style: italic;
}

/* Кнопка ссылки */
.review-link-btn {
    text-decoration: none;
    font-size: 1.2em;
    opacity: 0.5;
    transition: opacity 0.3s;
}
.review-link-btn:hover { opacity: 1; transform: scale(1.1); }

/* ТЕКСТ И СОКРАЩЕНИЕ */
.review-body {
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    color: #e0d8c3;
    font-size: 0.95em;
    line-height: 1.6;
}

/* Класс для свернутого текста */
.review-content.collapsed {
    max-height: 120px; /* Высота примерно 4-5 строк */
    overflow: hidden;
    position: relative;
    
    /* Градиент внизу, чтобы текст плавно исчезал */
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Класс для развернутого текста (добавляет JS) */
.review-content.expanded {
    max-height: none; /* Полная высота */
    mask-image: none;
    -webkit-mask-image: none;
}

/* Кнопка "Читать далее" */
.read-more-btn {
    background: none; border: none;
    color: #d48c28;
    font-size: 0.9em;
    cursor: pointer;
    margin-top: 10px;
    text-decoration: underline;
    padding: 0;
}
.read-more-btn:hover { color: #ffd700; }

.no-reviews { text-align: center; color: #888; font-style: italic; grid-column: 1 / -1; }