/* Подключаем Forum для имен и Bodoni для даты */
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Bodoni+Moda:opsz,wght@6..96,400&display=swap');

:root {
    --bg-color: #f5f2ea;
    --text-blue: #2f5a8b;
    --accent-red: #a62b2d;
}

/* --- КНОПКА МЬЮТА --- */
#mute-btn {
    position: fixed;
    top: 60px;
    right: 20px; /* Перенесли вправо */
    left: auto;  /* Сбросили лево */
    width: 45px; /* Увеличили размер для тача */
    height: 45px;
    z-index: 5000;
    display: none;
    cursor: pointer;
    opacity: 0.6; /* Сделали чуть заметнее */
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent; /* Убирает синий квадрат при клике на Android */
}

#speaker-icon {
    width: 100%;
    height: 100%;
    fill: var(--text-blue); /* Цвет под ваш дизайн */
}

/* Перечеркивающая линия */
#mute-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0; /* Изначально длина 0 */
    height: 2px;
    background-color: var(--accent-red);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: width 0.2s ease;
}

/* Состояние при выключенном звуке */
#mute-btn.is-muted #mute-line {
    width: 30px;
}

#mute-btn.is-muted {
    opacity: 0.7; /* Делаем чуть ярче, когда звук выключен */
}


/* --- СТИЛИ КОНВЕРТА --- */
/* --- ГЕОМЕТРИЯ НАСТОЯЩЕГО КОНВЕРТА --- */
#envelope-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: all 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}

#envelope-wrapper.fade-out {
    opacity: 0;
    visibility: hidden;
    transform: scale(3); /* Эффект погружения */
}

.envelope {
    position: relative;
    width: 80vw;
    height: 110vw;
    max-width: 320px;
    max-height: 440px;
    background-color: #f0ede5; /* Задняя стенка внутри конверта */
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
}

/* КРЫШКА (FLAP) */
.flap {
    position: absolute;
    top: 0; width: 100%; height: 50%;
    background-color: #cfc9b8;
    z-index: 5; /* Поверх письма при закрытии */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top;
    transition: transform 0.6s ease-in-out, z-index 0.3s;
}

/* КАРМАН (POCKET) */
.pocket {
    position: absolute;
    width: 100%; height: 100%;
    z-index: 4; /* Поверх письма всегда */
    pointer-events: none;
}

.pocket .side {
    position: absolute;
    width: 100%; height: 100%;
    background-color: #e0dacb;
}

.pocket .left {
    clip-path: polygon(0 0, 50% 50%, 0 100%);
}

.pocket .right {
    clip-path: polygon(100% 0, 50% 50%, 100% 100%);
}

.pocket .bottom {
    position: absolute;
    width: 100%; height: 100%;
    background-color: #d1c9b8;
    clip-path: polygon(0 100%, 100% 100%, 50% 50%);
}

/* ПИСЬМО */
.letter {
    position: absolute;
    bottom: 5%; left: 5%;
    width: 90%; height: 90%;
    background: #ffffff;
    z-index: 2; /* Внутри кармана */
    display: flex;
    justify-content: center;
    transition: transform 0.8s ease-in-out;
    padding: 30px 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.letter-content { text-align: center; }
.letter-names { font-family: 'Forum', serif; font-size: 22px; color: var(--text-blue); }
.letter-line { width: 40px; height: 1px; background: var(--accent-red); margin: 15px auto; }
.letter-text { font-family: 'Forum', serif; font-size: 13px; letter-spacing: 2px; color: var(--text-blue); }

/* ПЕЧАТЬ */
.seal {
    position: absolute;
    top: 50%; left: 50%;
    width: 75px; height: 75px;
    background-color: var(--accent-red);
    border-radius: 50%;
    transform: translate(-50%, -40%); /* Чуть выше центра, где сходятся все швы */
    z-index: 6; /* Самый верх */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.4s ease;
}

/* АНИМАЦИЯ ПРИ ОТКРЫТИИ */
.envelope.open .flap {
    transform: rotateX(180deg);
    z-index: 1; /* После открытия уходит ЗА письмо */
}

.envelope.open .letter {
    transform: translateY(-130px); /* Выезжает из кармана */
}

.envelope.open .seal {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -40%) scale(0.5);
}

/* Анимация */
.envelope.open .flap { transform: rotateX(180deg); z-index: 1; }
.envelope.open .letter { transform: translateY(-120px); }
.envelope.open .seal { opacity: 0; pointer-events: none; }


html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Запрет скролла по горизонтали */
    position: relative;
    background-color: var(--bg-color);
}

/* Секция приветствия */
.hero {
    position: relative;
    padding: 40px 20px;
    min-height: 90vh; /* Занимает почти весь экран телефона */
    display: flex;
    flex-direction: column;
}

.names {
    font-family: 'Forum', serif;
    font-size: clamp(50px, 12vw, 75px); /* Уменьшается на маленьких экранах */
    line-height: 0.9;
    color: var(--text-blue);
    text-transform: uppercase;
    margin: 10px 0;
}

.hero-sub {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-blue);
    font-size: 20px;
    margin-bottom: 30px;
}

.line {
    flex-grow: 1;    /* Растягивает линию строго МЕЖДУ словами */
    height: 2px;     /* Толщина линии */
    background-color: var(--text-blue); /* Цвет линии */
}

.date-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.date-big {
    font-family: 'Bodoni Moda', serif;
    font-size: clamp(50px, 15vw, 80px); /* Гибкий размер шрифта */
    line-height: 0.8;
    color: var(--accent-red);
}

/* Стили для диско-шара */
.disco-container {
    width: 45%; /* Элемент станет больше и будет гибко сжиматься на смартфонах */
    margin-right: 0px;
}

.disco-img {
    width: 100%;
    height: auto; /* Сохраняет пропорции шара при изменении ширины */
    display: block; /* Убирает лишний зазор снизу под картинкой */
}

/* Стили для стола */
/* Контейнер стола */
.table-container {
    width: 100%;
    /* Меняем 0 на 40px (или больше), чтобы приподнять стол над нижним краем */
    margin: auto auto 40px auto;
    padding-top: 10px;
    overflow-x: hidden;
    position: relative;
}

.table-img {
    /* Увеличиваем ширину до 130-140%, чтобы стол стал крупнее */
    width: 120%;
    /* Сдвигаем влево сильнее, чтобы центрировать увеличившуюся картинку */
    margin-left: -17.5%;
    height: auto;
    display: block;
}

.input-hint {
    font-family: 'Forum', serif;
    font-size: 14px; /* Мелкий шрифт */
    color: var(--text-blue);
    opacity: 0.8;
    margin: -5px 0 10px 0; /* Отрицательный отступ сверху, чтобы быть ближе к метке */
    line-height: 1.2;
}

/* Стили формы */
.form-group {
    text-align: left;
    margin-bottom: 30px;
}

.form-group label, .group-label {
    display: block;
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 18px;
    margin-bottom: 10px;
}

input[type="text"] {
    width: 100% !important;
    box-sizing: border-box;
    border: 1.5px solid var(--text-blue) !important;
    border-radius: 25px !important;
    padding: 12px 20px;
    background: transparent;
    font-family: 'Forum', serif;
    font-size: 16px;
    color: var(--text-blue);
    outline: none;
}

/* Кастомные радиокнопки и чекбоксы */
.custom-radio, .custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 12px;
    position: relative;
    padding-left: 35px;
    font-size: 17px !important;
}

.custom-radio input, .custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Кружочки и квадратики */
.radio-mark, .checkbox-mark {
    position: absolute;
    left: 0;
    height: 22px;
    width: 22px;
    border: 1.5px solid var(--text-blue);
    background-color: transparent;
}

.radio-mark { border-radius: 50%; }
.checkbox-mark { border-radius: 2px; }

/* Состояние при клике (точка/галочка) */
.custom-radio input:checked ~ .radio-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-blue);
}

.custom-checkbox input:checked ~ .checkbox-mark::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-blue);
    font-size: 16px;
}

/* Кнопка Отправить */
.btn-submit {
    background-color: var(--accent-red);
    color: white;
    font-family: 'Forum', serif;
    font-size: 18px;
    padding: 12px 60px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 20px;
    transition: opacity 0.3s;
    z-index: 15;
}

.btn-submit:hover {
    opacity: 0.9;
}

/* Таймлайн */
.timeline {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 40px auto;
    min-height: 800px; /* Увеличили высоту, чтобы события не липли друг к другу */
    overflow: visible;
}

.event-item {
    position: absolute;
    display: flex;
    flex-direction: column; /* КАРТИНКА НАД ТЕКСТОМ */
    align-items: center;    /* Центрируем содержимое */
    width: 42%;             /* Ограничиваем ширину, чтобы не вылетало за экран */
    z-index: 5;
    opacity: 0;
    transition: all 0.8s ease-out;
}


.timeline-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    z-index: 1;
}

.event-img {
    width: 80px !important; /* Твой размер картинки */
    height: auto;
    margin-bottom: 10px;    /* Отступ от картинки до времени */
    flex-shrink: 0;
}

.event-time {
    font-family: 'Bodoni Moda', serif;
    color: var(--accent-red);
    font-size: 28px;        /* Крупное время */
    font-weight: bold;
    line-height: 1.1;
}


/* Эвенты теперь будут всплывать СНИЗУ, а не сбоку */
/* Базовый стиль для всех эвентов (теперь они невидимы и чуть ниже) */
.event-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 42%;
    z-index: 5;
    opacity: 0;
    transform: translateY(30px); /* Анимация СНИЗУ */
    transition: all 0.8s ease-out;
}

/* Возвращаем правую сторону */
.event-item.right {
    left: 55%; /* Начинается чуть правее центра */
    right: auto;
    text-align: center;
}

/* Возвращаем левую сторону */
.event-item.left {
    right: 55%; /* Начинается чуть левее центра */
    left: auto;
    text-align: center;
}

/* Магия появления (общая для всех) */
.event-item.visible,
.location-image.visible,
.location-info.visible,
.presents-container.visible,
.details-text.visible,
.flowers-wine.visible,
.organizer.visible {
    opacity: 1 !important;
    transform: translateY(0) !important; /* Всплывают ровно вверх на свои места */
}



.event-title {
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 22px !important;
    line-height: 1.2;
    margin-top: 5px;
}

/* Корректировка для телефона, чтобы не было слишком тесно */
@media (max-width: 400px) {
    .event-time { font-size: 18px; }
    .event-title { font-size: 14px; }
    .event-img { width: 40px; }
}

.heart-icon {
    position: absolute;
    z-index: 10;
    transform: translate(-50%, -50%); /* Чтобы центр сердца был на линии */
    pointer-events: none;
    transition: none; /* Убираем все задержки */
}


.event {
    margin-bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


section {
    position: relative;
    background: var(--bg-color); /* Чтобы перекрывать элементы снизу */
    z-index: 5;
}

.hero { z-index: 10; } /* Самый верхний уровень */


.intro {
    text-align: center;
    padding: 60px 20px;
    background-color: var(--bg-color);
}

.intro h2 {
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 28px;
    margin-bottom: 25px;
}

.intro-description {
    font-family: 'Forum', serif;
    font-size: 18px;
    line-height: 1.4;
    color: var(--text-blue);
    max-width: 320px;
    margin: 0 auto 40px auto;
}

/* Строка с датами */
.calendar-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-family: 'Bodoni Moda', serif;
}

.side-date {
    font-size: 32px;
    color: var(--accent-red);
    opacity: 0.6;
}

.heart-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(5px);
}

.beating-heart {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: var(--accent-red);
    z-index: 1;
    /* Запуск анимации */
    animation: heartPulse 1.5s ease-in-out infinite;
}

.target-date {
    position: relative;
    z-index: 2;
    color: white;
    font-size: 28px;
    font-weight: bold;
    margin-top: -5px; /* Небольшая корректировка центра */
}

/* АНИМАЦИЯ БИЕНИЯ СЕРДЦА */
@keyframes heartPulse {
    0% { transform: scale(1); }
    15% { transform: scale(1.1); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}

.location {
    padding: 40px 20px 40px 0;
    background-color: var(--bg-color);
}

.location-container {
    display: flex;
    align-items: center; /* Центрирует картинку и текст по вертикали */
    justify-content: flex-start;
    gap: 20px; /* Расстояние между картинкой и текстом */
    max-width: 500px;
    margin: 0;
}

.location-image {
    flex: 0 0 140px;
    margin-left: -5px;
    opacity: 0;
    transform: translateY(30px); /* Изменено с translateX на translateY */
    transition: all 1s ease-out;
}

.location-info {
    flex: 1.5;
    text-align: left;
    opacity: 0;
    transform: translateY(30px); /* Изменено с translateX на translateY */
    transition: all 1s ease-out;
}

.location-image img {
    width: 100%;
    height: auto;
    display: block;
}


.location-info h3 {
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 22px;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.location-info h3 span {
    display: block;
    font-size: 20px;
    font-style: italic; /* Если хочешь выделить название */
}

.location-info p {
    font-family: 'Forum', serif;
    font-size: 16px;
    color: var(--text-blue);
    text-align: left; /* Перебиваем глобальный text-align: center */
    margin: 0 0 20px 0;
    line-height: 1.4;
}

/* Специфичный стиль для кнопки карты */
.btn-map {
    margin: 0; /* Убираем авто-центрирование, которое было в общих стилях */
    background: var(--accent-red);
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-family: 'Forum', serif;
}

.section-header {
    padding-left: 25%; /* Чтобы был отступ слева как у стула */
    margin-bottom: 30px;
    font-size: 28px;
}

.section-header h3 {
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 22px;
    margin: 0;
    line-height: 1.2;
    text-align: left;
    font-size: 28px;
}

.section-header h3 span {
    display: block;
    font-size: 28px;
    font-style: italic;
}


/* --- СТИЛИ ДЛЯ ПК-ВЕРСИИ (ЗАГЛУШКА) --- */
/* --- СТИЛИ ДЛЯ ПК-ВЕРСИИ (ФИНАЛЬНАЯ КОРРЕКТИРОВКА) --- */

#pc-message {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-color);
    z-index: 9999;
    overflow: hidden;
}

.pc-content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 1. Поднимаем надпись-подсказку в самый верх */
.pc-hint {
    position: absolute;
    top: 3%; /* Отступ сверху */
    left: 50%;
    transform: translateX(-50%); /* Центрируем по горизонтали */
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 22px;
    line-height: 1.4;
    width: 100%;
    text-align: center;
}

/* 2. Имена - поднимаем выше середины, чтобы не пересекались со столом */
.pc-names {
    position: absolute;
    top: 30%; /* Располагаем под подсказкой, но выше стола */
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Forum', serif;
    font-size: clamp(65px, 10vw, 90px);
    color: var(--accent-red);
    text-transform: uppercase;
    line-height: 0.9;
    white-space: nowrap;
    z-index: 10;
}

/* 3. Диско-шар - в верхнем правом углу */
.pc-disco {
    position: absolute;
    top: 10%;
    right: 15%;
    width: 180px;
    height: auto;
    opacity: 0.9;
}

/* 4. Стол - в нижнем правом углу */
.pc-table {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%; /* Занимает половину ширины экрана */
    max-width: 650px;
    height: auto;
    z-index: 1; /* Стол под именами */
}


.details {
    padding: 50px 0 10px 0;
    background-color: var(--bg-color);
    text-align: center;
    overflow: hidden;
}

/* Специальное перекрытие для заголовка в деталях */
.details .section-header {
    padding-left: 0;   /* Убираем отступ 25%, который был для локации */
    text-align: center; /* Центрируем контейнер */
}

.details .section-header h3 {
    text-align: center; /* Центрируем сам текст внутри h3 */
    font-size: 28px;
}

.presents-container {
    width: 100%;
    min-height: 150px;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

.presents-img {
    width: 100%;
    height: auto;
    display: block;
}

.details-text {
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 18px;
    line-height: 1.5;
    max-width: 300px;
    margin: 0 auto;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease-out;
}

/* --- СЕКЦИЯ С ЦВЕТАМИ И ВИНОМ --- */

.flowers-wine {
    padding: 20px 20px 40px 20px;
    text-align: center;
    background-color: var(--bg-color);
    /* Начальное состояние для анимации появления */
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease-out;
}

.star-img {
    width: 20px; /* Размер звездочки */
    height: auto;
    margin-bottom: 25px;
    animation: rotateStar 8s linear infinite;
}

.flowers-text {
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

/* АНИМАЦИЯ ВРАЩЕНИЯ */
@keyframes rotateStar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Состояние при появлении */
.location-image.visible,
.location-info.visible,
.flowers-wine.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


/* --- СЕКЦИЯ ОРГАНИЗАТОРА --- */

.organizer {
    padding: 20px;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: scale(0.95);
    transition: all 1s ease-out;
}

.organizer .frame-bg {
    position: relative !important; /* Возвращаем в поток */
    width: 100% !important;
    height: auto !important;     /* Возвращаем автоматическую высоту */
    display: block !important;
    object-fit: contain !important; /* Убираем растягивание fill */
    top: auto !important;
    left: auto !important;
}

.organizer.visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.organizer .frame-wrap {
    position: relative;
    width: 100%;
    max-width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.organizer .frame-bg {
    position: relative !important; /* Возвращаем в поток */
    width: 100% !important;
    height: auto !important;     /* Возвращаем автоматическую высоту */
    display: block !important;
    object-fit: contain !important; /* Убираем растягивание fill */
    top: auto !important;
    left: auto !important;
}

.organizer .frame-content {
    position: absolute;
    width: 75%;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.organizer-text {
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 20px;
}

.organizer-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* Общий стиль ссылок-кнопок */
.organizer-buttons a {
    display: block;
    width: 160px;
    padding: 8px 0;
    border-radius: 20px;
    font-family: 'Forum', serif;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Кнопка ТГ (винная) */
.btn-tg {
    background-color: var(--accent-red);
    color: white;
    border: 1px solid var(--accent-red);
}

/* Кнопка Позвонить (прозрачная) */
.btn-call {
    background-color: transparent;
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
}


.rsvp {
    position: relative;
    padding: 60px 20px 120px 20px; /* Увеличили нижний отступ для "сцены" */
    text-align: center;
    overflow: hidden;
    background-color: var(--bg-color);
}

.rsvp-container {
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    z-index: 5; /* Контейнер с формой выше Майкла */
}

.rsvp-title {
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 28px;
    margin-bottom: 20px;
}

.rsvp-subtitle {
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 40px;
}

/* МАЙКЛ ДЖЕКСОН (КОНТЕЙНЕР) */
.mj-container {
    width: 200%; /* Делаем сцену шире экрана для плавного прохода */
    height: 150px;
    position: absolute;
    bottom: -110px;
    left: -50%;
    z-index: 1; /* Майкл под формой */
    pointer-events: none; /* Чтобы он не мешал кликать по кнопкам */
    border-bottom: 5px solid var(--text-blue); /* Линия пола */
}

.mj-walker {
    position: absolute;
    bottom: -19px;
    left: 0;
    width: 60px;
    height: 120px;
    /* УМЕНЬШЕНО В 2 РАЗА: scale(0.6) */
    transform: scale(0.6) scaleX(-1);
    animation: mj-move-cycle 12s linear infinite;
}

/* Цвета для всех частей тела Майкла */
.mj-walker div {
    background-color: var(--text-blue) !important;
}

.fedora {
    position: absolute;
    top: 2px;
    left: 42px;
    z-index: 10;
    transform: rotate(10deg);
}

.fedora-top {
    width: 20px;
    height: 12px;
    border-radius: 4px 4px 0 0;
    position: relative;
}

.fedora-top::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.2) !important; /* Белая лента на шляпе */
}

/* ИСПРАВЛЕННЫЕ ПОЛЯ ШЛЯПЫ (центрированы) */
.fedora-brim {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 3px;
    border-radius: 2px;
}

.mj-head {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 37px;
}

.mj-body-tilt {
    position: absolute;
    top: 28px;
    left: 37px;
    transform: rotate(12deg);
    background: transparent !important; /* Убираем фон у контейнера торса */
}

.mj-torso {
    width: 4px;
    height: 45px;
    border-radius: 2px;
}

.mj-arm {
    position: absolute;
    top: 2px;
    width: 3px;
    height: 25px;
    transform-origin: top center;
}

.mj-elbow {
    position: absolute;
    bottom: -20px;
    width: 3px;
    height: 20px;
    transform-origin: top center;
    transform: rotate(-20deg);
}

.mj-arm-left { transform: rotate(25deg); animation: mj-arm-swing 1s infinite alternate; }
.mj-arm-right { transform: rotate(-35deg); animation: mj-arm-swing 1s infinite alternate-reverse; }

.mj-leg {
    position: absolute;
    top: 70px;
    left: 33px;
    width: 4px;
    height: 32px;
    transform-origin: top center;
}

.mj-knee {
    position: absolute;
    top: 30px;
    width: 4px;
    height: 32px;
    transform-origin: top center;
}

.mj-foot {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 16px;
    height: 4px;
    border-radius: 2px;
    transform-origin: left center;
}

/* --- АНИМАЦИИ --- */
@keyframes mj-leg-cycle {
    0% { transform: rotate(-20deg); }
    50% { transform: rotate(30deg); }
    100% { transform: rotate(-20deg); }
}

@keyframes mj-knee-cycle {
    0%, 50%, 100% { transform: rotate(0deg); }
    75% { transform: rotate(45deg); }
}

@keyframes mj-foot-cycle {
    0%, 45% { transform: rotate(0deg); }
    50%, 75% { transform: rotate(40deg); }
    90% { transform: rotate(0deg); }
}

@keyframes mj-arm-swing {
    from { transform: rotate(-20deg); }
    to { transform: rotate(15deg); }
}

@keyframes mj-move-cycle {
    0%   { left: -10%; }
    100% { left: 110%; }
}

.mj-leg-left { animation: mj-leg-cycle 1s infinite linear; }
.mj-leg-right { animation: mj-leg-cycle 1s infinite linear -0.5s; }
.mj-leg-left .mj-knee { animation: mj-knee-cycle 1s infinite linear; }
.mj-leg-right .mj-knee { animation: mj-knee-cycle 1s infinite linear -0.5s; }
.mj-leg-left .mj-foot { animation: mj-foot-cycle 1s infinite linear; }
.mj-leg-right .mj-foot { animation: mj-foot-cycle 1s infinite linear -0.5s; }

/* Форма и кнопка выше Майкла */
#guestForm {
    position: relative;
    z-index: 10;
}

.btn-submit {
    position: relative;
    z-index: 20;
}



/* ОБЪЕДИНЕННОЕ ПРАВИЛО: Добавь сюда все анимированные классы */
.event-item.visible,
.location-image.visible,
.location-info.visible,
.presents-container.visible,
.details-text.visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}


/* --- СЕКЦИЯ ДРЕСС-КОДА --- */
.dress-code {
    padding: 50px 20px;
    text-align: center;
    /* Убеждаемся, что паддинги не раздувают секцию */
    box-sizing: border-box;
    overflow: hidden;
}

.section-header {
    margin: 0 auto 20px auto;
    padding: 0;
    text-align: center;
    width: 100%;
}

.section-header h3 {
    margin: 0; /* Сбрасываем внешние отступы h3, которые браузер ставит сам */
    padding: 0;
    display: block;
    text-align: center;
    font-size: 28px;
}

.dress-text {
    font-family: 'Forum', serif;
    color: var(--text-blue);
    font-size: 18px;
    line-height: 1.5;
    margin: 0 auto 25px auto;
    max-width: 100%;
}

.hearts-row {
    display: flex !important;
    justify-content: center;
    gap: 15px;
    font-size: 55px;
    margin-bottom: 30px;
}

.dress-frames {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 500px;
    margin: 0 auto !important;
}

.frame-item {
    position: relative !important;
    width: 45% !important;
    max-width: 170px !important;
    /* Пропорция твоих картинок 736 / 1105 */
    aspect-ratio: 736 / 1105 !important;
    cursor: pointer;
}

.female-frame { transform: rotate(-5deg); }
.male-frame { transform: rotate(5deg); }

.frame-bg {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
    pointer-events: none;
    /* Растягиваем рамку под формат фото */
    object-fit: fill !important;
}

.photo-container {
    position: absolute !important;
    top: 9%;
    left: 9%;
    right: 9%;
    bottom: 9%;
    overflow: hidden !important;
    z-index: 1;
    /* УДАЛЕН БЕЛЫЙ ФОН */
    background-color: transparent !important;
}

.photo-inside {
    width: 100% !important;
    height: 100% !important;
    /* Заполняем без щелей */
    object-fit: cover !important;
}

/* ОВЕРЛЕЙ */
#photo-overlay {
    position: fixed !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.95) !important;
    z-index: 20000 !important;
    display: none;
    justify-content: center;
    align-items: center;
}

#full-photo {
    max-width: 95% !important;
    max-height: 85vh !important;
    border: 2px solid white !important;
    object-fit: contain !important;
}

.close-overlay {
    position: absolute !important;
    top: 20px; right: 30px;
    color: white !important; font-size: 50px;
}

/* --- СТИЛИ ТАЙМЕРА --- */
#timer {
    font-family: 'Forum', serif; /* Шрифт как у остальных заголовков */
    color: var(--text-blue);     /* Ваш основной синий цвет */
    text-align: center;          /* Центрирование текста */
    font-size: 24px;             /* Размер шрифта (можно подправить) */
    line-height: 1.4;            /* Межстрочный интервал */
    padding: 40px 20px;          /* Отступы сверху и снизу */
    width: 100%;                 /* Растягиваем на всю ширину для точного центра */
    box-sizing: border-box;
}


/* --- МАГИЯ ПЕРЕКЛЮЧЕНИЯ (БЕЗ ИЗМЕНЕНИЙ) --- */
@media (min-width: 1025px) {
    body { overflow: hidden !important; }
    #pc-message { display: block !important; }
    #mobile-site { display: none !important; }
}

@media (max-width: 1024px) {
    body { overflow: auto !important; }
    #pc-message { display: none !important; }
    #mobile-site { display: block !important; }
}