/*
 * «Студия в эфире» — общий стиль зрительского сайта (подключается последним, после стилей страниц).
 * Палитра — стиль «АниБаза» из трекера: хвойный #003E33, кремовый #DDDBD2, мята #3DDC97, плюс золото.
 * Разметка и логика страниц не меняются; новые блоки — классы air-*.
 *
 * Скорость (60 FPS, в том числе рядом с Anime4K):
 * - двигаются только transform и opacity; тени и свечения готовы заранее и проявляются прозрачностью;
 * - никаких backdrop-filter на карточках, плашках и пилюлях (их сотни на странице, размытие пересчитывается при прокрутке);
 * - бесконечные анимации стоят на паузе вне экрана (.air-idle, ставит core/scripts/air.js),
 *   во время просмотра видео (html.air-playing) и при «уменьшить движение».
 */

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/air/unbounded-cyrillic-wght-normal.3a5ed4d11365.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/air/unbounded-latin-wght-normal.8616dc355070.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/air/golos-text-cyrillic-wght-normal.2b8fbbb33a14.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/air/golos-text-latin-wght-normal.f57df9832ab8.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================= 1. Токены ================= */

:root {
    --air-bg: #021511;
    --air-bg-2: #03201a;
    --air-forest: #003e33;
    --air-surface: #062a21;
    --air-surface-2: #0a3529;
    --air-line: rgba(61, 220, 151, 0.14);
    --air-line-strong: rgba(61, 220, 151, 0.34);
    --air-cream: #ece9df;
    --air-cream-dim: #a9b9b1;
    --air-cream-faint: #74887f;
    --air-mint: #3ddc97;
    --air-emerald: #10b981;
    --air-gold: #f2c25b;
    --air-amber: #ff9f43;
    --air-cyan: #4fd1e8;
    --air-violet: #a78bfa;
    --air-onair: #ff4d5e;
    --air-ink: #022019;
    --air-display: "Unbounded", "Golos Text", system-ui, sans-serif;
    --air-body: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --air-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --air-out: cubic-bezier(0.22, 1, 0.36, 1);
    --air-radius: 18px;

    /* старые токены сайта — на новую палитру */
    --bg-color: var(--air-bg);
    --surface-color: rgba(6, 42, 33, 0.78);
    --surface-color-raised: var(--air-surface-2);
    --glass-color: rgba(2, 21, 17, 0.86);
    --border-color: var(--air-line);
    --pill-bg: rgba(2, 21, 17, 0.78);
    --pill-border: rgba(61, 220, 151, 0.24);
    --text-color-primary: var(--air-cream);
    --text-color-muted: var(--air-cream-dim);
    --text-color-faint: var(--air-cream-faint);
    --text-color-emphasis: var(--air-mint);
    --text-color-emphasis-secondary: rgba(61, 220, 151, 0.8);
    --accent-gradient: linear-gradient(135deg, #3ddc97 0%, #22c38a 100%);
    --em-card-radius: var(--air-radius);
    --rbi-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z'/%3E%3C/svg%3E");
    --rbi-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6z'/%3E%3C/svg%3E");
    --rbi-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");
    --rbi-clapper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16v10H4zM4 10l2-5 14-2 .5 4M8.5 4.5l1.8 4M14 3.7l1.8 4'/%3E%3C/svg%3E");
    --rbi-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E");
    --rbi-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M8.5 21h7'/%3E%3C/svg%3E");
    --rbi-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v18M12 3v18M18 3v18'/%3E%3Crect x='3.5' y='13' width='5' height='3.5' rx='1'/%3E%3Crect x='9.5' y='6' width='5' height='3.5' rx='1'/%3E%3Crect x='15.5' y='11' width='5' height='3.5' rx='1'/%3E%3C/svg%3E");
    --rbi-script: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5zM8.5 9.5h7M8.5 13h7M8.5 16.5h4'/%3E%3C/svg%3E");
    --rbi-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M13.5 4l-3 16'/%3E%3C/svg%3E");
    --rbi-shieldcheck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    --rbi-megaphone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4h3l8 5V5L6 10zM17.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E");
    --rbi-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l3 6-9 12L3 9zM3 9h18M9.5 3L8 9l4 12 4-12-1.5-6'/%3E%3C/svg%3E");
}

/* ================= 2. Основа: шрифты, фон, зерно ================= */

html,
body {
    background-color: var(--air-bg);
}

body {
    font-family: var(--air-body);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* фон: хвойная ночь студии и мягкий свет «лампы» сверху; стоит на месте, перерисовок нет */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 560px at 50% -200px, rgba(61, 220, 151, 0.2), rgba(61, 220, 151, 0) 70%),
        radial-gradient(760px 420px at 100% 6%, rgba(242, 194, 91, 0.07), rgba(242, 194, 91, 0) 70%),
        radial-gradient(900px 600px at -10% 100%, rgba(0, 62, 51, 0.55), rgba(0, 62, 51, 0) 70%),
        linear-gradient(180deg, #021511 0%, #03201a 100%);
}

/* плёночное зерно: одна неподвижная текстура поверх всего, без анимации */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3,
.section__title,
.cards-slider__layer > h2,
.release-title,
.rp-title,
.rp-h2,
.pp-name,
.cm-card__title,
.wp-title,
.ab-credits__title {
    font-family: var(--air-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.section__title,
.cards-slider__layer > h2,
.rp-h2 {
    font-weight: 800;
    font-size: clamp(1.35rem, 1.9vw, 2.2rem);
    color: var(--air-cream);
}

::selection {
    background: rgba(61, 220, 151, 0.35);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--air-gold);
    outline-offset: 3px;
}

/* «Студийный» штрих перед заголовком раздела: три столбика уровня, поднимаются при появлении */
.section__title,
.cards-slider__layer > h2,
.rp-h2 {
    display: flex;
    align-items: center;
    gap: 0.55em;
}
.section__title::before,
.cards-slider__layer > h2::before,
.rp-h2::before {
    content: "";
    flex: none;
    width: 0.62em;
    height: 0.72em;
    background:
        linear-gradient(var(--air-mint), var(--air-mint)) 0 100% / 22% 55% no-repeat,
        linear-gradient(var(--air-gold), var(--air-gold)) 50% 100% / 22% 100% no-repeat,
        linear-gradient(var(--air-mint), var(--air-mint)) 100% 100% / 22% 75% no-repeat;
    transform-origin: bottom;
    animation: air-rise 0.7s var(--air-spring) both;
}
.section__head .section__title { margin-bottom: 0; }
@keyframes air-rise {
    from { transform: scaleY(0); }
}

/* ================= 3. Кнопки и пилюли ================= */

/* глобальное «* { color }» не даёт цвету наследоваться, поэтому цвет ставим и детям */
.btn-pill,
.btn-pill *,
.cm-btn_primary,
.cm-btn_primary *,
.rp-btn_primary,
.rp-btn_primary *,
.pp-btn_accent,
.pp-btn_accent *,
.header__signin,
.header__signin *,
.ap-chip_accent,
.ap-chip_accent *,
.disclaimer-btn {
    color: var(--air-ink) !important;
    fill: currentColor;
}
.btn-pill,
.cm-btn_primary,
.rp-btn_primary,
.pp-btn_accent,
.header__signin,
.ap-chip_accent,
.disclaimer-btn {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    font-weight: 700;
    transition: transform 0.35s var(--air-spring), filter 0.2s ease;
}
.btn-pill:hover,
.cm-btn_primary:hover,
.rp-btn_primary:hover,
.pp-btn_accent:hover,
.header__signin:hover {
    filter: brightness(1.08);
    transform: translate3d(0, -2px, 0);
}
.btn-pill:hover { filter: brightness(1.08); }

.cm-btn,
.rp-btn,
.pp-btn {
    transition: transform 0.35s var(--air-spring), border-color 0.2s ease, background-color 0.2s ease;
}
.cm-btn:not(.cm-btn_primary):hover,
.rp-btn:not(.rp-btn_primary):hover,
.pp-btn:not(.pp-btn_accent):hover {
    border-color: var(--air-line-strong);
}

/* размытие под сотнями пилюль и кнопок пересчитывается при каждой прокрутке — заменяем плотным фоном */
header,
.now-watch__slider-next,
.now-watch__slider-prev,
.simple-slider-next,
.simple-slider-prev,
.pill,
.rp-btn,
.rb,
.rb-list_lg .rb,
.carousel-button,
.coming_soon__slider-prev,
.coming_soon__slider-next {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.pill {
    background: rgba(2, 21, 17, 0.82);
    border-color: var(--pill-border);
    color: var(--air-cream);
}
.pill,
.pill * { color: var(--air-cream); }
.pill__star { fill: var(--air-gold); }
.pill__dot { background: var(--air-mint); }

/* ================= 4. Карточки, катакана, появление ================= */

.cm-card,
.glass-card {
    background: linear-gradient(180deg, rgba(8, 46, 36, 0.78), rgba(4, 30, 24, 0.82));
    border: 1px solid var(--air-line);
    border-radius: var(--air-radius);
}

.ab-glyph {
    position: absolute;
    top: -0.28em;
    right: 0.1em;
    z-index: 0;
    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
    font-size: clamp(64px, 9vw, 150px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(61, 220, 151, 0.09);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.ab-glyph_left { right: auto; left: -0.05em; }
.ab-glyph ~ *,
.ab-glyph + * { z-index: 1; }
.ab-credits .ab-glyph { font-size: 92px; top: -14px; }
.pp-portfolio .ab-glyph { font-size: 110px; top: -22px; }
.sr-hero .ab-glyph,
.wp-top .ab-glyph { top: 50%; transform: translate3d(0, -50%, 0); }
.wp-top { position: relative; overflow: hidden; }
.now-watch { overflow: visible; }
.pp-info,
.sr-hero { overflow: hidden; }
.pp-info .ab-glyph { top: -10px; font-size: clamp(70px, 8vw, 130px); }
.now-watch > .ab-glyph { top: -0.42em; left: -0.06em; }

.em-reveal-on .em-pending {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
}
.em-reveal-on .em-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 0.6s var(--air-out) var(--em-delay, 0ms),
        transform 0.75s var(--air-spring) var(--em-delay, 0ms);
}

/* ================= 5. Шапка ================= */

header {
    background: rgba(2, 21, 17, 0.8);
    border-bottom-color: var(--air-line);
}
/* бегущий сигнал под шапкой: один проход при загрузке */
header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--air-mint) 45%, var(--air-gold) 55%, transparent);
    transform: translate3d(-100%, 0, 0);
    animation: air-signal 1.6s var(--air-out) 0.2s both;
    pointer-events: none;
}
@keyframes air-signal {
    to { transform: translate3d(100%, 0, 0); }
}
.header-nav__link.is-active,
.header-nav__link[aria-current="page"] {
    background: rgba(61, 220, 151, 0.14) !important;
}

/* ================= 6. Постеры в каталоге: наклон, блик, пульт ================= */

.release__card-link {
    perspective: 900px;
}
.release__card-body {
    border-radius: var(--air-radius);
    /* карточка не наклоняется (обложка «заваливалась» вбок): приподнимается, а арт внутри плывёт за курсором */
    transform: translate3d(0, var(--air-lift, 0px), 0);
    transition: transform 0.7s var(--air-spring);
    will-change: auto;
    background: var(--air-surface);
}
.release__card.is-tilt .release__card-body {
    transition: transform 0.12s linear;
    will-change: transform;
}
.release__card:hover .release__card-body,
.release__card-link:focus-visible .release__card-body {
    --air-lift: -8px;
}
/* неоновая рамка: тень готова заранее, проявляется прозрачностью */
.release__card-body::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(61, 220, 151, 0.9),
        0 0 0 1px rgba(61, 220, 151, 0.25),
        0 0 28px rgba(61, 220, 151, 0.38),
        0 26px 48px -16px rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: opacity 0.35s var(--air-out);
    pointer-events: none;
}
.release__card:hover .release__card-body::after,
.release__card-link:focus-visible .release__card-body::after {
    opacity: 1;
}
.release__card-body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(2, 21, 17, 0.96) 0%, rgba(2, 21, 17, 0.4) 50%, rgba(2, 21, 17, 0) 100%);
    opacity: 0;
    transition: opacity 0.35s var(--air-out);
    pointer-events: none;
}
.release__card:hover .release__card-body::before { opacity: 1; }
.release__card:hover .release__card-poster,
.release__card-link:focus-visible .release__card-poster {
    filter: none;
    transform: translate3d(var(--air-ix, 0px), var(--air-iy, 0px), 0) scale(1.1);
}
.release__card-poster {
    transition: transform 0.9s var(--air-out);
}
.release__card-effect-content { display: none; }
/* плашки при наведении просто гаснут: раньше они уезжали вниз и, ещё полупрозрачные, светлой полоской торчали из-под пульта */
.release__card-pills { z-index: 2; transition: opacity 0.15s ease; }
.release__card:hover .release__card-pills { opacity: 0; }

/* блик за курсором */
.air-glare {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--air-gx, 50%) var(--air-gy, 0%), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 62%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.release__card.is-tilt .air-glare { opacity: 1; }

/* выезжающий «пульт» снизу постера */
.air-drawer {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 6;
    display: grid;
    gap: 9px;
    padding: 11px 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(61, 220, 151, 0.32);
    background: rgba(2, 21, 17, 0.93);
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 0.25s ease, transform 0.55s var(--air-spring);
    pointer-events: none;
}
.release__card:hover .air-drawer,
.release__card-link:focus-visible .air-drawer {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.air-drawer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.air-drawer__meta,
.air-drawer__meta * {
    font-size: 0.76rem;
    color: var(--air-cream-dim);
}
.air-drawer__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.air-drawer__rating,
.air-drawer__rating * { color: var(--air-gold); font-weight: 700; }
.air-drawer__play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 999px;
    background: var(--accent-gradient);
    font-size: 0.86rem;
    font-weight: 700;
}
/* пульт и кнопка — своим слоем: на сдвигающейся под ними обложке в кнопке проступала тёмная полоса */
.air-drawer,
.air-drawer__play { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.air-drawer__play,
.air-drawer__play * { color: var(--air-ink); }
.air-drawer__play svg { width: 12px; height: 12px; fill: currentColor; }
/* пульс вокруг «Смотреть» — тенью в пределах пульта: раздувавшееся кольцо вылезало за край карточки и низ обрезался */
.release__card:hover .air-drawer__play { animation: air-pulse 1.6s var(--air-out) 0.3s infinite; }
@keyframes air-pulse {
    0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6); }
    100% { box-shadow: 0 0 0 7px rgba(61, 220, 151, 0); }
}
@keyframes air-ring {
    0% { opacity: 0.75; transform: scale(0.94); }
    100% { opacity: 0; transform: scale(1.18); }
}

/* уровни звука в пульте (крутятся только у карточки под курсором) */
.air-vu {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    flex: none;
}
.air-vu i {
    width: 3px;
    height: 100%;
    border-radius: 1px;
    background: var(--air-mint);
    transform-origin: bottom;
    transform: scaleY(0.3);
}
.air-vu i:nth-child(3) { background: var(--air-gold); }
.release__card:hover .air-vu i { animation: air-vu 0.9s var(--air-out) infinite alternate; }
.air-vu i:nth-child(2) { animation-delay: -0.35s !important; }
.air-vu i:nth-child(3) { animation-delay: -0.6s !important; }
.air-vu i:nth-child(4) { animation-delay: -0.2s !important; }
.air-vu i:nth-child(5) { animation-delay: -0.75s !important; }
@keyframes air-vu {
    0% { transform: scaleY(0.25); }
    100% { transform: scaleY(1); }
}

.release__card:hover .release__card-title { color: var(--air-mint); }
.release__card-title { font-family: var(--air-body); font-weight: 700; }

@media (hover: none) {
    .air-drawer, .air-glare { display: none; }
}

/* широкие карточки («Рекомендуем», подборки): подъём и рамка */
.simple-card__link { display: block; }
.simple-card__top-side {
    border-radius: var(--air-radius);
    /* свой слой со скруглённой обрезкой: после наведения по нижнему краю не остаётся светлой полоски */
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
}
.simple-card__top-side::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.8), 0 0 26px rgba(61, 220, 151, 0.3);
    opacity: 0;
    transition: opacity 0.35s var(--air-out);
    pointer-events: none;
    z-index: 5;
}
/* текст карточки не двигаем: при подъёме всей карточки он перерисовывался и рябил вместе с картинкой */
.simple-card:hover .simple-card__top-side::after { opacity: 1; }
.simple-card__image { transition: transform 0.9s var(--air-out); backface-visibility: hidden; }
.simple-card:hover .simple-card__image { transform: scale(1.05); }
.simple-card .pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2, 21, 17, 0.72); }

/* ================= 7. Главный баннер: свет под цвет арта, параллакс, медленный наезд ================= */

.carousel-container {
    border-radius: 26px;
    background: var(--air-surface);
    box-shadow: 0 0 0 1px var(--air-line);
}
/* свечение под баннером в цвет арта (--air-art ставит air.js по картинке) */
.home-corousel {
    position: relative;
}
.home-corousel::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 12%;
    bottom: -6%;
    z-index: -1;
    /* мягкое пятно градиентом, без filter: blur — его пересчитывали каждый кадр */
    background: radial-gradient(closest-side, var(--air-art, rgba(61, 220, 151, 0.5)), transparent);
    transform: scale(1.35);
    opacity: 0.45;
    pointer-events: none;
}
.carousel__item-wrap .carousel__item,
.carousel__item-wrap .preview-overlay {
    transform: translate3d(var(--air-px, 0px), var(--air-py, 0px), 0) scale(1.08);
    transition: transform 1.2s var(--air-out);
}
.carousel__item-wrap.active .carousel__item,
.carousel__item-wrap.active .preview-overlay {
    animation: air-kenburns 16s linear both;
}
@keyframes air-kenburns {
    from { scale: 1; }
    to { scale: 1.06; }
}
.carousel__effect {
    background:
        linear-gradient(15deg, rgba(2, 21, 17, 0.97) 6%, rgba(2, 21, 17, 0) 68%),
        linear-gradient(0deg, rgba(2, 21, 17, 0.6), rgba(2, 21, 17, 0) 40%);
}
/* текст баннера стоит на месте — за курсором двигается только картинка */
.carousel__item-wrap.active .carousel-content > * {
    animation: air-enter 0.9s var(--air-spring) both;
}
.carousel__item-wrap.active .carousel-content > :nth-child(2) { animation-delay: 0.08s; }
.carousel__item-wrap.active .carousel-content > :nth-child(3) { animation-delay: 0.16s; }
.carousel__item-wrap.active .carousel-content > :nth-child(4) { animation-delay: 0.24s; }
.carousel__item-wrap.active .carousel-content > :nth-child(5) { animation-delay: 0.32s; }
@keyframes air-enter {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
}
.release-title {
    font-family: var(--air-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}
/* «ON AIR» над названием */
.carousel-content::before {
    content: "● В ЭФИРЕ AniBaza";
    font: 700 0.72rem/1 var(--air-body);
    letter-spacing: 0.18em;
    color: var(--air-onair);
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 77, 94, 0.45);
    background: rgba(2, 21, 17, 0.72);
}
.carousel-progress {
    background: linear-gradient(90deg, var(--air-mint), var(--air-gold));
}
.carousel-progress-bar { background: rgba(236, 233, 223, 0.14); }

/* ================= 8. Плашки ролей ================= */

.rb-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: middle; }
.rb {
    --rb: var(--air-emerald);
    --rb-ink: #fff;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 2px 10px 2px 3px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--rb) 60%, transparent);
    background: color-mix(in srgb, var(--rb) 15%, #021511);
    box-shadow: none;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    isolation: isolate;
}
.rb,
.rb .rb__label { color: color-mix(in srgb, var(--rb) 28%, #fff); }
.rb .rb__label { font-size: inherit; font-weight: inherit; }
.rb__ic {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--rb);
    font-style: normal;
}
/* рисованная иконка роли (маска) — тёмным по цветной плашке */
.rb__ic::before {
    content: "";
    width: 12px;
    height: 12px;
    background: #021511;
    -webkit-mask: var(--rb-icon) center / contain no-repeat;
    mask: var(--rb-icon) center / contain no-repeat;
}
.rb__emo { display: none; font-size: 11px; line-height: 1; }
.rb_k-custom .rb__ic::before { display: none; }
.rb_k-custom .rb__emo,
.rb:not([class*="rb_k-"]) .rb__emo { display: block; }
.rb:not([class*="rb_k-"]) .rb__ic::before { display: none; }
/* старая разметка (эмодзи в <i>) — тоже читаемая */
.rb > i:not(.rb__ic) { font-style: normal; font-size: 0.86em; }

.rb_k-head_admin { --rb-icon: var(--rbi-crown); }
.rb_k-admin { --rb-icon: var(--rbi-shield); }
.rb_k-team { --rb-icon: var(--rbi-bolt); }
.rb_k-studio_head { --rb-icon: var(--rbi-clapper); }
.rb_k-management { --rb-icon: var(--rbi-compass); }
.rb_k-dubber { --rb-icon: var(--rbi-mic); }
.rb_k-sound { --rb-icon: var(--rbi-sliders); }
.rb_k-roles { --rb-icon: var(--rbi-script); }
.rb_k-dev_team { --rb-icon: var(--rbi-code); }
.rb_k-moderator { --rb-icon: var(--rbi-shieldcheck); }
.rb_k-media { --rb-icon: var(--rbi-megaphone); }
.rb_k-vip { --rb-icon: var(--rbi-diamond); }

/* цвета: у каждой роли свой, без «трёх зелёных овалов» */
.rb_gold { --rb: var(--air-gold); background: linear-gradient(115deg, rgba(242, 194, 91, 0.26), rgba(120, 82, 10, 0.32)); }
.rb_k-admin { --rb: #ffb547; }
.rb_emerald { --rb: var(--air-emerald); }
.rb_mint { --rb: var(--air-cyan); }
.rb_amber { --rb: var(--air-amber); }
.rb_violet { --rb: var(--air-violet); }
.rb_blue { --rb: #6aa8ff; }
.rb_vip { --rb: #f472d0; background: linear-gradient(115deg, rgba(244, 114, 208, 0.22), rgba(79, 209, 232, 0.18)); }

/* бегущий блик у админов и команды (только в шапке профиля и при наведении) */
.rb_gold::after,
.rb_k-team::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.34) 50%, transparent 70%);
    transform: translate3d(-120%, 0, 0);
    pointer-events: none;
}
.rb_k-team::after { background: linear-gradient(100deg, transparent 30%, rgba(61, 220, 151, 0.5) 50%, transparent 70%); }
.rb-list_lg .rb_gold::after,
.rb-list_lg .rb_k-team::after,
.rb:hover::after {
    animation: air-sweep 3.4s var(--air-out) infinite;
}
.rb-list_lg .rb_k-team::after { animation-duration: 2.6s; animation-delay: 0.6s; }
@keyframes air-sweep {
    0% { transform: translate3d(-120%, 0, 0); }
    55%, 100% { transform: translate3d(120%, 0, 0); }
}

/* живой индикатор: эквалайзер у даббера, фейдер у звукаря */
.rb__live {
    position: absolute;
    inset: 3px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.rb__live b {
    width: 2.5px;
    height: 100%;
    border-radius: 1px;
    background: #021511;
    transform-origin: bottom;
    transform: scaleY(0.4);
}
.rb_k-dubber .rb__live b:nth-child(2) { animation-delay: -0.3s; }
.rb_k-dubber .rb__live b:nth-child(3) { animation-delay: -0.55s; }
.rb-list_lg .rb_k-dubber .rb__live,
.rb_k-dubber:hover .rb__live { opacity: 1; }
.rb-list_lg .rb_k-dubber .rb__ic::before,
.rb_k-dubber:hover .rb__ic::before { opacity: 0; }
.rb-list_lg .rb_k-dubber .rb__live b,
.rb_k-dubber:hover .rb__live b { animation: air-vu 0.6s ease-in-out infinite alternate; }

/* фейдер: три дорожки, ручка ездит вверх-вниз */
.rb_k-sound .rb__live { align-items: stretch; gap: 3px; }
.rb_k-sound .rb__live b {
    width: 2px;
    transform: none;
    background: rgba(2, 21, 17, 0.45);
    position: relative;
    overflow: visible;
}
.rb_k-sound .rb__live b::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 40%;
    height: 3px;
    border-radius: 1px;
    background: #021511;
}
.rb-list_lg .rb_k-sound .rb__live,
.rb_k-sound:hover .rb__live { opacity: 1; }
.rb-list_lg .rb_k-sound .rb__ic::before,
.rb_k-sound:hover .rb__ic::before { opacity: 0; }
.rb-list_lg .rb_k-sound .rb__live b::after,
.rb_k-sound:hover .rb__live b::after { animation: air-fader 2.4s var(--air-spring) infinite alternate; }
.rb_k-sound .rb__live b:nth-child(2)::after { animation-delay: -0.8s !important; }
.rb_k-sound .rb__live b:nth-child(3)::after { animation-delay: -1.6s !important; }
@keyframes air-fader {
    0% { transform: translate3d(0, -5px, 0); }
    50% { transform: translate3d(0, 4px, 0); }
    100% { transform: translate3d(0, -1px, 0); }
}

/* крупные — в шапке профиля */
.rb-list_lg { gap: 8px; }
.rb-list_lg .rb {
    min-height: 34px;
    padding: 4px 14px 4px 5px;
    border-radius: 11px;
    font-size: 0.86rem;
    gap: 9px;
}
.rb-list_lg .rb__ic { width: 25px; height: 25px; border-radius: 7px; }
.rb-list_lg .rb__ic::before { width: 15px; height: 15px; }
.rb-list_lg .rb__live { inset: 5px; gap: 2px; }
.rb-list_lg .rb__live b { width: 3px; }
.rb-list_lg .rb_k-sound .rb__live { gap: 4px; }
.rb-list_lg .rb_k-sound .rb__live b { width: 2px; }

/* мелкие — в постах и комментариях: подпись остаётся, кружков без текста больше нет */
.rb-list_compact { gap: 4px; }
.rb-list_compact .rb {
    min-height: 20px;
    padding: 1px 7px 1px 2px;
    border-radius: 6px;
    font-size: 0.68rem;
    gap: 4px;
}
.rb-list_compact .rb__ic { width: 15px; height: 15px; border-radius: 4px; }
.rb-list_compact .rb__ic::before { width: 10px; height: 10px; }
.rb-list_compact .rb__live { inset: 2px; gap: 1px; }
.rb-list_compact .rb__live b { width: 2px; }
.cmt .rb-list { margin-left: 6px; }
.cmt .rb { font-size: 0.68rem; padding: 1px 7px 1px 2px; box-shadow: none; }
/* в чате места мало: только цветной квадрат с иконкой, подпись — во всплывающей подсказке */
.ch-msg__name .rb,
.ch-head__text .rb,
.ch-item .rb { padding: 1px; gap: 0; border-radius: 5px; }
.ch-msg__name .rb__label,
.ch-head__text .rb__label,
.ch-item .rb__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ================= 9. «Студия сейчас»: следующая серия ================= */

.air-next {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 18px 18px 16px;
    border-radius: var(--air-radius);
    border: 1px solid var(--air-line);
    background:
        radial-gradient(140% 120% at 100% 0%, rgba(242, 194, 91, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(8, 46, 36, 0.85), rgba(4, 30, 24, 0.9));
    overflow: hidden;
}
.air-next__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.air-onair {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 77, 94, 0.45);
    background: rgba(255, 77, 94, 0.08);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #ff8b96;
}
.air-onair_idle {
    border-color: var(--air-line-strong);
    background: rgba(61, 220, 151, 0.06);
    color: var(--air-mint);
}
.air-onair i {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--air-onair);
}
.air-onair_idle i { background: var(--air-mint); }
.air-onair i::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 77, 94, 0.7), transparent 70%);
    animation: air-lamp 1.6s ease-in-out infinite;
}
.air-onair_idle i::after { background: radial-gradient(circle, rgba(61, 220, 151, 0.6), transparent 70%); }
@keyframes air-lamp {
    50% { opacity: 0.15; transform: scale(0.7); }
}
.air-next__kicker {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--air-cream-faint);
}
.air-next__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0;
}
.air-next__title b {
    font-family: var(--air-display);
    font-weight: 800;
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    letter-spacing: -0.02em;
}
.air-next__note {
    margin: 0;
    font-size: 0.86rem;
    color: var(--air-cream-dim);
    line-height: 1.45;
}

/* этапы выпуска: запись → сведение → фиксы → выход */
.air-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}
.air-steps li {
    position: relative;
    display: grid;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--air-cream-faint);
}
.air-steps li::before {
    content: "";
    height: 4px;
    border-radius: 2px;
    background: rgba(236, 233, 223, 0.1);
}
.air-steps li.is-done { color: var(--air-cream-dim); }
.air-steps li.is-done::before { background: var(--air-emerald); }
.air-steps li.is-now { color: var(--air-gold); }
.air-steps li.is-now::before {
    background: repeating-linear-gradient(115deg, var(--air-gold) 0 6px, rgba(242, 194, 91, 0.35) 6px 12px);
    background-size: 200% 100%;
    animation: air-stripes 1.1s linear infinite;
}
@keyframes air-stripes {
    to { background-position: -27px 0; }
}

/* дорожки: ячейки заливаются, по записанным бежит перелив */
.air-cells {
    display: grid;
    grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
    gap: 5px;
    max-width: 100%;
}
.air-cell {
    position: relative;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--air-line);
    background: rgba(236, 233, 223, 0.03);
    overflow: hidden;
}
.air-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #5df0b0, #10b981);
    transform: scaleY(0);
    transform-origin: bottom;
}
.air-cell.is-done { border-color: rgba(61, 220, 151, 0.6); }
.air-cell.is-done::before {
    transform: scaleY(1);
    transition: transform 0.7s var(--air-spring) calc(var(--i, 0) * 70ms);
}
.air-next.is-pending .air-cell.is-done::before { transform: scaleY(0); }
.air-cell.is-done::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%);
    transform: translate3d(-110%, 0, 0);
    animation: air-sweep 2.8s var(--air-out) infinite;
    animation-delay: calc(var(--i, 0) * 120ms);
}
.air-cells-note {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--air-cream-dim);
}
.air-cells-note b { color: var(--air-mint); font-weight: 700; }

.air-next .rp-remind {
    justify-self: start;
    width: auto;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border-color: var(--air-line-strong);
    background: rgba(2, 21, 17, 0.6);
    font-weight: 700;
    transition: transform 0.35s var(--air-spring), border-color 0.2s ease, background-color 0.2s ease;
}
.air-next .rp-remind:hover { transform: translate3d(0, -2px, 0); border-color: var(--air-mint); }
.air-next .rp-remind.is-on { background: rgba(61, 220, 151, 0.14); border-color: var(--air-mint); }
.air-next .rp-remind.is-on .ic { animation: air-bell 2.6s var(--air-spring) infinite; transform-origin: 50% 0; }
@keyframes air-bell {
    0%, 70%, 100% { transform: rotate(0); }
    75% { transform: rotate(14deg); }
    82% { transform: rotate(-12deg); }
    89% { transform: rotate(6deg); }
}

/* «Народный приоритет / Заряд студии»: кнопка «⚡ Жду серию!» и шкала из 10 делений (community/scripts/hype.js) */
.air-hype {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(242, 194, 91, 0.28);
    background: linear-gradient(135deg, rgba(242, 194, 91, 0.07), rgba(61, 220, 151, 0.05));
}
.air-hype__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.air-hype__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px 0 14px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(120deg, #f2c25b, #3ddc97);
    color: var(--air-ink);
    font-family: var(--air-display);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 8px 22px -10px rgba(242, 194, 91, 0.75);
    transition: transform 0.45s var(--air-spring), filter 0.2s ease;
}
.air-hype__btn * { color: var(--air-ink); }
/* ореол «нажми меня» — только opacity, пока голоса нет */
.air-hype__btn::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    box-shadow: 0 0 0 2px rgba(242, 194, 91, 0.55), 0 0 22px rgba(242, 194, 91, 0.45);
    opacity: 0;
    animation: air-hype-call 2.4s ease-in-out infinite;
    pointer-events: none;
}
.air-hype__btn:hover { transform: translate3d(0, -2px, 0) scale(1.03); filter: brightness(1.06); }
.air-hype__btn:active { transform: scale(0.92); transition-duration: 0.12s; }
.air-hype__btn.is-sending { transform: scale(0.95); }
.air-hype__btn:focus-visible { outline: 2px solid var(--air-cream); outline-offset: 3px; }
.air-hype__bolt { display: inline-block; font-size: 1.05rem; }
.air-hype__btn:hover .air-hype__bolt { animation: air-hype-bolt 0.6s var(--air-spring); }
.air-hype.is-voted .air-hype__btn {
    background: rgba(61, 220, 151, 0.14);
    box-shadow: inset 0 0 0 1px var(--air-mint);
}
.air-hype.is-voted .air-hype__btn,
.air-hype.is-voted .air-hype__btn * { color: var(--air-mint); }
.air-hype.is-voted .air-hype__btn::after { animation: none; }
.air-hype__btn.is-nope { animation: air-hype-nope 0.4s ease; }
@keyframes air-hype-call {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
@keyframes air-hype-bolt {
    40% { transform: scale(1.35) rotate(-12deg); }
}
@keyframes air-hype-nope {
    25% { transform: translate3d(-4px, 0, 0); }
    75% { transform: translate3d(4px, 0, 0); }
}

/* шкала: 10 делений, как дорожки трекера */
.air-charge {
    position: relative;
    flex: 1 1 180px;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
    min-width: 160px;
}
.air-charge__seg {
    position: relative;
    height: 22px;
    border-radius: 5px;
    border: 1px solid var(--air-line);
    background: rgba(236, 233, 223, 0.03);
    overflow: hidden;
}
.air-charge__seg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #ffd978, #3ddc97);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.6s var(--air-spring) calc(var(--i, 0) * 40ms);
}
.air-charge__seg.is-on { border-color: rgba(242, 194, 91, 0.6); }
.air-charge__seg.is-on::before { transform: scaleY(1); }
/* блик по только что заряженному делению */
.air-charge__seg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.85) 50%, transparent 80%);
    transform: translate3d(-120%, 0, 0);
    opacity: 0;
}
.air-charge__seg.is-new { animation: air-hype-pop 0.55s var(--air-spring); }
.air-charge__seg.is-new::after { animation: air-hype-glint 0.8s var(--air-out) 0.15s; }
@keyframes air-hype-pop {
    40% { transform: scale(1.18, 1.3); }
}
@keyframes air-hype-glint {
    from { transform: translate3d(-120%, 0, 0); opacity: 1; }
    to { transform: translate3d(120%, 0, 0); opacity: 1; }
}
.air-hype__meter,
.air-hype__note,
.air-hype__last {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--air-cream-dim);
}
.air-hype__meter span,
.air-hype__note,
.air-hype__last { color: var(--air-cream-dim); }
.air-hype__meter b { color: var(--air-gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.air-hype__note b { color: var(--air-cream); font-weight: 700; font-variant-numeric: tabular-nums; }
.air-hype__last { color: var(--air-mint); }
.air-hype__last b { color: var(--air-mint); }
.air-hype__signal {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(242, 194, 91, 0.55);
    background: linear-gradient(120deg, rgba(242, 194, 91, 0.16), rgba(61, 220, 151, 0.12));
    color: var(--air-cream);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
    animation: air-hype-signal 0.6s var(--air-spring);
}
@keyframes air-hype-signal {
    from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.97); }
}

/* STUDIO OVERDRIVE: десятка замкнута — виджет вспыхивает, шкала сливается в один импульс */
.air-next::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(242, 194, 91, 0.9), inset 0 0 60px rgba(61, 220, 151, 0.45), 0 0 50px rgba(242, 194, 91, 0.5);
    background: radial-gradient(80% 60% at 50% 60%, rgba(242, 194, 91, 0.22), transparent 70%);
    opacity: 0;
    pointer-events: none;
}
.air-next.is-overdrive::after { animation: air-overdrive 1.3s var(--air-out); }
.air-next.is-overdrive .air-charge { gap: 0; transition: gap 0.25s var(--air-out); }
.air-next.is-overdrive .air-charge__seg { border-radius: 0; border-color: transparent; }
.air-next.is-overdrive .air-charge__seg:first-child { border-radius: 6px 0 0 6px; }
.air-next.is-overdrive .air-charge__seg:last-child { border-radius: 0 6px 6px 0; }
.air-next.is-overdrive .air-charge__seg::after {
    opacity: 1;
    animation: air-hype-glint 0.9s var(--air-out) calc(var(--i, 0) * 30ms);
}
.air-next.is-overdrive .air-charge { animation: air-hype-pulse 1.1s var(--air-spring); }
@keyframes air-overdrive {
    0% { opacity: 0; }
    15% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes air-hype-pulse {
    30% { transform: scale(1.04, 1.25); }
}
/* искры */
.air-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}
.air-burst i {
    position: absolute;
    left: -3px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5df0b0;
    box-shadow: 0 0 10px #3ddc97;
    opacity: 0;
    animation: air-spark 1s var(--air-out) var(--d, 0ms) forwards;
}
.air-burst i.is-gold { background: #ffd978; box-shadow: 0 0 10px #f2c25b; }
@keyframes air-spark {
    0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(0.2); }
}

/* Команда тайтла (все серии + каст трекера) и плашки KinoPub / Лицензия / гео-замок */
.air-team { display: grid; gap: 12px; }
.air-team__group {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.air-team__label {
    padding-top: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--air-cream-dim);
}
.air-team__group_dub .air-team__label { color: var(--air-mint); }
.air-team__group_sound .air-team__label { color: var(--air-amber, #f59e0b); }
.air-team__group_roles .air-team__label { color: var(--air-violet, #a78bfa); }
.air-team__people { display: flex; flex-wrap: wrap; gap: 8px; }
.air-team__chip small {
    margin-left: 2px;
    font-size: 0.7rem;
    color: var(--air-cream-dim);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    .air-team__group { grid-template-columns: 1fr; gap: 6px; }
    .air-team__label { padding-top: 0; }
}

.rp-meta > .rp-flag { margin-left: 12px; }
.rp-meta > .rp-flag::before { display: none !important; }
.rp-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}
.rp-flag_kp {
    color: var(--air-ink) !important;
    background: linear-gradient(120deg, #f2c25b, #ffd978);
}
.rp-flag_lic {
    color: #ffb4bd !important;
    border: 1px solid rgba(255, 77, 94, 0.55);
    background: rgba(255, 77, 94, 0.12);
}
.rp-geo {
    margin: 4px 0 14px;
    max-width: 62ch;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 77, 94, 0.45);
    background: rgba(40, 6, 12, 0.55);
    color: #ffd7dc;
    font-size: 0.86rem;
    line-height: 1.5;
}
.rp-btn_locked,
.rp-btn_locked * {
    color: var(--air-cream-dim) !important;
    cursor: not-allowed;
}
.rp-btn_locked {
    opacity: 0.85;
    border: 1px dashed rgba(236, 233, 223, 0.3) !important;
    background: rgba(2, 21, 17, 0.6) !important;
}

/* ================= Переходы между страницами и прокрутка-монтаж ================= */
/* Браузер сам снимает старую и новую страницу (core/scripts/transitions.js даёт имена постеру).
   Двигаются только снимки: transform и opacity, ~0.5 с. Шапка стоит на месте. */
/* в режиме «Оптимизация» transitions.js пропускает переход (skipTransition) */
@view-transition { navigation: auto; }
body > header { view-transition-name: air-header; }
::view-transition-group(air-header) { animation: none; }
::view-transition-old(root) { animation: air-vt-out 0.32s var(--air-out) both; }
::view-transition-new(root) { animation: air-vt-in 0.52s var(--air-spring) both; }
/* постер карточки перелетает в шапку тайтла, а страница вокруг только проявляется */
::view-transition-group(air-poster) {
    animation-duration: 0.55s;
    animation-timing-function: var(--air-spring);
    z-index: 3;
}
::view-transition-old(air-poster),
::view-transition-new(air-poster) { height: 100%; object-fit: cover; }
html.air-vt-morph::view-transition-old(root) { animation: air-vt-fade 0.25s ease both; }
html.air-vt-morph::view-transition-new(root) { animation: air-vt-fade 0.45s ease reverse both; }
@keyframes air-vt-out { to { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.985); } }
@keyframes air-vt-in { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.99); } }
@keyframes air-vt-fade { to { opacity: 0; } }
/* «смена кадра»: изумрудная полоса сигнала проходит по экрану один раз */
html.air-vt::after {
    content: "";
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 2147483000;
    width: 34vw;
    background: linear-gradient(90deg, transparent, rgba(61, 220, 151, 0.18) 40%, rgba(242, 194, 91, 0.32) 50%, rgba(61, 220, 151, 0.18) 60%, transparent);
    pointer-events: none;
    transform: translate3d(-40vw, 0, 0) skewX(-12deg);
    animation: air-vt-sweep 0.6s var(--air-out) both;
}
html.air-vt-morph::after { display: none; }
@keyframes air-vt-sweep { to { transform: translate3d(110vw, 0, 0) skewX(-12deg); } }

/* прокрутка-монтаж: считает браузер по скроллу, без JavaScript; там, где не умеет, — статично */
@supports (animation-timeline: view()) {
    html[data-motion="full"] .rp-hero__backdrop {
        animation: air-scroll-sink linear both;
        animation-timeline: scroll(root);
        animation-range: 0 640px;
    }
    /* заголовки разделов не «въезжают» по скроллу: на полпути они стояли с разным отступом от карточек */
    html[data-motion="full"] .air-team__group,
    html[data-motion="full"] .lstats__tile {
        animation: air-scroll-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 22%;
    }
}
@keyframes air-scroll-sink { to { transform: translate3d(0, 110px, 0) scale(1.08); opacity: 0.55; } }
@keyframes air-scroll-rise { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.96); } }

/* ================= Пульт релизов (community/studio_releases.html) ================= */
.sr-page { display: grid; gap: 18px; }
.sr-head {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid var(--air-line);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(242, 194, 91, 0.1), transparent 55%),
        linear-gradient(180deg, rgba(8, 46, 36, 0.85), rgba(4, 30, 24, 0.9));
    overflow: hidden;
}
.sr-head__text { display: grid; gap: 8px; justify-items: start; max-width: 70ch; }
.sr-head__text .section__title { margin: 0; }
.sr-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sr-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sr-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--air-line);
    background: rgba(2, 21, 17, 0.6);
    color: var(--air-cream) !important;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.35s var(--air-spring), border-color 0.2s ease, background-color 0.2s ease;
}
.sr-filter span { color: var(--air-cream); }
.sr-filter b { color: var(--air-cream-dim); font-variant-numeric: tabular-nums; }
.sr-filter:hover { transform: translate3d(0, -2px, 0); border-color: var(--air-mint); }
.sr-filter.is-active { background: rgba(61, 220, 151, 0.16); border-color: var(--air-mint); }
.sr-filter.is-active b { color: var(--air-mint); }
.sr-filter_lic.is-active { background: rgba(255, 77, 94, 0.14); border-color: rgba(255, 77, 94, 0.7); }
.sr-filter_kp.is-active { background: rgba(242, 194, 91, 0.16); border-color: var(--air-gold); }
.sr-filters__note { margin-left: auto; font-size: 0.82rem; color: var(--air-cream-dim); }
.sr-filters__note b { color: var(--air-mint); }
.sr-list { padding: 16px; display: grid; gap: 12px; }
.sr-search .cm-input { width: 100%; }
.sr-rows { display: grid; gap: 8px; }
.sr-row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px !important;
    border-radius: 14px;
    border: 1px solid var(--air-line);
    background: rgba(2, 21, 17, 0.45);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.sr-row:hover { border-color: rgba(61, 220, 151, 0.45); background: rgba(8, 46, 36, 0.6); }
.sr-row.is-draft { border-style: dashed; }
.sr-row.is-draft .sr-row__poster img { opacity: 0.55; }
.sr-row__poster { width: 52px !important; height: 74px !important; border-radius: 8px !important; }
.sr-row__body { display: grid; gap: 6px; min-width: 0; }
.sr-row__title {
    color: var(--air-cream) !important;
    font-family: var(--air-display);
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sr-row__title:hover { color: var(--air-mint) !important; }
.sr-row__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.78rem; }
.sr-row__meta span,
.sr-row__meta a { color: var(--air-cream-dim); }
.sr-status { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--air-line); }
.sr-status.is-live { color: #ffb4bd !important; border-color: rgba(255, 77, 94, 0.5); }
.sr-tag { padding: 1px 8px; border-radius: 6px; background: rgba(236, 233, 223, 0.06); text-decoration: none; }
.sr-tag_tracker { color: var(--air-mint) !important; background: rgba(61, 220, 151, 0.1); }
.sr-tag_warn { color: var(--air-gold) !important; background: rgba(242, 194, 91, 0.1); }
.sr-row__flags { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-flag { position: relative; cursor: pointer; }
.sr-flag input { position: absolute; opacity: 0; pointer-events: none; }
.sr-flag span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid var(--air-line);
    color: var(--air-cream-dim);
    font-size: 0.76rem;
    font-weight: 700;
    transition: transform 0.3s var(--air-spring), background-color 0.2s ease, border-color 0.2s ease;
}
.sr-flag:hover span { transform: translate3d(0, -1px, 0); border-color: rgba(236, 233, 223, 0.35); }
.sr-flag input:focus-visible + span { outline: 2px solid var(--air-mint); outline-offset: 2px; }
.sr-flag input:checked + span { color: var(--air-ink); }
.sr-flag_draft input:checked + span { background: var(--air-cream-dim); border-color: transparent; }
.sr-flag_lic input:checked + span { background: #ff8a97; border-color: transparent; }
.sr-flag_kp input:checked + span { background: linear-gradient(120deg, #f2c25b, #ffd978); border-color: transparent; }
.sr-flag input:disabled + span { opacity: 0.6; }
.sr-row__actions { display: flex; gap: 6px; }
.sr-add { scroll-margin-top: 90px; }
.sr-add__flags { display: flex; gap: 16px; flex-wrap: wrap; }
.sr-empty { padding: 24px; text-align: center; }
@media (max-width: 900px) {
    .sr-row { grid-template-columns: 52px minmax(0, 1fr); }
    .sr-row__flags, .sr-row__actions { grid-column: 1 / -1; }
}

/* ================= 10. Страница тайтла: асимметричное bento ================= */

.air-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(12px, 1.2vw, 20px);
    align-items: stretch;
}
.air-tile {
    position: relative;
    min-width: 0;
    padding: clamp(18px, 1.6vw, 26px);
    border-radius: 22px;
    border: 1px solid var(--air-line);
    background: linear-gradient(180deg, rgba(8, 46, 36, 0.72), rgba(4, 30, 24, 0.78));
    isolation: isolate;
}
/* подсветка граней там, где курсор (--air-mx/--air-my ставит air.js) */
.air-tile::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(320px circle at var(--air-mx, 50%) var(--air-my, 0%), rgba(61, 220, 151, 0.95), rgba(242, 194, 91, 0.45) 35%, transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.air-tile:hover::before { opacity: 1; }
/* мягкий свет внутри плитки за курсором */
.air-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--air-mx, 50%) var(--air-my, 0%), rgba(61, 220, 151, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.air-tile:hover::after { opacity: 1; }
.air-tile__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--air-cream-faint);
}
.air-tile__label::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--air-mint);
}
.air-tile_desc { grid-column: span 7; }
.air-tile_next { grid-column: span 5; padding: 0; border: 0; background: none; }
.air-tile_next::before,
.air-tile_next::after { display: none; }
.air-tile_next .air-next { height: 100%; }
.air-tile_facts { grid-column: span 5; }
.air-tile_crew { grid-column: span 7; }
.air-tile_stats { grid-column: span 12; }
.air-tile_team { grid-column: span 12; }
@media (max-width: 1100px) {
    .air-tile_desc, .air-tile_next, .air-tile_facts, .air-tile_crew { grid-column: span 12; }
}

.air-tile_desc .rp-desc {
    margin: 0;
    font-size: clamp(16px, 1.05vw, 18px);
    line-height: 1.6;
    color: rgba(236, 233, 223, 0.92);
    max-width: 68ch;
}
.air-tile_desc .rp-desc__label { display: none; }
.air-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.air-genre {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--air-line-strong);
    background: rgba(61, 220, 151, 0.06);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--air-cream);
}

.air-tile_facts .rp-info__row { padding: 11px 0; }
.air-tile_facts .rp-info dt,
.air-tile_facts .rp-info dd { font-size: 0.95rem; }
.air-tile_facts .rp-info__row:last-child { border-bottom: 0; }

/* «Над серией работали» внутри плитки */
.air-tile_crew .ab-credits {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.air-tile_crew .ab-credits[hidden] + .air-crew-empty { display: block; }
.air-crew-empty { display: none; margin: 0; color: var(--air-cream-dim); }

/* ================= 11. «Герои»: объёмные карточки с именем поверх арта ================= */

.heroes {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
    gap: clamp(12px, 1.2vw, 20px);
}
.hero-card {
    perspective: 900px;
}
.hero-card__img {
    border-radius: 18px;
    aspect-ratio: 3 / 4.2;
    background: linear-gradient(160deg, #0a3a2d, #021511);
    transform: translate3d(0, var(--air-lift, 0px), 0);
    transition: transform 0.7s var(--air-spring);
    isolation: isolate;
}
.hero-card.is-tilt .hero-card__img { transition: transform 0.12s linear; }
.hero-card:hover .hero-card__img { --air-lift: -6px; }
.hero-card__img img { transition: transform 0.9s var(--air-out); }
.hero-card:hover .hero-card__img img { transform: translate3d(var(--air-ix, 0px), var(--air-iy, 0px), 0) scale(1.1); }
/* изумрудная маска снизу, на ней — имя */
.hero-card__img::after {
    inset: 38% 0 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(2, 21, 17, 0.98) 8%, rgba(0, 62, 51, 0.65) 45%, rgba(0, 62, 51, 0) 100%);
}
.hero-card__img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.85), 0 0 26px rgba(61, 220, 151, 0.35);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.hero-card:hover .hero-card__img::before { opacity: 1; }
.hero-card .air-glare { z-index: 2; }
.hero-card.is-tilt .air-glare { opacity: 1; }
.hero-card__cap {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    margin: 0;
    gap: 6px;
    transform: translate3d(0, 0, 30px);
}
.hero-card__role {
    justify-self: start;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--air-gold);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--air-ink);
}
.hero-card__name {
    font-family: var(--air-display);
    font-size: clamp(0.95rem, 1.05vw, 1.15rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    white-space: normal;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.hero-card__actor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    max-width: 100%;
    padding: 3px 9px 3px 4px;
    border-radius: 999px;
    border: 1px solid rgba(79, 209, 232, 0.4);
    background: rgba(2, 21, 17, 0.8);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--air-cream);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-card__actor .rb__ic { width: 16px; height: 16px; background: var(--air-cyan); border-radius: 50%; }
.hero-card__actor .rb__ic::before { width: 10px; height: 10px; }
.hero-card__actor_soon { border-color: var(--air-line); color: var(--air-cream-faint); }
a.hero-card__actor:hover { color: #fff; border-color: var(--air-cyan); }
.hero-card:hover .hero-card__actor .rb__live { opacity: 1; }
.hero-card:hover .hero-card__actor .rb__ic::before { opacity: 0; }
.hero-card:hover .hero-card__actor .rb__live b { animation: air-vu 0.6s ease-in-out infinite alternate; }
.hero-card__actor .rb__live { inset: 4px; gap: 1.5px; }
.hero-card__actor .rb__live b { width: 2px; }
.hero-card__actor .rb__live b:nth-child(2) { animation-delay: -0.3s !important; }
.hero-card__actor .rb__live b:nth-child(3) { animation-delay: -0.55s !important; }

/* ================= 12. Профиль ================= */

.pp-name { font-weight: 800; }
.pp-badges { margin-top: 12px; }
.pp-chart__bar {
    transform-origin: bottom;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, rgba(61, 220, 151, 0.62), rgba(61, 220, 151, 0.16));
    box-shadow: inset 0 1px 0 rgba(236, 233, 223, 0.35);
}
.pp-chart__col.is-today .pp-chart__bar { background: linear-gradient(180deg, #5df0b0, #10b981); }
/* столбики поднимаются как уровни на пульте, по очереди (карточку прячет и показывает reveal.js) */
.em-reveal-on .em-pending .pp-chart__bar { transform: scaleY(0.02); }
.pp-chart .pp-chart__bar {
    transition: transform 0.9s var(--air-spring) calc(var(--i, 0) * 70ms);
}
.pp-chart__value {
    font-variant-numeric: tabular-nums;
}
.pp-chart__col { --peak: 0; }
/* «пиковая» засечка над столбиком */
.pp-chart__bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 2px;
    border-radius: 1px;
    background: var(--air-gold);
    opacity: 0.85;
}
.pp-box,
.pp-lists,
.pp-right .cm-card,
.pp-left .cm-card {
    padding: 18px 20px;
}
.pp-people {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
    gap: 10px !important;
}
.pp-person { transition: transform 0.35s var(--air-spring); }
.pp-person:hover { transform: translate3d(0, -3px, 0); }
.mini-rel {
    border-radius: 12px;
    transition: background-color 0.2s ease, transform 0.35s var(--air-spring);
}
.mini-rel:hover { background: rgba(61, 220, 151, 0.07); transform: translate3d(4px, 0, 0); }
.pp-list b { font-variant-numeric: tabular-nums; }

/* ================= 13. Плеер: задник до старта, подсветка, пульт ================= */

.ap { --ap-accent: var(--air-mint); }
/* без z-index: обложка лежит над видео, а спиннер, кнопка и панель (они ниже в разметке) — над ней */
.ap-cover {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: #021511;
    transition: opacity 0.5s ease;
}
.ap.is-started .ap-cover { opacity: 0; }
.ap-cover__bg {
    position: absolute;
    inset: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    object-fit: cover;
    filter: blur(34px) saturate(1.35) brightness(0.75);
    transform: scale(1.05);
}
.ap-cover__poster {
    position: absolute;
    top: 7%;
    bottom: 7%;
    left: 50%;
    height: 86%;
    width: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 12px;
    transform: translate3d(-50%, 0, 0);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(236, 233, 223, 0.12);
}
.ap-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(2, 21, 17, 0) 40%, rgba(2, 21, 17, 0.7) 100%);
}
/* большая кнопка: мятная, с пульсирующими кольцами, пока видео не запущено */
.ap .ap-big {
    background: var(--accent-gradient);
    color: var(--air-ink);
}
/* ▶ по центру круга: у значка своё смещение вправо в рисунке, лишний отступ сдвигал его ещё на 4px */
.ap .ap-big svg { color: var(--air-ink); fill: var(--air-ink); margin-left: 0; translate: -1px 0; }
.ap:not(.is-started) .ap-big::before,
.ap:not(.is-started) .ap-big::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--air-mint);
    animation: air-ring 2s var(--air-out) infinite;
    pointer-events: none;
}
.ap:not(.is-started) .ap-big::after { animation-delay: 1s; }

/* Ambilight: свечение вокруг плеера в цвет кадра (--air-amb-* ставит air.js) */
.air-ambi {
    position: relative;
    isolation: isolate;
}
.air-ambi::before {
    content: "";
    position: absolute;
    inset: -7% -4%;
    z-index: -1;
    border-radius: 40px;
    background:
        radial-gradient(60% 70% at 0% 50%, var(--air-amb-l, rgba(61, 220, 151, 0.55)), transparent 70%),
        radial-gradient(60% 70% at 100% 50%, var(--air-amb-r, rgba(242, 194, 91, 0.45)), transparent 70%),
        radial-gradient(70% 60% at 50% 0%, var(--air-amb-t, rgba(61, 220, 151, 0.35)), transparent 70%),
        radial-gradient(70% 60% at 50% 100%, var(--air-amb-b, rgba(0, 62, 51, 0.6)), transparent 70%);
    /* без filter: blur — цвета меняются вместе с кадром, и размытие пересчитывалось бы каждый раз; градиенты и так мягкие */
    opacity: 1;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.air-ambi.is-off::before { opacity: 0; }
.wp-main .ap,
.wp-frame {
    box-shadow: 0 0 0 1px rgba(236, 233, 223, 0.08);
}
/* меню и «продолжить» поверх видео: без размытия, чтобы не ронять кадры при Anime4K */
.ap-resume,
.ap-menu {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(2, 21, 17, 0.94) !important;
}

/* пульт под плеером: название, соседние серии, «Поделиться» и состав — одной панелью */
.wp-console {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--air-line);
    background: linear-gradient(180deg, rgba(8, 46, 36, 0.8), rgba(4, 30, 24, 0.86));
}
.wp-console .wp-info {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px 16px;
}
@media (max-width: 760px) {
    .wp-console .wp-info { grid-template-columns: minmax(0, 1fr); }
}
.wp-console .wp-title { margin: 0; }
.wp-console .wp-title span { font-family: var(--air-body); font-weight: 600; color: var(--air-cream-dim); }
.wp-console .wp-title b { font-family: var(--air-display); }
.wp-console .wp-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.wp-console .ab-credits {
    margin: 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--air-line);
    border-radius: 0;
    background: none;
}
.wp-console .ab-credits .ab-glyph { display: none; }
.wp-console .ab-credits[hidden] { display: none; }
.wp-src.is-active,
.wp-src.is-active * { color: var(--air-ink) !important; }
.wp-src.is-active { background: var(--accent-gradient) !important; }

/* ================= 14. Переключатель атмосферы ================= */

.atmo {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 900;
}
.atmo__btn {
    list-style: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--air-line-strong);
    background: rgba(2, 21, 17, 0.92);
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform 0.35s var(--air-spring);
}
.atmo__btn::-webkit-details-marker { display: none; }
.atmo__btn:hover { transform: translate3d(0, -3px, 0) rotate(-8deg); }
.atmo__menu {
    position: absolute;
    left: 0;
    bottom: 54px;
    display: grid;
    gap: 4px;
    min-width: 230px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid var(--air-line-strong);
    background: rgba(2, 21, 17, 0.97);
    animation: air-pop 0.35s var(--air-spring) both;
}
@keyframes air-pop {
    from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.96); }
}
.atmo__item {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--air-cream);
    text-align: left;
    cursor: pointer;
}
.atmo__item:hover { background: rgba(61, 220, 151, 0.1); }
.atmo__item.is-active { border-color: rgba(61, 220, 151, 0.5); background: rgba(61, 220, 151, 0.14); }
.atmo__note { padding: 4px 6px 0; font-size: 0.72rem; color: var(--air-cream-faint); }
@media (max-width: 640px) {
    .atmo { left: 10px; bottom: 76px; }
    .atmo__btn { width: 40px; height: 40px; font-size: 0.95rem; }
}

/* размытый задник уже нарисован в canvas (air.js → initPreblur) */
.is-preblurred {
    filter: none !important;
}
/* шапка: плотный фон вместо backdrop-filter — под ней всё время двигаются частицы и баннер */
header {
    background: rgba(2, 21, 17, 0.94);
}

#particles {
    opacity: 1;
    transition: opacity 0.6s var(--air-out);
}
#particles.is-paused,
#particles.is-off {
    opacity: 0;
}

/* ================= 15. Паузы: вне экрана, во время видео, «уменьшить движение» ================= */

.air-idle,
.air-idle *,
.air-idle *::before,
.air-idle *::after,
html.air-playing body *:not(.ap):not(.ap *),
html.air-playing body *::before,
html.air-playing body *::after,
html.air-hidden body *,
html.air-hidden body *::before,
html.air-hidden body *::after {
    animation-play-state: paused !important;
}
/* во время просмотра снимаем и зерно: лишний полноэкранный слой поверх видео */
html.air-playing body::after { display: none; }

/* «Оптимизация» в шапке (или «уменьшить движение» в системе, или слабое устройство — см. base.html):
   никаких анимаций, частиц, зерна и тяжёлых размытий; цвета при наведении остаются. */
html[data-motion="lite"] *,
html[data-motion="lite"] *::before,
html[data-motion="lite"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
}
html[data-motion="lite"] *,
html[data-motion="lite"] *::before,
html[data-motion="lite"] *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-motion="lite"] .em-reveal-on .em-pending { opacity: 1; transform: none; }
html[data-motion="lite"] body::after { display: none; }
html[data-motion="lite"] #particles { display: none; }

/* ================= 18. Главная: «Студия сейчас в работе» и «Недавно добавлено» ================= */
/* ab_movies/includes/home_studio.html; данные — community/home_blocks.py */

.air-work,
.air-recent {
    margin-bottom: clamp(28px, 4vw, 48px);
}
.air-work .section__title {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.air-work__count {
    color: var(--air-cream-faint);
    font-size: 0.85rem;
}
/* лента вбок: свой скролл браузера, без JS */
.air-scroll {
    display: grid;
    grid-auto-flow: column;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    padding: 4px 2px 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--air-line-strong) transparent;
}
.air-scroll > * { scroll-snap-align: start; }
.air-scroll:focus-visible { outline: 2px solid var(--air-mint); outline-offset: 4px; border-radius: 12px; }

.air-work .air-scroll { grid-auto-columns: minmax(300px, 380px); }
.air-work__card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border-radius: var(--air-radius);
    border: 1px solid var(--air-line-strong);
    background: linear-gradient(160deg, var(--air-surface-2), var(--air-surface));
}
.air-work__poster {
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--air-bg-2);
}
.air-work__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.air-work__body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.air-work__title {
    color: var(--air-cream);
    font-family: var(--air-display);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.air-work__title:hover { color: var(--air-mint); }
.air-work__ep { margin: 0; color: var(--air-cream-dim); font-size: 0.82rem; }
.air-work__ep b { color: var(--air-gold); }
/* в карточке этап уже написан словом — оставляем только полоски этапов */
.air-steps_sm { gap: 4px; }
.air-steps_sm li { font-size: 0; line-height: 0; gap: 0; }
.air-work .air-cell { height: 12px; border-radius: 4px; }
.air-work .air-cell::after { display: none; }
.air-work .air-cell.is-done::before { transition: none; }
.air-hype_sm { padding: 8px; gap: 6px; border-radius: 12px; }
.air-hype_sm .air-hype__row { display: grid; gap: 8px; }
.air-hype_sm .air-hype__btn { justify-content: center; min-height: 36px; padding: 0 12px 0 10px; font-size: 0.76rem; white-space: nowrap; }
.air-hype_sm .air-charge { min-width: 0; gap: 3px; }
.air-hype_sm .air-charge__seg { height: 14px; border-radius: 3px; }
.air-hype_sm .air-hype__note { font-size: 0.72rem; line-height: 1.35; }

/* «Недавно добавлено»: кадры 16:9, название и время поверх кадра внизу, номер серии сверху.
   5 в ряд на широком экране, 4 — на среднем, 3 — на узком */
.air-recent .air-scroll { --n: 5; grid-auto-columns: calc((100% - (var(--n) - 1) * 14px) / var(--n)); }
@media (max-width: 1500px) { .air-recent .air-scroll { --n: 4; } }
@media (max-width: 1100px) { .air-recent .air-scroll { --n: 3; } }
.air-recent__card { display: block; color: var(--air-cream); }
.air-recent__frame {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--air-line);
    background: var(--air-bg-2);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.air-recent__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* затемнение снизу под подписью */
.air-recent__frame::after {
    content: "";
    position: absolute;
    inset: 38% 0 0;
    background: linear-gradient(0deg, rgba(2, 21, 17, 0.95) 0%, rgba(2, 21, 17, 0.6) 55%, rgba(2, 21, 17, 0) 100%);
    pointer-events: none;
}
/* кадр не увеличиваем: маленькое превью при масштабе мылилось — подсвечиваем рамку */
.air-recent__card:hover .air-recent__frame { border-color: rgba(61, 220, 151, 0.7); box-shadow: 0 0 0 1px rgba(61, 220, 151, 0.35), 0 10px 26px -12px rgba(61, 220, 151, 0.6); }
.air-recent__num {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(2, 21, 17, 0.86);
    border: 1px solid rgba(61, 220, 151, 0.35);
    color: var(--air-mint);
    font-family: var(--air-display);
    font-size: 0.74rem;
    font-weight: 700;
}
.air-recent__info {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 1;
    display: grid;
    gap: 2px;
}
.air-recent__title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}
.air-recent__card:hover .air-recent__title { color: var(--air-mint); }
.air-recent__when { color: var(--air-cream-dim); font-size: 0.76rem; }
.air-recent__play {
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: var(--accent-gradient);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.25s var(--air-out);
}
.air-recent__play svg { width: 18px; height: 18px; fill: var(--air-ink); }
.air-recent__card:hover .air-recent__play { opacity: 1; transform: none; }
/* листание мышью (air.js initDragScroll): пока тянут — без прилипания и без выделения */
@media (pointer: fine) { .air-scroll { cursor: grab; } }
.air-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.air-scroll.is-dragging * { pointer-events: none; }
.air-work__team-only { justify-self: start; width: max-content; }
.air-work__team-only[hidden] { display: none; }

@media (max-width: 600px) {
    .air-work__count { display: none; }
    .air-work .air-scroll { grid-auto-columns: 86%; }
    .air-recent .air-scroll { --n: 1.4; }
}

/* ================= 19. «Управлять ролями / плашками» в профиле ================= */
/* Раньше меню всплывало поверх карточки: его обрезал край карточки, а строки профиля просвечивали сквозь него.
   Теперь панель раскрывается внутри карточки, плотным блоком, галочки в две колонки. */
.rm-panel[open] { width: 100%; }
.rm-panel .rm-panel__menu {
    position: static;
    min-width: 0;
    margin-top: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--air-line-strong);
    background: var(--air-surface-2);
    box-shadow: none;
}
.rm-panel .rm-item {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--air-cream);
}
.rm-panel .rm-item:has(input:checked) {
    border-color: var(--air-line-strong);
    background: rgba(61, 220, 151, 0.08);
}
.rm-panel .rm-item input { accent-color: var(--air-mint); }
.rm-panel .rm-panel__sync,
.rm-panel .rm-panel__note { grid-column: 1 / -1; }
.rm-panel .rm-panel__note { color: var(--air-cream-faint); }

/* ================= 20. «Оптимизация» в шапке ================= */
/* кнопка — core/includes/header.html, режим — base.html и core/scripts/motion-mode.js */

.air-optim {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 8px 0 12px;
    border-radius: 999px;
    border: 1px solid var(--air-line-strong);
    background: rgba(2, 21, 17, 0.7);
    color: var(--air-cream);
    font: 600 0.82rem/1 var(--air-body);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.air-optim:hover { border-color: var(--air-mint); background: rgba(61, 220, 151, 0.08); }
.air-optim__icon { width: 16px; height: 16px; fill: var(--air-gold); transition: transform 0.4s var(--air-spring); }
.air-optim:hover .air-optim__icon { transform: rotate(-14deg) scale(1.2); }
.air-optim__switch {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: rgba(236, 233, 223, 0.16);
    transition: background-color 0.25s ease;
}
.air-optim__switch i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--air-cream);
    transition: transform 0.3s var(--air-spring);
}
.air-optim.is-on { border-color: var(--air-mint); }
.air-optim.is-on .air-optim__switch { background: var(--air-mint); }
.air-optim.is-on .air-optim__switch i { transform: translate3d(14px, 0, 0); background: var(--air-ink); }
/* шапка в три колонки: слева меню значками и поиск, лого строго по центру, справа настройки и профиль.
   Колонки по краям одинаковой ширины (1fr), поэтому лого не сползает при разной длине краёв */
.header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 2vw, 32px); }
.header__left { flex: initial; min-width: 0; gap: clamp(10px, 1.2vw, 18px); justify-self: start; width: 100%; }
.header__center { justify-self: center; }
.header__center .header-logo { width: clamp(118px, 9vw, 150px); }
.header__right { min-width: 0; justify-self: end; }
.header-nav { flex: none; gap: 4px; }
.header-nav__link { font-size: 0 !important; gap: 0 !important; padding: 9px 11px !important; }
.header-nav__icon { margin: 0 !important; }
.header__left > .search { flex: 0 1 380px; width: auto; min-width: 150px; }
@media (max-width: 1600px) {
    .air-optim__text { display: none; }
    .air-optim { padding: 0 6px 0 10px; gap: 6px; }
}
@media (max-width: 1460px) {
    .user-menu__name { display: none; }
}
@media (max-width: 1180px) {
    .header__actions .attention__button,
    .header__actions .sound-btn { display: none; }
    .header__left > .search { min-width: 120px; }
}
/* «Настройка параллакса»: кнопка с ползунками рядом с «Оптимизацией» и панель под ней */
.air-fx { position: relative; flex: none; }
.air-fx__btn {
    list-style: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--air-line-strong);
    background: rgba(2, 21, 17, 0.7);
    color: var(--air-cream);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.air-fx__btn::-webkit-details-marker { display: none; }
.air-fx__btn svg { width: 18px; height: 18px; transition: transform 0.4s var(--air-spring); }
.air-fx__btn:hover,
.air-fx[open] .air-fx__btn { border-color: var(--air-mint); background: rgba(61, 220, 151, 0.08); }
.air-fx[open] .air-fx__btn svg { transform: rotate(90deg); }
.air-fx__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 1000;
    display: grid;
    gap: 12px;
    width: 300px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--air-line-strong);
    background: rgba(2, 21, 17, 0.98);
    box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.8);
    animation: air-pop 0.3s var(--air-spring) both;
}
.air-fx__title { margin: 0; font: 700 0.95rem/1.2 var(--air-display); color: var(--air-cream); }
.air-fx__row { display: grid; grid-template-columns: auto 1fr 44px; align-items: center; gap: 10px; margin: 0; color: var(--air-cream-dim); font-size: 0.85rem; }
.air-fx__row input { accent-color: var(--air-mint); width: 100%; }
.air-fx__row output { text-align: right; color: var(--air-mint); font-variant-numeric: tabular-nums; font-weight: 700; }
.air-fx__check { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--air-cream); font-size: 0.86rem; cursor: pointer; }
.air-fx__check input { width: 18px; height: 18px; accent-color: var(--air-mint); }
.air-fx__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--air-line); }
.air-fx__foot small { color: var(--air-cream-faint); font-size: 0.72rem; line-height: 1.35; }
.air-fx__reset { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--air-line-strong); background: transparent; color: var(--air-cream); font-size: 0.78rem; cursor: pointer; }
.air-fx__reset:hover { border-color: var(--air-mint); }
.air-fx.is-lite .air-fx__row,
.air-fx.is-lite .air-fx__check { opacity: 0.45; }
.air-fx.is-lite [data-parallax-note] { color: var(--air-gold); }

/* узкое окно и телефон: круглая кнопка-молния, включённая — мятная */
@media (max-width: 920px) {
    .air-optim { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .air-optim__switch { display: none; }
    .air-optim__icon { width: 18px; height: 18px; }
    .air-optim.is-on { background: var(--air-mint); }
    .air-optim.is-on .air-optim__icon { fill: var(--air-ink); }
}
@media (max-width: 768px) {
    .air-fx { display: none; } /* параллакс только для мыши */
}

/* ================= 21. Вау при наведении (только без «Оптимизации») ================= */
/* буквы заголовков и магнит у кнопок — core/scripts/motion-mode.js; остальное — чистый CSS:
   двигаются transform/opacity, градиент текста сдвигается только пока курсор на элементе */

/* main.css ставит «* { font-size: 16px; font-weight: normal }» — буквы берут шрифт заголовка, а не сжимаются */
.fx-wave,
.fx-wave * { font: inherit; letter-spacing: inherit; color: inherit; }
.fx-wave__word { display: inline-block; white-space: nowrap; }
.fx-wave__ch { display: inline-block; }
@media (hover: hover) {
    /* только над самими буквами: заголовок — блок во всю ширину, и волна шла от наведения в пустоту рядом */
    /* волну запускает motion-mode.js классом is-waving и снимает после последней буквы: она всегда доигрывает,
       а не обрывается рывком, когда курсор ушёл; плавный ход без «пружины», чтобы буквы не проваливались вниз */
    html[data-motion="full"] .fx-wave.is-waving .fx-wave__ch {
        animation: fx-wave 0.62s cubic-bezier(0.45, 0, 0.3, 1);
        animation-delay: calc(var(--i) * 22ms);
    }
    /* столбики «уровня» перед заголовком пляшут, пока курсор на нём */
    html[data-motion="full"] :is(.section__title, .cards-slider__layer > h2, .rp-h2):has(.fx-wave:hover)::before {
        animation: fx-eq 0.45s ease-in-out infinite alternate;
    }

    /* название тайтла в карточке: блик по буквам */
    html[data-motion="full"] .release__card:hover .release__card-title {
        background: linear-gradient(100deg, var(--air-mint) 0%, var(--air-mint) 40%, #fff 50%, var(--air-gold) 56%, var(--air-mint) 66%, var(--air-mint) 100%) 0 0 / 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: fx-shine 1.2s var(--air-out) both;
    }

    /* пункты шапки: луч из центра и подпрыгивающая иконка */
    html[data-motion="full"] .header-nav__link { position: relative; }
    html[data-motion="full"] .header-nav__link::after {
        content: "";
        position: absolute;
        left: 14%;
        right: 14%;
        bottom: 3px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--air-mint), var(--air-gold));
        box-shadow: 0 0 10px rgba(61, 220, 151, 0.7);
        transform: scaleX(0);
        transition: transform 0.35s var(--air-spring);
        pointer-events: none;
    }
    html[data-motion="full"] .header-nav__link:hover::after { transform: scaleX(1); }
    html[data-motion="full"] .header-nav__link:hover .header-nav__icon { animation: fx-hop 0.5s var(--air-spring); }

    /* кнопки: световая полоса проходит насквозь, магнит тянет за курсором */
    html[data-motion="full"] :is(.cm-btn, .rp-btn, .pp-btn, .btn-pill, .header__signin) {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transition: transform 0.35s var(--air-spring), translate 0.25s var(--air-out), border-color 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
    }
    html[data-motion="full"] :is(.cm-btn, .rp-btn, .pp-btn, .btn-pill, .header__signin)::after {
        content: "";
        position: absolute;
        inset: -2px auto -2px 0;
        width: 45%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
        transform: translate3d(-120%, 0, 0) skewX(-18deg);
        pointer-events: none;
        z-index: 1;
    }
    html[data-motion="full"] :is(.cm-btn, .rp-btn, .pp-btn, .btn-pill, .header__signin):hover::after {
        transform: translate3d(330%, 0, 0) skewX(-18deg);
        transition: transform 0.7s var(--air-out);
    }

    /* ссылки в тексте: подчёркивание стекает слева направо (у ссылок-иконок его нет: на картинке оно шло зачёркиванием) */
    html[data-motion="full"] main :is(p, li, .cm-muted) a:not([class]):not(:has(img, svg)) {
        text-decoration: none;
        background: linear-gradient(90deg, var(--air-mint), var(--air-gold)) 0 100% / 0 2px no-repeat;
        transition: background-size 0.35s var(--air-out), color 0.2s ease;
    }
    html[data-motion="full"] main :is(p, li, .cm-muted) a:not([class]):not(:has(img, svg)):hover {
        background-size: 100% 2px;
        color: var(--air-mint);
    }

}
@keyframes fx-wave {
    35% { transform: translate3d(0, -0.32em, 0) rotate(-6deg); color: var(--air-mint); -webkit-text-fill-color: var(--air-mint); }
    55% { color: var(--air-gold); -webkit-text-fill-color: var(--air-gold); }
}
@keyframes fx-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes fx-eq { to { transform: scaleY(0.55); } }
@keyframes fx-hop { 40% { transform: translate3d(0, -4px, 0) rotate(-12deg) scale(1.15); } }

/* поле поиска: вместо жёлтой рамки вокруг самого input — мягкая подсветка всего поля */
.search__input:focus,
.search__input:focus-visible { outline: none !important; }
.search:focus-within {
    border-color: rgba(61, 220, 151, 0.55) !important;
    background: rgba(61, 220, 151, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.12);
}
/* остальные поля ввода тоже без золотой рамки: им хватает своей подсветки */
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline-color: rgba(61, 220, 151, 0.6); outline-offset: 1px; }

/* ================= 22. Плеер: источники, кнопка 4K и пульт под плеером ================= */

.wp-sources__tabs {
    gap: 4px;
    padding: 5px;
    border-radius: 16px;
    border: 1px solid var(--air-line);
    background: rgba(2, 21, 17, 0.72);
}
.wp-src {
    gap: 10px;
    padding: 9px 16px;
    border-radius: 11px;
    border: 1px solid transparent;
    color: var(--air-cream-dim) !important;
    font-family: var(--air-body);
}
.wp-src:hover { color: var(--air-cream) !important; background: rgba(61, 220, 151, 0.07); }
.wp-src.is-active {
    background: linear-gradient(180deg, rgba(61, 220, 151, 0.2), rgba(61, 220, 151, 0.08)) !important;
    border-color: rgba(61, 220, 151, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px -8px rgba(61, 220, 151, 0.55);
}
.wp-src.is-active,
.wp-src.is-active * { color: var(--air-cream) !important; }
.wp-src small {
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(242, 194, 91, 0.45);
    background: rgba(242, 194, 91, 0.1);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.wp-src small,
.wp-src.is-active small { color: var(--air-gold) !important; }

/* кнопка апскейла на панели плеера: спокойная плашка, когда выключен; золотой «4K» с мятной рамкой, когда включён */
.ap-a4k {
    align-items: center;
    height: 30px;
    padding: 0 9px;
    border-radius: 8px;
    border: 1px solid rgba(236, 233, 223, 0.22);
    background: rgba(2, 21, 17, 0.55);
    font-family: var(--air-display);
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1;
}
.ap-a4k small { font-family: var(--air-body); font-size: 10px; font-weight: 600; opacity: 0.65; }
.ap-a4k.is-on {
    border-color: rgba(61, 220, 151, 0.7);
    background: linear-gradient(180deg, rgba(61, 220, 151, 0.22), rgba(2, 21, 17, 0.6));
    box-shadow: 0 0 0 1px rgba(61, 220, 151, 0.15), 0 0 14px -2px rgba(61, 220, 151, 0.45);
    color: var(--air-gold) !important;
}
.ap-a4k.is-on small { color: var(--air-cream) !important; opacity: 0.85; }

/* пульт под плеером: название мелко над крупным номером серии, кнопки — одной группой справа */
.wp-console {
    position: relative;
    padding: 18px 20px;
    border-color: rgba(61, 220, 151, 0.2);
    background:
        radial-gradient(90% 140% at 0% 0%, rgba(61, 220, 151, 0.1), transparent 55%),
        linear-gradient(180deg, rgba(8, 46, 36, 0.86), rgba(3, 24, 19, 0.92));
}
.wp-console::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--air-mint) 30%, var(--air-gold) 50%, var(--air-mint) 70%, transparent);
    opacity: 0.6;
}
.wp-console .wp-title { display: grid; gap: 4px; }
.wp-console .wp-title span { font-size: 0.95rem; line-height: 1.3; }
.wp-console .wp-title b {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.05;
    color: var(--air-mint);
}
.wp-console .wp-share,
.wp-console .wp-nav .cm-btn { min-height: 42px; padding: 0 18px; border-radius: 12px; }
.wp-console .wp-nav { gap: 0; padding: 3px; border-radius: 15px; border: 1px solid var(--air-line); background: rgba(2, 21, 17, 0.6); }
.wp-console .wp-nav .cm-btn:not(.cm-btn_primary) { border-color: transparent; background: transparent; }
/* стрелки — отдельными span: ::after у кнопок занят световой полосой; кнопки не сжимаются (overflow: hidden обрезал «Следующая серия») */
.wp-console .wp-nav .cm-btn { flex: none; gap: 8px; white-space: nowrap; }
.wp-nav__ar { font-size: 1.25em; line-height: 1; color: inherit; font-weight: 700; }
/* ряд пульта переносится целиком: название слева, «Поделиться» и пара кнопок — справа, при нехватке места — строкой ниже */
.wp-console .wp-info { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.wp-console .wp-info > div:first-child { flex: 1 1 260px; min-width: 0; }
.wp-console .wp-share { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
    .wp-console .wp-nav { width: 100%; }
    .wp-console .wp-nav .cm-btn { flex: 1 1 0; justify-content: center; padding: 0 12px; }
}

/* источники: одна рамка у группы, активная вкладка — заливкой; пояснение стоит рядом с вкладками, а не над списком серий */
.wp-sources { justify-content: flex-start; gap: 10px 20px; }
.wp-sources__tabs { padding: 4px; gap: 4px; }
.wp-src { min-height: 40px; padding: 0 16px; border: 0; }
.wp-src.is-active { border: 0; box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.5), 0 6px 18px -8px rgba(61, 220, 151, 0.55); }
.wp-sources__note { font-size: 0.85rem; color: var(--air-cream-dim); line-height: 1.4; }
.wp-sources__note * { font-size: inherit; }

/* список серий: прогресс — полоской по низу кадра, справа только номер и подпись */
.wp-side { padding: 18px 16px 16px; }
.wp-side__head { align-items: center; padding: 0 4px; margin-bottom: 12px; }
.wp-eps { gap: 6px; padding: 0; }
.wp-ep { align-items: center; gap: 14px; padding: 8px; border-radius: 14px; }
.wp-ep__thumb { width: 120px; border-radius: 9px; }
.wp-ep__num { right: 5px; bottom: 7px; line-height: 18px; font-size: 11px; }
.wp-ep__body { align-content: center; gap: 3px; }
.wp-ep__title { font-size: 0.98rem; line-height: 1.25; }
.wp-ep__meta { font-size: 0.8rem; line-height: 1.3; }
.wp-ep__thumb .wp-ep__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.55);
}
.wp-ep__thumb .wp-ep__bar i { background: var(--air-mint); }

/* «Студия в работе» и «Недавно добавлено»: тот же отступ под заголовком, что у остальных рядов главной */
/* одинаковый воздух между заголовком раздела и карточками на всей главной */
.section__title,
.cards-slider__layer > h2 { margin-bottom: 32px; }
.section__head { margin-bottom: 32px; }
.section__head .section__title { margin-bottom: 0; }

/* ряды-слайдеры режут всё, что выходит за них (overflow: hidden): даём место сверху и снизу,
   чтобы приподнятая и наклонённая карточка не обрезалась по краям */
.now-watch__slider-container,
.simple-slider__container,
.coming_soon__slider-container {
    padding-block: 18px;
    margin-block: -18px;
}

/* ================= 23. Баннер «Смотри на AniBaza»: ссылка на Telegram ================= */
.banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    text-decoration: none;
    cursor: pointer;
}
.banner-cta,
.banner-cta * { font-size: inherit; font-weight: 800; color: #00d046; }
.banner-cta__text {
    padding: 0.05em 0.3em;
    border-radius: 6px;
    background: linear-gradient(90deg, #00d046, #3ddc97) 0 0 / 0% 100% no-repeat;
    transition: background-size 0.45s var(--air-out), color 0.2s ease 0.1s;
}
.banner-cta__br { display: inline-block; transition: transform 0.45s var(--air-spring); }
.banner-cta:hover .banner-cta__text,
.banner-cta:focus-visible .banner-cta__text { background-size: 100% 100%; color: #02150f; }
.banner-cta:hover .banner-cta__br:first-child { transform: translate3d(-4px, 0, 0); }
.banner-cta:hover .banner-cta__br:last-child { transform: translate3d(4px, 0, 0); }
@media (hover: hover) {
    /* скобки «дышат», зовут нажать */
    html[data-motion="full"] .banner-cta:not(:hover) .banner-cta__br { animation: banner-cta-br 1.8s ease-in-out infinite; }
    html[data-motion="full"] .banner-cta:not(:hover) .banner-cta__br:last-child { animation-name: banner-cta-br-r; }
}
@keyframes banner-cta-br { 50% { transform: translate3d(-3px, 0, 0); opacity: 0.55; } }
@keyframes banner-cta-br-r { 50% { transform: translate3d(3px, 0, 0); opacity: 0.55; } }

/* «Недавно добавлено»: у ленты 4px поля под тень — забираем их у отступа, чтобы было ровно 32px, как у остальных рядов */
.air-recent > .section__head + .air-scroll { margin-top: -4px; }

/* подвал не жмётся к левому краю и не залезает под круглую кнопку атмосферы в углу */
.footer__inner { padding-inline: clamp(32px, 5.5vw, 110px); padding-bottom: clamp(56px, 5vw, 72px); }
@media (max-width: 600px) { .footer__inner { padding-inline: var(--page-gutter); } }
@media (max-width: 1500px) {
    .links__list { gap: 10px; }
    .links__item a { width: 48px; height: 48px; }
}

/* вкладки (Лента и др.): одинаковые высота, жирность и подсветка у всех, без «залипшего» вида у одной */
.cm-tab {
    min-height: 38px;
    padding: 0 18px;
    justify-content: center;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--air-cream-dim);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(61, 220, 151, 0.14);
    outline: none;
}
.cm-tab:hover { color: var(--air-cream); background: rgba(61, 220, 151, 0.08); border-color: rgba(61, 220, 151, 0.3); }
.cm-tab:focus:not(:focus-visible) { box-shadow: none; }
.cm-tab:focus-visible { box-shadow: 0 0 0 2px rgba(61, 220, 151, 0.6); }
.cm-tab.is-active,
.cm-tab.is-active:hover { color: var(--air-ink); background: var(--accent-gradient); border-color: transparent; }

/* шапка одинаковой ширины на всех страницах: место под полосу прокрутки занято всегда,
   иначе на страницах без прокрутки шапка перескакивала на другой вариант раскладки */
html { scrollbar-gutter: stable; }

/* карточка тайтла: после наведения по нижнему краю оставалась светлая полоска — край слоя обложки,
   не обрезанный скруглением. Обрезаем маской, обложка заходит на 1px за край */
.release__card-body {
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    background: var(--air-bg-2, #021511);
}
.release__card-poster { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); backface-visibility: hidden; }

/* поиск в шапке: «Везде» прижат к правому краю поля; крестик появляется слева от него, только когда есть текст
   (раньше пустой крестик занимал место, и «Везде» отъезжал от края) */
.search { padding-right: 7px; }
.search__clear { order: 2; width: 30px; }
.search:not(.has-value) .search__clear { display: none; }
.search > .fsel,
.search > .search__cat { order: 3; margin-left: 2px; }
.search > .search-results { order: 4; }

/* ===== Плеер: подсветка без резких краёв, без декора над плеером ===== */
/* свечение уходит в ноль к краям своей области: раньше по краям был виден светлый прямоугольник, наезжавший на вкладки */
.air-ambi::before {
    inset: -40px -48px;
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.wp-top .ab-glyph { display: none; }
.wp-sources { position: relative; z-index: 1; }
.wp-grid { align-items: start; }
.wp-side { position: sticky; top: calc(var(--header-height) + 16px); }

/* ===== Страница тайтла: баннер — полный задний фон шапки (как было раньше), без рамки справа ===== */
.rp-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
/* текст слева читается: тень слева и снизу, справа арт виден целиком */
.rp-hero__media:has(.rp-hero__bg) .rp-hero__shade {
    background:
        linear-gradient(0deg, var(--bg-color) 0%, rgba(2, 21, 17, 0.55) 26%, rgba(2, 21, 17, 0) 60%),
        linear-gradient(90deg, rgba(2, 21, 17, 0.94) 0%, rgba(2, 21, 17, 0.78) 34%, rgba(2, 21, 17, 0.2) 68%, rgba(2, 21, 17, 0) 100%);
}
.rp-hero { min-height: clamp(460px, 42vw, 640px); }
@supports (animation-timeline: view()) {
    html[data-motion="full"] .rp-hero__bg {
        animation: air-scroll-sink linear both;
        animation-timeline: scroll(root);
        animation-range: 0 640px;
    }
}

/* «Везде» в поиске одной ширины при любом выборе: раньше «Пользователи» растягивали кнопку и сжимали поле.
   Ширина под самое длинное название, текст по центру */
.search .fsel__btn { justify-content: space-between; }
.search .fsel__btn { padding: 0 8px 0 11px; gap: 4px; }
.search .fsel__label { min-width: 6.85em; text-align: center; letter-spacing: -0.01em; }
/* пока скрипт не заменил системный список на свой, он той же ширины и на том же месте:
   иначе «Везде» при каждом переходе между страницами прыгал влево */
.search > .search__cat {
    width: 135px;
    margin-left: 6px;
    padding: 0 30px 0 11px;
    text-align: center;
    text-align-last: center;
    letter-spacing: -0.01em;
}

/* «Студия сейчас в работе»: серия скрыта от зрителей настройкой релиза — метка видна только команде */
.air-work__team-only {
    display: inline-block;
    margin: 2px 0 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(242, 194, 91, 0.45);
    color: var(--air-gold);
    font-size: 0.72rem;
    font-weight: 600;
}

/* ===== Выпадающие списки вместо системных (core/scripts/fancy_select.js) =====
   fsel_field — вид поля формы: на всю ширину, как input; список под полем той же ширины, со скроллом */
.fsel_field { display: block; width: 100%; }
@media (max-width: 1200px) { .fsel.fsel_field { display: block; } }
.fsel_field .fsel__btn {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 12px 0 14px;
    justify-content: space-between;
    gap: 10px;
    border-radius: 12px;
    border: 1px solid var(--air-line, rgba(255, 255, 255, 0.12));
    background: rgba(2, 21, 17, 0.6);
    color: var(--air-cream);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
}
.fsel_field .fsel__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fsel_field .fsel__btn:hover,
.fsel_field.is-open .fsel__btn { background: rgba(2, 21, 17, 0.8); border-color: var(--air-line-strong, rgba(61, 220, 151, 0.34)); }
.fsel_field .fsel__btn:focus-visible { outline: 2px solid var(--air-mint); outline-offset: 2px; }
.fsel_field .fsel__btn:disabled { opacity: 0.5; cursor: default; }
.fsel_field .fsel__chev { flex: none; color: var(--air-cream-dim); }
.fsel_field .fsel__list { left: 0; right: auto; top: calc(100% + 6px); min-width: 100%; max-height: min(320px, 50vh); overflow-y: auto; transform-origin: top left; }
/* общий вид раскрытого списка: тёмно-зелёный, как остальные панели сайта */
.fsel__list { background: rgba(2, 21, 17, 0.97); border-color: var(--air-line-strong, rgba(61, 220, 151, 0.3)); scrollbar-width: thin; scrollbar-color: var(--air-line-strong) transparent; }
.fsel__opt { color: var(--air-cream-dim); }
.fsel__opt:hover, .fsel__opt:focus, .fsel__opt:focus-visible { background: rgba(61, 220, 151, 0.1); color: var(--air-cream); }
.fsel__opt.is-selected { background: rgba(61, 220, 151, 0.16); color: var(--air-mint); }
.fsel__opt.is-selected::after { background: var(--air-mint); box-shadow: 0 0 8px var(--air-mint); }
.fsel__opt[aria-disabled="true"] { opacity: 0.4; cursor: default; }
/* карандаш «Студия в работе»: поля поменьше */
.air-status .fsel_field .fsel__btn { height: 36px; padding: 0 8px 0 10px; border-radius: 9px; border-color: var(--air-line); background: var(--air-bg, #021511); font-size: 0.85rem; }
.sr-stats { margin: -4px 0 12px; font-size: 0.82rem; color: var(--air-cream-dim); }
.sr-stats b { color: var(--air-mint); }
.sr-stats span { opacity: 0.75; }