1.в Цитаты и Мудрости не все элементы переведены (Конфуций)(Лао-Цзы)(Конфуций) 2.меню на некоторых устройствах сьезжает
(Культура) на одной строчке ,а (Китая) на другом          <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Культурные традиции Китая - Путешествие сквозь века</title>
    <!-- Ссылка на Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1A5F7A;
            --secondary-color: #e67e22;
            --text-color: #2c3e50;
            --background-color: #ecf0f1;
            --hover-color: #d35400;
            --tooltip-bg: rgba(0, 0, 0, 0.8);
            --tooltip-color: #fff;
            --transition-duration: 0.3s;
            --animation-duration: 0.5s;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.7;
            color: var(--text-color);
            background-color: var(--background-color);
            scroll-behavior: smooth;
            transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
        }

        /* Навигационная панель */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: rgba(44, 62, 80, 0.95);
            color: #fff;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 5%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            transition: background-color var(--transition-duration) ease;
        }

        .navbar .logo {
            font-size: 1.8em;
            font-weight: bold;
            display: flex;
            align-items: center;
            color: #fff;
            text-decoration: none;
        }

        .navbar .logo i {
            margin-right: 10px;
            color: var(--secondary-color);
        }

        .nav-links {
            display: flex;
            list-style: none;
            transition: transform var(--transition-duration) ease-in-out;
            align-items: center; /* Добавлено для выравнивания элементов по вертикали */
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links li a {
            color: #fff;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 20px;
            transition: all var(--transition-duration) ease;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            font-size: 1em;
        }

        .nav-links li a i {
            margin-right: 5px;
        }

        .nav-links li a::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--secondary-color);
            transform: scaleX(0);
            transition: transform var(--transition-duration) ease;
        }

        .nav-links li a:hover::before, .nav-links li a:focus::before {
            transform: scaleX(1);
        }

        /* Кнопка гамбургера */
        .hamburger {
            display: none;
            font-size: 1.8em;
            cursor: pointer;
            color: #fff;
            transition: transform var(--transition-duration) ease;
        }

        .hamburger.active {
            transform: rotate(90deg);
        }

        .hamburger:focus {
            outline: 2px solid var(--secondary-color);
            outline-offset: 2px;
        }

        /* Выбор языка */
        .language-selector {
            margin-left: 20px;
            position: relative;
            transition: opacity var(--animation-duration) ease;
        }

        .language-selector.selecting {
            opacity: 0;
        }

        .language-selector select {
            background-color: var(--primary-color);
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease;
        }

        .language-selector select:focus {
            outline: none;
            box-shadow: 0 0 5px var(--secondary-color);
            transform: scale(1.05);
        }

        /* Хедер */
        .header {
            height: 100vh;
            background: 
                linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
                url('https://source.unsplash.com/1600x900/?china,culture') 
                center/cover no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: background var(--transition-duration) ease;
        }

        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.1);
            animation: headerWave 15s infinite linear;
            pointer-events: none;
        }

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

        .header-content {
            max-width: 800px;
            padding: 0 20px;
            position: relative;
            z-index: 10;
            opacity: 1;
            transition: opacity var(--animation-duration) ease;
        }

        .header.fade-out .header-content {
            opacity: 0;
        }

        .header.fade-in .header-content {
            opacity: 1;
        }

        .header h1 {
            font-size: 3.5em;
            text-shadow: 4px 4px 6px rgba(0,0,0,0.7);
            margin-bottom: 20px;
            color: var(--secondary-color);
            transition: color var(--transition-duration) ease;
        }

        .header p {
            font-size: 1.2em;
            margin-bottom: 30px;
        }

        /* Основной Контент */
        main {
            padding-top: 80px; /* Высота навигационной панели */
        }

        /* Секции */
        section {
            padding: 80px 5%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            opacity: 0;
            transform: translateY(50px);
            transition: all 1s ease-out;
            background-color: #fff;
            margin: 20px auto;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            max-width: 1200px;
        }

        section.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .section-title {
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5em;
            color: var(--primary-color);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .section-title::after {
            content: '';
            width: 100px;
            height: 4px;
            background-color: var(--secondary-color);
            position: absolute;
            left: 50%;
            bottom: -10px;
            transform: translateX(-50%);
        }

        .content {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        .content h3 {
            color: var(--primary-color);
            margin-bottom: 15px;
            font-size: 1.5em;
        }

        .content p {
            margin-bottom: 20px;
            line-height: 1.8;
        }

        /* Раздел с Цитатами */
        .quotes {
            background-color: #f9f9f9;
            padding: 40px 20px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        blockquote {
            font-style: italic;
            margin: 20px auto;
            max-width: 800px;
            position: relative;
            padding: 20px 40px;
            background-color: #fff;
            border-left: 10px solid var(--secondary-color);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }

        blockquote:hover, blockquote:focus-within {
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            transform: translateY(-5px);
        }

        blockquote::before {
            content: '\f10d';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: -10px;
            left: -10px;
            font-size: 2em;
            color: var(--secondary-color);
        }

        blockquote footer {
            text-align: right;
            font-size: 0.9em;
            margin-top: 10px;
            color: var(--primary-color);
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            /* Показываем кнопку гамбургера на мобильных */
            .hamburger {
                display: block;
            }

            /* Скрываем навигационные ссылки по умолчанию */
            .nav-links {
                position: absolute;
                top: 60px; /* Высота навигационной панели */
                left: 0;
                width: 100%;
                flex-direction: column;
                background-color: rgba(44, 62, 80, 0.95);
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-in-out, transform 0.3s ease-in-out;
                transform: translateY(-20px);
            }

            /* Отображаем навигационные ссылки при активном классе */
            .nav-links.active {
                max-height: 1000px; /* Увеличено для обеспечения отображения всех элементов */
                transform: translateY(0);
            }

            .nav-links li {
                margin: 15px 0;
                text-align: center;
            }

            .navbar {
                padding: 15px 10px;
            }

            /* Отключаем начальные анимации для секций на мобильных */
            section {
                opacity: 1;
                transform: translateY(0);
                transition: none;
            }

            /* Корректировка шрифтов для мобильных */
            .header h1 {
                font-size: 2.5em;
            }

            .section-title {
                font-size: 2em;
            }

            .content h3 {
                font-size: 1.3em;
            }

            .tooltip {
                font-size: 0.8em;
            }

            blockquote {
                padding: 15px 30px;
            }

            blockquote::before {
                font-size: 1.5em;
            }

            blockquote p {
                font-size: 1em;
            }

            /* Обеспечиваем видимость селектора языка в мобильном меню */
            .language-selector {
                margin-left: 0;
            }
        }

        /* Анимированные иконки и переключатель языка */
        .section-title i {
            margin-right: 15px;
            color: var(--secondary-color);
            transition: transform 0.3s ease;
        }

        .section-title:hover i, .section-title:focus i {
            transform: rotate(360deg);
        }

        /* Фокус-стили для ссылок и кнопок */
        a:focus, button:focus, select:focus {
            outline: 2px solid var(--secondary-color);
            outline-offset: 2px;
        }

        /* Анимация смены языка */
        .fade-out {
            opacity: 0;
            transition: opacity var(--animation-duration) ease;
        }

        .fade-in {
            opacity: 1;
            transition: opacity var(--animation-duration) ease;
        }
    </style>
</head>
<body>
    <!-- Навигационная панель -->
    <nav class="navbar" role="navigation" aria-label="Основная навигация">
        <a href="#header" class="logo">
            <i class="fas fa-dragon" aria-hidden="true"></i>
            <span id="site-title" data-lang="site-title">Культура Китая</span>
        </a>
        <!-- Кнопка гамбургера -->
        <div class="hamburger" aria-label="Открыть меню" aria-expanded="false" role="button" tabindex="0">
            <i class="fas fa-bars"></i>
        </div>
        <ul class="nav-links" role="menu">
            <li role="none"><a href="#festivals" role="menuitem"><i class="fas fa-calendar-alt" aria-hidden="true"></i> <span data-lang="festivals">Праздники</span></a></li>
            <li role="none"><a href="#art" role="menuitem"><i class="fas fa-paint-brush" aria-hidden="true"></i> <span data-lang="art">Искусство</span></a></li>
            <li role="none"><a href="#philosophy" role="menuitem"><i class="fas fa-book-open" aria-hidden="true"></i> <span data-lang="philosophy">Философия</span></a></li>
            <li role="none"><a href="#customs" role="menuitem"><i class="fas fa-users" aria-hidden="true"></i> <span data-lang="customs">Обычаи</span></a></li>
            <li role="none"><a href="#influence" role="menuitem"><i class="fas fa-globe" aria-hidden="true"></i> <span data-lang="influence">Влияние</span></a></li>
            <li role="none"><a href="#conclusion" role="menuitem"><i class="fas fa-archive" aria-hidden="true"></i> <span data-lang="conclusion">Заключение</span></a></li>
            <li role="none"><a href="#quotes" role="menuitem"><i class="fas fa-quote-right" aria-hidden="true"></i> <span data-lang="quotes">Цитаты</span></a></li>
            <!-- Выбор языка -->
            <li role="none" class="language-selector">
                <label for="language-select" class="visually-hidden" data-lang="language_select_label">Выбор языка</label>
                <select id="language-select" aria-label="Выбор языка">
                    <option value="ru" selected>RU</option>
                    <option value="en">EN</option>
                </select>
            </li>
        </ul>
    </nav>

    <!-- Хедер -->
    <header id="header" class="header" role="banner">
        <div class="header-content">
            <h1 id="main-title">Культурные традиции Китая</h1>
            <p id="header-description">Путешествие сквозь тысячелетия: от древних философий до современных традиций</p>
        </div>
    </header>

    <!-- Основной Контент -->
    <main>
        <!-- Праздники Китая -->
        <section id="festivals">
            <h2 class="section-title">
                <i class="fas fa-calendar-alt" aria-hidden="true"></i>
                <span data-lang="festivals_title">Праздники Китая</span>
            </h2>
            <div class="content">
                <h3 data-lang="new_year_title">Китайский Новый год (春节, Chūnjié)</h3>
                <p data-lang="new_year_desc">Самый важный праздник в Китае, отмечаемый в конце января или начале февраля. Символизирует обновление и семейное единство, сопровождается красочными фейерверками, традиционными угощениями и торжественными ритуалами.</p>

                <h3 data-lang="mid_autumn_title">Праздник середины осени (中秋节, Zhōngqiūjié)</h3>
                <p data-lang="mid_autumn_desc">Романтический праздник семейных встреч, когда люди собираются вместе, любуются полнолунием и делят традиционные лунные пирожки, символизирующие единство и гармонию.</p>

                <h3 data-lang="dragon_boat_title">День драконьих лодок (端午节, Duānwǔjié)</h3>
                <p data-lang="dragon_boat_desc">Древний праздник, посвященный памяти великого поэта Цюй Юаня, включающий захватывающие гонки на драконьих лодках и приготовление особых ритуальных кушаний.</p>
            </div>
        </section>

        <!-- Искусство Китая -->
        <section id="art">
            <h2 class="section-title">
                <i class="fas fa-paint-brush" aria-hidden="true"></i>
                <span data-lang="art_title">Искусство Китая</span>
            </h2>
            <div class="content">
                <h3 data-lang="chinese_painting_title">Китайская живопись</h3>
                <p data-lang="chinese_painting_desc">Традиционная китайская живопись известна своими тушевыми рисунками и натуралистическими изображениями природы, отражающими гармонию человека и окружающего мира.</p>

                <h3 data-lang="calligraphy_title">Каллиграфия</h3>
                <p data-lang="calligraphy_desc">Искусство красивого почерка, считающееся одним из высших проявлений китайской культуры и философии.</p>

                <h3 data-lang="peking_opera_title">Театр Пекинской оперы</h3>
                <p data-lang="peking_opera_desc">Уникальная форма театра, сочетающая музыку, вокал, акробатику и сложные костюмы, рассказывающая традиционные сюжеты и легенды.</p>
            </div>
        </section>

        <!-- Философия Китая -->
        <section id="philosophy">
            <h2 class="section-title">
                <i class="fas fa-book-open" aria-hidden="true"></i>
                <span data-lang="philosophy_title">Философия Китая</span>
            </h2>
            <div class="content">
                <h3 data-lang="confucianism_title">Конфуцианство</h3>
                <p data-lang="confucianism_desc">Философское учение, основанное на морали, этике и социальном порядке, играющее ключевую роль в формировании китайской культуры и общества.</p>

                <h3 data-lang="taoism_title">Даосизм</h3>
                <p data-lang="taoism_desc">Философия, подчеркивающая гармонию с природой, непринужденность и следование естественному пути (Дао).</p>

                <h3 data-lang="buddhism_title">Буддизм</h3>
                <p data-lang="buddhism_desc">Религиозное учение, принесенное в Китай из Индии, которое оказало значительное влияние на культуру, искусство и образ жизни.</p>
            </div>
        </section>

        <!-- Обычаи Китая -->
        <section id="customs">
            <h2 class="section-title">
                <i class="fas fa-users" aria-hidden="true"></i>
                <span data-lang="customs_title">Обычаи Китая</span>
            </h2>
            <div class="content">
                <h3 data-lang="tea_drinking_title">Чаепитие</h3>
                <p data-lang="tea_drinking_desc">Традиция чаепития занимает важное место в китайской культуре, символизируя гостеприимство и уважение.</p>

                <h3 data-lang="wedding_rituals_title">Брачные обряды</h3>
                <p data-lang="wedding_rituals_desc">Китайские свадебные церемонии наполнены символизмом и традициями, отражающими семейные ценности и единение.</p>

                <h3 data-lang="feng_shui_title">Фэн-шуй</h3>
                <p data-lang="feng_shui_desc">Учение о гармоничном расположении пространства для обеспечения благополучия и счастья.</p>
            </div>
        </section>

        <!-- Влияние Китая -->
        <section id="influence">
            <h2 class="section-title">
                <i class="fas fa-globe" aria-hidden="true"></i>
                <span data-lang="influence_title">Влияние Китая</span>
            </h2>
            <div class="content">
                <h3 data-lang="global_economy_title">Глобальная экономика</h3>
                <p data-lang="global_economy_desc">Китай играет ключевую роль в мировой экономике, являясь крупнейшим производителем и экспортером множества товаров.</p>

                <h3 data-lang="culture_education_title">Культура и образование</h3>
                <p data-lang="culture_education_desc">Китайские культурные ценности и образовательные системы оказывают влияние на многие страны и регионы.</p>

                <h3 data-lang="technology_innovation_title">Технологические инновации</h3>
                <p data-lang="technology_innovation_desc">Китайские компании и исследовательские центры находятся в авангарде многих технологических разработок.</p>
            </div>
        </section>

        <!-- Цитаты и Мудрости -->
        <section id="quotes">
            <h2 class="section-title">
                <i class="fas fa-quote-right" aria-hidden="true"></i>
                <span data-lang="quotes_title">Цитаты и Мудрости</span>
            </h2>
            <div class="quotes">
                <blockquote>
                    <p data-lang="quote1">"Не для того рожден, чтобы жить, а для того, чтобы творить."</p>
                    <footer>- Конфуций</footer>
                </blockquote>
                <blockquote>
                    <p data-lang="quote2">"Путешествие в тысяча миль начинается с одного шага."</p>
                    <footer>- Лао-Цзы</footer>
                </blockquote>
                <blockquote>
                    <p data-lang="quote3">"Знание будто огонь, который не освещает, если не зажжен."</p>
                    <footer>- Конфуций</footer>
                </blockquote>
                <!-- Добавьте больше цитат по необходимости -->
            </div>
        </section>
    </main>

    <!-- Футер -->
    <footer role="contentinfo">
        <!-- Удалена строка © 2024 Chinese Cultural Traditions. All rights reserved. -->
        <!-- Если нужно полностью удалить футер, можно удалить этот блок -->
    </footer>

    <script>
        // Локализация и Мультиязычность
        const languageSelect = document.getElementById('language-select');
        const elements = document.querySelectorAll('[data-lang]');
        const header = document.querySelector('.header');
        const headerContent = document.querySelector('.header-content');

        const translations = {
            en: {
                "site-title": "Chinese Culture",
                "festivals": "Festivals",
                "art": "Art",
                "philosophy": "Philosophy",
                "customs": "Customs",
                "influence": "Influence",
                "conclusion": "Conclusion",
                "quotes": "Quotes",
                "festivals_title": "Chinese Festivals",
                "art_title": "Chinese Art",
                "philosophy_title": "Chinese Philosophy",
                "customs_title": "Chinese Customs",
                "influence_title": "Influence of China",
                "quotes_title": "Quotes and Wisdom",
                "new_year_title": "Chinese New Year (春节, Chūnjié)",
                "new_year_desc": "The most important festival in China, celebrated at the end of January or early February. It symbolizes renewal and family unity, accompanied by colorful fireworks, traditional treats, and solemn rituals.",
                "mid_autumn_title": "Mid-Autumn Festival (中秋节, Zhōngqiūjié)",
                "mid_autumn_desc": "A romantic family reunion festival where people come together to admire the full moon and share traditional mooncakes symbolizing unity and harmony.",
                "dragon_boat_title": "Dragon Boat Festival (端午节, Duānwǔjié)",
                "dragon_boat_desc": "An ancient festival dedicated to the memory of the great poet Qu Yuan, featuring exciting dragon boat races and preparation of special ritual foods.",
                "chinese_painting_title": "Chinese Painting",
                "chinese_painting_desc": "Traditional Chinese painting is known for its ink wash drawings and naturalistic depictions of nature, reflecting the harmony between humans and the environment.",
                "calligraphy_title": "Calligraphy",
                "calligraphy_desc": "The art of beautiful handwriting, considered one of the highest manifestations of Chinese culture and philosophy.",
                "peking_opera_title": "Peking Opera",
                "peking_opera_desc": "A unique form of theater combining music, vocals, acrobatics, and intricate costumes, telling traditional stories and legends.",
                "confucianism_title": "Confucianism",
                "confucianism_desc": "A philosophical doctrine based on morality, ethics, and social order, playing a key role in shaping Chinese culture and society.",
                "taoism_title": "Taoism",
                "taoism_desc": "A philosophy emphasizing harmony with nature, ease, and following the natural way (Dao).",
                "buddhism_title": "Buddhism",
                "buddhism_desc": "A religious doctrine brought to China from India, which significantly influenced culture, art, and lifestyle.",
                "tea_drinking_title": "Tea Drinking",
                "tea_drinking_desc": "The tradition of tea drinking plays an important role in Chinese culture, symbolizing hospitality and respect.",
                "wedding_rituals_title": "Wedding Rituals",
                "wedding_rituals_desc": "Chinese wedding ceremonies are filled with symbolism and traditions, reflecting family values and unity.",
                "feng_shui_title": "Feng Shui",
                "feng_shui_desc": "The art of harmonious space arrangement to ensure well-being and happiness.",
                "global_economy_title": "Global Economy",
                "global_economy_desc": "China plays a key role in the global economy, being the largest producer and exporter of many goods.",
                "culture_education_title": "Culture and Education",
                "culture_education_desc": "Chinese cultural values and education systems influence many countries and regions.",
                "technology_innovation_title": "Technological Innovations",
                "technology_innovation_desc": "Chinese companies and research centers are at the forefront of many technological developments.",
                "quote1": "\"Not born to live, but to create.\"",
                "quote2": "\"A journey of a thousand miles begins with a single step.\"",
                "quote3": "\"Knowledge is like a fire that does not illuminate unless ignited.\"",
                "header-title": "Chinese Cultural Traditions",
                "header-description": "A journey through millennia: from ancient philosophies to modern traditions.",
                "language_select_label": "Language Selection"
                // Убрали 'footer-text' так как футер удален
            },
            ru: {
                "site-title": "Культура Китая",
                "festivals": "Праздники",
                "art": "Искусство",
                "philosophy": "Философия",
                "customs": "Обычаи",
                "influence": "Влияние",
                "conclusion": "Заключение",
                "quotes": "Цитаты",
                "festivals_title": "Праздники Китая",
                "art_title": "Искусство Китая",
                "philosophy_title": "Философия Китая",
                "customs_title": "Обычаи Китая",
                "influence_title": "Влияние Китая",
                "quotes_title": "Цитаты и Мудрости",
                "new_year_title": "Китайский Новый год (春节, Chūnjié)",
                "new_year_desc": "Самый важный праздник в Китае, отмечаемый в конце января или начале февраля. Символизирует обновление и семейное единство, сопровождается красочными фейерверками, традиционными угощениями и торжественными ритуалами.",
                "mid_autumn_title": "Праздник середины осени (中秋节, Zhōngqiūjié)",
                "mid_autumn_desc": "Романтический праздник семейных встреч, когда люди собираются вместе, любуются полнолунием и делят традиционные лунные пирожки, символизирующие единство и гармонию.",
                "dragon_boat_title": "День драконьих лодок (端午节, Duānwǔjié)",
                "dragon_boat_desc": "Древний праздник, посвященный памяти великого поэта Цюй Юаня, включающий захватывающие гонки на драконьих лодках и приготовление особых ритуальных кушаний.",
                "chinese_painting_title": "Китайская живопись",
                "chinese_painting_desc": "Традиционная китайская живопись известна своими тушевыми рисунками и натуралистическими изображениями природы, отражающими гармонию человека и окружающего мира.",
                "calligraphy_title": "Каллиграфия",
                "calligraphy_desc": "Искусство красивого почерка, считающееся одним из высших проявлений китайской культуры и философии.",
                "peking_opera_title": "Театр Пекинской оперы",
                "peking_opera_desc": "Уникальная форма театра, сочетающая музыку, вокал, акробатику и сложные костюмы, рассказывающая традиционные сюжеты и легенды.",
                "confucianism_title": "Конфуцианство",
                "confucianism_desc": "Философское учение, основанное на морали, этике и социальном порядке, играющее ключевую роль в формировании китайской культуры и общества.",
                "taoism_title": "Даосизм",
                "taoism_desc": "Философия, подчеркивающая гармонию с природой, непринужденность и следование естественному пути (Дао).",
                "buddhism_title": "Буддизм",
                "buddhism_desc": "Религиозное учение, принесенное в Китай из Индии, которое оказало значительное влияние на культуру, искусство и образ жизни.",
                "tea_drinking_title": "Чаепитие",
                "tea_drinking_desc": "Традиция чаепития занимает важное место в китайской культуре, символизируя гостеприимство и уважение.",
                "wedding_rituals_title": "Брачные обряды",
                "wedding_rituals_desc": "Китайские свадебные церемонии наполнены символизмом и традициями, отражающими семейные ценности и единение.",
                "feng_shui_title": "Фэн-шуй",
                "feng_shui_desc": "Учение о гармоничном расположении пространства для обеспечения благополучия и счастья.",
                "global_economy_title": "Глобальная экономика",
                "global_economy_desc": "Китай играет ключевую роль в мировой экономике, являясь крупнейшим производителем и экспортером множества товаров.",
                "culture_education_title": "Культура и образование",
                "culture_education_desc": "Китайские культурные ценности и образовательные системы оказывают влияние на многие страны и регионы.",
                "technology_innovation_title": "Технологические инновации",
                "technology_innovation_desc": "Китайские компании и исследовательские центры находятся в авангарде многих технологических разработок.",
                "quote1": "\"Не для того рожден, чтобы жить, а для того, чтобы творить.\"",
                "quote2": "\"Путешествие в тысяча миль начинается с одного шага.\"",
                "quote3": "\"Знание будто огонь, который не освещает, если не зажжен.\"",
                "header-title": "Культурные традиции Китая",
                "header-description": "Путешествие сквозь тысячелетия: от древних философий до современных традиций",
                "language_select_label": "Выбор языка"
                // Убрали 'footer-text' так как футер удален
            }
            // Можно добавить дополнительные языки здесь
        };

        // Функция для обновления языка
        function updateLanguage(lang) {
            // Добавляем анимацию fade-out
            document.body.classList.add('fade-out');
            header.classList.add('fade-out');

            // Ждём окончания анимации fade-out
            setTimeout(() => {
                elements.forEach(element => {
                    const key = element.getAttribute('data-lang');
                    if (key && translations[lang][key]) {
                        element.textContent = translations[lang][key];
                    }
                });

                // Обновляем language атрибут в HTML
                document.documentElement.lang = lang;

                // Обновляем текст заголовков и описаний хедера
                document.getElementById('main-title').textContent = translations[lang]['header-title'];
                document.getElementById('header-description').textContent = translations[lang]['header-description'];
                
                // Обновляем текст label для выбора языка
                const languageLabel = document.querySelector('label[for="language-select"]');
                if (languageLabel && translations[lang]['language_select_label']) {
                    languageLabel.textContent = translations[lang]['language_select_label'];
                }

                // Удаляем анимацию fade-out и добавляем fade-in
                document.body.classList.remove('fade-out');
                header.classList.remove('fade-out');
                document.body.classList.add('fade-in');
                header.classList.add('fade-in');

                // Ждём окончания анимации fade-in и удаляем классы
                setTimeout(() => {
                    document.body.classList.remove('fade-in');
                    header.classList.remove('fade-in');
                }, 500); // Должно совпадать с --animation-duration
            }, 500); // Должно совпадать с --animation-duration
        }

        // Обработчик смены языка
        languageSelect.addEventListener('change', (e) => {
            const selectedLang = e.target.value;
            updateLanguage(selectedLang);
        });

        // Инициализация языка при загрузке страницы
        document.addEventListener('DOMContentLoaded', () => {
            const currentLang = languageSelect.value;
            updateLanguage(currentLang);
        });

        // Функция для определения, мобильное ли устройство
        function isMobile() {
            return window.innerWidth <= 768;
        }

        // Плавная прокрутка к секциям
        document.querySelectorAll('.nav-links li a').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetSection = document.getElementById(targetId);

                if(targetSection){
                    const navbarHeight = document.querySelector('.navbar').offsetHeight;
                    const targetPosition = targetSection.getBoundingClientRect().top + window.pageYOffset - navbarHeight;
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });

                    // Закрываем мобильное меню после клика на ссылку
                    const navLinks = document.querySelector('.nav-links');
                    const hamburger = document.querySelector('.hamburger');
                    if(navLinks.classList.contains('active')) {
                        navLinks.classList.remove('active');
                        hamburger.setAttribute('aria-expanded', 'false');
                        hamburger.classList.remove('active');
                    }
                }
            });
        });

        // Анимация появления секций при прокрутке
        document.addEventListener('DOMContentLoaded', () => {
            if (!isMobile()) {
                const sections = document.querySelectorAll('section');
                const options = { threshold: 0.1 };

                const observer = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(entry => {
                        if(entry.isIntersecting){
                            entry.target.classList.add('visible');
                            observer.unobserve(entry.target);
                        }
                    });
                }, options);

                sections.forEach(section => {
                    observer.observe(section);
                });
            } else {
                // Для мобильных устройств сразу показываем все секции без анимации
                document.querySelectorAll('section').forEach(section => {
                    section.classList.add('visible');
                });
            }

            // Обработка мобильного меню
            const hamburger = document.querySelector('.hamburger');
            const navLinks = document.querySelector('.nav-links');

            function toggleMenu() {
                navLinks.classList.toggle('active');
                const isExpanded = navLinks.classList.contains('active');
                hamburger.setAttribute('aria-expanded', isExpanded);
                hamburger.classList.toggle('active');
            }

            hamburger.addEventListener('click', toggleMenu);

            // Закрытие меню при клике на ссылку (на мобильных)
            document.querySelectorAll('.nav-links a').forEach(anchor => {
                anchor.addEventListener('click', function() {
                    if (navLinks.classList.contains('active')) {
                        navLinks.classList.remove('active');
                        hamburger.setAttribute('aria-expanded', 'false');
                        hamburger.classList.remove('active');
                    }
                });
            });

            // Клавиатурная навигация для гамбургера
            hamburger.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    toggleMenu();
                }
            });
        });

        // Обработка изменения размера окна для динамического отключения анимаций и корректировки меню
        window.addEventListener('resize', () => {
            if (isMobile()) {
                document.querySelectorAll('section').forEach(section => {
                    section.classList.add('visible');
                });
                // Закрываем мобильное меню при изменении размера на мобильный
                const navLinks = document.querySelector('.nav-links');
                const hamburger = document.querySelector('.hamburger');
                if (navLinks.classList.contains('active')) {
                    navLinks.classList.remove('active');
                    hamburger.setAttribute('aria-expanded', 'false');
                    hamburger.classList.remove('active');
                }
            } else {
                // Рестарт анимации при переходе на десктоп
                const sections = document.querySelectorAll('section');
                sections.forEach(section => {
                    section.classList.remove('visible');
                });

                const observer = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(entry => {
                        if(entry.isIntersecting){
                            entry.target.classList.add('visible');
                            observer.unobserve(entry.target);
                        }
                    });
                }, { threshold: 0.1 });

                sections.forEach(section => {
                    observer.observe(section);
                });
            }
        });
    </script>
</body>
</html>