/* =========================================================================
   ГЛОБАЛЬНЫЕ СТИЛИ И СБРОСЫ БРАУЗЕРА
   ========================================================================= */
html, body {
    overflow-x: hidden; /* Запрет горизонтальной прокрутки на уровне всей страницы */
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit; /* Границы и внутренние отступы не увеличивают размер элементов */
}

body {
    position: relative; /* Позволяет дочерним элементам позиционироваться абсолютно относительно body */
    background-color: #000000; /* Глубокий черный фон сайта */
    color: #E0E0E0;     /* Светло-серым цвет текста для хорошей читаемости */
    font-family: sans-serif;   /* Стандартный шрифт без засечек */
    min-height: 100vh;
}

/* =========================================================================
   1. ШАПКА САЙТА (HEADER)
   ========================================================================= */
.main-header {
    width: 100%;        /* Растягиваем на всю ширину экрана */
    position: relative; /* Контекст для абсолютного позиционирования меню и подзаголовка */
    display: flex;      /* Используем Flexbox для выравнивания */
    flex-direction: column; /* Элементы идут друг под другом */
    justify-content: center;
    align-items: center;    /* Центрируем содержимое по горизонтали */
    text-align: center;
    transition: height 0.3s ease; /* Плавное изменение высоты при адаптации */
}

.header-nav {
    position: absolute;
    top: 30px;
    width: 90%;
    max-width: 1000px;
    left: 50%;
    transform: translateX(calc(-50% + 103px));
    z-index: 100;
    background: transparent !important;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    border-bottom: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1), 0 6px 20px -5px rgba(0, 0, 0, 0.9);
}

/* Подзаголовок "Официальный сайт группы" */
.header-subtitle {
    position: absolute;
    top: 125px;
    left: 50%;
    transform: translateX(calc(-50% + 103px)); /* Сдвигаем надпись вправо на 103px */
    width: 100%;
    text-align: center;
    font-size: 24px;
    color: #E0E0E0;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 10;
}

/* Основное изображение-логотип (KoD-Band-Header-Site.png) */
.header-logo {
    max-width: 100%;    /* Ограничение по ширине экрана */
    width: auto;        /* Сохраняем оригинальную ширину */
    height: auto;       /* Сохраняем пропорции высоты */
    display: block;     /* Убираем лишние зазоры снизу как у inline элементов */
    margin-top: -80px;  /* СМЕЩЕНИЕ ВЫШЕ: отрицательное значение поднимает картинку */
    position: relative; /* Позволяет использовать z-index */
    z-index: 2;         /* Слой над винилом */
}

/* Дополнительный логотип (Верхний левый угол) */
.top-left-logo {
    position: absolute;
    top: 20px;
    left: 45%;
    margin-left: -550px; /* Смещаем вправо: было -580px, стало -477px */
    width: 175px;
    height: 175px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 999;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* =========================================================================
   2. КНОПКИ СОЦСЕТЕЙ (МАКСИМАЛЬНО ЯРКОЕ ОБЛАКО)
   ========================================================================= */
.header-socials {
    position: absolute;
    bottom: 50px; /* Оставляем привязку к низу шапки */
    left: 50%;    /* Фиксация по центру экрана для 1440p, 4K и выше */
    margin-left: -600px; /* Новое смещение: -357px вместо -600px */
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 150;
}

.header-socials a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    z-index: 1;
}

/* Световое облачко (Увеличенная яркость) */
.header-socials a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350%;
    height: 350%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 75%); /* Увеличена плотность белого */
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    filter: blur(25px); /* Мягкое размытие при большом размере */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.header-socials a:hover::before {
    opacity: 1; /* Облако становится полностью видимым */
    transform: translate(-50%, -50%) scale(1.1);
}

.header-socials img {
    width: 40px;       /* Фиксированный размер 40x40 px */
    height: 40px;
    display: block;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.header-socials a:hover img {
    transform: scale(1.15);
    filter: brightness(1.4); /* Иконка тоже становится светлее */
}

/* =========================================================================
   3. КНОПКА БИЛЕТА (АДАПТИВНАЯ ВЕРСИЯ)
   ========================================================================= */
.ticket-callout {
    position: absolute;
    left: calc(50% + 400px);
    top: 550px; /* Фиксируем отступ сверху для стабильности на 1440px, 4K */
    z-index: 50;
}

.ticket-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

/* Световое "облачко" на заднем фоне билета */
.ticket-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    background: radial-gradient(circle, rgba(224, 224, 224, 0.15) 0%, rgba(224, 224, 224, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: blur(15px);
}

.ticket-link:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.ticket-link:hover {
    transform: scale(1.1) rotate(2deg);
}

.ticket-text {
    color: #E0E0E0;
    font-size: clamp(10px, 0.9vw, 16px);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5vw;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    background-color: rgba(20, 20, 20, 0.7);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(224, 224, 224, 0.1);
    box-shadow: 0 0 10px rgba(224, 224, 224, 0.2);
}

.ticket-image {
    width: clamp(90px, 8vw, 250px);
    height: auto;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6), 0 0 15px rgba(224, 224, 224, 0.2);
    filter: grayscale(20%);
    transition: filter 0.3s ease, box-shadow 0.3s ease;
}

.ticket-link:hover .ticket-image {
    filter: grayscale(0%);
    box-shadow: 0 15px 25px rgba(0,0,0,0.8), 0 0 30px rgba(224, 224, 224, 0.6);
}

/* =========================================================================
   4. НАВИГАЦИЯ (МЕНЮ С ГОРИЗОНТАЛЬНОЙ ПОЛОСОЙ ПОД ПУНКТАМИ)
   ========================================================================= */
.header-nav {
    position: absolute;
    top: 40px;
    width: 90%;
    max-width: 1000px;
    left: 50%;
    transform: translateX(calc(-50% + 103px));
    z-index: 100;
    background: transparent !important;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    /* БЕЛАЯ ПОЛОСКА НИЖЕ МЕНЮ */
    border-bottom: 3px solid rgba(255, 255, 255, 0.8); /* Четкая белая линия с легким размытием по краям за счет альфа-канала */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1), 0 6px 20px -5px rgba(0, 0, 0, 0.9); /* Добавлено легкое свечение самой полосе и глубокая тень вниз */
}

.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Позволяет переноситься, если экран узкий */
    justify-content: center;
    align-items: center;
}

.header-nav li {
    margin: 10px clamp(10px, 2vw, 25px);
    position: relative; /* Контекст для линий индивидуального подчеркивания и облачка */
}

.header-nav a {
    color: #E0E0E0;
    text-decoration: none;
    text-transform: uppercase;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: bold;
    letter-spacing: 2px;
    transition: opacity 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    padding-bottom: 5px;
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* СВЕТОВОЕ БЕЛОЕ ОБЛАЧКО НА ЗАДНЕМ ФОНЕ ПУНКТОВ МЕНЮ */
.header-nav a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    filter: blur(10px); /* Мягкое размытие краев облачка */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Эффект индивидуальной линии при наведении (дополнение) */
.header-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px; /* Толщина встык к основной линии */
    bottom: -21px; /* Точное позиционирование на основную горизонтальную линию */
    left: 0;
    background-color: #ffffff; /* Чистый белый цвет при наведении */
    transition: width 0.3s ease;
}

/* СОСТОЯНИЕ ПРИ НАВЕДЕНИИ НА ПУНКТ МЕНЮ */
.header-nav a:hover {
    opacity: 1;
    color: #ffffff;
}

/* Активация белого облачка */
.header-nav a:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* =========================================================================
   5. ФОНОВЫЕ КОНТЕЙНЕРЫ (ВИНИЛЫ, ГИТАРЫ, КАССЕТЫ)
   ========================================================================= */

/* Первый винил */
.vinyl-bg-container {
    width: 100%;
    max-width: 1372px;
    height: 772px;
    position: absolute;
    top: 700px;
    left: 50%;
    background-image: url('../img/KoD-Vinil.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
    animation: slideInFromRight 1.5s ease-out forwards;
    will-change: transform, opacity;
}

/* Второй винил */
.vinyl-bg-container-2 {
    width: 100%;
    max-width: 1372px;
    height: 772px;
    position: absolute;
    top: 1472px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../img/KoD-Vinil2.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* Третий фон - Гитара */
.guitar-bg-container {
    width: 100%;
    max-width: 1372px;
    height: 772px;
    position: absolute;
    top: 2244px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../img/KoD-Guitar.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* Кассеты 1 (оригинальный блок) */
.kass-bg-container {
    width: 100%;
    max-width: 1372px;
    height: 772px;
    position: absolute;
    top: 3016px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../img/KoD-Kass.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* Кассеты 1.5 (Новый промежуточный блок) */
.kass-bg-container-1 {
    width: 100%;
    max-width: 1372px;
    height: 772px;
    position: absolute;
    top: 3788px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../img/KoD-Kass1.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

/* Кассеты 2 (Финальный кассетный блок) */
.kass-bg-container-2 {
    width: 100%;
    max-width: 1372px;
    height: 772px;
    position: absolute;
    top: 4560px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../img/KoD-Kass2.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Отрегулированный оверлей для Кассет 1 */
.kass-overlay-container {
    width: 100%;
    max-width: 1372px;
    height: 772px;
    position: absolute;
    top: 3016px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
}

.kass-overlay-image {
    position: absolute;
    top: 300px;
    right: 0px;
    width: 300px;
    pointer-events: auto;
}
/* Кто мы о чем мы */
/* Контейнер для трех карточек */
/* Контейнер для трех карточек */
.cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 750px;
    z-index: 20;
    pointer-events: auto;
    /* Смещение блока вниз на 384px */
    margin-top: 550px;
    /* Добавлен отступ вправо (от левого края) на 23px */
    margin-left: 23px;
}

.concept-card {
    display: flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 25px;
    border-radius: 12px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Анимация белой подсветки (аналог SVG-эффекта) */
.concept-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 12px;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
    transition: box-shadow 0.4s ease;
    z-index: 1;
}

.concept-card:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.5);
}

.concept-card:hover::before {
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.card-icon {
    font-size: 24px;
    font-weight: 900;
    color: #444;
    margin-right: 25px;
    min-width: 40px;
}

.card-text h3 {
    margin: 0 0 5px 0;
    color: #fff;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-text p {
    margin: 0;
    color: #bbb;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .cards-wrapper { width: 90%; }
    .concept-card { padding: 10px 15px; }
}
/* Настройка изображений в карточках */
.card-image {
    width: 150px;    /* Квадратный размер */
    height: 150px;
    object-fit: cover; /* Чтобы картинка не деформировалась */
    margin-right: 20px;
    border-radius: 8px; /* Скругление углов для стиля */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.concept-card {
    display: flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px; /* Немного уменьшил отступ, чтобы картинки смотрелись гармонично */
    border-radius: 12px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Эффект подсветки остается прежним */
.concept-card:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Исправленный оверлей для Кассет 1.5 (Перемещен на KoD-Kass1.jpeg) */
.kass-overlay-container-2 {
    width: 100%;
    max-width: 1372px;
    height: 772px;
    position: absolute;
    top: 3488px; /* Смещено точно под координаты контейнера kass-bg-container-1 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kass-overlay-image-left {
    position: absolute;
    bottom: 0;
    left: 0px;
    top: 400px;
    width: 300px;
    height: auto;
    object-fit: contain;
    z-index: 5;
    pointer-events: auto;
}

h4.kass-questions-content {
    margin: 0;
    color: #E0E0E0;
    font-size: clamp(16px, 2.2vw, 32px);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 20; /* Выше картинки-музыканта */
    pointer-events: auto;
    text-shadow: 0 0 15px rgba(0, 0, 0, 1), 2px 2px 8px rgba(0, 0, 0, 1);
}

/* =========================================================================
   СЕКЦИЯ ЦЕНТРАЛЬНОГО ФОТО (В СТИЛЕ БЛОКА ИСТОРИЯ)
   ========================================================================= */
.content-photo-section {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 80px auto 0 auto;
    z-index: 2;
}

.photo-wrapper {
    position: relative;
    display: block;
    width: 100%;
    background-color: rgba(25, 25, 25, 0.85);
    padding: 15px;
    box-sizing: border-box;

    /* Срезанные углы: правый верхний и левый нижний (как у блока истории) */
    clip-path: polygon(
            0% 0%,
            95% 0%,
            100% 5%,
            100% 100%,
            5% 100%,
            0% 95%
    );

    transition: all 0.3s ease;
}

/* === БЕЛАЯ РАМКА 1px ЧЕРЕЗ ПСЕВДОЭЛЕМЕНТ === */
.photo-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Такая же форма обрезки, как у основного блока */
    clip-path: polygon(
            0% 0%,
            95% 0%,
            100% 5%,
            100% 100%,
            5% 100%,
            0% 95%
    );

    /* Белая рамка 1px */
    outline: 1px solid rgba(255, 255, 255, 0.7);
    outline-offset: 0;

    /* Свечение */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));

    pointer-events: none;
    z-index: 1;
}

/* === ВНУТРЕННЕЕ СВЕЧЕНИЕ === */
.photo-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Такая же форма обрезки */
    clip-path: polygon(
            0% 0%,
            95% 0%,
            100% 5%,
            100% 100%,
            5% 100%,
            0% 95%
    );

    /* Внутреннее свечение по всем границам */
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.5),
            inset 0 0 15px rgba(255, 255, 255, 0.1);

    pointer-events: none;
    z-index: 1;
}

/* === ПОДСВЕТКА НА ВЕРХНЕМ ПРАВОМ УГЛУ === */
.photo-wrapper .glow-top-right {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
    pointer-events: none;
    z-index: 2;
}

/* === ПОДСВЕТКА НА ЛЕВОМ НИЖНЕМ УГЛУ === */
.photo-wrapper .glow-bottom-left {
    position: absolute;
    bottom: -3px;
    left: -3px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
    clip-path: polygon(0% 100%, 0% 0%, 100% 100%);
    pointer-events: none;
    z-index: 2;
}

/* === ПОДСВЕТКА НА ВЕРХНЕЙ ГРАНИЦЕ === */
.photo-wrapper .glow-top {
    position: absolute;
    top: -3px;
    left: 5%;
    right: 5%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5), transparent);
    filter: blur(2px);
    pointer-events: none;
    z-index: 2;
}

/* === ТЕКСТ-ОВЕРЛЕЙ (ИМЯ) === */
.photo-overlay-text {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
    padding: 8px 20px;
    color: #ffffff;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border-left: 3px solid rgba(255, 255, 255, 0.8);
    font-weight: bold;
    pointer-events: none;
}

/* === САМО ФОТО === */
.content-photo {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(20%) contrast(105%);
    transition: all 0.3s ease;
    position: relative;
    z-index: 0;
}

/* Эффект при наведении на весь блок */
.photo-wrapper:hover {
    transform: translateY(-3px);
}

.photo-wrapper:hover::before {
    outline: 1px solid rgba(255, 255, 255, 1);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}

.photo-wrapper:hover::after {
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.9),
            inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.photo-wrapper:hover .glow-top {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7), transparent);
}

.photo-wrapper:hover .content-photo {
    filter: grayscale(0%) contrast(110%);
}

/* === АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ === */
@media (max-width: 768px) {
    .content-photo-section {
        width: 90%;
        margin: 40px auto 0 auto;
    }

    .photo-wrapper {
        clip-path: none;
        border-radius: 15px;
        padding: 10px;
    }

    .photo-wrapper::before {
        clip-path: none;
        border-radius: 15px;
        outline: 1px solid rgba(255, 255, 255, 0.6);
    }

    .photo-wrapper::after {
        clip-path: none;
        border-radius: 15px;
    }

    .photo-wrapper .glow-top-right,
    .photo-wrapper .glow-bottom-left,
    .photo-wrapper .glow-top {
        display: none;
    }

    .photo-overlay-text {
        top: 15px;
        left: 15px;
        font-size: 0.9rem;
        padding: 5px 12px;
        letter-spacing: 2px;
    }
}

/* =========================================================================
   СЕКЦИЯ ИСТОРИИ С ОБРЕЗАННЫМИ УГЛАМИ И БЕЛОЙ РАМКОЙ (ВЕРХНЯЯ ГРАНИЦА ИСПРАВЛЕНА)
   ========================================================================= */
.history-block {
    position: relative;
    width: 90%;
    max-width: 1100px;
    margin: 150px auto 0 auto;
    background-color: rgba(25, 25, 25, 0.85);
    padding: 60px 40px;
    box-sizing: border-box;

    /* Срезанные углы: правый верхний и левый нижний */
    clip-path: polygon(
            0% 0%,
            95% 0%,
            100% 5%,
            100% 100%,
            5% 100%,
            0% 95%
    );

    transition: all 0.3s ease;
}

/* === БЕЛАЯ РАМКА 1px ЧЕРЕЗ outline + box-shadow (НЕ ОБРЕЗАЕТСЯ) === */
.history-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Такая же форма обрезки, как у основного блока */
    clip-path: polygon(
            0% 0%,
            95% 0%,
            100% 5%,
            100% 100%,
            5% 100%,
            0% 95%
    );

    /* Белая рамка 1px - используем outline который не обрезается */
    outline: 1px solid rgba(255, 255, 255, 0.8);
    outline-offset: 0;

    /* Свечение */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));

    pointer-events: none;
    z-index: 1;
}

/* === ДОПОЛНИТЕЛЬНАЯ ПОДСВЕТКА ВСЕХ ГРАНИЦ === */
.history-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Такая же форма обрезки */
    clip-path: polygon(
            0% 0%,
            95% 0%,
            100% 5%,
            100% 100%,
            5% 100%,
            0% 95%
    );

    /* Внутреннее свечение по всем границам */
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.6),
            inset 0 0 15px rgba(255, 255, 255, 0.15);

    pointer-events: none;
    z-index: 1;
}

/* === ДОПОЛНИТЕЛЬНОЕ СВЕЧЕНИЕ НА ВЕРХНЕМ ПРАВОМ УГЛУ === */
.history-block .glow-top-right {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
    clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
    pointer-events: none;
    z-index: 2;
}

/* Свечение на левом нижнем углу */
.history-block .glow-bottom-left {
    position: absolute;
    bottom: -3px;
    left: -3px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%);
    clip-path: polygon(0% 100%, 0% 0%, 100% 100%);
    pointer-events: none;
    z-index: 2;
}

/* Свечение на верхней границе */
.history-block .glow-top {
    position: absolute;
    top: -3px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6), transparent);
    filter: blur(2px);
    pointer-events: none;
    z-index: 2;
}

/* Эффект при наведении — усиление рамки и свечения */
.history-block:hover::before {
    outline: 1px solid rgba(255, 255, 255, 1);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
}

.history-block:hover::after {
    box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.9),
            inset 0 0 20px rgba(255, 255, 255, 0.25);
}

.history-block:hover .glow-top {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8), transparent);
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .history-block {
        clip-path: none;
        border-radius: 15px;
    }

    .history-block::before {
        clip-path: none;
        border-radius: 15px;
        outline: 1px solid rgba(255, 255, 255, 0.6);
    }

    .history-block::after {
        clip-path: none;
        border-radius: 15px;
    }

    .history-block .glow-top-right,
    .history-block .glow-bottom-left,
    .history-block .glow-top {
        display: none;
    }
}
.history-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.history-text-area {
    flex: 2;
    text-align: justify;
    color: #E0E0E0;
    line-height: 1.6;
}

.history-text-area h4 {
    text-align: center;
    margin: 0 0 20px 0;
    padding: 0;
    color: #E0E0E0;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
    font-weight: bold;
}

.history-photo-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 280px;
}

.sketch-container {
    position: relative;
    transition: all 0.4s ease;
}

.sketch-container:hover .sketch-author {
    border-left-color: rgba(224, 224, 224, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

.eg-sketch {
    width: 100%;
    max-width: 273px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border: 1px solid rgba(224, 224, 224, 0.1);
    padding: 5px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
}

.eg-sketch:hover {
    transform: scale(1.03);
    filter: sepia(0%) contrast(120%);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(224, 224, 224, 0.3);
}

.sketch-author {
    margin-top: 20px;
    padding: 15px;
    border-left: 2px solid rgba(224, 224, 224, 0.3);
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
    max-width: 273px;
}

.poem-content {
    color: #E0E0E0;
    font-style: italic;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.poem-metadata {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.author-name {
    color: #E0E0E0;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.artist-name {
    color: #888888;
    font-size: 0.95rem;
    font-style: normal;
    text-transform: none;
}

/* =========================================================================
   7. СЕКЦИЯ КАРТОЧЕК УЧАСТНИКОВ (ПОВЕРХ ГИТАРЫ)
   ========================================================================= */
.group-overlay-section {
    position: absolute;
    top: 2250px;
    width: 100%;
    z-index: 20;
    display: flex;
    justify-content: center;
}

.group-container {
    width: 90%;
    max-width: 1200px;
    text-align: center;
}

.group-title {
    color: #E0E0E0;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 6px;
    text-shadow: 0 0 15px rgba(0,0,0,1);
    margin-bottom: 50px;
}

.rectangles-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap; /* Разрешаем перенос для гибкости */
}

.member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: transform 0.4s ease;
}

.member-card:hover {
    transform: translateY(-10px);
}

.photo-rect {
    width: 220px;
    height: 220px;
    background-color: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(224, 224, 224, 0.1);
    position: relative;
    overflow: hidden;
    clip-path: polygon(15% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%, 0% 15%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.member-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(120%);
    transition: filter 0.4s ease;
}

.member-card:hover .member-photo-img {
    filter: grayscale(0%) contrast(100%);
}

.vertical-rect {
    width: 220px;
    height: 340px;
    background-color: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(224, 224, 224, 0.1);
    position: relative;
    overflow: hidden;
    clip-path: polygon(0% 0%, 85% 0%, 100% 15%, 100% 100%, 15% 100%, 0% 85%);
}

.rect-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.member-name {
    font-weight: bold;
    font-size: 1rem;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
}

.member-role {
    font-size: 0.85rem;
    font-style: italic;
    color: #aaa;
    margin-bottom: 15px;
}

.member-info, .member-status {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #888;
}

/* =========================================================================
   8. СЕКЦИЯ МУЗЫКАЛЬНОЙ СТИЛИСТИКИ И ИКОНОК (KASS-RECTANGLE)
   ========================================================================= */
.kass-section-wrapper {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 770px;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.kass-rectangle-section {
    position: relative;
    width: 100%;
    z-index: 20;
    margin-top: 1000px;

    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kass-rectangle {
    width: 750px; /* Фиксированная десктопная ширина */
    max-width: 1100px;
    background-color: rgba(20, 20, 20, 0.85);
    border: 1px solid #333;
    padding: 50px 40px;
    box-sizing: border-box;
    clip-path: polygon(0% 0%, 95% 0%, 100% 5%, 100% 100%, 5% 100%, 0% 95%);
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
    position: relative;
}

.kass-rectangle h4 {
    color: #ffffff;
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
}

.kass-text-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #E0E0E0;
    margin-bottom: 20px;
    text-align: justify;
}

.music-style-icons {
    position: absolute;
    top: 3050px; /* Позиционируем точно по вашему ТЗ */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 152px;
    width: 100%;
    max-width: 1372px;
    z-index: 25;
}

.music-style-icons img {
    width: 132px;
    height: auto;
    display: block;
    opacity: 1 !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
    animation: iconPulse 5s infinite ease-in-out;
    transition: all 0.3s ease;
}

.music-style-icons img:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.4));
}
/* ЭТО ТРЕТЬЯ СТРАНИЦА С КУРТОМ ПОД СТОЛБОМ*/

.footer-image-container {
    display: flex;
    margin-top: 900px;
    margin-left: -220px;
    justify-content: flex-end; /* Выравнивание вправо */
    padding: 40px 20px; /* Отступы от соседних блоков */
    width: 100%;
}

.kass-overlay-image-footer {
    width: 400px; /* Установите желаемый размер */
    height: auto;
    /* Можно добавить анимацию появления, если нужно */
    transition: opacity 0.5s ease;
}

/* =========================================================================
   9. ПОДВАЛ САЙТА (FOOTER)
   ========================================================================= */
.main-footer {
    width: 100%;
    padding: 0;
    background-color: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    margin-top: 50px; /* Корректно выверенное смещение под Kass2 */
    z-index: 10;
    padding-bottom: 250px !important;
}

#footer-placeholder {
    width: 100%;
    position: relative;
    margin-top: 50px; /* Убираем лишний отступ */
}

.footer-counter {
    position: absolute !important;
    top: 290px !important;
    left: 50% !important;
    margin-left: -686px !important;
    transform: none !important;
    z-index: 20;
}

.footer-line {
    width: 100%;
    max-width: 1372px;
    height: 2px;
    background-color: #E0E0E0;
    margin-bottom: 20px;
    position: relative;
    top: 55px;
}

.main-footer .footer-socials {
    position: absolute !important;
    top: 65px !important;
    left: 50% !important;
    margin-left: 466px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    z-index: 30;
}

.main-footer .footer-socials a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    text-decoration: none;
}

.main-footer .footer-socials img {
    width: 35px;
    height: 35px;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.main-footer .footer-socials a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250%;
    height: 250%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    filter: blur(15px);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.main-footer .footer-socials a:hover::before {
    opacity: 1;
}

.main-footer .footer-socials a:hover img {
    transform: scale(1.1);
    filter: brightness(1.3);
}

.footer-middle-logo {
    position: absolute !important;
    width: 200px;
    height: auto;
    top: 65px !important;
    left: 50% !important;
    margin-left: -686px !important;
    z-index: 15;
    display: block;
}

.footer-links-grid {
    position: absolute !important;
    top: 95px !important;
    left: 60% !important;
    margin-left: -446px !important;
    display: flex;
    gap: 60px;
    z-index: 20;
    text-align: left;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Увеличили расстояние по высоте между пунктами */
}

.footer-column a {
    color: #E0E0E0;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: opacity 0.3s ease;
}

.footer-column a:hover {
    opacity: 0.7;
    color: #cccccc;
}

.footer-developer-link {
    position: absolute !important;
    top: 235px !important;
    left: 48% !important;
    margin-left: 436px !important;
    color: rgba(224, 224, 224, 0.6);
    font-size: 13px !important;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 0;
    z-index: 20;
    white-space: nowrap;
}

.footer-developer-link a {
    color: rgba(224, 224, 224, 0.8);
    text-decoration: none;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 1px solid transparent;
}

.footer-developer-link a:hover {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
}

.footer-line-second {
    position: relative;
    top: 253px;
    margin-bottom: 0;
    width: 100%;
    max-width: 1372px;
    height: 2px;
    background-color: #E0E0E0;
}

.copyright-text {
    position: relative;
    top: 273px;
    color: #E0E0E0;
    font-size: 0.9rem;
    margin: 0;
    letter-spacing: 1px;
    padding: 0 20px;
    line-height: 1.5;
}

/* =========================================================================
   10. АНИМАЦИИ (@KEYFRAMES)
   ========================================================================= */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%);
        opacity: 0.5;
    }
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.4)) brightness(1.1);
    }
}

/* =========================================================================
   11. АДАПТИВНОСТЬ И МЕДИА-ЗАПРОСЫ (@MEDIA)
   ========================================================================= */

/* Адаптация для больших ноутбуков */
@media (max-width: 1200px) {
    .rectangles-row {
        gap: 15px;
    }
    .photo-rect, .vertical-rect {
        width: 180px;
    }
    .photo-rect { height: 180px; }
    .vertical-rect { height: 280px; }
}

/* Адаптация для средних экранов */
@media (max-width: 1100px) {
    .vertical-rect {
        width: 180px;
        height: 280px;
    }
    .rect-content { padding: 15px; }
    .member-name { font-size: 0.9rem; }
}

/* Планшеты и малые экраны (до 1024px) */
@media (max-width: 1024px) {
    .header-nav, .header-subtitle {
        transform: translateX(-50%) !important;
        left: 50% !important;
    }

    .header-logo {
        width: 100% !important;
        max-width: none !important;
        margin-top: 0 !important;
        top: -53px !important;
        position: relative;
        z-index: 2;
    }

    .top-left-logo, .ticket-callout {
        display: none !important;
    }

    .content-photo {
        width: 100% !important;
    }

    .photo-wrapper {
        width: 70%;
        margin: 0 auto;
    }
}

/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
    .footer-counter {
        display: none !important;
    }

    .footer-line-second {
        top: 60px;
    }

    .copyright-text {
        top: 80px;
    }

    .main-footer {
        padding-bottom: 100px !important;
    }

    .main-header {
        height: auto;
        padding-top: -90px;
    }

    .header-logo {
        width: 100% !important;
        max-width: none !important;
        top: -53px !important;
        margin-top: 0 !important;
    }

    .header-subtitle {
        top: 0px;
        font-size: 14px;
        width: 100%;
        transform: translateX(-50%) !important;
    }

    /* Мобильное меню (Бургер) */
    .header-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.98);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s ease-in-out;
        z-index: 1000;
        border-bottom: none;
        transform: none !important;
        left: auto !important;
        box-shadow: none;
    }

    .header-nav ul {
        flex-direction: column;
        gap: 25px;
    }

    .header-nav a {
        font-size: 22px;
    }

    .header-nav a::after {
        display: none; /* Отключаем десктопное подчеркивание в мобильной версии */
    }

    .burger-label {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 30px;
        z-index: 1001;
        cursor: pointer;
    }

    .burger-label span,
    .burger-label span::before,
    .burger-label span::after {
        position: absolute;
        width: 100%;
        height: 4px;
        background-color: #E0E0E0;
        transition: 0.3s;
    }

    .burger-label span { top: 13px; }
    .burger-label span::before { content: ""; top: -10px; }
    .burger-label span::after { content: ""; top: 10px; }

    .burger-checkbox:checked ~ .header-nav { right: 0; }
    .burger-checkbox:checked + .burger-label span { background: transparent; }
    .burger-checkbox:checked + .burger-label span::before { transform: rotate(45deg); top: 0; }
    .burger-checkbox:checked + .burger-label span::after { transform: rotate(-45deg); top: 0; }

    .header-socials {
        bottom: 10px;
        left: 10px;
        gap: 8px;
    }

    .header-socials img {
        width: 30px;
        height: 30px;
    }

    /* Мобильная перестройка контента */
    .photo-wrapper {
        width: 90%;
    }

    .content-photo {
        width: 100% !important;
        clip-path: none;
        border-radius: 10px;
    }

    .photo-overlay-text {
        font-size: 14px;
        top: 10px;
        left: 10px;
    }

    .vinyl-bg-container {
        top: 150px;
        height: 300px;
    }

    .vinyl-bg-container-2 {
        top: 450px;
        height: 300px;
    }

    .history-block {
        margin-top: 150px;
        padding: 40px 20px;
        clip-path: none; /* Отключаем сложный срез для стабильности */
        border-radius: 15px;
        filter: none;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    }

    .history-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-right: 0;
    }

    .history-content p {
        margin: 0 auto 20px auto;
    }

    .history-photo-side {
        width: 100%;
        max-width: 273px;
        margin-top: 10px;
    }

    .kass-rectangle-section {
        margin-top: 50px;
        padding: 0 15px;
    }

    .kass-rectangle {
        width: 100%;
        clip-path: none;
        border-radius: 10px;
    }

    .music-style-icons {
        position: relative;
        top: 0;
        transform: none;
        left: 0;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .music-style-icons img {
        width: 80px;
    }

    .rectangles-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .member-card {
        margin-bottom: 30px;
    }
}

/* =========================================================================
   21. ОТСТУП ПОСЛЕ ФУТЕРА (51px)
   ========================================================================= */

/* Отступ после копирайта и всех элементов футера */
.main-footer .copyright-text {
    margin-bottom: 51px !important;
    padding-bottom: 0;
}

/* Для мобильного футера */
.mobile-footer .copyright {
    margin-bottom: 51px !important;
    padding-bottom: 0;
}

/* Для страницы новостей */
.news-page-container {
    padding-bottom: 51px !important;
}

/* Если используется footer-placeholder */
#footer-placeholder {
    margin-bottom: 0;
}
.news-img-wrapper.video-wrapper {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.news-img-wrapper.video-wrapper iframe,
.news-img-wrapper.video-wrapper video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16/9;
    border: none;
    background: #000;
    object-fit: cover;
}