/* Z1 × S1 · Восцелённость — селекция эффектов кнопок (2026-10-24)
   Форма, база, ховер и пульс Z1 — из «Гибридов: Искра × Нектарный шторм».
   Перелив, ореол и светлячка S1 — из «Вариаций бегущего света», секция S1.
   Финальные уточнения: перелив и ореол убавлены на треть, светлячка — на
   четверть; текст активной кнопки чуть светится, но не ярче ховера.
   Дополнение: розовая волна в переливе и лёгкая розовость ореола активной
   кнопки — наследие первой версии, перекроенное под палитру селекции. */
/* Глобальный border-box: паддинги и рамки всегда считаются внутри ширины.
   Одно правило заменяет одиночные box-sizing по всему файлу */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --bg-color: #130d17;
    --glass-border: rgba(255, 255, 255, 0.12);
    --text-main: #d0c1f6;
    --text-sec: rgba(88, 139, 241, 0.65);
    --accent: #f64ef9;
    --lav-base: #8e44ad;
    --lav-glow: rgba(142, 68, 173, 0.4);
    --download-green: #2ecc71;
    --download-hover: #27ae60;
    /* Z1 «Восцелённость»: база и ховер из «Гибридов», средняя остановка
       перелива — финальная (убавлена на треть от усиленной) */
    --z1-base: #5540a4;
    --z1-hover: #7159cd;
    --z1-flow: #8d73d1;
    /* Розовость активной кнопки: приглушённая родня старой фуксии
       (--accent), ровно посередине между переливом и тем воспоминанием */
    --z1-rose: #b878d6;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 0.3s ease-in-out both fade-out;
}

::view-transition-new(root) {
    animation: 0.3s ease-in-out both fade-in;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Пульс обычных кнопок — родной Z1 из «Гибридов», символ в символ */
@keyframes pulse-Z1 {

    0%,
    100% {
        box-shadow:
            0 0 12px rgba(178, 122, 214, 0.45),
            0 0 0 2px rgba(119, 102, 182, 0.3);
    }

    50% {
        box-shadow:
            0 0 30px rgba(144, 91, 187, 0.65),
            0 0 0 4px rgba(112, 54, 195, 0.45);
    }
}

/* Ховер ждущей кнопки: короткий взлёт и мягкий возврат на базу.
   Раньше кнопка держалась сверху (translateY(-4px)) весь ховер — и в момент
   клика новая страница открывалась с кнопками уже в базовой позиции: виден
   резкий скачок. Теперь кнопка поднимается и сама плавно опускается, поэтому
   к моменту клика она стоит на месте — никакого мошенства */
@keyframes hover-lift-Z1 {

    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-2.7px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Ореол активной кнопки — из «Вариаций»: убавлен на треть от усиленного */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 16px 2px rgba(216, 162, 251, 0.37);
    }

    50% {
        box-shadow: 0 0 39px 10px rgba(216, 162, 251, 0.63);
    }
}

/* Перелив активной кнопки: свет плывёт вправо и возвращается влево за 6 с */
@keyframes flow {

    0%,
    100% {
        background-position: 0% 0;
    }

    50% {
        background-position: 100% 0;
    }
}

/* Пробег светлячки S1: мягко уходит вправо за первые ~4 с и отдыхает */
@keyframes shimmer-run {

    0% {
        left: -60%;
    }

    45% {
        left: 110%;
    }

    100% {
        left: 110%;
    }
}

@keyframes pulseAncient {

    0%,
    100% {
        filter: drop-shadow(0 0 8px rgba(150, 120, 200, 0.4));
        text-shadow:
            0 4px 0 #000,
            0 8px 12px rgba(0, 0, 0, 0.5),
            0 16px 24px rgba(0, 0, 0, 0.3),
            2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    50% {
        filter: drop-shadow(0 0 16px rgba(150, 120, 200, 0.6));
    }
}

@keyframes pulseBar {
    from {
        box-shadow: 0 0 6px var(--accent);
        opacity: 0.8;
    }

    to {
        box-shadow: 0 0 16px var(--accent);
        opacity: 1;
    }
}

/* Резерв места под вертикальную полосу прокрутки на всех страницах:
   без него короткие страницы (Слушать, Поддержать) центрируются чуть
   правее длинных, у которых полоса появляется — шапка «прыгает» между
   страницами на ширину полосы */
html {
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    /* fixed: подсветки привязаны к окну, а не к высоте body — на коротких
       страницах (donate) фон внизу больше не «ступенькой» обрывается */
    background-image:
        radial-gradient(circle at 10% 20%, rgba(100, 0, 200, 0.12) 0%, transparent 25%),
        radial-gradient(circle at 90% 80%, rgba(0, 150, 255, 0.1) 0%, transparent 25%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

header {
    text-align: center;
    padding: 80px 20px 40px;
    position: relative;
}

h1 {
    font-size: 3.8rem;
    margin: 0 0 18px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #e0d6f0;
    text-shadow:
        0 4px 0 #000,
        0 8px 12px rgba(0, 0, 0, 0.5),
        0 16px 24px rgba(0, 0, 0, 0.3),
        2px 2px 4px rgba(0, 0, 0, 0.2);
    filter: contrast(1.1);
    animation: pulseAncient 6s ease-in-out infinite;
}

.subtitle {
    font-size: 1.4rem;
    color: var(--text-sec);
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(4px);
}

/* Меню на десктопе: флекс вместо грида — каждая кнопка занимает ширину
   по своему содержимому, зазоры строго одинаковые (gap), ряд центрирован.
   flex-wrap позволяет кнопкам переноситься на новую строку на узких экранах. */
nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* Обёртка кнопки — на flex: зона реакции стабильна */
.btn-wrapper {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
}

/* Сама кнопка: min-width держит минимальную ширину 140px даже у коротких
   подписей (ГЛАВНАЯ, О СЕБЕ) — как на референсном макете */
.btn-wrapper a,
.btn-wrapper .nav-current {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 140px;
    text-align: center;
    padding: 12px 28px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        background 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        color 0.35s,
        box-shadow 0.35s,
        transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
    position: relative;
    z-index: 1;
    clip-path: polygon(9px 0, calc(100% - 9px) 0,
            100% 9px, 100% calc(100% - 9px),
            calc(100% - 9px) 100%, 9px 100%,
            0 calc(100% - 9px), 0 9px);
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

.btn-wrapper a {
    background:
        linear-gradient(180deg,
            rgba(178, 122, 214, 0.55) 0%,
            rgba(178, 122, 214, 0) 62%,
            transparent 100%),
        var(--z1-base);
    color: var(--text-main);
    box-shadow:
        0 0 12px rgba(178, 122, 214, 0.45),
        0 0 0 2px rgba(119, 102, 182, 0.3);
    animation: pulse-Z1 3s infinite ease-in-out;
}

.btn-wrapper a::before,
.btn-wrapper .nav-current::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
    clip-path: inherit;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.12);
}

/* Ховер на обёртке — кнопка взлетает и плавно возвращается на базу
   (hover-lift-Z1). Активная кнопка (:not(.nav-current)) ховером не
   затрагивается: максимальная яркость текста #fdfdfd остаётся только у
   ждущих кнопок под курсором */
.btn-wrapper:hover a:not(.nav-current) {
    background: var(--z1-hover);
    color: #fdfdfd;
    animation:
        pulse-Z1 3s infinite ease-in-out,
        hover-lift-Z1 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    box-shadow:
        0 0 40px rgba(144, 91, 187, 0.65),
        0 0 0 5px rgba(112, 54, 195, 0.45);
}

.btn-wrapper:hover a:not(.nav-current)::before {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Активный пункт меню: перелив туда-обратно (flow, 6 с), текст чуть
   светится (#eee6ff + мягкое свечение), но не ярче ховера #fdfdfd.
   z-index:auto — как в превью: ореол ::after уходит за кнопку.
   Внутренняя рамка перенесена с ::before на box-shadow: псевдо ::before
   отдан светлячке S1 */
.btn-wrapper .nav-current {
    background: linear-gradient(115deg,
            var(--z1-base) 0%,
            var(--z1-flow) 40%,
            var(--z1-rose) 50%,
            var(--z1-flow) 60%,
            var(--z1-base) 100%);
    background-size: 250% 100%;
    color: #eee6ff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
    cursor: default;
    transform: none;
    z-index: auto;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 0 15px rgba(255, 255, 255, 0.12);
    animation: flow 6s ease-in-out infinite;
}

/* Ореол: свет живёт снаружи кнопки (inset:-6px, за её фоном) */
.btn-wrapper .nav-current::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 10px;
    box-shadow: 0 0 18px 2px rgba(201, 162, 255, 0);
    animation: pulse-glow 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* Светлячка S1: её элемент-механика, её наклон, её пробег — из «Вариаций».
   Белёсость убавлена на четверть: края 0.06, сердце 0.41.
   Селектор стоит после общей рамки и перекрывает её для активной кнопки;
   clip-path:none нужен, иначе восьмиугольник пересчитался бы
   относительно узкой полосы */
.btn-wrapper .nav-current::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    right: auto;
    width: 55%;
    border: none;
    box-shadow: none;
    clip-path: none;
    transform: skewX(-22deg);
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(216, 150, 255, 0.06) 22%,
            rgba(238, 196, 255, 0.41) 50%,
            rgba(216, 150, 255, 0.06) 78%,
            transparent 100%);
    animation: shimmer-run 9s ease-in-out infinite;
    pointer-events: none;
}

.section-title {
    font-size: 1.6rem;
    margin: 70px 0 20px -16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    color: var(--text-main);
    padding-left: 0;
    justify-content: flex-start;
    width: 100%;
}

.section-title::before {
    content: '';
    display: block;
    width: 16px;
    height: 32px;
    background: var(--z1-base);
    box-shadow: 0 0 10px var(--z1-glow);
    animation: pulseBar 2s infinite alternate;
    flex-shrink: 0;
    margin-left: 0;
    transition: background 0.3s, box-shadow 0.3s;

    /* Добавляем скошенные углы вместо скругления */
    clip-path: polygon(5px 0,
            /* Верхний левый угол */
            11px 0,
            /* Верхний правый угол */
            16px 5px,
            /* Правый верхний скос */
            16px 27px,
            /* Правый нижний скос */
            11px 32px,
            /* Нижний правый угол */
            5px 32px,
            /* Нижний левый угол */
            0px 27px,
            /* Левый нижний скос */
            0px 5px
            /* Левый верхний скос */
        );
}

.tracks-list {
    padding: 0 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.track-item {
    background: rgba(30, 20, 40, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(142, 68, 173, 0.25);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* БЕЗ gap: он действует и между строками flex-wrap, и после закрытия
       диалога скачивания оставляет карточке лишнюю высоту. Зазоры задают
       margin у .track-art и margin-top у .dl-inline-inner */
    margin-bottom: 8px;
    /* минимальная плотная высота: карточка облегает обложку 70px;
       слева — 9px (на треть меньше прежних 14px до края обложки) */
    padding: 6px 14px 6px 9px;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    width: 100%;
}

.track-item:hover {
    background: rgba(30, 20, 40, 0.9);
    border-color: rgba(142, 68, 173, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(142, 68, 173, 0.25);
}

.track-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* ВАЖНО: basis 0, а не auto. Карточка — flex-wrap: wrap (ради диалога
       скачивания), и при basis auto длинный однострочный текст даёт огромную
       «базовую ширину»: блок текста перепрыгивает на новую flex-строку.
       basis 0 никогда не вызывает перенос — блок остаётся между обложкой
       и кнопками, а перелив текста гасит ellipsis/уменьшение шрифта */
    flex: 1 1 0;
}

/* ===== Обложка трека в карточке (из ID3-тега mp3, слева от названия) =====
   Разметку создаёт scripts.js (createTrackArt) — одинаково на index.html
   и music.html; пока обложка не найдена, видна заглушка с нотой. */
.track-art {
    width: 75px; /* 56px + 24% по просьбе владельца */
    height: 75px;
    margin-right: 14px; /* зазор между обложкой и текстом (вместо gap карточки) */
    flex: 0 0 auto;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(142, 68, 173, 0.14);
    border: 1px solid rgba(142, 68, 173, 0.4);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

.track-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Заглушка (нота) до загрузки обложки или если её нет в mp3 */
.track-art-note {
    width: 52%;
    height: 52%;
    fill: rgba(208, 193, 246, 0.45);
}

.track-title {
    font-weight: 600;
    font-size: 1.1rem;
    /* Название опущено ещё на 3px (итого 6px вниз), исполнитель на месте:
       суммарная высота блока .track-info не меняется — зазор под названием
       ужат компенсирующим отрицательным нижним отступом */
    margin: 9px 0 -5px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px var(--lav-glow);
}

.track-artist {
    font-size: 0.85rem;
    color: rgba(142, 68, 173, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(142, 68, 173, 0.15);
    border: 1px solid rgba(142, 68, 173, 0.35);
    color: #d0c1f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 8px var(--lav-glow);
}

.play-btn:hover {
    background: var(--lav-base);
    border-color: var(--lav-base);
    box-shadow: 0 0 20px var(--lav-glow);
    transform: scale(1.08);
}

.play-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.download-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--download-green);
    border: none;
    cursor: pointer;
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.4);
    color: #fff;
}

.download-btn:hover {
    background: var(--download-hover);
    transform: rotate(-5deg);
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.6);
}

.download-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.photo-wrapper {
    display: flex;
    justify-content: center;
}

.profile-photo {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(142, 68, 173, 0.35);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
}

.text-content h2 {
    font-size: 2rem;
    color: var(--text-main);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.text-content p {
    line-height: 1.7;
    color: rgba(208, 193, 246, 0.9);
    margin-bottom: 20px;
}

.text-content strong {
    color: var(--accent);
    text-shadow: 0 0 10px rgba(246, 78, 249, 0.4);
}

.about-container {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 768px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    header {
        padding: 40px 20px 30px;
    }

    /* Размер заголовка из старого файла: 2.4rem — крупнее, чем было */
    h1 {
        font-size: 2.4rem;
    }

    .subtitle {
        font-size: 1.2rem;
        max-width: 100%;
    }

    /* Мобильное меню: колонки по ширине содержимого с полом 140px —
       как в старом файле. Кнопки обнимают свой текст (ПОДДЕРЖАТЬ шире,
       чем СЛУШАТЬ), ряд центрирован с полями по бокам */
    nav {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
        gap: 14px;
        justify-content: center;
    }

    /* Заголовок секции: 1.3rem из старого файла, чтобы длинная фраза
       укладывалась в две строки, а не разваливалась на три */
    .section-title {
        margin: 50px 0 15px 0;
        justify-content: center;
        font-size: 1.3rem;
    }

    .tracks-list {
        padding: 0 16px;
        max-width: 100%;
    }

    /* Карточка трека: отступы и зазор из старого файла — 20px и 16px.
       Кнопки ▶ и скачивания остаются в одну строку с названием и автором:
       строка flex сохраняется, панель диалога скачивания (.dl-inline,
       flex-basis: 100%) по-прежнему переносится отдельной строкой. */
    .track-item {
        align-items: center;
        text-align: left;
        padding: 10px 10px 10px 7px;
    }

    /* Зазор обложка→текст ужат (12px → 6px), а справа добавлен отступ
       (padding-right 10px): текст визуально центрируется между обложкой
       и кнопками — не прилипает к play, не оторван от обложки */
    .track-art {
        margin-right: 6px;
    }

    .track-info {
        flex: 1 1 0; /* см. комментарий у базового правила выше */
        width: auto;
        padding-right: 10px;
    }

    .controls {
        width: auto;
        flex-shrink: 0;
        margin-top: 0;
    }
}

@media (max-width: 480px) {

    /* Название и исполнитель больше НЕ переносятся на вторую строку:
       scripts.js (fitTrackCards) уменьшает размер шрифта каждого из них
       ровно настолько, чтобы карточка (обложка + текст + кнопки)
       умещалась в одну строку. Базовые nowrap/ellipsis из правил выше
       сохраняются — эллипсис остаётся запасным вариантом для совсем
       длинных текстов, не влезающих даже при минимальном шрифте. */

    .photo-wrapper {
        margin-top: 20px;
    }

    .profile-photo {
        max-width: 220px;
    }
}

/* Фокус с клавиатуры: мягкая обводка в палитре сайта.
   Видна только при навигации Tab — мышью и на тач-экранах не появляется */
.btn-wrapper a:focus-visible,
.play-btn:focus-visible,
.download-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Настройка системы «уменьшить движение»: бесконечные анимации гасятся,
   короткие ховер-переходы остаются */
@media (prefers-reduced-motion: reduce) {

    h1,
    .btn-wrapper a,
    .btn-wrapper:hover a:not(.nav-current),
    .btn-wrapper .nav-current,
    .btn-wrapper .nav-current::after,
    .btn-wrapper .nav-current::before,
    .section-title::before {
        animation: none;
    }

    /* Светлячка без движения не нужна — гасим её совсем */
    .btn-wrapper .nav-current::before {
        opacity: 0;
    }
}

/* Цитата на странице «Поддержать»: мягкая врезка в палитре сайта —
   сиреневая линия слева цветом перелива, курсив, подпись автора справа */
.quote {
    border-left: 3px solid var(--z1-flow);
    padding: 14px 22px;
    margin: 26px auto 0;
    max-width: 640px;
    font-style: italic;
    color: var(--text-main);
}

.quote-author {
    display: block;
    margin-top: 8px;
    text-align: right;
    font-style: normal;
    font-size: 0.85rem;
    color: var(--text-sec);
}

/* ===== Диалог подтверждения скачивания — внутри карточки трека =====
   Панель раскрывается второй строкой внутри .track-item (flex-wrap);
   одинакова на index.html и music.html — разметку создаёт scripts.js
   (confirmDownload), стили живут здесь, чтобы палитра была общей. */
.track-item {
    flex-wrap: wrap; /* панель диалога занимает всю ширину второй строкой */
}

.dl-inline {
    flex-basis: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}

.dl-inline.is-open {
    max-height: 160px;
    opacity: 1;
}

.dl-inline-inner {
    /* 15px — прежний одобренный визуальный зазор (14px gap строк + 1px margin):
       gap между строками flex-wrap убран — он оставлял карточке лишнюю высоту
       после закрытия диалога; теперь зазор задаёт только этот margin-top */
    margin-top: 15px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(142, 68, 173, 0.45);
    border-radius: 10px;
    background: rgba(19, 13, 23, 0.65);
}

.dl-inline-text {
    margin: 0;
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.4;
}

.dl-inline-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.dl-inline-buttons button {
    min-width: 110px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: filter 0.25s ease, background 0.25s ease;
}

/* «Скачать» — палитра главных кнопок сайта (Z1), приглушённая на 24%
   (#5540a4→#41317d, #8d73d1→#6b579f, #b878d6→#8c5ba3) */
.dl-inline-yes {
    border: none;
    background: linear-gradient(115deg,
            #41317d 0%,
            #6b579f 40%,
            #8c5ba3 50%,
            #6b579f 60%,
            #41317d 100%);
    background-size: 250% 100%;
    color: #fdfdfd;
    font-weight: 600;
}

.dl-inline-yes:hover {
    filter: brightness(1.08); /* приглушён и ховер — ярче базы, но не слепит */
}

/* «Не сейчас» — сдержанная вторичная кнопка */
.dl-inline-no {
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-main);
}

.dl-inline-no:hover {
    background: rgba(142, 68, 173, 0.18);
}

@media (max-width: 768px) {
    .dl-inline-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .dl-inline-buttons {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dl-inline {
        transition: none;
    }

    .dl-inline-buttons button {
        transition: none;
    }
}

/* ===== Подвал сайта: копирайт с значком © =====
   Тихая строка в палитре сайта: приглушённый текст, тонкая стеклянная
   линия сверху; на фоне с fixed-подсветками читается на любой высоте. */
.site-footer {
    margin-top: 60px;
    padding: 22px 20px 28px;
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: rgba(208, 193, 246, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer .footer-mark {
    display: inline-block;
    color: rgba(208, 193, 246, 0.65);
    text-shadow: 0 0 8px rgba(142, 68, 173, 0.5);
}

/* Заметка о приватности — внутри подвала, строкой выше копирайта:
   ещё тише подваловой строки, но в той же палитре */
.privacy-note {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: rgba(208, 193, 246, 0.32);
}

/* ============================================================
   ПЛЕЕР — перенос из music.html: тело плеера, хотспоты, палитра --p-*,
   эффекты, дорожка времени, seek, мобильное сжатие.
   Правила добавлены в конец файла: раньше они шли inline после
   styles.css, поэтому каскад не изменился.
   ============================================================ */
    /* ===== Тело плеера (встраиваемый блок, при выносе переедет в styles.css) ===== */
    .player-mount {
        width: 100%;
        max-width: 710px;
        margin: 0 auto;
    }

    .player-mount svg {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Вертикальные отступы — по макету «Репетиция Плеера»: ~10px после меню
       и ~20px до заголовка секции. Отрицательный отступ плеера компенсирует
       нижний паддинг шапки (40px); у заголовка секции на этой странице
       стандартные 70px заменены на 20px. */
    .player-mount {
        margin-top: -30px;
    }

    main .section-title {
        margin-top: 0;
    }

    @media (max-width: 768px) {
        .player-mount {
            margin-top: 0;
            padding: 0 12px;
        }
    }
    /* ===== Place-зоны плеера =====
       Вся видимая графика пропускает клики сквозь себя.
       События ловит HTML-слой хотспотов (.player-hotspots) поверх SVG —
       hit-тест HTML работает одинаково во всех браузерах. */
    .player * {
        pointer-events: none;
    }
    .player [id^="Place_"] {
        pointer-events: none; /* видимые Place-фигуры — только индикаторы зон */
    }
    .player-mount {
        position: relative;
    }
    .player-hotspots .hs {
        position: absolute;
        cursor: pointer;
    }
    /* Стрелки Cycle: плавное вращение вокруг собственного центра */
    #Cycle_arrow_rot {
        transform-box: fill-box;
        transform-origin: center;
        transition: transform 0.6s ease;
    }
    /* Быстрые клики по плееру не выделяют текст */
    .player,
    .player * {
        user-select: none;
        -webkit-user-select: none;
    }

    /* ===== Палитра плеера: цвета главных кнопок сайта (Z1 «Восцелённость») =====
       Без drop-shadow-фильтров: на SVG-элементах они отрисовываются по
       прямоугольной области и дают «поле» вокруг корпуса плеера. */
    .player #One_track {
        fill: var(--z1-hover) !important;
    }

    /* ===== Эффекты дизайна плеера — вариант 4 «Ритм» (перенос из music_(design_probe).html)
       Палитра едина — Z1 «Восцелённость» (--p-*). Переключатель вариантов из
       probe-файла не переносился: рецепт варианта 4 «Ритм» включён напрямую.
       Рецепты других вариантов (тема-классы body.theme-N) опущены. ===== */

    :root {
        --p-body: #2b2038;         /* корпус */
        --p-take: #5540a4;         /* восьмиугольник места обложки: базовый тон камня (живёт в fiGradTake) */
        --p-border: #8e44ad;       /* рамка обложки: базовый тон (живёт в fiGradBorder) */
        --p-tick: #b878d6;         /* бейдж времени */
        --p-playbtn: #7159cd;      /* круг Play/Pause: базовый тон (живёт в pbGrad) */
        --p-icon: #130d17;         /* символы Play/Pause */
        --p-side: #8d73d1;         /* дуги Next/Previous: базовый тон (живёт в npGrad) */
        --p-icon2: #241744;        /* символы Next/Previous */
        --p-lines: #d0c1f6;        /* Mix, Cycle, динамик, полоски громкости */
        --p-road: #5540a4;         /* дорога воспроизведения */
        --p-marker-in: #7159cd;    /* маркер времени: ядро */
        --p-marker-out: #b878d6;   /* маркер времени: кольцо */
        --p-marker-focus: #eee6ff; /* маркер времени: точка фокуса */
        --p-tbar-groove: #1a1226;  /* дорожка времени: тёмный жёлоб */
        --p-tbar-fill: #7a5cc0;    /* дорожка времени: заполнение */
        --p-tbar-edge: #c9a8ef;    /* дорожка времени: светлая грань */
        --p-tbar-knob: #f0e6ff;    /* дорожка времени: ядро бегунка */
        --sheen: 178, 122, 214;
        --glow-ring: rgba(119, 102, 182, 0.3);
        --glow-soft: rgba(178, 122, 214, 0.45);
        --glow-strong: rgba(144, 91, 187, 0.65);
    }

    /* Заливки плеера через переменные — приём и значения те же, что были */
    .player #General_Body_Player { fill: var(--p-body) !important; }
    .player #For_Image_take      { fill: url(#fiGradTake) !important; }
    .player #For_Image_border    { fill: none !important; stroke: url(#fiGradBorder) !important; }
    .player #Box_for_time_tick   { fill: var(--p-tick) !important; }
    .player #Button_Play_Pause   { fill: url(#pbGrad) !important; }
    .player #Play,
    .player #Pause               { fill: var(--p-icon) !important; }
    .player #Next_track,
    .player #Previous_track      { fill: url(#npGrad) !important; }
    .player #Next,
    .player #Previous            { fill: var(--p-icon2) !important; }
    .player #Mix_lines,
    .player #Arrow_mix,
    .player #Cycle_lines,
    .player #Cycle_arrow,
    .player #Dinamic,
    .player #Volume_1,
    .player #Volume_2,
    .player #Volume_3,
    .player #Volume_4,
    .player #Volume_5            { fill: var(--p-lines) !important; }
    .player #Play_road           { fill: var(--p-road) !important; }
    .player #Marker_time_in      { fill: var(--p-marker-in) !important; }
    .player #Marker_time_out     { fill: var(--p-marker-out) !important; }
    .player #Marker_time_focus   { fill: var(--p-marker-focus) !important; }

    /* ---------- Ховер-отклик зон ----------
       Зоны (HTML-хотспоты) невидимы; при наведении подсвечивается сам
       элемент под зоной — через :has() от монтировки к SVG-пути.
       Прямоугольных рамок нет: светится фигура, а не контур зоны. */

    /* Плавность включения ховер-эффекта */
    body .player #Next_track,
    body .player #Previous_track,
    body .player #Arrow_mix,
    body .player #Cycle_arrow,
    body .player #Dinamic,
    body .player #Play_road,
    body .player #Button_Play_Pause {
        transition: filter 0.35s ease, opacity 0.35s ease, transform 0.12s ease-out;
    }
    /* Масштаб при нажатии — от собственного центра фигуры */
    body .player #Button_Play_Pause,
    body .player #Next_track,
    body .player #Previous_track {
        transform-box: fill-box;
        transform-origin: 50% 50%;
    }

    /* Полоски громкости перекатываются волнами от динамика */
    body .player #Volume_1 { animation: fx4-wave 1.6s ease-in-out infinite; }
    body .player #Volume_2 { animation: fx4-wave 1.6s ease-in-out infinite 0.12s; }
    body .player #Volume_3 { animation: fx4-wave 1.6s ease-in-out infinite 0.24s; }
    body .player #Volume_4 { animation: fx4-wave 1.6s ease-in-out infinite 0.36s; }
    body .player #Volume_5 { animation: fx4-wave 1.6s ease-in-out infinite 0.48s; }
    @keyframes fx4-wave {
        0%, 100% { opacity: 0.55; }
        50%      { opacity: 1; }
    }
    /* Дорога воспроизведения ровно дышит */
    body .player #Play_road {
        animation: fx4-road 2.4s ease-in-out infinite;
    }
    @keyframes fx4-road {
        0%, 100% { opacity: 0.82; }
        50%      { opacity: 1; }
    }

    /* Наведение: ритм учащается; у неанимированных — мягкая вспышка */
    body .player-mount:has(#HS_play:hover) #Button_Play_Pause {
        filter: drop-shadow(0 0 4px rgba(216, 162, 251, 0.65));
    }
    body .player-mount:has(#HS_road:hover) #Play_road {
        animation-duration: 1.1s;
    }
    body .player-mount:has(#HS_volume:hover) #Volume_1,
    body .player-mount:has(#HS_volume:hover) #Volume_2,
    body .player-mount:has(#HS_volume:hover) #Volume_3,
    body .player-mount:has(#HS_volume:hover) #Volume_4,
    body .player-mount:has(#HS_volume:hover) #Volume_5 {
        animation-duration: 0.8s;
    }
    body .player-mount:has(#HS_next:hover) #Next_track {
        filter: drop-shadow(0 0 4px rgba(216, 162, 251, 0.65));
    }
    body .player-mount:has(#HS_prev:hover) #Previous_track {
        filter: drop-shadow(0 0 4px rgba(216, 162, 251, 0.65));
    }
    body .player-mount:has(#HS_mix:hover) #Arrow_mix {
        filter: drop-shadow(0 0 4px rgba(216, 162, 251, 0.65));
    }
    body .player-mount:has(#HS_cycle:hover) #Cycle_arrow {
        filter: drop-shadow(0 0 4px rgba(216, 162, 251, 0.65));
    }
    body .player-mount:has(#HS_volume:hover) #Dinamic {
        filter: drop-shadow(0 0 4px rgba(216, 162, 251, 0.65));
    }

    /* ---------- Volume_gradient: мягкая подсветка зоны регулировки громкости ----------
       Фигура всегда в потоке (opacity 0), при наведении на зону HS_volume_slider
       плавно проявляется сиренев-розоватым полупрозрачным тоном. Во время
       перетаскивания (:hover может теряться при захвате указателя) держится
       классом .is-adjusting на mount — по образцу .is-seeking у дорожки. */
    body .player #Volume_gradient {
        display: inline;
        opacity: 0;
        fill: rgba(255, 118, 230, 0.089) !important; /* чистый светло-сиреневый, еле заметный */
        transition: opacity 0.25s ease;
    }
    body .player-mount:has(#HS_volume_slider:hover) #Volume_gradient,
    body .player-mount.is-adjusting #Volume_gradient {
        opacity: 1;
    }

    /* ---------- Состояния режимов Mix и Cycle ----------
       Базовое (неактивное): сами кнопки заметно приглушены — блёклая
       заливка, слабый ореол. Активное: полная яркость иконки и полное
       свечение, как у ховера. Ховер складывается поверх без конфликтов. */
    body .player #Arrow_mix,
    body .player #Cycle_arrow {
        opacity: 0.4;
        filter: drop-shadow(0 0 2px rgba(216, 162, 251, 0.25));
    }
    body.mix-on .player #Arrow_mix,
    body.cycle-on .player #Cycle_arrow {
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(216, 162, 251, 0.65));
    }
    /* Ховер по неактивному режиму — частичное проявление, но темнее активного */
    body .player-mount:has(#HS_mix:hover) #Arrow_mix,
    body .player-mount:has(#HS_cycle:hover) #Cycle_arrow {
        opacity: 0.72;
    }
    /* Динамик в режиме mute — приглушён, но на 32% ярче неактивных
       Mix/Cycle (0.4 * 1.32 ≈ 0.53): приглушённость считывается,
       при этом динамик остаётся заметнее «спящих» кнопок. */
    body.volume-muted .player #Dinamic {
        opacity: 0.53;
    }

    /* ---------- Нажатие зон ----------
       Хотспот принимает клик и :active; реакция — на самом элементе.
       Ховеры не тронуты: нажатие складывается с ними поверх. */
    body .player-mount:has(#HS_play:active) #Button_Play_Pause,
    body .player-mount:has(#HS_next:active) #Next_track,
    body .player-mount:has(#HS_prev:active) #Previous_track {
        transform: scale(0.955);
        filter: blur(0.18px) brightness(1.12) drop-shadow(0 0 4px rgba(216, 162, 251, 0.55));
    }

    /* ---------- Блюр зоны Play/Pause ----------
       pbAura — размытый ореол за кругом; сам круг и символы остаются
       резкими, блюрится только свет вокруг. */
    body .player #pbAura { opacity: 0.32; }

    /* ---------- Play_time_bar: дорожка времени ----------
       Жёлоб (тёмная выемка) → дорога → заполнение → светлая грань → бегунок. */
    body .player #ptbGroove { fill: var(--p-tbar-groove) !important; }
    body .player #ptbFill   { fill: var(--p-tbar-fill) !important; }
    body .player #ptbEdge   { fill: var(--p-tbar-edge) !important; }
    body .player #ptbFill,
    body .player #ptbEdge,
    body .player #Marker_time {
        transition: opacity 0.3s ease, filter 0.3s ease;
    }

    /* В4 «Ритм»: грань пульсирует в такт полоскам громкости */
    body .player #ptbEdge { animation: fx4-wave 1.6s ease-in-out infinite; }

    /* Наведение на дорожку: заполнение и бегунок подсвечиваются */
    body .player-mount:has(#HS_road:hover) #ptbFill {
        opacity: 1;
        filter: drop-shadow(0 0 3px rgba(216, 162, 251, 0.40));
    }

    /* Перетаскивание позиции воспроизведения (Seek):
       Marker_time в базовом режиме грамотно скрыт; появляется при
       наведении курсора на зону Play_time_bar (HS_road) и удерживается
       видимым во время перетаскивания (класс .is-seeking на mount,
       т.к. при захвате указателя :hover может потеряться). */
    body .player #Marker_time { opacity: 0; }
    body .player-mount:has(#HS_road:hover) #Marker_time,
    body .player-mount.is-seeking #Marker_time {
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(216, 162, 251, 0.65));
    }
    #HS_road { cursor: grab; touch-action: none; }
    .player-mount.is-seeking #HS_road { cursor: grabbing; }

    body .player #pvHalo { opacity: 0.80; }

    /* ---------- For_image: бейдж обложки ----------
       Камень (For_Image_take), световое ядро fiCore, верхний блик fiSheen
       и ореол fiHalo. Рамка For_Image_border — статичное мягкое свечение. */
    body .player #For_Image_take,
    body .player #For_Image_border,
    body .player #fiHalo,
    body .player #fiCore,
    body .player #fiSheen {
        transition: opacity 0.3s ease;
    }
    body .player #fiHalo,
    body .player #fiCore,
    body .player #fiSheen { opacity: 1; }   /* силу ореола задаёт fill-opacity в разметке */

    /* Рамка обложки: статичное свечение */
    body .player #For_Image_border {
        filter: drop-shadow(0 0 2px rgba(189, 136, 232, 0.55));
    }

    /* Обложка трека (cover_image): мягкое проявление. Световые слои
       fiCore/fiSheen и рамка For_Image_border рисуются поверх картинки. */
    body .player #cover_image {
        transition: opacity 0.35s ease;
    }

    /* Система «уменьшить движение» касается и новых эффектов:
       анимации гасятся, статичные свет и ховер остаются */
    @media (prefers-reduced-motion: reduce) {
        body .player #pvGlowX,
        body .player #Button_Play_Pause,
        body .player #Volume_1,
        body .player #Volume_2,
        body .player #Volume_3,
        body .player #Volume_4,
        body .player #Volume_5,
        body .player #Play_road,
        body .player #For_Image_border,
        body .player #Next_track,
        body .player #Previous_track,
        body .player #pbAura,
        body .player #ptbFill,
        body .player #ptbEdge,
        body .player #Marker_time {
            animation: none;
        }
    }

    
    /* Активный трек плейлиста (подсвечивается при воспроизведении) */
    .track-item.track-active {
        border-color: rgba(246, 78, 249, 0.55);
        box-shadow: 0 0 18px rgba(216, 162, 251, 0.35);
    }

    /* Сообщение об ошибке загрузки playlist.json */
    .playlist-error {
        color: rgba(240, 184, 216, 0.9);
        font-size: 0.95rem;
    }

/* ===== Бегущая строка «сейчас играет» (music.html, шапка) =====
   Исполнитель и название активного трека плеера (даже на паузе)
   пробегают справа налево между подзаголовком и главным меню.
   Каждый проход: строка посимвольно входит за правой границей,
   уходит за левую, короткая пауза — и вход повторяется. */
.marquee {
    width: 100%;
    max-width: 620px;           /* JS уточняет границы: ширина .subtitle + ~15%
                                   + 14px правого и + 14px левого расширения */
    height: 31px;               /* фиксированная высота — для точной компенсации отступов
                                   (с запасом на «ступеньку» ±0.35em, без обрезки) */
    display: flex;
    align-items: center;
    margin: 0 auto 11px;
    /* Полоса расширена в обе стороны (JS добавляет 28px, по 14px на сторону):
       левый край с его «кухней» — на 14px левее исходного, правый край с зоной
       появления — на 14px правее. Сдвиг не нужен. */
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    /* Мягкое растворение текста у горизонтальных границ видимости.
       Правая тень сдвинута ещё правее (99% вместо 96%) — «кухня»
       появления строки теперь у самого правого края. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 99%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 99%, transparent 100%);
}

/* Компенсация высоты бегущей строки: кнопки меню остаются на стандартной
   высоте шапки, как на остальных страницах сайта. Надпись подзаголовка
   приближается к строке (8px вместо прежних ~24px), а суммарный вертикальный
   отступ «подзаголовок → меню» сохраняется прежним: 8px + 31px + 11px = 50px
   (как margin-bottom: 50px у .subtitle на остальных страницах). */
.subtitle:has(+ .marquee) {
    margin-bottom: 8px;
}

.marquee-inner {
    flex: 0 0 auto;             /* не сжимается контейнером — иначе собьётся прокрутка */
    display: inline-flex;
    will-change: transform;
    animation: marquee-scroll 20s linear infinite;
}

.marquee-text {
    display: inline-block;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: #d9b8ff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 12px rgba(122, 92, 192, 0.35);
}

/* Название песни в строке — самое светлое в строке: белый текст
   с деликатной сиреневой аурой (насыщенный фиолетово-сиреневый тон
   ближе к акцентам сайта), без малейшей желтизны. Исполнитель
   остаётся спокойным лавандовым (#d9b8ff). */
.marquee-char-title {
    color: #f3eaff; /* белый с лёгким сиреневым намёком — без желтизны */
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 10px rgba(191, 122, 246, 0.50);
}

/* Прокрутка: старт ЗА правой границей (--mq-from = W), финиш — когда текст
   с «пробегом» полностью ушёл за левую (--mq-to = W − ширина текста+пробег).
   Значения переменных задаёт PLAYER JS под текущую ширину строки. */
@keyframes marquee-scroll {
    from { transform: translateX(var(--mq-from, 100vw)); }
    to   { transform: translateX(var(--mq-to, -100vw)); }
}

@media (max-width: 768px) {
    /* Высота и отступы строки те же — компенсация работает и на мобильном */
    .marquee-text { font-size: 0.95rem; }
}

.marquee-char {
    display: inline-block;
    /* Длительности и фазы (animation-delay) синхронизируются из JS
       с периодом прокрутки: проявление — у правой границы, подъём — сразу
       после него, «ступенька» — у левой. fill-mode: backwards — до своей
       фазы символ прозрачен и стоит в нижней позиции */
    animation: char-reveal 20s linear infinite,
               char-rise 20s linear infinite,
               char-ascend 20s linear infinite;
    animation-fill-mode: backwards;
}

/* Посимвольное проявление у правой границы: только ПРОЗРАЧНОСТЬ —
   символ становится виден у тени в своей НИЖНЕЙ позиции, а подъём
   на линию отыгрывает отдельная анимация char-rise (фаза позже).
   Гашение 93%→93.5% — мгновенное и строго ЗА границей видимости
   (символы достигают правой тени не раньше ~94% цикла), поэтому
   сквозь тень символ проходит полностью невидимым — без «просвета»,
   и каждый проход проявляется посимвольно, как самый первый.
   Чистый CSS на opacity — на композиторе, без JS-кадров. */
@keyframes char-reveal {
    0%    { opacity: 0; }
    1.5%  { opacity: 1; }
    93%   { opacity: 1; }
    93.5% { opacity: 0; }
    100%  { opacity: 0; }
}

/* Правая «ступенька»: подъём с нижней позиции (0.35em ниже базовой
   линии) на высоту строки — начинается сразу ПОСЛЕ проявления
   (фазу d_rise = d_reveal + пауза задаёт JS), поэтому эффект подъёма
   виден сполна: символ сначала показывается внизу, затем поднимается.
   Возврат в нижнюю позицию (90%→92%) — строго за левой границей
   видимости, стык цикла незаметен. */
@keyframes char-rise {
    0%   { transform: translateY(0.35em); }
    3%   { transform: translateY(0); }
    90%  { transform: translateY(0); }
    92%  { transform: translateY(0.35em); }
    100% { transform: translateY(0.35em); }
}

/* «Ступенька самосовершенствования» слева: у левой тени символ
   поднимается чуть выше линии строки (на ту же 0.35em, что и при
   проявлении справа) и растворяется в тени уже со ступеньки.
   Возврат на линию (10%→12%) происходит, когда символ уже за левой
   границей видимости — поэтому на следующих проходках нет «опускания»,
   а стык цикла (100%→0%, оба — «на линии») абсолютно незаметен.
   Отдельное свойство translate (не transform) — оно складывается
   с transform'ом проявления, не конфликтуя с ним. */
@keyframes char-ascend {
    0%   { translate: 0 0; }
    2%   { translate: 0 -0.35em; }
    10%  { translate: 0 -0.35em; }
    12%  { translate: 0 0; }
    100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    /* «Уменьшить движение»: строка стоит на месте, текст остаётся видимым */
    .marquee-inner,
    .marquee-char { animation: none !important; }
}