/* --- 1. БАЗОВАЯ НАСТРОЙКА И ТЕМА --- */
:root {
    /* Цвета */
    --color-bg: #05020D; /* Очень темный фиолетовый */
    --color-text: #E0E0E0;
    --color-heading: #FFFFFF;
    --color-accent-1: #DA00FF; /* Яркий неон 1 */
    --color-accent-2: #00F0FF; /* Яркий неон 2 */

    /* Шрифты */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    overflow-x: hidden; /* Предотвращаем горизонтальный скролл */
    /* Плавный переход фона */
    transition: background-color 1.5s ease;
}

/* --- 2. ЖИВОЙ ГРАДИЕНТНЫЙ ФОН (Технология 1) --- */
.gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(
        45deg, 
        var(--color-accent-1), 
        var(--color-bg) 50%, 
        var(--color-accent-2)
    );
    background-size: 300% 300%;
    z-index: -1; /* Помещаем за всем контентом */
    
    /* Анимация градиента */
    animation: gradient-flow 15s ease-in-out infinite;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- 3. ГЛАВНЫЙ ЭКРАН (HERO) --- */
.hero {
    height: 100vh; /* На весь экран */
    display: grid;
    place-items: center; /* Центрирование по X и Y */
    text-align: center;
    position: relative; /* Для индикатора скролла */
}

.hero-content {
    /* Эффект "вырезанного" текста на фоне */
    background: rgba(0, 0, 0, 0.4);
    padding: 2rem 4rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Тот самый GLASSMORPHISM (Технология 2) */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--color-text);
}

.hero-title {
    font-size: 10rem; /* Огромный */
    font-weight: 900;
    margin: -1rem 0;
    letter-spacing: -5px;

    /* Анимированный градиентный текст (Технология 3) */
    background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2), var(--color-accent-1));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-shine 5s linear infinite;
}

@keyframes text-shine {
    to { background-position: 200% center; }
}

.hero-name {
    font-size: 1.5rem;
    color: var(--color-heading);
    font-weight: 700;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    color: var(--color-text);
    opacity: 0.7;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* --- 4. КОНТЕНТ И КАРТОЧКИ ПОЖЕЛАНИЙ --- */
.content-wrapper {
    /* Фон убран для яркого градиента */
    background-color: transparent;
    position: relative; /* Чтобы был поверх .gradient-bg */
    z-index: 2;
    padding: 1px; /* Хак для схлопывания margin'ов */
}

.text-block {
    max-width: 700px;
    margin: 6rem auto;
    text-align: center;
    
    /* Текст на "стекле" */
    background: rgba(255, 255, 255, 0.1); /* СВЕТЛЫЙ Glassmorphism */
    padding: 2.5rem; /* Заменяем старый padding */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box; /* Чтобы padding не сломал max-width */
}

.text-block h2 {
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.wish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.card {
    /* 3D-эффект при наведении (Технология 4) */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Снова GLASSMORPHISM */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* --- САМАЯ КРУТАЯ ЧАСТЬ (Технология 5) --- */
    /* Анимация появления, привязанная к скроллу */
    opacity: 0;
    transform: translateY(50px) rotateX(-10deg);
    
    animation: show-card linear forwards; /* Имя и поведение */
    
    /* Привязываем анимацию к прокрутке! */
    /* ЭТО И ЕСТЬ SCROLL-DRIVEN ANIMATION */
    animation-timeline: view();
    
    /* Настраиваем диапазон: 
       Начать, когда 20% карточки видно.
       Закончить, когда 50% карточки видно. */
    animation-range: entry 20% cover 50%; 
}

/* Сама анимация появления */
@keyframes show-card {
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

.card:hover {
    transform: translateY(-10px) scale(1.02); /* 3D-подъем */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.card-content {
    padding: 2rem;
}
.card-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.final-block {
    height: 30vh; /* Уменьшил высоту, чтобы кнопка была видна */
    display: grid;
    place-items: center;
}


/* --- 5. СТИЛИ КНОПКИ "ПОЛУЧИТЬ ПОДАРОК" --- */
.gift-cta {
    text-align: center;
    padding: 2rem 0 6rem 0; /* Отступы */
    /* Фон убран, т.к. он уже есть у .content-wrapper */
    position: relative;
    z-index: 2;
}

.cta-button {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-heading);
    background: transparent;
    border: 2px solid var(--color-accent-1);
    border-radius: 50px;
    padding: 1rem 2.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px 0 var(--color-accent-1);
}

.cta-button:hover {
    background-color: var(--color-accent-1);
    color: var(--color-bg);
    box-shadow: 0 0 25px 0 var(--color-accent-1);
    transform: scale(1.05);
}

/* --- 6. СТИЛИ МОДАЛЬНОГО ОКНА (ПАРОЛЬ) --- */
.hidden {
    display: none !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: grid;
    place-items: center;
    z-index: 1000;
    
    /* Анимация появления */
    animation: fadeIn 0.3s ease;
}

.modal-content {
    /* Тот же Glassmorphism! */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    padding: 2.5rem;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
    
    /* Анимация появления */
    transform: scale(0.9);
    animation: scaleIn 0.3s ease forwards;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.modal-close:hover {
    opacity: 1;
}

.modal-content h3 {
    font-size: 1.8rem;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

#password-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

#password-form input {
    font-size: 1.1rem;
    padding: 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-heading);
    text-align: center;
}
#password-form input::placeholder {
    color: #aaa;
}

.error-message {
    color: #ff4d4d;
    font-weight: 700;
    margin-top: 0.5rem;
}

/* Анимация "Тряски" при неверном пароле */
.modal-content.shake {
    animation: shake 0.5s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}


/* --- 7. СТИЛИ ЭКРАНА С ПОДАРКОМ --- */
.gift-scene-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: grid;
    
    /* === ИЗМЕНЕНИЕ: Включаем скролл и меняем выравнивание === */
    overflow-y: auto; /* Добавляем скролл, если контент не влезает */
    align-items: start; /* Выравниваем по верху, а не по центру */
    justify-items: center; /* Оставляем центрирование по горизонтали */
    padding-top: 4rem; /* Отступ сверху, чтобы контент не "прилип" */
    padding-bottom: 4rem; /* Отступ снизу для удобства прокрутки */
    box-sizing: border-box; /* Учитываем padding в 100% высоте */
    
    /* === ИЗМЕНЕНИЕ: Фон чуть плотнее на десктопе === */
    background: rgba(5, 2, 13, 0.95); 
    backdrop-filter: blur(10px);
    animation: fadeIn 0.5s ease;
    transition: background 1.5s ease, backdrop-filter 1.5s ease; /* Для пляжного режима */
}

.gift-box {
    position: relative;
    width: 200px;
    height: 150px;
    background: var(--color-accent-1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 30px var(--color-accent-1);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 1; /* Чтобы был поверх видео */
}
.gift-box:hover {
    transform: scale(1.05);
}

.gift-lid {
    position: absolute;
    width: 220px;
    height: 40px;
    background: var(--color-accent-2);
    box-shadow: 0 0 20px var(--color-accent-2);
    top: -30px;
    left: -10px;
    border-radius: 8px;
    z-index: 2;
    transition: all 0.5s ease 0.2s; /* Добавил задержку */
}

/* Ленточки */
.gift-ribbon-v, .gift-ribbon-h {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    z-index: 3;
    transition: all 0.5s ease;
}
.gift-ribbon-v { /* Вертикальная */
    width: 30px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.gift-ribbon-h { /* Горизонтальная */
    width: 100%;
    height: 30px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.gift-bow {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    top: -65px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    transition: all 0.5s ease;
}
.gift-bow::before, .gift-bow::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 50px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}
.gift-bow::before {
    transform: rotate(-30deg) translateX(-20px);
}
.gift-bow::after {
    transform: rotate(30deg) translateX(20px);
}

.click-to-open {
    position: absolute;
    bottom: -50px;
    width: 100%;
    text-align: center;
    color: var(--color-heading);
    font-weight: 700;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* --- 8. АНИМАЦИЯ ОТКРЫТИЯ ПОДАРКА --- */

/* Класс .unwrapped будет добавлен через JS */
.gift-box.unwrapped .gift-lid {
    transform: translateY(-100px) rotate(15deg);
    opacity: 0;
}
.gift-box.unwrapped .gift-ribbon-v {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}
.gift-box.unwrapped .gift-ribbon-h {
    transform: translateY(-50%) scaleX(0);
    opacity: 0;
}
.gift-box.unwrapped .gift-bow {
    transform: translateX(-50%) scale(0);
    opacity: 0;
}
.gift-box.unwrapped .click-to-open {
    opacity: 0;
}

/* --- 9. ФИНАЛЬНЫЕ ОКНА С ИНФОРМАЦИЕЙ --- */
.gift-result-wrapper {
    position: relative; 
    width: 100%;
    padding: 2rem;
    display: grid;
    /* Адаптивность для мобильных */
    grid-template-columns: 1fr;
    gap: 2rem;
    z-index: 3000;
    
    /* === ИСПРАВЛЕНИЕ: Уменьшаем ширину === */
    max-width: 800px; 
    
    /* Анимация появления */
    animation: fadeIn 1s ease 0.5s forwards; /* 0.5s задержка */
    opacity: 0;
    
    /* === ИСПРАВЛЕНИЕ: Добавляем box-sizing === */
    box-sizing: border-box; 
}

/* На больших экранах - 2 колонки */
@media (min-width: 768px) {
    .gift-result-wrapper {
        grid-template-columns: 1fr 1fr;
        padding: 1rem; /* Уменьшаем отступы на ПК */
    }
}


.result-card {
    /* Анимация "вылета" карточек */
    opacity: 0;
    transform: translateY(30px);
    width: 100%; 
    box-sizing: border-box; /* Важно для padding */
    animation: none; /* Отключаем scroll-driven-анимацию */
    
    /* === ИСПРАВЛЕНИЕ: Добавляем перенос слов === */
    overflow-wrap: break-word;
}

#account-info {
    animation: slideUp 0.6s ease 1s forwards; /* 1s задержка */
}
#benefits-info {
    animation: slideUp 0.6s ease 1.2s forwards; /* 1.2s задержка */
}

.result-card hr {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 1rem 0;
}

/* === УДАЛЕНЫ СТАРЫЕ, КОНФЛИКТУЮЩИЕ СТИЛИ LI === */


/* Анимации (общие) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 10. АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ --- */
@media (max-width: 768px) {
    .hero-title {
        font-size: 6rem; /* Уменьшаем заголовок */
        letter-spacing: -2px;
    }
    .hero-name, .hero-subtitle {
        font-size: 1.2rem;
    }
    .hero-content {
        padding: 1.5rem 2rem;
        width: 90%;
    }
    .text-block {
        padding: 1.5rem; /* Уменьшаем отступы на "стекле" */
        margin: 3rem 1rem; /* Уменьшаем отступы */
    }
    .text-block h2 {
        font-size: 2.2rem;
    }
    .animal {
        font-size: 3rem; /* Уменьшаем животных на мобильных */
    }
	
    /* === ИЗМЕНЕНИЕ: Уменьшаем отступы на ВСЕХ карточках (и обычных, и подарочных) === */
    .card-content {
        padding: 1rem; 
    }
	
    .transition-text {
        font-size: 1.8rem; /* Уменьшаем текст "Отправляемся" */
    }
    .gift-result-wrapper {
        padding: 1rem; /* Уменьшаем боковые отступы на мобильных */
    }
	
    /* === ИСПРАВЛЕНИЕ: Уменьшаем шрифты на мобильных (Темная тема) === */
    .gift-result-wrapper .result-card h3 {
        font-size: 1.2rem; /* <<< ИЗМЕНЕНИЕ */
    }
	.gift-result-wrapper .result-card p,
    .gift-result-wrapper .result-card li {
        font-size: 0.9rem;
        margin-bottom: 0.5rem; /* <<< ИЗМЕНЕНИЕ */
        
        /* === ДОБАВЛЕНО: Принудительный перенос длинных строк === */
        overflow-wrap: break-word;
        word-break: break-word;
    }
	.gift-result-wrapper .highlight-text {
        word-break: break-all;
    }
    .gift-result-wrapper .result-card li span {
        font-size: 1.1rem;
    }
    .card-icon {
        font-size: 1.8rem; /* <<< ИЗМЕНЕНИЕ */
    }
	
	/* === ИСПРАВЛЕНИЕ: Дополнительная оптимизация пляжного режима на мобильных === */
	.beach-theme-active .result-card h3 {
		font-size: 1.2rem; /* Делаем заголовок в пляжном режиме еще компактнее */
	}

	.beach-theme-active .result-card p,
	.beach-theme-active .result-card li {
		font-size: 0.85rem; /* И основной текст */
		margin-bottom: 0.5rem; /* Сближаем строки списка */
		
        /* === ДОБАВЛЕНО: Принудительный перенос длинных строк === */
        overflow-wrap: break-word;
        word-break: break-word;
	}
	/* === ДОБАВЛЕНО: Перенос для логина/пароля === */
	.beach-theme-active .highlight-text {
        word-break: break-all;
    }

	.beach-theme-active .result-card li span {
		font-size: 1rem; /* Иконки в списке */
	}

	.beach-theme-active .card-icon {
		font-size: 1.8rem; /* Главные иконки карточек */
	}
}

/* --- ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ ОКОН ПОДАРКА --- */

/* Переопределяем базовые стили result-card */
.gift-result-wrapper .result-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); /* Более выраженная тень */
    transform: translateY(30px) scale(0.95); /* Немного уменьшаем для эффекта */
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 1.5s ease, border 1.5s ease, color 1.5s ease;
}

.gift-result-wrapper .result-card:hover {
    transform: translateY(-5px) scale(1);
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.7);
}


/* Индивидуальные градиенты для каждой карточки */
.gift-card-1 {
    /* Градиент в неоновом фиолетовом */
    border-image: linear-gradient(45deg, var(--color-accent-1) 0%, rgba(255,255,255,0.1) 100%) 1;
    box-shadow: 0 0 25px var(--color-accent-1);
    animation: slideUpGlow1 0.7s ease 1s forwards; /* Новая анимация */
    background: linear-gradient(145deg, rgba(218, 0, 255, 0.1), rgba(255, 255, 255, 0.02));
}

.gift-card-2 {
    /* Градиент в неоновом голубом */
    border-image: linear-gradient(45deg, var(--color-accent-2) 0%, rgba(255,255,255,0.1) 100%) 1;
    box-shadow: 0 0 25px var(--color-accent-2);
    animation: slideUpGlow2 0.7s ease 1.2s forwards; /* Новая анимация */
    background: linear-gradient(145deg, rgba(0, 240, 255, 0.1), rgba(255, 255, 255, 0.02));
}

/* === ИСПРАВЛЕНИЕ: Стили для списка с эмодзи === */
.gift-result-wrapper .result-card ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}
.gift-result-wrapper .result-card li {
    font-size: 0.9rem; /* <<< ИЗМЕНЕНИЕ: Было 1rem */
    margin-bottom: 0.6rem; /* <<< ИЗМЕНЕНИЕ: Было 0.8rem */
    display: flex; /* Для выравнивания иконки и текста */
    align-items: center;
    transition: color 1.5s ease;
    padding-left: 0; /* Убираем старый отступ */
    position: static; /* Сбрасываем старую позицию */
    overflow-wrap: break-word; /* Переносим длинные слова */
}

.gift-result-wrapper .result-card li span {
    font-size: 1.3rem; /* Уменьшаем иконку в списке */
    margin-right: 10px;
    line-height: 1; /* Чтобы не сдвигало текст */
    flex-shrink: 0; /* Не даем иконке сжиматься */
}

/* Убираем старую галочку (если она где-то осталась) */
.gift-result-wrapper .result-card li::before {
    content: none;
}
/* === КОНЕЦ ИСПРАВЛЕНИЯ === */

.gift-result-wrapper .result-card p {
    font-size: 0.9rem; /* <<< ИЗМЕНЕНИЕ: Было 1rem */
    overflow-wrap: break-word; /* Переносим длинные слова */
}

.card-icon {
    font-size: 2.2rem; /* <<< ИЗМЕНЕНИЕ: Было 2.5rem */
    margin-bottom: 1rem;
    display: block; /* Чтобы был на своей строке */
    line-height: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    transition: text-shadow 1.5s ease;
}

.small-text {
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 1.5rem;
    transition: color 1.5s ease;
}

.highlight-text {
    color: var(--color-accent-2);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); /* Неоновое свечение */
    transition: color 1.5s ease, text-shadow 1.5s ease;
}

/* Новые анимации с неоновым свечением */
@keyframes slideUpGlow1 {
    from { opacity: 0; transform: translateY(50px) scale(0.9); box-shadow: 0 0 0 var(--color-accent-1); }
    to { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 25px var(--color-accent-1); }
}

@keyframes slideUpGlow2 {
    from { opacity: 0; transform: translateY(50px) scale(0.9); box-shadow: 0 0 0 var(--color-accent-2); }
    to { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 25px var(--color-accent-2); }
}

/* --- 11. АНИМАЦИЯ ЖИВОТНЫХ (ИСПРАВЛЕННАЯ) --- */

.animal {
    position: fixed;
    font-size: 5rem;
    z-index: 2999;
    will-change: transform;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.3);
    animation-iteration-count: infinite;
    bottom: 0;
    transform-origin: bottom center;
    transition: text-shadow 1.5s ease;
}

/* --- Настройки для Скорпиона (ИСПРАВЛЕНО) --- */
#animal-scorpion {
    left: -10%;
    /* Теперь здесь только ОДНА анимация, 
       которая включает в себя и путь, и походку */
    animation: 
        run-scorpion-realistic 25s linear infinite 1s; 
}

/* --- Настройки для Лошади (Без изменений) --- */
#animal-horse {
    right: -10%;
    animation: 
        run-horse 20s linear infinite;
}


/* --- НОВЫЕ Ключевые кадры --- */

/* Анимация "Галопа" для Лошади (Остается как была) */
@keyframes run-horse {
    /* Бежит справа налево (смотрит влево scaleX(-1)) */
    0%   { transform: translate(0, 0) scaleX(-1); right: -10%; }
    10%  { transform: translate(-20vw, -3vh) scaleX(-1); right: -10%; } /* Прыжок вверх */
    20%  { transform: translate(-35vw, 0) scaleX(-1); right: -10%; } /* Приземление */
    30%  { transform: translate(-50vw, -3vh) scaleX(-1); right: -10%; } /* Прыжок вверх */
    45%  { transform: translate(-90vw, 0) scaleX(-1); right: -10%; } /* Приземление в конце */
    
    /* Разворот */
    50%  { transform: translate(-90vw, 0) scaleX(1); right: -10%; } 

    /* Бежит слева направо (смотрит вправо scaleX(1)) */
    60%  { transform: translate(-70vw, -3vh) scaleX(1); right: -10%; } /* Прыжок вверх */
    70%  { transform: translate(-55vw, 0) scaleX(1); right: -10%; } /* Приземление */
    80%  { transform: translate(-40vw, -3vh) scaleX(1); right: -10%; } /* Прыжок вверх */
    95%  { transform: translate(0, 0) scaleX(1); right: -10%; } /* Приземление в начале */
    
    /* Разворот */
    100% { transform: translate(0, 0) scaleX(-1); right: -10%; }
}

/* Анимация для Скорпиона (Путь + Походка) (ИСПРАВЛЕНО) */
@keyframes run-scorpion-realistic {
    /* Идем вправо (scaleX(1)) */
    0%   { transform: translateX(0) translateY(0) scaleX(1); left: -10%; }
    5%   { transform: translateX(10vw) translateY(-3px) scaleX(1); left: -10%; } /* "шаг" 1 */
    10%  { transform: translateX(20vw) translateY(0) scaleX(1); left: -10%; } /* "шаг" 2 */
    15%  { transform: translateX(30vw) translateY(-3px) scaleX(1); left: -10%; } /* "шаг" 3 */
    20%  { transform: translateX(40vw) translateY(0) scaleX(1); left: -10%; } /* "шаг" 4 */
    25%  { transform: translateX(50vw) translateY(-3px) scaleX(1); left: -10%; } /* "шаг" 5 */
    30%  { transform: translateX(60vw) translateY(0) scaleX(1); left: -10%; } /* "шаг" 6 */
    35%  { transform: translateX(70vw) translateY(-3px) scaleX(1); left: -10%; } /* "шаг" 7 */
    40%  { transform: translateX(80vw) translateY(0) scaleX(1); left: -10%; } /* "шаг" 8 */
    45%  { transform: translateX(90vw) translateY(-3px) scaleX(1); left: -10%; } /* дошли до конца */

    /* Разворот */
    50%  { transform: translateX(90vw) translateY(0) scaleX(-1); left: -10%; }

    /* Идем влево (scaleX(-1)) */
    55%  { transform: translateX(80vw) translateY(-3px) scaleX(-1); left: -10%; } /* "шаг" 1 */
    60%  { transform: translateX(70vw) translateY(0) scaleX(-1); left: -10%; } /* "шаг" 2 */
    65%  { transform: translateX(60vw) translateY(-3px) scaleX(-1); left: -10%; } /* "шаг" 3 */
    70%  { transform: translateX(50vw) translateY(0) scaleX(-1); left: -10%; } /* "шаг" 4 */
    75%  { transform: translateX(40vw) translateY(-3px) scaleX(-1); left: -10%; } /* "шаг" 5 */
    80%  { transform: translateX(30vw) translateY(0) scaleX(-1); left: -10%; } /* "шаг" 6 */
    85%  { transform: translateX(20vw) translateY(-3px) scaleX(-1); left: -10%; } /* "шаг" 7 */
    90%  { transform: translateX(10vw) translateY(0) scaleX(-1); left: -10%; } /* "шаг" 8 */
    95%  { transform: translateX(0) translateY(-3px) scaleX(-1); left: -10%; } /* дошли до начала */

    /* Разворот */
    100% { transform: translateX(0) translateY(0) scaleX(1); left: -10%; }
}


/* === ИСПРАВЛЕНИЕ: План Б (Картинка) === */
/* Этот селектор (2 класса) "сильнее" и "победит" селектор .beach-theme-active */
.beach-theme-active.video-fallback-active {
    background-image: url('https://images.pexels.com/photos/3250614/pexels-photo-3250614.jpeg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Чтобы фон не двигался */
}
/* Также прячем сломанный тег video, если активен План Б */
.video-fallback-active #beach-video-bg {
    display: none;
}
/* === КОНЕЦ ИСПРАВЛЕНИЯ === */


/* --- 12. ПЛЯЖНЫЙ РЕЖИМ (С ИСПРАВЛЕНИЯМИ) --- */

/* 1. Стили для самого видео-фона (План А) */
#beach-video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: -2; 
    opacity: 0;
    transition: opacity 1.5s ease;
}

/* 2. Показываем видео (План А) */
.beach-theme-active #beach-video-bg {
    opacity: 1;
    z-index: -1; 
}

/* 3. Прячем старый градиент */
.beach-theme-active .gradient-bg {
    display: none;
}

/* 4. ИСПРАВЛЕНИЕ (ВИДЕО) (План А) */
/* Делаем фон <body> прозрачным, чтобы видео было видно */
.beach-theme-active {
    background-color: transparent; 
    background-image: none; /* Это правило будет "побеждено" Планом Б на мобильных */
}

/* 5. ИСПРАВЛЕНИЕ (ТЕКСТ) */
/* Прячем основной контент, чтобы он не просвечивал */
.beach-theme-active .hero,
.beach-theme-active .content-wrapper {
    display: none;
}


/* 6. Делаем фон сцены ПОЛНОСТЬЮ прозрачным */
.beach-theme-active .gift-scene-overlay {
    background: transparent;
    backdrop-filter: none;
}

/* 7. Адаптируем карточки подарка */
.beach-theme-active .result-card {
    /* Меняем фон на светлый Glassmorphism */
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    
    /* Меняем цвет текста на темный */
    color: #333; /* Темно-серый */
}

/* 8. Адаптируем заголовки, иконки и тексты */
.beach-theme-active .result-card h3 {
    color: #000; /* Черный */
    font-size: 1.4rem; 
}

.beach-theme-active .card-icon {
    /* Эмодзи и так цветные, но уберем тень */
    text-shadow: none;
}

.beach-theme-active .small-text {
    color: #555; /* Темно-серый */
}

.beach-theme-active .highlight-text {
    /* Меняем неоново-голубой на насыщенный синий */
    color: #0056b3; 
    text-shadow: none;
}

/* 9. Адаптируем списки */
.beach-theme-active .result-card li {
    color: #111;
}

.beach-theme-active .result-card hr {
    background: rgba(0, 0, 0, 0.2); /* Темный разделитель */
}

/* 10. Адаптируем животных */
.beach-theme-active .animal {
    /* Меняем тень на темную, чтобы их было видно на светлом песке */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* 11. Адаптируем анимации появления карточек (убираем свечение) */
.beach-theme-active #account-info,
.beach-theme-active #benefits-info {
     /* Используем старую-добрую анимацию slideUp */
    animation: slideUp 0.6s ease 1s forwards;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Убираем цветное свечение */
}

/* --- 13. ЭКРАН ПЕРЕХОДА "НА ПЛЯЖ" --- */

.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* z-index должен быть ОЧЕНЬ высоким, выше всего */
    z-index: 5000; 
    display: grid;
    place-items: center;
    background: #000; /* Начнем с черного экрана */
    opacity: 0; /* Начинаем невидимым */
    pointer-events: none; /* Не мешает кликам */
    transition: opacity 0.5s ease-in-out;
}

/* Класс 'visible' будет добавлен через JS для плавного появления */
.transition-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.transition-content {
    text-align: center;
    overflow: hidden; /* Чтобы самолет вылетал красиво */
}

.transition-text {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-heading);
    /* Анимация появления и исчезновения текста */
    animation: fadeInOut 3.5s ease-in-out forwards;
}

.plane-icon {
    display: block;
    font-size: 4rem;
    margin-top: 1rem;
    /* Анимация летящего самолета */
    animation: fly-across 3.5s cubic-bezier(0.5, 0, 0.89, 0.43) forwards;
}

/* Анимация для текста: появился, по-висел, исчез */
@keyframes fadeInOut {
    0% { opacity: 0; transform: scale(0.9); }
    15% { opacity: 1; transform: scale(1); }
    85% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.9); }
}

/* Анимация для самолета: вылетел, пролетел, улетел */
@keyframes fly-across {
    0% {
        transform: translateX(-200px) rotate(-15deg);
        opacity: 0;
    }
    30% {
        transform: translateX(0) rotate(10deg);
        opacity: 1;
    }
    80% {
        transform: translateX(150px) rotate(20deg);
        opacity: 1;
    }
    100% {
        transform: translateX(300px) rotate(30deg);
        opacity: 0;
    }
}


/* --- ИСПРАВЛЕНИЕ: Убираем "стекло" у последних блоков --- */

.final-block,
.gift-cta {
    background: transparent;
    border: none;
    backdrop-filter: none;
    padding: 2rem; /* Возвращаем простой отступ */
}

/* Убедимся, что у .final-block достаточный отступ сверху */
.final-block {
    margin-top: 6rem;
}

/* У .gift-cta убираем лишние отступы */
.gift-cta {
    padding-top: 0;
    padding-bottom: 6rem;
}


/* === ИСПРАВЛЕНИЕ: СТИЛИ ДЛЯ МОБИЛЬНОГО ВИДЕО-ФОНА === */
/* (Фон подарка, не пляжа) */
.mobile-background-video {
    display: none; /* Изначально скрываем видео на десктопе */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Видео будет покрывать весь элемент, обрезая лишнее */
    z-index: 0; 
    filter: brightness(0.7) blur(2px); /* Делаем чуть темнее и размытее, чтобы контент был читаемым */
    opacity: 0; /* Изначально прозрачное */
    transition: opacity 1.5s ease; /* Плавное появление */
}

/* Активируем видео только для мобильных устройств */
@media (max-width: 768px) {
    .mobile-background-video {
        display: block; /* Показываем видео на мобильных */
        opacity: 1; /* Делаем видимым */
    }

    /* Убираем фон, чтобы видео было видно */
    .gift-scene-overlay {
        background: transparent; 
        backdrop-filter: blur(5px); 
    }

    /* Убираем фон и для пляжного режима */
    .beach-theme-active .gift-scene-overlay {
        background: transparent; 
    }
}

/* --- 14. СТИЛИ ДЛЯ КОПИРОВАНИЯ В БУФЕР --- */

.data-row {
    display: flex;
    justify-content: space-between; /* Текст слева, иконка справа */
    align-items: center;
    margin-bottom: -10px; /* Сближаем строки */
}

/* Стилизуем саму иконку */
.copy-icon {
    font-size: 1.5rem;
    cursor: pointer;
    user-select: none; /* Запрещаем выделение иконки */
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
    padding: 5px; /* Увеличиваем область нажатия */
}

.copy-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

.copy-icon:active {
    transform: scale(0.9);
}

/* Адаптация для пляжного режима (темная иконка) */
.beach-theme-active .copy-icon {
    /* Можно оставить как есть, эмодзи цветной, 
       но если бы это была иконка, мы бы поменяли цвет */
    opacity: 0.8;
}