/* ==========================================================================
   БАЗОВЫЕ И ПЕРЕМЕННЫЕ (КИНОПОРТАЛ)
   ========================================================================== */
:root {
    --bg-color: #050505; 
    --bg-card: #0e0e0e;
    --text-main: #ffffff; 
    --text-muted: #a3a3a3;
    
    /* ТЕМА: COBRA KAI */
    --accent: #facc15; 
    --accent-hover: #eab308;
    --accent-glow: rgba(250, 204, 21, 0.5);
    
    --nav-bg: rgba(5, 5, 5, 0.8);
    --nav-border: rgba(250, 204, 21, 0.4);
    
    /* ШРИФТЫ */
    --font-dojo: 'Permanent Marker', cursive; /* Только для англ. названий додзё */
    --font-heading: 'Oswald', sans-serif;     /* Для русских заголовков и кнопок */
    --font-text: 'Montserrat', sans-serif;    /* Для описаний */
    
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   ЦВЕТОВЫЕ ТЕМЫ
   ========================================================================== */
body.theme-eagle {
    --bg-color: #0a0303; 
    --bg-card: #140505;
    --accent: #ef4444; 
    --accent-hover: #dc2626;
    --accent-glow: rgba(239, 68, 68, 0.5);
    --nav-border: rgba(239, 68, 68, 0.4);
}

body.theme-miyagi {
    --bg-color: #020617; 
    --bg-card: #0f172a;
    --accent: #38bdf8; 
    --accent-hover: #0ea5e9;
    --accent-glow: rgba(56, 189, 248, 0.5);
    --nav-border: rgba(56, 189, 248, 0.4);
}

/* ==========================================================================
   ОСНОВЫ
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-text);
    transition: background-color 0.5s ease;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased; /* Делает шрифты тоньше и красивее на Mac/iOS */
}
a { text-decoration: none; color: inherit; transition: var(--transition-base); }

/* ==========================================================================
   НАВИГАЦИЯ (NETFLIX STYLE)
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0; width: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 60px; z-index: 1000;
    transition: background 0.4s ease;
}

/* Скролл эффект навбара будет добавлен через JS */
.navbar.scrolled {
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nav-border);
}

.logo {
    font-family: var(--font-dojo);
    font-size: 32px;
    color: var(--accent);
    letter-spacing: 2px;
    text-shadow: 0 0 15px var(--accent-glow);
}

.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-link {
    font-family: var(--font-heading);
    font-weight: 500; font-size: 16px; letter-spacing: 1px;
    text-transform: uppercase; color: #e5e5e5;
}
.nav-link:hover { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
.nav-special { color: var(--accent); font-weight: 700; }
.nav-special:hover { color: var(--accent-hover); text-shadow: 0 0 15px var(--accent-glow); }

.dojo-switcher { display: flex; gap: 15px; }
.btn-dojo {
    background: transparent; border: 1px solid rgba(255,255,255,0.2);
    color: #fff; padding: 8px 12px; border-radius: 6px; cursor: pointer;
    font-size: 18px; transition: var(--transition-base);
}
.btn-dojo:hover { transform: scale(1.1); border-color: var(--text-main); }
.btn-dojo.cobra:hover { background: rgba(250, 204, 21, 0.2); color: #facc15; border-color: #facc15; }
.btn-dojo.eagle:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; border-color: #ef4444; }
.btn-dojo.miyagi:hover { background: rgba(56, 189, 248, 0.2); color: #38bdf8; border-color: #38bdf8; }

/* ==========================================================================
   КИНЕМАТОГРАФИЧНЫЙ HERO БЛОК
   ========================================================================== */
.hero-section {
    position: relative; height: 100vh;
    display: flex; align-items: flex-end; /* Текст прижат к низу */
    padding: 0 60px 100px 60px; /* Отступы как в кинотеатрах */
    overflow: hidden;
}

.hero-video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover; z-index: -2;
}

/* Эпичное кино-затемнение */
.video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* Градиент снизу вверх (чтобы текст читался) и слева направо */
    background: linear-gradient(to top, var(--bg-color) 0%, transparent 60%),
                linear-gradient(to right, rgba(0,0,0,0.8) 0%, transparent 70%);
    z-index: -1;
}

.hero-content { z-index: 1; max-width: 800px; }

/* Бейджи (4K, 16+) */
.cinema-badges { display: flex; gap: 10px; margin-bottom: 15px; }
.badge {
    border: 1px solid rgba(255,255,255,0.4); border-radius: 3px;
    padding: 3px 8px; font-size: 12px; font-weight: 700;
    font-family: var(--font-heading); letter-spacing: 1px; color: #ccc;
}

/* Динамический Английский Заголовок */
.hero-title {
    font-family: var(--font-dojo);
    font-size: 110px; /* Гигантский размер */
    color: var(--accent);
    line-height: 1;
    margin-bottom: 25px;
    text-shadow: 4px 4px 0px rgba(0,0,0,0.8), 0 0 50px var(--accent-glow);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* Русский текст описания */
.hero-subtitle {
    font-size: 20px; font-weight: 400; line-height: 1.6;
    margin-bottom: 40px; color: #e5e5e5; max-width: 600px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}

/* КИНОШНЫЕ КНОПКИ */
.hero-buttons { display: flex; gap: 20px; }
.btn-play, .btn-info {
    padding: 15px 35px; font-size: 18px; font-weight: 700;
    font-family: var(--font-heading); border-radius: 4px; cursor: pointer;
    display: flex; align-items: center; gap: 10px; letter-spacing: 1px;
    transition: var(--transition-base); border: none; text-transform: uppercase;
}

.btn-play {
    background: #fff; color: #000;
}
.btn-play:hover { background: var(--accent); transform: scale(1.05); }

.btn-info {
    background: rgba(109, 109, 110, 0.7); color: #fff;
    backdrop-filter: blur(5px);
}
.btn-info:hover { background: rgba(109, 109, 110, 0.9); transform: scale(1.05); }


/* ПОДВАЛ */
footer { padding: 50px 60px; background: var(--bg-color); text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-moto { font-family: var(--font-heading); font-size: 24px; color: var(--accent); margin-bottom: 20px; letter-spacing: 2px;}
.socials { display: flex; justify-content: center; gap: 25px; margin-bottom: 20px; }
.social-link { font-family: var(--font-heading); font-size: 16px; letter-spacing: 1px; color: var(--text-muted); }
.social-link:hover { color: #fff; }
.copyright { font-size: 13px; color: #666; }

/* АДАПТАЦИЯ (Не трогаем, всё готово) */
.mobile-toggle { display: none; font-size: 28px; cursor: pointer; }
@media (max-width: 1024px) {
    .hero-title { font-size: 80px; }
}
@media (max-width: 768px) {
    .navbar { padding: 15px 20px; background: var(--nav-bg); }
    .hero-section { padding: 0 20px 60px 20px; }
    .mobile-toggle { display: block; order: 1; }
    .dojo-switcher { order: 2; margin-left: auto; margin-right: 15px; }
    .nav-links {
        display: none; width: 100%; flex-direction: column; background: var(--nav-bg);
        position: absolute; top: 100%; left: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.1);
    }
    .nav-links.active { display: flex; }
    .nav-link, .nav-special { padding: 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .hero-title { font-size: 55px; }
    .hero-buttons { flex-direction: column; width: 100%; }
    .btn-play, .btn-info { justify-content: center; width: 100%; }
}