исправь локализацию сделай ее общей , сделай так что если менялся язык то это было с анимацией <!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;
        }

        * {
            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;
        }

        /* Навигационная панель */
        .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);
        }

        .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;
        }

        .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;
        }

        .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;
        }

        .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;
        }

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

        .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: 500px; /* Достаточно большое значение для отображения меню */
                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;
            }
        }

        /* Анимированные иконки и переключатель языка */
        .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;
        }
    </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">Культура Китая</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">Выбор языка</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">
        <p>&copy; 2024 Культурные традиции Китая. Все права защищены.</p>
        <!-- Социальные сети удалены по вашему запросу -->
    </footer>

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

        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.",
                "influence_title": "Influence of China",
                "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.",
                "quotes_title": "Quotes and Wisdom",
                "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.\""
            },
            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": "Учение о гармоничном расположении пространства для обеспечения благополучия и счастья.",
                "influence_title": "Влияние Китая",
                "global_economy_title": "Глобальная экономика",
                "global_economy_desc": "Китай играет ключевую роль в мировой экономике, являясь крупнейшим производителем и экспортером множества товаров.",
                "culture_education_title": "Культура и образование",
                "culture_education_desc": "Китайские культурные ценности и образовательные системы оказывают влияние на многие страны и регионы.",
                "technology_innovation_title": "Технологические инновации",
                "technology_innovation_desc": "Китайские компании и исследовательские центры находятся в авангарде многих технологических разработок.",
                "quotes_title": "Цитаты и Мудрости",
                "quote1": "\"Не для того рожден, чтобы жить, а для того, чтобы творить.\"",
                "quote2": "\"Путешествие в тысяча миль начинается с одного шага.\"",
                "quote3": "\"Знание будто огонь, который не освещает, если не зажжен.\""
            }
        };

        // Функция для обновления языка
        function updateLanguage(lang) {
            elements.forEach(element => {
                const key = element.getAttribute('data-lang') || element.getAttribute('data-lang-title') || element.getAttribute('data-lang-placeholder');
                if (key && translations[lang][key]) {
                    if (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'textarea') {
                        element.setAttribute('placeholder', translations[lang][key]);
                    } else if (element.tagName.toLowerCase() === 'select') {
                        // Не трогаем сами опции
                    } else {
                        element.textContent = translations[lang][key];
                    }
                }
            });
            document.documentElement.lang = lang;
        }

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

        // Инициализация языка при загрузке страницы
        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');
                    }
                }
            });
        });

        // Анимация появления секций при прокрутке
        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>