/* =====================================================================
   Атмосфера страницы тайтла в цвет постера (Dynamic Ambient Theme)
   ---------------------------------------------------------------------
   --title-accent / --title-accent-glow ставит шаблон на <body> из Release.poster_accent
   (бэкенд, Pillow); если цвета ещё нет — ab_movies/scripts/title-accent.js за пару мс
   по уменьшенному постеру. Без акцента всё остаётся изумрудным, как раньше.

   Каркас AniBaza не меняется: поверхности, текст и главные градиенты — изумрудные,
   цвет аниме приходит светом — споты, отблески, подчёркивания, частицы.

   Производительность (правила проекта):
   - споты — radial-gradient без filter: blur(): та же мягкость, но без живого размытия
     рядом с движущимся баннером и частицами;
   - «дыхание» спотов — только transform/opacity на своём слое, засыпает вне экрана (.air-idle),
     в простое (html.air-still), во время видео (html.air-playing) и в «Оптимизации»/reduced-motion.
   ===================================================================== */

@property --title-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #3ddc97;
}
@property --title-accent-glow {
    syntax: "<color>";
    inherits: true;
    initial-value: #10b981;
}

/* переход между тайтлами и подхват цвета из JS — плавный, без мигания */
body {
    transition: background-color 0.6s ease, --title-accent 0.6s ease, --title-accent-glow 0.6s ease;
}

.rp {
    /* полупрозрачные оттенки акцента — готовим один раз */
    --ta-soft: color-mix(in oklab, var(--title-accent) 22%, transparent);
    --ta-mid: color-mix(in oklab, var(--title-accent) 55%, transparent);
    --ta-line: color-mix(in oklab, var(--title-accent) 70%, var(--air-mint));
    position: relative;
}

/* ---------- 1. Световые споты ---------- */

.rp-ambient {
    position: absolute;
    pointer-events: none;
    overflow: hidden;
}
.rp-ambient_hero {
    inset: 0;
}
.rp-body {
    position: relative;
    isolation: isolate;
}
.rp-ambient_body {
    z-index: -1;
    top: -120px;
    left: 0;
    right: 0;
    height: min(900px, 120vh);
    overflow: visible;
}

.rp-glow {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        var(--title-accent) 0%,
        color-mix(in oklab, var(--title-accent-glow) 70%, transparent) 38%,
        color-mix(in oklab, var(--title-accent-glow) 22%, transparent) 66%,
        transparent 100%
    );
    opacity: 0.35;
    will-change: transform, opacity;
}
/* багровое/лазурное зарево за постером */
.rp-glow_poster {
    left: calc(var(--rp-gutter) - 12vw);
    bottom: -18%;
    width: clamp(420px, 46vw, 860px);
    aspect-ratio: 1;
    opacity: 0.55;
    animation: rp-breathe 11s ease-in-out infinite alternate;
}
/* второй спот правее, над артом баннера: глубже и тусклее */
.rp-glow_side {
    right: -14vw;
    top: -22%;
    width: clamp(380px, 40vw, 760px);
    aspect-ratio: 1.3;
    opacity: 0.32;
    animation: rp-breathe 14s ease-in-out -6s infinite alternate-reverse;
}
/* над блоком описания — продолжение зарева шапки в тело страницы */
.rp-glow_desc {
    left: 4vw;
    top: 0;
    width: clamp(520px, 62vw, 1100px);
    aspect-ratio: 1.8;
    opacity: 0.35;
    animation: rp-breathe 16s ease-in-out -3s infinite alternate;
}

@keyframes rp-breathe {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(3%, -4%, 0) scale(1.1); }
}

/* бесцветный постер — споты остаются изумрудными, но тише */
body[data-title-accent="none"] .rp-glow { opacity: 0.16; }

/* сон: простой (atmosphere.js) — как и частицы */
html.air-still .rp-glow { animation-play-state: paused; }
/* во время видео споты не нужны совсем — ни слоя, ни перерисовки */
html.air-playing .rp-ambient { visibility: hidden; }
html[data-motion="lite"] .rp-glow { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .rp-glow { animation: none; }
    body { transition: none; }
}
/* на телефоне спотов два, и они меньше */
@media (max-width: 760px) {
    .rp-glow_side { display: none; }
    .rp-glow_poster { left: -10vw; bottom: auto; top: -4%; width: 120vw; }
    .rp-glow_desc { width: 140vw; left: -20vw; }
}

/* ---------- 2. Акцентный отблеск: кнопки, вкладки, рамки ---------- */

/* «▶ Смотреть»: изумрудная кнопка остаётся, кайма и ореол — цвета тайтла */
.rp .rp-btn_primary {
    box-shadow:
        0 0 0 1px var(--ta-mid),
        0 0 0 4px var(--ta-soft),
        0 12px 34px -10px var(--ta-mid);
    transition: transform 0.35s var(--air-spring), filter 0.2s ease, box-shadow 0.3s ease;
}
.rp .rp-btn_primary:hover,
.rp .rp-btn_primary:focus-visible {
    box-shadow:
        0 0 0 1px var(--title-accent),
        0 0 0 5px var(--ta-soft),
        0 16px 44px -8px var(--title-accent);
}

.rp .rp-btn:not(.rp-btn_primary):hover {
    border-color: var(--ta-mid);
}

/* вкладки: подчёркивание изумруд → цвет тайтла, у активной лёгкое свечение */
.rp .rp-tab::after {
    background: linear-gradient(90deg, var(--air-mint), var(--title-accent));
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 0.25s ease, transform 0.35s var(--air-out);
}
.rp .rp-tab:hover::after {
    opacity: 0.5;
    transform: scaleX(0.8);
}
.rp .rp-tab.is-active::after {
    background: linear-gradient(90deg, var(--air-mint), var(--title-accent));
    opacity: 1;
    transform: none;
    box-shadow: 0 0 14px var(--ta-mid);
}
.rp .rp-tab.is-active {
    text-shadow: 0 0 18px var(--ta-soft);
}

/* плитки «О сериале»: подсветка граней за курсором — изумруд с цветом тайтла вместо золота */
.rp .air-tile::before {
    background: radial-gradient(320px circle at var(--air-mx, 50%) var(--air-my, 0%), rgba(61, 220, 151, 0.95), var(--ta-mid) 35%, transparent 60%);
}
.rp .air-tile::after {
    background: radial-gradient(420px circle at var(--air-mx, 50%) var(--air-my, 0%), var(--ta-soft), transparent 60%);
}
.rp .air-tile__label::before {
    background: linear-gradient(90deg, var(--air-mint), var(--title-accent));
}

/* неоновая рамка карточек похожих тайтлов при наведении */
.rp .release__card-body::after {
    box-shadow:
        inset 0 0 0 1px var(--ta-line),
        0 0 0 1px var(--ta-soft),
        0 0 28px var(--ta-mid),
        0 26px 48px -16px rgba(0, 0, 0, 0.75);
}

/* прогресс: записанные дорожки серии и полоски оценок */
.rp .air-cell::before {
    background: linear-gradient(180deg, #5df0b0, color-mix(in oklab, #10b981, var(--title-accent) 45%));
}
.rp .air-cell.is-done {
    border-color: var(--ta-line);
}
.rp .air-genre:hover {
    border-color: var(--ta-mid);
}