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

html {
    scroll-behavior: smooth;
}

body {
    background: #030810;
    overflow-x: hidden;
    width: 100%;
}

.container {
    display: block;
    width: 100%;
    max-width: 100vw;
    position: relative;
    overflow-x: hidden;
}

.full-image-section {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
}
  
.full-image {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 0 auto;
    margin-top: -14.17%;
}



/* Вторая секция */
.second-background {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 0 auto;
    margin-top: -6px; /* небольшой отступ от первого фона */
}

/* ДИТ логотип */
.dit-logo {
    position: absolute;
    top: 1.4%;
    left: 4.55%;
    z-index: 15;
}

.dit-image {
    width: 8.82vw; /* 127px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 127 / 43.78;
}

/* Москва 2030 логотип */
.moscow-logo {
    position: absolute;
    top: 1.4%;
    right: 4.1%;
    z-index: 15;
}

.moscow-image {
    width: 5.05vw; /* 72.68px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 72.68 / 43;
}

/* Текст "Парк «Музеон»" */
.park-text {
    position: absolute;
    top: 1.4%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 0.97vw; /* 14px / 1440px * 100vw */
    color: white;
    z-index: 15;
    white-space: nowrap;
}

/* Текст "Павильон «Цифровые технологии Москвы»" */
.pavilion-text {
    position: absolute;
    top: calc(1.4% + 0.8% + 0.97vw); /* отступ от верха + отступ от текста + высота текста */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.67vw; /* 24px / 1440px * 100vw */
    color: white;
    z-index: 15;
    text-align: center;
    line-height: 1.1; /* минимальное расстояние между строками */
}

/* Текст "1.08 - 14.09" */
.date-text {
    position: absolute;
    top: calc(1.4% + 0.8% + 0.97vw + 0.8% + 3vw); /* уменьшенный отступ для двухстрочного текста */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.25vw; /* 18px / 1440px * 100vw */
    color: white;
    z-index: 15;
    text-align: center;
    white-space: nowrap;
}

/* Блок с расписанием */
.schedule-block {
    position: absolute;
    top: calc(1.4% + 0.8% + 0.97vw + 0.8% + 3vw + 0.4% + 1.25vw); /* отступ от верха + отступы + высота даты */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2vw; /* расстояние между элементами */
    z-index: 15;
    white-space: nowrap;
}

.schedule-item {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 0.83vw; /* 12px / 1440px * 100vw */
    color: white;
    white-space: nowrap;
}

/* Путь ИТ-героя */
.hero-path {
    position: absolute;
    top: 5.5%;
    left: 24.0%;
    z-index: 15;
}

.hero-path-image {
    width: 50.1vw; /* 469px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 469 / 469;
}

/* Тень за героем */
.hero-shadow {
    position: absolute;
    top: 8.5%; /* 242px / 1440px * 100% */
    left: 19.9%; /* 282px / 1440px * 100% */
    z-index: 13; /* ниже героя (15) */
    overflow: hidden; /* обрезаем справа */
}

/* Тень за героем (дубликат 3) */
.hero-shadow-duplicate-3 {
    position: absolute;
    top: 60.5%; /* 242px / 1440px * 100% */
    left: 65.9%; /* 282px / 1440px * 100% */
    z-index: 17; /* ниже hero-path (z-index: 15) */
    overflow: hidden; /* обрезаем справа */
}

.hero-shadow-image {
    width: 102.2vw; /* 1472px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1472 / 1185;
}

.hero-shadow-duplicate-3-image {
    width: 102.2vw; /* 1472px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1472 / 1185;
}

/* Тень под свитком (дубликат 1) */
.hero-shadow-duplicate {
    position: absolute;
    top: 46.81%; /* 242px / 1440px * 100% */
    left: -13.2%; /* исправляем позиционирование */
    z-index: 14; /* ниже hero-path (z-index: 15) */
    pointer-events: none; /* чтобы не мешала взаимодействию с другими элементами */
    overflow: hidden; /* обрезаем выходящие за границы части */
}

.hero-shadow-duplicate-image {
    width: 70.38vw; /* 1013.44px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1013.44 / 816;
}

/* Тень под свитком (дубликат 2) */
.hero-shadow-duplicate-2 {
    position: absolute;
    top: 45.81%; /* 242px / 1440px * 100% */
    left: 22.1%; /* 282px / 1440px * 100% */
    z-index: 14; /* ниже hero-path (z-index: 15) */
    pointer-events: none; /* чтобы не мешала взаимодействию с другими элементами */
    overflow: hidden; /* обрезаем выходящие за границы части */
}

.hero-shadow-duplicate-2-image {
    width: 70.38vw; /* 1013.44px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1013.44 / 816;
}

/* Дракон */
.dragon-wrapper {
    position: absolute;
    top: 42.91%; /* 242px / 1440px * 100% */
    left: 29.1%; /* 282px / 1440px * 100% */
    z-index: 15; /* выше свитка (14), ниже hero-shadow-duplicate-3 и glow-rectangle (16) */
    pointer-events: none; /* чтобы не мешала взаимодействию с другими элементами */
    overflow: hidden; /* обрезаем выходящие за границы части */
}

.dragon-image {
    width: 81.94vw; /* 1179.88px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1179.88 / 1073;
}

/* Свиток с текстом */
.scroll-text-wrapper {
    position: absolute;
    top: 46%; /* 242px / 1440px * 100% */
    left: 9.5%; /* 282px / 1440px * 100% */
    z-index: 14; /* ниже дракона (15) */
    pointer-events: none; /* чтобы не мешала взаимодействию с другими элементами */
}

.scroll-text-image {
    width: 41.74vw; /* 601px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 601 / 687;
}

/* Сам герой */
.hero-character {
    position: absolute;
    top: 11.3%; /* 242px / 1440px * 100% */
    left: 24.1%; /* 282px / 1440px * 100% */
    z-index: 15; /* выше всех остальных элементов */
}

.hero-character-image {
    width: 52.1vw; /* 750px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 750 / 1027;
}

/* ИТ - это целый мир */
.it-world-element {
    position: absolute;
    top: 27.4%; /* 242px / 1440px * 100% */
    left: 53.1%; /* 282px / 1440px * 100% */
    z-index: 16;
}

.it-world-image {
    width: 29.79vw; /* 429px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 429 / 271;
}

/* Меч героя */
.hero-sword {
    position: absolute;
    top: 11.4%; /* 242px / 1440px * 100% */
    left: 24.43%; /* 282px / 1440px * 100% */
    z-index: 17;
}

.hero-sword-image {
    width: 52.08vw; /* 750px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 750 / 1027;
}

/* Плашка под мечом */
.sword-plate {
    position: absolute;
    top: 37.81%; /* 242px / 1440px * 100% */
    left: 56.58%; /* 282px / 1440px * 100% */
    z-index: 17;
}

.sword-plate-image {
    width: 24.38vw; /* 351px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 351 / 66;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.sword-plate-image:hover {
    transform: scale(1.05);
}

/* Тень под свитком (вторая секция, элемент 1) */
.shadow-duplicate-second-1 {
    position: absolute;
    top: -32.81%; /* 242px / 1440px * 100% */
    left: -28.2%; /* исправляем позиционирование */
    z-index: 14; /* ниже hero-path (z-index: 15) */
    pointer-events: none; /* чтобы не мешала взаимодействию с другими элементами */
    overflow: hidden; /* обрезаем выходящие за границы части */
}

.shadow-duplicate-second-1-image {
    width: 100vw; /* ограничиваем ширину экрана */
    height: auto;
    display: block;
    aspect-ratio: 1472 / 1185;
}

/* Тень под свитком (вторая секция, элемент 2) */
.shadow-duplicate-second-2 {
    position: absolute;
    top: -25.81%; /* 242px / 1440px * 100% */
    left: 27.2%; /* исправляем позиционирование */
    z-index: 14; /* ниже hero-path (z-index: 15) */
    pointer-events: none; /* чтобы не мешала взаимодействию с другими элементами */
    overflow: hidden; /* обрезаем выходящие за границы части */
    transform: scaleX(-1); /* отзеркаливаем по горизонтали */
}

.shadow-duplicate-second-2-image {
    width: 100vw; /* ограничиваем ширину экрана */
    height: auto;
    display: block;
    aspect-ratio: 1472 / 1185;
}

/* Шторка */
.curtain {
    position: absolute;
    top: -5.9%; /* 242px / 1440px * 100% */
    left: 5.58%; /* 282px / 1440px * 100% */
    z-index: 21; /* выше других элементов */
}

.curtain-image {
    width: 27.88vw; /* 401.49px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 401.49 / 649.82;
}

/* Шторка (дубликат) */
.curtain-duplicate {
    position: absolute;
    top: -5.9%; /* 242px / 1440px * 100% */
    left: 63.58%; /* 282px / 1440px * 100% */
    z-index: 21; /* выше других элементов */
}

.curtain-duplicate-image {
    width: 27.88vw; /* 401.49px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 401.49 / 649.82;
}

/* Текст о турнире */
.tournament-text {
    position: absolute;
    top: 77%; /* отступ от верха */
    left: 50%;
    transform: translateX(-50%); /* центрирование по горизонтали */
    z-index: 22; /* выше других элементов */
    width: 38.13vw; /* 549px / 1440px * 100vw */
    height: 8.33vw; /* 120px / 1440px * 100vw */
    overflow: hidden; /* обрезаем текст, выходящий за границы */
}

.tournament-paragraph {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.67vw; /* 24px / 1440px * 100vw */
    color: white;
    line-height: 1.2;
    text-align: center;
    margin: 0;
}

/* Прямоугольник со свечением */
.glow-rectangle {
    position: absolute;
    bottom: 0;
    left: -10%;
    z-index: 16; /* выше дракона (15) */
    overflow: hidden; /* обрезаем выходящие за границы части */
}

.glow-rectangle-image {
    width: 119.8vw; /* 1458px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1458 / 918;
}

/* Рамка для прямоугольника со свечением */
.glow-frame {
    position: absolute;
    top: 69.1%; /*  242px / 1440px * 100% */
    left: 2.7%; /* 282px / 1440px * 100% */
    z-index: 18; /* выше других элементов */
}

.glow-frame-image {
    width: 93.11vw; /* 1384px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1384 / 871;  /* 1384 / 871 */
}

/* Герой на 2 блоке */
.hero-second-block {
    position: absolute;
    top: 60.3%; /* 242px / 1440px * 100% */
    left: -21.58%; /* 282px / 1440px * 100% */
    z-index: 19; /* выше других элементов */
}

.hero-second-block-image {
    width: 124.94vw; /* 1799.18px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1799.18 / 1175;
}

/* Текст истории */
.story-text {
    position: absolute;
    top: 73.81%; /* 242px / 1440px * 100% */
    left: 48.58%; /* 282px / 1440px * 100% */
    z-index: 20; /* выше других элементов */
    width: 43.26vw; /* 623px / 1440px * 100vw */
    height: 42.64vw; /* 614px / 1440px * 100vw */
    overflow: hidden; /* обрезаем текст, выходящий за границы */
}

.story-paragraph {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.67vw; /* 24px / 1440px * 100vw */
    color: white;
    line-height: 1.4;
    margin-bottom: 1.5vw; /* отступ между абзацами */
    text-align: left;
}

/* Вторая секция */
.second-section {
    display: block;
    width: 100%;
    position: relative;
    overflow-x: hidden; /* предотвращаем горизонтальный скролл */
    overflow-y: hidden; /* предотвращаем вертикальный скролл */
}

.second-section-image {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 0 auto;
}

/* Главная третья секция */
.main-third-section {
    display: block;
    width: 100%;
    position: relative;
    overflow: visible; /* Разрешаем элементам выходить за границы */
}

/* Главная секция 4 */
.main-fourth-section {
    display: block;
    width: 100%;
    position: relative;
    overflow: visible; /* Разрешаем элементам выходить за границы */
}

/* Главная секция 5 */
.main-fifth-section {
    display: block;
    width: 100%;
    position: relative;
    overflow: visible; /* Разрешаем элементам выходить за границы */
}

.section-5-background {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 0 auto;
}

/* Текст для 5 секции */
.text-for-section-5 {
    position: absolute;
    top: 27%; /* Позиционирование от верха секции 5 */
    left: 7%; /* Позиционирование от левого края */
    z-index: 42;
}

.text-for-section-5-image {
    width: 29.17vw; /* 420px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 420 / 203;
}

/* Кнопка Начать */
.start-button {
    position: absolute;
    top: 64%; /* Позиционирование от верха секции 5 */
    left: 7%; /* Позиционирование от левого края */
    z-index: 43;
}

.start-button-link {
    display: block;
    padding: 5px; /* Расширяем область клика на 5px вокруг кнопки */
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease; /* Плавная анимация при наведении */
}

.start-button-link:hover {
    transform: scale(1.05); /* Небольшое увеличение при наведении */
}

.start-button-image {
    width: 16.22vw; /* 233.54px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 233.54 / 95;
}

/* Главная секция 6 */
.main-sixth-section {
    display: block;
    width: 100%;
    position: relative;
    overflow: visible; /* Разрешаем элементам выходить за границы */
}

.section-6-background {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 0 auto;
}

/* Рамка для УМ */
.um-frame {
    position: absolute;
    top: 0%; /* Позиционирование от верха секции 6 */
    left: 3.5%; /* Позиционирование от левого края */
    z-index: 44;
}

.um-frame-image {
    width: 91.67vw; /* 1320px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1320 / 404;
}

/* Текст Аудиогид Узнай Москву */
.audio-guide-text {
    position: absolute;
    top: 37%; /* Позиционирование от верха секции 6 */
    left: 8%; /* Позиционирование от левого края */
    z-index: 47;
    width: 36.60vw; /* 527px / 1440px * 100vw */
    height: auto;
    overflow: visible;
}

.audio-guide-content {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 2.22vw; /* 32px / 1440px * 100vw */
    color: white;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Текст Интерактивный квест */
.interactive-quest-text {
    position: absolute;
    top: 64%; /* Позиционирование от верха секции 6 */
    left: 8%; /* Позиционирование от левого края */
    z-index: 48;
    width: 55.69vw; /* 802px / 1440px * 100vw */
    height: auto;
    overflow: visible;
}

.interactive-quest-content {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 2.22vw; /* 32px / 1440px * 100vw */
    color: white;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Кнопка Послушать */
.listen-button {
    position: absolute;
    top: 35%; /* Позиционирование от верха секции 6 */
    left: 80%; /* Позиционирование от левого края */
    z-index: 45;
}

.listen-button-link {
    display: block;
    padding: 5px; /* Расширяем область клика на 5px вокруг кнопки */
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease; /* Плавная анимация при наведении */
}

.listen-button-link:hover {
    transform: scale(1.05); /* Небольшое увеличение при наведении */
}

.listen-button-image {
    width: 11.30vw; /* 162.77px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 162.77 / 58.08;
}

/* Кнопка Окунуться */
.immerse-button {
    position: absolute;
    top: 63%; /* Позиционирование от верха секции 6 */
    left: 80%; /* Позиционирование от левого края */
    z-index: 46;
}

.immerse-button-link {
    display: block;
    padding: 5px; /* Расширяем область клика на 5px вокруг кнопки */
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease; /* Плавная анимация при наведении */
}

.immerse-button-link:hover {
    transform: scale(1.05); /* Небольшое увеличение при наведении */
}

.immerse-button-image {
    width: 11.30vw; /* 162.77px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 162.77 / 58.08;
}

/* Иконка ТГ (дубль 1) */
.tg-icon-duplicate-1 {
    position: absolute;
    top: 10%; /* Позиционирование от верха секции 7 */
    left: 10%; /* Позиционирование от левого края */
    z-index: 49;
}

.tg-icon-duplicate-1-image {
    width: 3.40vw; /* 49px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 49 / 49;
}

/* Иконка ТГ (дубль 2) */
.tg-icon-duplicate-2 {
    position: absolute;
    top: 10%; /* Позиционирование от верха секции 7 */
    left: 10%; /* Позиционирование от левого края */
    z-index: 50;
}

.tg-icon-duplicate-2-image {
    width: 3.40vw; /* 49px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 49 / 49;
}

/* Главная секция 7 */
.main-seventh-section {
    display: block;
    width: 100%;
    position: relative;
    overflow: visible; /* Разрешаем элементам выходить за границы */
}

/* Расширяющий блок секции 7 */
.section-7-extension {
    width: 100%;
    height: 7.43vw; /* 107px / 1440px * 100vw */
    background-color: #030810;
}

/* ДИТ */
.dit-element {
    position: absolute;
    top: 45%; /* Позиционирование от верха секции 7 */
    left: 15%; /* Позиционирование от левого края */
    z-index: 51;
}

.dit-element-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.dit-element-image {
    width: 2.92vw; /* 42px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 42 / 14;
}

/* ЧАТ-БОТ */
.chat-bot-element {
    position: absolute;
    top: 45%; /* Позиционирование от верха секции 7 */
    left: 27%; /* Позиционирование от левого края */
    z-index: 52;
}

.chat-bot-element-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.chat-bot-element-image {
    width: 6.81vw; /* 98px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 98 / 14;
}

/* Иконка ТГ (дубль 1) */
.tg-icon-duplicate-1 {
    position: absolute;
    top: 30%; /* Позиционирование от верха секции 7 */
    left: 10%; /* Позиционирование от левого края */
    z-index: 49;
}

.tg-icon-duplicate-1-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.tg-icon-duplicate-1-image {
    width: 3.40vw; /* 49px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 49 / 49;
}

/* Иконка ТГ (дубль 2) */
.tg-icon-duplicate-2 {
    position: absolute;
    top: 30%; /* Позиционирование от верха секции 7 */
    left: 22%; /* Позиционирование от левого края */
    z-index: 50;
}

.tg-icon-duplicate-2-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.tg-icon-duplicate-2-image {
    width: 3.40vw; /* 49px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 49 / 49;
}

/* Баннер сражения с драконом */
.battle-banner {
    position: absolute;
    top: -6%; /* Позиционирование от верха секции */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Точное центрирование */
    z-index: 35;
}

.battle-banner-image {
    width: 97.59vw; /* 1261.28px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1261.28 / 400; /* 1261.28 / 299*/
}

/* Внутренняя секция 3.1 */
.inner-section-3-1 {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden; /* Ограничиваем содержимое границами секции */
}

.section-3-1-background {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 0 auto;
}

/* Герой с Ритой */
.hero-with-rita {
    position: absolute;
    top: 0; /* 242px / 1235px (705px + 530px) * 100% */
    left: 44%; /* 282px / 1440px * 100% */
    z-index: 15;
}

.hero-with-rita-image {
    width: 55.19vw; /* 794.76px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 794.76 / 705;
}

/* Текстовый блок 1 */
.text-block-1 {
    position: absolute;
    top: 2.1%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 7.1%; /* 282px / 1440px * 100% */
    z-index: 16;
}

.text-block-1-image {
    width: 37.15vw; /* 535px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 535 / 219;
}

/* Текстовый блок 2 */
.text-block-2 {
    position: absolute;
    top: 33.7%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 7.1%; /* 282px / 1440px * 100% */
    z-index: 17;
}

.text-block-2-image {
    width: 36.94vw; /* 532px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 532 / 181;
}

/* Текстовый блок 3 */
.text-block-3 {
    position: absolute;
    top: 63.2%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 7.1%; /* 282px / 1440px * 100% */
    z-index: 18;
}

.text-block-3-image {
    width: 37.01vw; /* 533px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 533 / 159;
}

/* Текстовый блок с историей */
.story-text-block {
    position: absolute;
    top: 20.04%; /* 15px / 1440px * 100% */
    left: 7.04%; /* 15px / 1440px * 100% */
    z-index: 19;
    width: 31.46vw; /* 453px / 1440px * 100vw */
    height: auto; /* Убираем фиксированную высоту, чтобы текст не обрезался */
    overflow: visible; /* Убираем обрезку */
}

.story-text-content {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.11vw; /* 16px / 1440px * 100vw */
    color: white;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Второй текстовый блок с историей */
.story-text-block-2 {
    position: absolute;
    top: 23.04%; /* 15px / 1440px * 100% */
    left: 7.04%; /* 15px / 1440px * 100% */
    z-index: 20;
    width: 31.46vw; /* 453px / 1440px * 100vw */
    height: auto; /* Убираем фиксированную высоту, чтобы текст не обрезался */
    overflow: visible; /* Убираем обрезку */
}

.story-text-content-2 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.11vw; /* 16px / 1440px * 100vw */
    color: white;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Третий текстовый блок с историей */
.story-text-block-3 {
    position: absolute;
    top: 16.04%; /* 15px / 1440px * 100% */
    left: 7.04%; /* 15px / 1440px * 100% */
    z-index: 21;
    width: 31.46vw; /* 453px / 1440px * 100vw */
    height: auto; /* Убираем фиксированную высоту, чтобы текст не обрезался */
    overflow: visible; /* Убираем обрезку */
}

.story-text-content-3 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.11vw; /* 16px / 1440px * 100vw */
    color: white;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Внутренняя секция 3.1 */
.inner-section-3-1 {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden; /* Ограничиваем содержимое границами секции */
}

/* Внутренняя секция 4.1 */
.inner-section-4-1 {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden; /* Ограничиваем содержимое границами секции */
}

.section-4-1-background {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 0 auto;
}

/* Все герои вместе */
.all-heroes-together {
    position: absolute;
    top: 13%; /* Позиционирование от верха секции 4.1 */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Точное центрирование */
    z-index: 36;
}

.all-heroes-together-image {
    width: 74.64vw; /* 1074.84px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1074.84 / 1071;
}



/* Тень за героем (дубль 1 в секции 4.1) */
.hero-shadow-duplicate-4-1-1 {
    position: absolute;
    top: 53%; /* Позиционирование от верха секции 4.1 */
    left: -29%; /* Позиционирование от левого края */
    z-index: 37;
}

.hero-shadow-duplicate-4-1-1-image {
    width: 100.38vw; /* 1013.44px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1013.44 / 816;
}

/* Тень за героем (дубль 2 в секции 4.1) */
.hero-shadow-duplicate-4-1-2 {
    position: absolute;
    top: 53%; /* Позиционирование от верха секции 4.1 */
    right: -29%; /* Позиционирование от левого края */
    z-index: 38;
}

.hero-shadow-duplicate-4-1-2-image {
    width: 100.38vw; /* 1013.44px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1013.44 / 816;
    transform: scaleX(-1);
}

/* Шторка (дубль 1 в секции 4.1) */
.curtain-duplicate-4-1-1 {
    position: absolute;
    top: 63%; /* Позиционирование от верха секции 4.1 */
    left: 6%; /* Позиционирование от левого края */
    z-index: 39;
}

.curtain-duplicate-4-1-1-image {
    width: 27.88vw; /* 401.49px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 401.49 / 649.82;
}

/* Шторка (дубль 2 в секции 4.1) */
.curtain-duplicate-4-1-2 {
    position: absolute;
    top: 63%; /* Позиционирование от верха секции 4.1 */
    right: 6%; /* Позиционирование от правого края */
    z-index: 40;
}

.curtain-duplicate-4-1-2-image {
    width: 27.88vw; /* 401.49px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 401.49 / 649.82;
}

/* Текстовый блок Москва ждет героев */
.moscow-waits-heroes {
    position: absolute;
    top: 73%; /* Позиционирование от верха секции 4.1 */
    left: 50%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Точное центрирование по обеим осям */
    z-index: 41;
}

.moscow-waits-heroes-image {
    width: 91.67vw; /* 1320px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1320 / 890.5;
}

/* Внутренняя секция 3.1 */
.inner-section-3-1 {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden; /* Ограничиваем содержимое границами секции */
}

/* Внутренняя секция 3.2 */
.inner-section-3-2 {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden; /* Ограничиваем содержимое границами секции */
}

.section-3-2-background {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 0 auto;
}

/* Космос */
.cosmos-element {
    position: absolute;
    top: 5.58%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 5.58%; /* 282px / 1440px * 100% */
    z-index: 15;
}

.cosmos-image {
    width: 51.10vw; /* 735.9px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 735.9 / 1068;
}

/* Тень за героем (секция 3.2) */
.hero-shadow-section-3-2 {
    position: absolute;
    top: 10.58%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 5.58%; /* 282px / 1440px * 100% */
    z-index: 16;
}

.hero-shadow-section-3-2-image {
    width: 102.2vw; /* 1472px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1472 / 1185;
}

/* Герой - за плечами меч */
.hero-with-sword-behind {
    position: absolute;
    top: 1.8%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 10.58%; /* 282px / 1440px * 100% */
    z-index: 17;
}

.hero-with-sword-behind-image {
    width: 35.42vw; /* 510px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 510 / 994;
}

/* Текст но в передине главное */
.text-main-thing {
    position: absolute;
    top: 15.58%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 7.58%; /* 282px / 1440px * 100% */
    z-index: 18;
}

.text-main-thing-image {
    width: 34.79vw; /* 500.98px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 500.98 / 500.98;
}

/* Текстовый блок для 3.2 */
.text-block-for-3-2 {
    position: absolute;
    top: 73.8%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 32.58%; /* 282px / 1440px * 100% */
    z-index: 19;
}

.text-block-for-3-2-image {
    width: 39.72vw; /* 572px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 572 / 209;
}

/* Текстовый блок с историей в секции 3.2 */
.story-text-block-3-2 {
    position: absolute;
    top: 6%; /* 15px / 1440px * 100% */
    left: 4.04%; /* 15px / 1440px * 100% */
    z-index: 20;
    width: 20.90vw; /* 301px / 1440px * 100vw */
    height: auto; /* Убираем фиксированную высоту, чтобы текст не обрезался */
    overflow: visible; /* Убираем обрезку */
}

.story-text-content-3-2 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.0vw; /* 16px / 1440px * 100vw */
    color: white;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Внутренняя секция 3.3 */
.inner-section-3-3 {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden; /* Ограничиваем содержимое границами секции */
}

.section-3-3-background {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin: 0 auto;
}

/* Текст Рита я даже не Джун */
.rita-text-element {
    position: absolute;
    top: -1.58%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 80.58%; /* 282px / 1440px * 100% */
    z-index: 25;
}

.rita-text-image {
    width: 13.84vw; /* 199.23px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 199.23 / 160.5;
}

/* Текстовый блок между 3.1 и 3.2 */
.text-block-between-sections {
    position: absolute;
    top: 27.58%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 7.2%; /* 282px / 1440px * 100% */
    z-index: 26;
}

.text-block-between-sections-image {
    width: 37.01vw; /* 533px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 533 / 221;
}

/* Текстовый блок с историей в главной секции */
.story-text-block-main {
    position: absolute;
    top: 10.04%; /* 15px / 1440px * 100% */
    left: 7.04%; /* 15px / 1440px * 100% */
    z-index: 27;
    width: 31.46vw; /* 453px / 1440px * 100vw */
    height: auto; /* Убираем фиксированную высоту, чтобы текст не обрезался */
    overflow: visible; /* Убираем обрезку */
}

.story-text-content-main {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.11vw; /* 16px / 1440px * 100vw */
    color: white;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Большой текстовый блок между 3.1 и 3.2 */
.big-text-block-between-sections {
    position: absolute;
    top: 26.58%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 55.58%; /* 282px / 1440px * 100% */
    z-index: 28;
}

.big-text-block-between-sections-image {
    width: 36.39vw; /* 524px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 524 / 656;
}

/* Текстовый блок с историей в большом блоке */
.story-text-block-big {
    position: absolute;
    top: 20.04%; /* 15px / 1440px * 100% */
    left: 13.04%; /* 15px / 1440px * 100% */
    z-index: 30;
    width: 30.97vw; /* 446px / 1440px * 100vw */
    height: auto; /* Убираем фиксированную высоту, чтобы текст не обрезался */
    overflow: visible; /* Убираем обрезку */
}

.story-text-content-big {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.11vw; /* 16px / 1440px * 100vw */
    color: white;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Комикс нарушение правил */
.comics-rule-violation {
    position: absolute;
    top: 45.4%; /* 242px / 1235px (705px + 530px) * 100% */
    right: -1.3%; /* 282px / 1440px * 100% */
    z-index: 29;
}

.comics-rule-violation-image {
    width: 49.95vw; /* 719.22px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 719.22 / 663;
}

/* Тень под свитком (дубликат в главной секции) */
.hero-shadow-duplicate-main {
    position: absolute;
    top: 29.58%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 43.58%; /* 282px / 1440px * 100% */
    z-index: 31;
    transform: rotate(-75deg); /* Поворот на 75 градусов */
    opacity: 0.6; /* Делаем элемент более прозрачным */
    filter: brightness(0.7) contrast(0.8); /* Уменьшаем яркость и контрастность */
}

.hero-shadow-duplicate-main-image {
    width: 70.38vw; /* 1013.44px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1013.44 / 816;
}

/* Дракон смотрит на героев */
.dragon-looking-at-heroes {
    position: absolute;
    bottom: 0%; /* Позиционирование от низа секции */
    left: 0%; /* 282px / 1440px * 100% */
    z-index: 32;
}

.dragon-looking-at-heroes-image {
    width: 100.14vw; /* 1442px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 1442 / 791;
}

/* Текстовый блок для 3.3 */
.text-block-for-3-3-main {
    position: absolute;
    top: 77.58%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 58.58%; /* 282px / 1440px * 100% */
    z-index: 33;
}

.text-block-for-3-3-main-image {
    width: 30.56vw; /* 440px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 440 / 365;
}

/* Текстовый блок с историей в блоке 3.3 */
.story-text-block-3-3-main {
    position: absolute;
    top: 20.04%; /* 15px / 1440px * 100% */
    left: 7.04%; /* 15px / 1440px * 100% */
    z-index: 34;
    width: 26.53vw; /* 382px / 1440px * 100vw */
    height: auto; /* Убираем фиксированную высоту, чтобы текст не обрезался */
    overflow: visible; /* Убираем обрезку */
}

.story-text-content-3-3-main {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.11vw; /* 16px / 1440px * 100vw */
    color: white;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Тень под свитком (дубликат 2 в главной секции) */
.hero-shadow-duplicate-2-main {
    position: absolute;
    top: 69.58%; /* 242px / 1235px (705px + 530px) * 100% */
    left: 73.58%; /* 282px / 1440px * 100% */
    z-index: 32;
    transform: scaleX(1); /* Отзеркаливаем по горизонтали */
}

.hero-shadow-duplicate-2-main-image {
    width: 27.43vw; /* 611px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 611 / 992;
}

/* Модальное окно для карты */
.map-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.map-modal-content {
    position: relative;
    margin: 2% auto;
    padding: 0;
    width: 95%;
    height: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    pointer-events: auto;
}

.map-modal-close {
    position: absolute;
    top: -0%;
    right: 13px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.map-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.map-modal-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
    transform-origin: center center;
    user-select: none;
    position: relative;
    z-index: 1;
}

/* Кнопки управления зумом карты */
.map-zoom-controls {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-zoom-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    user-select: none;
}

.map-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.map-zoom-btn:active {
    transform: scale(0.95);
}

.map-zoom-reset {
    font-size: 14px;
}

/* Фиксированная шторка справа для ПК версии */
.fixed-curtain-pc {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1000;
    display: block;
}

.fixed-curtain-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.fixed-curtain-link:hover {
    transform: scale(1.05);
}

.fixed-curtain-image {
    width: 2.876vw; /* 23px / 320px * 100vw 7.19vw 3.6vw*/
    height: 14.624vw; /* 117px / 320px * 100vw 36.56vw 18.28vw*/
    display: block;
    object-fit: contain;
}

/* Кнопка Москва 2030 в секции 7 */
.moscow-2030-button {
    position: absolute;
    left: 37%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
}

.moscow-2030-button-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.moscow-2030-button-image {
    width: 12.01vw; /* 173px / 1440px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 173 / 44;
}

/* Скрываем фиксированную шторку на мобильных устройствах */
@media (max-width: 768px) {
    .fixed-curtain-pc {
        display: none !important;
    }
}