/* ==========================================================
   Одноэкранный режим. Подключается только когда в админке
   включён тумблер (data.json → oneScreenEnabled).
   Разметку не меняем: существующие секции превращаются
   в панели через позиционирование, узлы никуда не переносим —
   иначе iframe плеера пересоздаётся и трек начинается заново.
   ========================================================== */

body.one {
    --sheet-gap: calc(var(--deck-h, 120px) + 10px);
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
}

/* Панели мобильных браузеров то появляются, то прячутся: считаем раскладку
   по svh (самая маленькая высота), иначе подвал уезжает под панель и
   снизу остаётся чёрная полоса. */
@supports not (height: 100svh) {
    body.one { height: 100vh; min-height: 100vh; }
    body.one #site-content { height: 100vh; }
}

body.one #site-content {
    height: 100svh;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    overflow: hidden;
}

/* ---------- шапка ---------- */

body.one header {
    padding: clamp(10px, 2vh, 28px) 16px 0;
    display: grid;
    align-content: center;
    gap: clamp(8px, 1.6vh, 20px);
    min-height: 0;
    overflow: hidden;
}

body.one header > div {
    gap: clamp(8px, 1.6vh, 18px);
}

body.one .animate-float { animation-duration: 7s; }

body.one header .relative.w-32 {
    width: clamp(104px, min(16vh, 15vw), 300px);
    height: clamp(104px, min(16vh, 15vw), 300px);
}

body.one .artist-nickname-large {
    font-size: clamp(38px, min(9vh, 8.4vw), 190px);
    line-height: 1;
}

body.one .logo-png-img {
    max-height: clamp(56px, min(12vh, 11vw), 220px);
    width: auto;
}

body.one .artist-name-small { font-size: clamp(13px, min(2.2vh, 2.1vw), 30px); }

body.one .platform-btn {
    width: clamp(40px, min(5.4vh, 5vw), 78px);
    height: clamp(40px, min(5.4vh, 5vw), 78px);
}

body.one .platform-btn i { font-size: clamp(19px, min(2.7vh, 2.5vw), 38px); }
body.one .platform-btn img { width: clamp(21px, min(3vh, 2.8vw), 42px); height: clamp(21px, min(3vh, 2.8vw), 42px); }

body.one header .pt-4,
body.one header .md\:pt-8 { padding-top: clamp(10px, 1.8vh, 26px); }

body.one .social-icon { font-size: clamp(22px, min(3.4vh, 3.2vw), 48px); }

/* ---------- краткое био под площадками ---------- */

body.one .one-about {
    position: relative;
    width: min(880px, 82vw);
    margin: 0 auto;
    padding: clamp(14px, 2.2vh, 26px) clamp(16px, 2.4vw, 34px) clamp(12px, 1.8vh, 22px);
    border: 1px solid rgba(var(--accent-rgb, 255, 0, 0), .28);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb, 255, 0, 0), .05), rgba(0, 0, 0, 0) 40%),
        rgba(6, 6, 6, .74);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .55), 0 0 26px rgba(var(--accent-rgb, 255, 0, 0), .1);
    display: grid;
    justify-items: center;
    gap: clamp(8px, 1.3vh, 16px);
}

body.one .one-about::before {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent, #ff0000), transparent);
}

body.one .one-brief {
    margin: 0;
    text-align: center;
    color: #d5d5d5;
    font-size: clamp(12.5px, min(2vh, 1.4vw), 22px);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.one .one-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: clamp(7px, 1.1vh, 12px) clamp(18px, 2vw, 30px);
    border: 1px solid var(--accent, #ff0000);
    border-radius: 999px;
    background: transparent;
    color: var(--accent, #ff0000);
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(11px, min(1.5vh, 1vw), 15px);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
    box-shadow: 0 0 14px rgba(var(--accent-rgb, 255, 0, 0), .2);
}

body.one .one-more:hover {
    background: var(--accent, #ff0000);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 0 26px rgba(var(--accent-rgb, 255, 0, 0), .55);
}

body.one .one-more i { width: 15px; height: 15px; }

/* полоса эквалайзера, растущая из верхней кромки пульта */
body.one .one-eq {
    position: absolute;
    left: clamp(10px, 1.4vw, 22px);
    right: clamp(10px, 1.4vw, 22px);
    bottom: calc(100% - 4px);
    display: flex;
    align-items: flex-end;
    gap: clamp(2px, .4vw, 5px);
    height: clamp(26px, 4vh, 44px);
    pointer-events: none;
}

/* Столбики непрозрачные: сквозь полупрозрачные просвечивали частицы
   и молнии фона — выглядело так, будто фон нарисован поверх. */
body.one .one-eq i {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px 2px 0 0;
    background:
        linear-gradient(180deg, var(--accent, #ff0000), rgba(var(--accent-rgb, 255, 0, 0), .08)),
        #0b0b0b;
    box-shadow: 0 0 8px rgba(var(--accent-rgb, 255, 0, 0), .35);
    transform-origin: bottom;
    animation: deck-eq 1.7s ease-in-out infinite;
    filter: brightness(.62);
}

body.one.is-playing .one-eq i { animation-duration: .75s; filter: brightness(1); }
body.one .one-eq.is-off { opacity: 0; transition: opacity .25s ease; }
/* Паузу эквалайзеров держим на самих полосках: раньше это делал класс
   на body, и любое открытие панели пересчитывало стили всей страницы. */

/* на телефоне над пультом больше воздуха — столбики выше */
@media (max-width: 900px) {
    body.one .one-eq { height: clamp(34px, 8vh, 86px); gap: 3px; }
}

@media (max-height: 700px) {
    body.one .one-eq { height: clamp(18px, 4vh, 34px); }
}

@media (prefers-reduced-motion: reduce) {
    body.one .one-eq i { animation: none; }
}

/* ---------- пульт ---------- */

.deck { display: none; }

body.one .deck {
    display: grid;
    transition: transform .3s ease;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(10px, 1.6vw, 26px);
    width: min(1500px, 88vw);
    margin: 0 auto clamp(8px, 1.4vh, 16px);
    padding: clamp(8px, 1.3vh, 16px) clamp(10px, 1.4vw, 22px);
    border: 1px solid #2a2a2a;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb, 255, 0, 0), .05), rgba(0, 0, 0, 0) 42%),
        linear-gradient(180deg, #161616, #0b0b0b);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        inset 0 -14px 26px rgba(0, 0, 0, .6),
        0 0 26px rgba(var(--accent-rgb, 255, 0, 0), .12);
    position: relative;
    z-index: 80;
}

body.one .deck::before {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent, #ff0000), transparent);
    opacity: .75;
}

/* эквалайзеры по краям */
body.one .deck__eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: clamp(34px, min(6.5vh, 5vw), 92px);
    padding: 0 2px;
}

body.one .deck__eq i {
    display: block;
    width: clamp(4px, .35vw, 8px);
    height: 26%;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent, #ff0000), rgba(var(--accent-rgb, 255, 0, 0), .25));
    box-shadow: 0 0 8px rgba(var(--accent-rgb, 255, 0, 0), .45);
    transform-origin: bottom;
    animation: deck-eq 1.6s ease-in-out infinite;
    opacity: .65;
}

body.one .deck__eq i:nth-child(1) { animation-delay: -.1s; height: 38%; }
body.one .deck__eq i:nth-child(2) { animation-delay: -.7s; height: 62%; }
body.one .deck__eq i:nth-child(3) { animation-delay: -.3s; height: 84%; }
body.one .deck__eq i:nth-child(4) { animation-delay: -1.1s; height: 46%; }
body.one .deck__eq i:nth-child(5) { animation-delay: -.5s; height: 72%; }
body.one .deck__eq i:nth-child(6) { animation-delay: -.9s; height: 34%; }
body.one .deck__eq i:nth-child(7) { animation-delay: -.2s; height: 58%; }
body.one .deck__eq i:nth-child(8) { animation-delay: -1.3s; height: 44%; }

@keyframes deck-eq {
    0%, 100% { transform: scaleY(.35); }
    50%      { transform: scaleY(1); }
}

/* играет трек — полоски живее и ярче */
body.one.is-playing .deck__eq i {
    opacity: 1;
    animation-duration: .7s;
}

/* клавиши */
body.one .deck__keys {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(6px, .9vw, 14px);
}

body.one .dk {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    padding: clamp(8px, 1.6vh, 26px) 6px clamp(7px, 1.4vh, 22px);
    border: 1px solid #2e2e2e;
    border-radius: 16px;
    background: linear-gradient(180deg, #1c1c1c, #101010);
    color: #d7d7d7;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(9.5px, min(1.15vh, .78vw), 13px);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .25s ease, color .18s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 12px rgba(0, 0, 0, .5);
    overflow: hidden;
}

body.one .dk::after {
    content: '';
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent, #ff0000);
    opacity: 0;
    transition: opacity .25s ease;
    box-shadow: 0 0 10px var(--accent, #ff0000);
}

body.one .dk .dk__ic {
    display: grid;
    place-items: center;
    width: clamp(44px, min(6.2vh, 4.2vw), 86px);
    height: clamp(44px, min(6.2vh, 4.2vw), 86px);
    color: #ffffff;
    transition: color .18s ease, transform .18s ease;
}

body.one .dk .dk__ic i { width: 100%; height: 100%; }

body.one .dk:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb, 255, 0, 0), .55);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 22px rgba(var(--accent-rgb, 255, 0, 0), .25);
}

body.one .dk:hover .dk__ic { color: var(--accent, #ff0000); transform: scale(1.06); }
body.one .dk:hover::after { opacity: .9; }

body.one .dk.is-active {
    border-color: var(--accent, #ff0000);
    color: #ffffff;
    box-shadow: inset 0 0 18px rgba(var(--accent-rgb, 255, 0, 0), .18), 0 0 26px rgba(var(--accent-rgb, 255, 0, 0), .3);
}

body.one .dk.is-active::after { opacity: 1; }
body.one .dk.is-active .dk__ic { color: var(--accent, #ff0000); }

body.one .dk--main {
    background: linear-gradient(180deg, rgba(var(--accent-rgb, 255, 0, 0), .1), rgba(0, 0, 0, .55));
    border-color: rgba(var(--accent-rgb, 255, 0, 0), .4);
}

/* ---------- шторки ---------- */

body.one main {
    display: contents;
}

/* Панель выезжает снизу и встаёт над пультом. Высоту пульта меряет one.js
   и кладёт в --deck-h, иначе шторка перекрывала бы клавиши. */
body.one main > section {
    position: fixed;
    left: 50%;
    bottom: var(--sheet-gap);
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: min(1180px, 92vw);
    max-width: none;
    max-height: calc(100svh - var(--sheet-gap) - 30px);
    margin: 0;
    padding: clamp(14px, 1.8vh, 26px) clamp(12px, 1.6vw, 26px) clamp(14px, 1.8vh, 24px);
    border: 1px solid #262626;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb, 255, 0, 0), .07), rgba(0, 0, 0, 0) 22%),
        linear-gradient(180deg, #121212, #070707);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 -8px 28px rgba(0, 0, 0, .8),
        0 0 22px rgba(var(--accent-rgb, 255, 0, 0), .16);
    overflow: hidden;
    contain: layout paint style;
    transform: translate(-50%, calc(100% + var(--sheet-gap) + 40px));
    opacity: 0;
    pointer-events: none;
    /* Шторка не прячется через visibility: иначе её слой каждый раз
       рисуется заново и первый кадр открытия проседает. Она просто
       стоит за нижним краем экрана на своём слое. */
    transition:
        transform .52s cubic-bezier(.18, .86, .24, 1),
        opacity .26s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

body.one main > section.is-open {
    /* открытая шторка сама сдвигается на высоту сложенного подвала,
       вместо переопределения переменной на body — оно заставляло
       браузер пересчитывать стили всей страницы */
    bottom: calc(var(--sheet-gap) - var(--foot-h, 0px));
    max-height: calc(100svh - var(--sheet-gap) + var(--foot-h, 0px) - 30px);
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
    transition:
        transform .52s cubic-bezier(.18, .86, .24, 1),
        opacity .22s ease;
}

/* полоска-ручка сверху */
body.one main > section::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 9px;
    width: 64px;
    height: 4px;
    margin-left: -32px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--accent, #ff0000), transparent);
    opacity: .8;
}

/* Закрытая шторка полностью уезжает за нижний край, поэтому
   IntersectionObserver останавливает автоскролл галереи сам.
   content-visibility здесь только мешал: первое открытие вызывало
   разом вёрстку всего содержимого и кадр проседал. */

/* внутренний блок больше не рисует свою рамку — рамка у самой шторки */
body.one main > section > .section-block {
    margin: 0;
    padding: 0;
    max-height: none;
    background: none;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

body.one main > section > .section-block > .absolute.top-0 { display: none; }

body.one main > section .section-title {
    margin: 2px 0 clamp(10px, 1.6vh, 20px);
    padding: 0;
    font-size: clamp(15px, min(2.4vh, 1.5vw), 26px);
    letter-spacing: .28em;
    border: 0;
}

body.one main > section .scrollable-container,
body.one main > section .gallery-container {
    max-height: none !important;
    min-height: 0;
}

body.one main > section > .section-block > .scrollable-container,
body.one main > section > .section-block > .relative {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* плеер: у шторки своя рамка, поэтому карточка плеера отдаёт свою */
body.one #sec-player > .section-block {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.one #sec-player #player-skeleton { flex: 0 0 auto; }

body.one #sec-player #sunk-player-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

body.one #sec-player .sunk-player {
    max-width: none;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

body.one #sec-player .sunk-player::before { display: none; }
body.one #sec-player .sunk-player__core { padding: 4px 4px 12px; }
body.one #sec-player .sunk-player__wave { padding: 0 4px; }
body.one #sec-player .sunk-player__time { padding: 6px 4px 0; }
body.one #sec-player .sunk-player__deck { padding: 10px 4px; margin-top: 10px; }
body.one #sec-player .sunk-player__list-header { padding: 12px 6px 4px; }

body.one #sec-player .sunk-player__list {
    max-height: none !important;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 4px 6px;
}

/* Скрытый iframe YouTube не переключаем вместе со шторкой: каждый показ
   пересоздавал его поверхность в компоновщике и давал просадку кадра. */
body.one #sec-player .sunk-player__hidden-iframe { visibility: visible; }

/* Строки вне видимой части списка не рендерим: иначе первое открытие
   плеера декодировало разом два десятка обложек. */
body.one #sec-player .sunk-player__row {
    content-visibility: auto;
    contain-intrinsic-size: auto 45px;
}

/* шторка плеера уже остальных */
body.one #sec-player { width: min(940px, 92vw); }
body.one #sec-player.is-open {
    max-height: min(calc(100svh - var(--sheet-gap) + var(--foot-h, 0px) - 30px), 660px);
}

body.one #sec-bio {
    width: min(900px, 92vw);
    text-align: center;
}

/* Текст «об артисте» длиннее шторки — крутим его внутри,
   иначе нижние строки просто обрезались. */
/* убираем лишние отступы: с ними последняя строка не помещалась */
body.one #sec-bio #bio-short-display { margin-bottom: 8px; }
body.one #sec-bio #bio-full { margin-top: 0; }
body.one #sec-bio #bio-full p { margin-bottom: 10px; }
body.one #sec-bio #bio-full p:last-child { margin-bottom: 0; }

body.one #sec-bio > .section-block {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
}

/* Раскрытая биография ограничена max-height: 1000px — с SEO-текстом
   она длиннее, и хвост обрезался. В шторке ограничение снимаем,
   прокрутка живёт на самой шторке. */
body.one #sec-bio .bio-content.expanded {
    max-height: none;
    overflow: visible;
}

body.one #sec-gallery .gallery-container { padding-bottom: 6px; }

/* фото по высоте шторки: 384px из общей темы здесь не помещались */
body.one #sec-gallery > .section-block > .relative {
    flex: 0 0 auto;
    overflow: hidden;
}

body.one #sec-gallery .gallery-container { padding-top: 2px; align-items: center; }

body.one #sec-gallery #gallery-track img {
    height: min(calc(100svh - var(--sheet-gap) - 220px), 460px);
    width: auto;
    flex-shrink: 0;
}

body.one #sec-gallery [data-i18n="scroll_hint"] {
    margin: clamp(4px, .8vh, 10px) 0 0;
    font-size: 12px;
}

/* затемнение под панелью */
.one-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, .88);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
}

body.one .one-scrim.is-on { opacity: 1; visibility: visible; }

/* крестик панели */
.one-x {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #2c2c2c;
    border-radius: 50%;
    background: rgba(12, 12, 12, .92);
    color: #c9c9c9;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.one-x:hover { border-color: var(--accent, #ff0000); color: var(--accent, #ff0000); transform: rotate(90deg); }

/* ---------- подвал в одном экране ---------- */

/* когда панель браузера прячется, снизу открывается полоса выше подвала —
   продлеваем его фон вниз, чтобы не было чёрного разрыва */
body.one footer {
    position: relative;
    transition: transform .3s ease, opacity .2s ease;
    will-change: transform;
}

/* Пока открыта шторка, подвал складывается, и пульт опускается к самому
   низу: иначе под ним оставалась тёмная пустая полоса. */
/* Подвал и пульт сдвигаем трансформом: смена высоты пересчитывала
   вёрстку всей страницы и давала фриз в момент открытия. */
body.one footer.is-down {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

body.one footer.is-down::after { display: none; }

body.one .deck.is-down { transform: translateY(var(--foot-h, 0px)); }

body.one footer::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 160px;
    background: inherit;
}

body.one footer {
    padding: clamp(5px, .9vh, 14px) 0 calc(clamp(5px, .9vh, 14px) + env(safe-area-inset-bottom, 0px));
    font-size: clamp(12.5px, min(1.5vh, 1vw), 17px);
}

/* ---------- планшет и телефон ---------- */

@media (max-width: 900px) {
    body.one .deck { grid-template-columns: minmax(0, 1fr); gap: 8px; border-radius: 18px; }
    body.one .deck__eq { display: none; }
    /* На телефоне пять равных клавиш ломают строку 3+2.
       Плеер уходит в широкую клавишу сверху, остальные — ровным рядом. */
    body.one .deck__keys { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    body.one .dk { border-radius: 13px; padding: 9px 4px 8px; font-size: 9.5px; gap: 4px; }
    body.one .dk .dk__ic { width: 38px; height: 38px; }
    body.one .dk--main {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 11px 10px;
        font-size: 12.5px;
        letter-spacing: .12em;
    }
    body.one .dk--main .dk__ic { width: 30px; height: 30px; }
    body.one .dk--main::after { bottom: 7px; left: 38%; right: 38%; }
    body.one main > section {
        width: calc(100vw - 16px);
        max-height: calc(100svh - var(--sheet-gap) - 12px);
        border-radius: 20px;
        padding: 14px 10px 12px;
    }
    body.one .one-brief { -webkit-line-clamp: 3; font-size: 13px; }
    body.one .one-about { width: calc(100vw - 28px); padding: 12px 14px 12px; border-radius: 16px; gap: 9px; }
    body.one .one-x { width: 38px; height: 38px; top: 8px; right: 8px; }
}

/* невысокие экраны: 640px в высоту у телефонов встречаются часто,
   и там блоки наезжали друг на друга */
@media (max-height: 720px) {
    body.one header { gap: 6px; padding-top: 8px; }
    body.one header > div { gap: 7px; }
    body.one header .relative.w-32 { width: clamp(84px, 13vh, 130px); height: clamp(84px, 13vh, 130px); }
    body.one .relative.mb-4 { margin-bottom: 6px; }
    body.one .one-about { padding: 9px 13px 10px; gap: 7px; border-radius: 14px; }
    body.one .one-brief { -webkit-line-clamp: 2; font-size: 12px; line-height: 1.45; }
    body.one .one-more { padding: 6px 16px; font-size: 10.5px; }
    body.one header .pt-4, body.one header .md\:pt-8 { padding-top: 8px; }
    body.one .deck { padding: 7px 10px; margin-bottom: 6px; }
    body.one .deck__keys { gap: 6px; }
    body.one .dk { padding: 7px 3px 6px; }
    body.one .dk--main { padding: 8px; font-size: 11.5px; }
    body.one footer { padding: 4px 0; font-size: 11.5px; }
}

@media (max-height: 560px) {
    body.one .one-brief { display: none; }
    body.one .artist-nickname-large { font-size: clamp(28px, 6vh, 48px); }
}

/* узкие телефоны: подписи клавиш не должны обрезаться */
@media (max-width: 400px) {
    body.one .dk { font-size: 8.5px; letter-spacing: 0; padding-left: 2px; padding-right: 2px; }
    body.one .dk .dk__t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.one .dk .dk__ic { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    body.one .deck__eq i { animation: none; }
    body.one main > section { transition: none; }
}

/* ---------- форма связи в стиле шторок ---------- */

body.one #help-overlay {
    background: rgba(0, 0, 0, .88);
}

body.one #help-modal {
    max-width: 460px;
    padding: clamp(22px, 3vh, 34px) clamp(20px, 2.4vw, 32px) clamp(20px, 2.6vh, 30px);
    border: 1px solid #262626;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb, 255, 0, 0), .07), rgba(0, 0, 0, 0) 22%),
        linear-gradient(180deg, #121212, #070707);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 -12px 60px rgba(0, 0, 0, .85),
        0 0 40px rgba(var(--accent-rgb, 255, 0, 0), .16);
}

body.one #help-modal::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 9px;
    width: 64px;
    height: 4px;
    margin-left: -32px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--accent, #ff0000), transparent);
    opacity: .8;
}

body.one #help-title {
    margin: 4px 0 clamp(14px, 2vh, 22px);
    color: var(--accent, #ff0000);
    font-size: clamp(15px, 2.2vh, 22px);
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

body.one #help-close {
    top: 10px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #2c2c2c;
    border-radius: 50%;
    background: rgba(12, 12, 12, .92);
    color: #c9c9c9;
    font-size: 19px;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

body.one #help-close:hover {
    border-color: var(--accent, #ff0000);
    color: var(--accent, #ff0000);
    transform: rotate(90deg);
}

body.one #help-form label {
    margin-top: 14px;
    color: #9d9d9d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.one #help-form input,
body.one #help-form textarea {
    padding: 13px 15px;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    background: rgba(8, 8, 8, .9);
    color: #f0f0f0;
}

body.one #help-form input::placeholder,
body.one #help-form textarea::placeholder { color: #5a5a5a; }

body.one #help-form input:focus,
body.one #help-form textarea:focus {
    border-color: var(--accent, #ff0000);
    box-shadow: 0 0 18px rgba(var(--accent-rgb, 255, 0, 0), .22);
}

body.one #help-submit {
    margin-top: 22px;
    padding: 15px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent, #ff0000), var(--accent-dark, #cc0000));
    color: #fff;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 0 22px rgba(var(--accent-rgb, 255, 0, 0), .35);
}

body.one #help-submit:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 34px rgba(var(--accent-rgb, 255, 0, 0), .6);
}

/* внутри шторки «Об артисте» своя кнопка не нужна — текст уже раскрыт */
body.one #sec-bio #bio-toggle-btn { display: none !important; }


/* ---------- плавность ----------
   Пульсирующие тени перерисовываются каждый кадр: на десяти карточках
   релизов это давало заметные рывки при открытии шторки. Свечение
   оставляем, но статичное. Анимации внутри закрытых шторок ставим на паузу. */

body.one .release-card { animation: none; }
body.one .release-card:hover { animation: none; box-shadow: 0 0 22px rgba(var(--accent-rgb, 255, 0, 0), .65); }
body.one main > section:not(.is-open) *,
body.one main > section:not(.is-open) { animation-play-state: paused; }
body.one #sec-gallery [data-i18n="scroll_hint"] { animation: none; }


/* ---------- иконки пульта ---------- */

body.one .dk .dk__ic svg { width: 100%; height: 100%; display: block; overflow: visible; }
body.one .dk .dk-ring { stroke: #8d94a3; }
body.one .dk .dk-arc { stroke: #aab1c0; opacity: .85; }
body.one .dk .dk-groove { stroke: #2d3038; }
body.one .dk .dk-hot { fill: #c9cfdb; }
body.one .dk .dk-wave rect { fill: #aab1c0; }
body.one .dk .dk-spin { transform-box: fill-box; transform-origin: center; }
body.one .dk .dk-glass { pointer-events: none; transition: opacity .2s ease; }
body.one .dk .dk-sheen { opacity: .75; }

body.one .dk svg,
body.one .dk .dk-ring,
body.one .dk .dk-arc,
body.one .dk .dk-hot,
body.one .dk .dk-wave rect {
    transition: stroke .2s ease, fill .2s ease, filter .25s ease, opacity .2s ease;
}

/* наведение и активная клавиша: металл остаётся светлым, краснеют кольца */
body.one .dk:hover .dk-ring,
body.one .dk.is-active .dk-ring { stroke: var(--accent, #ff0000); stroke-width: 2.4; }
body.one .dk:hover .dk-arc,
body.one .dk.is-active .dk-arc { stroke: var(--accent, #ff0000); opacity: 1; }
body.one .dk:hover .dk-hot,
body.one .dk.is-active .dk-hot { fill: var(--accent, #ff0000); }
body.one .dk:hover .dk-note,
body.one .dk.is-active .dk-note { stroke: var(--accent, #ff0000); }
body.one .dk:hover .dk-wave rect,
body.one .dk.is-active .dk-wave rect { fill: var(--accent, #ff0000); }
body.one .dk:hover svg,
body.one .dk.is-active svg {
    filter: drop-shadow(0 0 9px rgba(var(--accent-rgb, 255, 0, 0), .65))
            drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}
body.one .dk:hover .dk-glass,
body.one .dk.is-active .dk-glass { opacity: .9; }

/* вращение колец и пластинки */
@keyframes dk-spin { to { transform: rotate(360deg); } }

body.one .dk .dk-spin {
    animation: dk-spin 9s linear infinite;
    animation-play-state: paused;
}

body.one .dk:hover .dk-spin,
body.one .dk.is-active .dk-spin { animation-play-state: running; }

/* пока играет музыка, клавиша плеера живёт сама по себе */
body.one.is-playing .dk--main .dk-spin { animation-play-state: running; animation-duration: 6s; }
body.one.is-playing .dk--main .dk-wave rect {
    animation: dk-pulse 1s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
body.one.is-playing .dk--main .dk-wave rect:nth-child(2) { animation-delay: -.25s; }
body.one.is-playing .dk--main .dk-wave rect:nth-child(3) { animation-delay: -.5s; }
body.one.is-playing .dk--main .dk-wave rect:nth-child(4) { animation-delay: -.7s; }
body.one.is-playing .dk--main .dk-wave rect:nth-child(5) { animation-delay: -.35s; }
body.one.is-playing .dk--main .dk-wave rect:nth-child(6) { animation-delay: -.6s; }

@keyframes dk-pulse {
    0%, 100% { transform: scaleY(.55); }
    50%      { transform: scaleY(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    body.one .dk .dk-spin,
    body.one .dk .dk-wave rect { animation: none; }
}