/* MUSIC FOLDER — fire-pixels | исходник: 3737..3789 */

/* ═══ Fire Pixels (New Divide style) ═══ */
/* канвас строго ПОД контентом секции (z-index:0), секция не поднята
над соседями. Мягкая маска гасит частицы у краёв: визуально они
не обрезаются, но и не перекрывают другие блоки */
.fire-section{position:relative;padding:72px 0 0}
.fire-canvas-wrap{
position:absolute;
inset:-350px -15vw -250px; /* Увеличили отступ сверху, чтобы пиксели точно не обрезались и не скрывались за маской */
z-index:0;
pointer-events:none;
/* Маска смещена вниз (65%), чтобы верхняя часть была полностью прозрачной (видимой),
а градиент уходил в прозрачность только снизу и по бокам */
-webkit-mask-image: radial-gradient(ellipse 140% 140% at 50% 65%, #000 45%, transparent 95%);
mask-image: radial-gradient(ellipse 140% 140% at 50% 65%, #000 45%, transparent 95%);
}
#fireCanvas{width:100%;height:100%;display:block}
.fire-section .container{position:relative;z-index:2}
.fire-section .shead{position:relative;z-index:2}
.fire-section .recent{position:relative;z-index:2}
.fire-section .rcard{
background:rgba(8,9,18,.88);
backdrop-filter:blur(20px) saturate(1.2);
-webkit-backdrop-filter:blur(20px) saturate(1.2);
border-color:rgba(255,255,255,.13);
box-shadow:0 4px 24px -4px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
}
.fire-section .rcard:hover{
border-color:color-mix(in srgb,var(--c1) 50%,transparent);
box-shadow:0 8px 32px -4px rgba(0,0,0,.7),0 0 24px -8px color-mix(in srgb,var(--c1) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.06);
}
.fire-section .rcard.od-current{
border-color:color-mix(in srgb,var(--c2) 70%,transparent);
background:linear-gradient(180deg,color-mix(in srgb,var(--c2) 10%,rgba(8,9,18,.92)),rgba(8,9,18,.94));
box-shadow:0 0 0 1px color-mix(in srgb,var(--c2) 45%,transparent),0 10px 34px -8px color-mix(in srgb,var(--c2) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.06);
}
.fire-section .rcard.od-current:hover{
border-color:color-mix(in srgb,var(--c2) 85%,transparent);
box-shadow:0 0 0 1px color-mix(in srgb,var(--c2) 55%,transparent),0 12px 38px -8px color-mix(in srgb,var(--c2) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.07);
}
.fire-section .rcard .rmeta b{text-shadow:0 1px 4px rgba(0,0,0,.6)}
.fire-section .rcard .rmeta span{text-shadow:0 1px 3px rgba(0,0,0,.5)}
.fire-section .shead h2{text-shadow:0 2px 12px rgba(0,0,0,.7)}
.fire-section .shead .overline{text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* ═══ индикатор «сейчас играет» на карточках (эквалайзер) ═══ */
.od-eq{display:none;align-items:flex-end;gap:2.5px;height:16px}
.od-eq i{width:3px;border-radius:2px;background:#fff;transform-origin:bottom;animation:odeq .9s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,255,255,.6))}
.od-eq i:nth-child(1){height:9px}
.od-eq i:nth-child(2){height:16px;animation-delay:.22s}
.od-eq i:nth-child(3){height:12px;animation-delay:.44s}
@keyframes odeq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.rcard.od-current .od-eq,.top-card.od-current .od-eq,.pl-row.od-current .od-eq{display:inline-flex}
.rcard.od-current .rplay-ico,.top-card.od-current .top-play-ico{display:none}
body:not(.od-playing) .od-eq i{animation-play-state:paused}