/* Основные настройки */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth; /* Плавная прокрутка */
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    /* Заменяем жесткие 100vh на динамическую высоту */
    height: 100dvh; 
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
    position: fixed;

    overflow: hidden; /* Полностью отключает вертикальный и горизонтальный скролл */
    background-color: #0a0a0a; /* Очень темный фон */
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.1em;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 160px 20px;
}

/* Навигация */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    /* Убираем темный фон и размытие, делаем панель полностью прозрачной */
    background: transparent; 
    backdrop-filter: none;
    z-index: 1000;
    /* Убираем разделительную линию снизу, чтобы она не резала фото */
    border-bottom: none; 
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo {
    font-weight: bold;
    font-size: 1.2rem;
    color: #ffffff;
    /* Мягкая темная тень под буквами для читаемости на любом фоне */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); 
}

/* 1. Настройка самой ссылки-контейнера */
.logo a {
    display: block;
    transition: opacity 0.3s; /* Плавность затухания теперь живет здесь */
}

/* 2. Эффект наведения: когда мышка над ССЫЛКОЙ, блекнет всё внутри неё */
.logo a:hover {
    opacity: 0.8; 
}

.logo img {
    height: 40px !important; /* Ваша текущая высота */
    width: auto !important;
    display: block;
    transition: opacity 0.3s;
    mix-blend-mode: screen; 

    /* Защита от выделения и копирования */
    user-select: none;           /* Запрет выделения текста/картинки */
    -webkit-user-select: none;   /* Для Safari и мобильных iOS */
    -moz-user-select: none;      /* Для Firefox */
    -ms-user-select: none;       /* Для старых версий IE */
    
    /* Защита от долгого нажатия на телефонах (сохранить изображение) */
    -webkit-touch-callout: none; 
    
    /* Делает картинку "невидимой" для курсора, клик будет проходить сквозь неё на ссылку */
    pointer-events: none;        
}

.logo img:hover {
    opacity: 0.8;
}

/* Главный контейнер для навигации */
/* 2. Общие стили для левой и правой половин меню */
.menu-side {
    display: flex !important;
    flex-direction: row !important; /* Строго в горизонтальную линию */
    align-items: center !important;
    flex-wrap: nowrap !important;   /* Запрещаем кнопкам падать на вторую строку */
    flex: 1; /* Каждая сторона занимает одинаковую ширину для идеальной центровки логотипа */
}

/* 3. Настройки для левой стороны (кнопки PROJECTS и MUSIC прижаты к левому краю) */
.menu-left {
    justify-content: flex-start !important;
    gap: 30px; /* Расстояние между PROJECTS и MUSIC */
}

/* 4. Настройки для правой стороны (кнопки BLOG и ABOUT прижаты к правому краю) */
.menu-right {
    justify-content: flex-end !important;
    gap: 30px; /* Расстояние между BLOG и ABOUT */
}

/* 5. Контейнер логотипа строго по центру */
.logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 auto !important; /* Запрещаем логотипу сжиматься */
    padding: 0 40px; /* Безопасные отступы по бокам от кнопок */
}

/* 6. Настройка ссылок-контейнеров внутри боковых меню (вместо старого .menu a) */
.menu-side a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: opacity 0.3s;
}

/* Эффект наведения: блекнут фирменные SVG-кнопки по бокам */
.menu-side a:hover {
    opacity: 0.6;
}

/* 7. Настройка для ВСЕХ картинок-кнопок в меню (вместо старого .menu a img) */
.menu-side a img {
    height: 7px !important; /* Идеальная высота под масштаб сайта */
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    mix-blend-mode: screen !important; /* Чистое отображение без черных квадратов */
    
    /* Полная защита от копирования, перетаскивания и зажатия */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none; 
    pointer-events: none; /* Пропускаем клик на ссылку */
}

/* Шапка */
header {
    height: 100dvh; /* Было 100vh */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: #000;
}
    


/* Контейнер для слайдов */
.slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Слой под логотипом */
}

/* Общий стиль для каждого слайда */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* Изначально скрыты */
    animation: slideAnimation 18s linear infinite; /* 18 секунд на полный цикл из 3 фото */
}

/* Наложение затемнения поверх ВСЕХ слайдов для читаемости логотипа */
.slideshow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Затемнение 60% */
    z-index: 2;
}

/* Настройка задержки для каждого слайда (для 3-х фото) */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 6s; }
.slide:nth-child(3) { animation-delay: 12s; }

/* Анимация плавного перехода */
@keyframes slideAnimation {
    0% { opacity: 0; transform: scale(1.05); } /* Легкое увеличение для динамики */
    10% { opacity: 1; } /* Проявление */
    33% { opacity: 1; } /* Удержание */
    43% { opacity: 0; transform: scale(1); } /* Исчезновение */
    100% { opacity: 0; }
}

/* Ваш логотип (поверх слайд-шоу) */
.main-logo {
    position: relative;
    z-index: 3; /* Самый верхний слой */
    text-align: center;
}

.main-logo img {
    max-width: 100px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    
    /* Общее время увеличено до 15 секунд для максимального растворения */
    animation: 
        intro-fade 15s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        drift 25s ease-in-out infinite alternate; /* Дрейф стал ультра-медленным */
}

@keyframes intro-fade {
    /* 0с - Медленный выход из полной темноты */
    0% { 
        opacity: 0; 
        filter: brightness(0.1) blur(6px); 
    }
    /* 3с - Полностью проявился и зафиксировался */
    20% { 
        opacity: 1; 
        filter: brightness(1) blur(0) drop-shadow(0 0 15px rgba(255,255,255,0.2)); 
    }
    /* 3с – 8с - Удерживает пиковую яркость */
    53% { 
        opacity: 1; 
        filter: brightness(1.05) drop-shadow(0 0 25px rgba(255,255,255,0.3)); 
    }
    /* 8с – 15с - Экстремально затяжное, воздушное угасание в течение 7 секунд */
    100% { 
        opacity: 0; 
        filter: brightness(0.1) blur(-4px) drop-shadow(0 0 0px rgba(255,255,255,0));
        visibility: hidden;
    }
}

/* Анимация мерцания (эффект "живого" света) */
@keyframes glimmer {
    0% {
        filter: brightness(1) drop-shadow(0 0 5px rgba(255,255,255,0.1));
    }
    50% {
        filter: brightness(1.2) drop-shadow(0 0 15px rgba(255,255,255,0.3));
    }
    100% {
        filter: brightness(1) drop-shadow(0 0 5px rgba(255,255,255,0.1));
    }
}


/* Добавим мягкое появление для подзаголовка */
.fade-in-delay {
    opacity: 0;
    animation: fadeIn 2s ease-out 1.5s forwards;
    letter-spacing: 0.4em;
    color: #555;
    margin-top: 10px;
    text-transform: uppercase;
}

/* --- Адаптивность для планшетов (до 1024px) --- */
@media (max-width: 1024px) {
    .container {
        padding: 40px 30px; /* Увеличиваем боковые отступы */
    }
    
    .main-logo img {
        max-width: 80px; /* Уменьшаем логотип чуть-чуть */
    }
}

/* --- Адаптивность для телефонов (до 768px) --- */
@media (max-width: 768px) {
    /* Полностью скрываем всю верхнюю панель (кнопки, логотип и бургер) на смартфонах */
    nav {
        display: none !important;
    }
}

    .menu {
    display: flex;
    flex-direction: row; /* Выстраивает пункты строго в строку */
    align-items: center;
}

    .menu a {
        margin: 0;
        font-size: 0.7rem; /* Чуть меньше шрифт */
    }

    /* Главный экран */
    

    .main-logo img {
        max-width: 70px; /* Еще компактнее для узких экранов */
    }

    /* Контентные блоки */
    .placeholder-grid {
        grid-template-columns: 1fr; /* Карточки проектов встают в одну колонку */
    }

    h2 {
        font-size: 1.5rem; /* Уменьшаем заголовки секций */
    }
}

/* --- Оптимизация для маленьких экранов (до 480px) --- */
@media (max-width: 480px) {
    header h1 {
        font-size: 2rem;
    }
    
    .content-section {
        min-height: auto; /* Убираем лишнюю высоту, чтобы не скроллить вечно */
        padding: 40px 0;
    }
}

/* Стили для бургера (по умолчанию скрыт) */
.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}

.bar {
    width: 25px;
    height: 2px;
    background-color: #fff;
    transition: 0.3s;
}

/* Адаптивность для мобильных (до 768px) */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex; /* Показываем бургер */
        z-index: 1001;
    }

    .menu {
        position: fixed;
        top: 0;
        right: -100%; /* Прячем меню за экран */
        width: 100%;
        height: 100vh;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
        gap: 30px;
    }

    .menu.active {
        right: 0; /* Выдвигаем меню при клике */
    }

    .menu a {
        font-size: 1.5rem; /* Делаем ссылки крупными для пальцев */
    }

    /* Анимация превращения полосок в крестик */
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

header p {
    color: #555;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.4em; /* Увеличенный межбуквенный интервал для стиля "art buro" */
}

/* Секции контента */
.content-section {
    min-height: 60vh;
    border-bottom: 1px solid #111;
}

h2 {
    font-size: 2rem;
    margin-bottom: 40px;
    font-weight: 300;
}

.placeholder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* На ПК по 2 в ряд, на планшетах по 1 */
    gap: 30px; /* Расстояние между проектами */
    margin-top: 40px;
}

/* Карточка проекта */
.project-card {
    position: relative;
    overflow: hidden;
    height: 350px; /* Фиксированная высота для аккуратности */
    background-color: #111;
    border: 1px solid #1a1a1a;
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Фото заполняет карточку без искажений */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Слой затемнения с текстом, который появляется при наведении */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Затемнение при наведении */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Изначально скрыто */
    transition: opacity 0.4s ease;
}

.project-info {
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.project-info h3 {
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    margin-bottom: 8px;
    color: #fff;
}

.project-info p {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Эффекты при наведении мышки (Ховер) */
.project-card:hover img {
    transform: scale(1.05); /* Легкое увеличение фото */
}

.project-card:hover .project-overlay {
    opacity: 1; /* Проявление текста и фона */
}

.project-card:hover .project-info {
    transform: translateY(0); /* Плавный подъем текста вверх */
}

/* Адаптация под мобильные телефоны */
@media (max-width: 480px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .project-card {
        height: 250px; /* На смартфонах делаем карточки чуть ниже */
    }
}

/* Специальный контейнер для окна CONTACT US */
.contact-modal {
    max-width: 500px;
    width: 90%;
    padding: 50px 40px !important;
}

.contact-subtitle {
    font-size: 0.75rem;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 35px;
}

/* Стилизация полей ввода */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #222; /* Тонкая линия вместо громоздкого поля */
    padding: 12px 5px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    outline: none;
    transition: border-color 0.4s ease;
}

/* Эффект фокуса: линия красиво белеет при клике */
.form-group input:focus,
.form-group textarea:focus {
    border-bottom-color: #555;
}

/* Кнопка отправки */
.submit-btn {
    background: #fff;
    color: #000;
    border: none;
    padding: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    cursor: pointer;
    margin-top: 15px;
    transition: background 0.3s, color 0.3s;
    
    /* Защита кнопки */
    user-select: none;
    -webkit-user-select: none;
}

.submit-btn:hover {
    background: #111;
    color: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.05);
}

/* Разделитель */
.contact-divider {
    margin: 30px 0;
    position: relative;
    text-align: center;
}

.contact-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #111;
    z-index: 1;
}

.contact-divider span {
    background: #0d0d0d;
    padding: 0 15px;
    color: #333;
    font-size: 0.7rem;
    position: relative;
    z-index: 2;
    letter-spacing: 0.1em;
}

/* Ссылки на контакты */
.contact-links {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.contact-links a {
    color: #888;
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    transition: color 0.3s;
    
    /* Защита */
    user-select: none;
    -webkit-user-select: none;
}

.contact-links a:hover {
    color: #fff;
}

/* Базовые стили окон — они изначально скрыты (display: none) */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ЭТОТ БЛОК ОБЯЗАТЕЛЕН: при клике JS добавляет этот класс, и окно проявляется */
.modal.show {
    display: flex !important;
    opacity: 1 !important;
}

.modal-content {
    background: #0d0d0d;
    border: 1px solid #222;
    padding: 40px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.4s ease;
}

.modal.show .modal-content {
    transform: scale(1) !important;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.8rem;
    color: #555;
    cursor: pointer;
    transition: color 0.3s;
}
.close-modal:hover { color: #fff; }