/* --- 1. ФИКСИРОВАННЫЙ ФОН --- */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/fon.png') no-repeat center center;
    background-size: cover;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* --- 2. ПРЕЛОАДЕР (ЭКРАН ЗАГРУЗКИ) --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s;
}

#preloader.hide {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    width: 100%; /* Разрешаем контенту занимать всё место */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Иконка загрузки (Базовая - мобилка) */
.pulse-image {
    width: 200px;
    height: auto;
    animation: breathing 2.5s ease-in-out infinite;
    display: block;
}

@keyframes breathing {
    0% { opacity: 0.3; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0.3; transform: scale(0.98); }
}

/* --- 3. БАЗОВЫЕ СТИЛИ САЙТА --- */
* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
body { font-family: Arial, sans-serif; background-color: #000; color: #fff; overflow-x: hidden; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ШАПКА */
.hero-section { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 100px 0 50px 0; }
.logo-container { position: relative; width: 90%; text-align: center; }
.main-logo { width: 100%; height: auto; display: block; margin: 20px auto 0 auto; }

/* КНОПКА МУЗЫКИ (МОБИЛКА) */
.music-btn {
    position: absolute;
    top: -130px; 
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    width: 80px; 
    transition: transform 0.3s ease;
    z-index: 100;
}
.music-btn:hover { transform: translateX(-50%) scale(1.1); }
.music-btn img { width: 100%; height: auto; display: block; }

/* Навигация */
.nav-buttons { display: flex; flex-direction: column; align-items: center; margin-top: 25px; gap: 8px; }
.nav-buttons a { display: block; transition: transform 0.3s ease; }
.nav-buttons a:hover { transform: scale(1.05); }
.nav-buttons img { width: 45vw; height: auto; }

.custom-divider { display: block; margin: 30px auto; width: 90%; height: auto; }

/* --- 4. КОНТЕНТНОЕ ОКНО --- */
.text-window { max-width: 850px; margin: 0 auto; text-align: left; padding: 0 10px; }
.teaser-section, .about-section, .subscribe-section { padding: 40px 0; }
h2 { font-size: 1.8rem; text-transform: uppercase; margin-bottom: 20px; }
.description { color: #b0b0b0; font-size: 1.1rem; line-height: 1.6; padding-bottom: 40px; }

/* --- 5. ПЛЕЕР И РАМКА --- */
.video-frame-container { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
#teaserVideo { width: 100%; height: 100%; object-fit: cover; display: block; }

.custom-frame-overlay {
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    z-index: 10; pointer-events: none;
    background: url('../img/frame.png') no-repeat center;
    background-size: 100% 100%;
}

.video-controls { position: absolute; bottom: 15px; right: 15px; display: flex; gap: 8px; z-index: 20; }
.v-btn { background: transparent; border: none; cursor: pointer; width: 35px; transition: 0.3s; }
.v-btn img { width: 100%; height: auto; }

/* --- 6. СОЦСЕТИ --- */
.social-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; max-width: 320px; margin: 0 auto; }
.social-grid a { display: flex; transition: transform 0.3s ease; }
.social-grid a:hover { transform: scale(1.1); }
.social-grid img { width: 80px; }

/* --- 7. ФУТЕР И МОДАЛКИ --- */
footer { padding: 60px 0 40px 0; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.footer-links a { color: #444; text-decoration: none; font-size: 0.8rem; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 1000; }
.modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; background: #111; padding: 25px; border-radius: 8px; }
.modal-text { max-height: 400px; overflow-y: auto; margin-bottom: 20px; color: #bbb; font-size: 0.9rem; }
.btn-close { width: 100%; padding: 12px; background: #e50914; color: #fff; border: none; font-weight: bold; }

/* --- 8. ДЕСКТОПНАЯ ВЕРСИЯ (ПК) --- */
@media (min-width: 768px) {
    /* ИКОНКА ЗАГРУЗКИ НА ПК (950px как заказывал) */
    .pulse-image {
        width: 950px !important; 
        max-width: 95vw !important; /* На всякий случай, чтобы не вылезла за экран */
    }

    .logo-container { width: 60%; }
    .music-btn { width: 140px; top: -160px; } 
    .custom-divider { width: 60%; margin: 60px auto; }
    .nav-buttons img { width: 18vw; }
    .nav-buttons { gap: 15px; }
    .description { font-size: 1.4rem; }
    h2 { font-size: 2.2rem; }
    
    .social-grid { max-width: 100%; justify-content: flex-start; margin: 0; gap: 25px; }
    .social-grid img { width: 140px; }

    .custom-frame-overlay { top: -28px; left: -28px; right: -28px; bottom: -28px; }
    .video-controls { bottom: 35px; right: 35px; }
    .v-btn { width: 45px; height: 45px; }
}

/* Контейнер для кнопок тизеров */
.video-selector {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap; /* Жестко запрещаем перенос на вторую строку */
    gap: 15px;
    margin-top: 50px;
    position: relative;
}

/* Сами кнопки-картинки */
.preview-link {
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    width: 100px; /* Размер для телефонов */
    transition: transform 0.3s ease, filter 0.3s ease;
    padding: 0;
    outline: none;
}

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

/* Красное свечение для активного тизера */
.preview-link.active {
    filter: drop-shadow(0 0 10px #e50914);
    transform: scale(1.1);
}

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

/* Надпись "В работе" */
.work-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: #e50914;
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    text-transform: uppercase;
}

/* Показываем надпись при клике */
.preview-link.show-msg .work-label {
    opacity: 1;
}

/* Увеличение кнопок на ПК */
@media (min-width: 768px) {
    .video-selector { gap: 30px; }
    .preview-link { width: 220px; } /* Твой родной размер, который нормально влезал */
    .work-label { font-size: 1rem; bottom: -35px; }
}