@font-face {
    font-family: "Effra";
    src: url("../fonts/Effra/Effra.eot");
    src: url("../fonts/Effra/Effra.eot@")format("embedded-opentype"),
    url("../fonts/Effra/Effra.woff") format("woff"),
    url("../fonts/Effra/Effra.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "Effra _Light";
    src: url("../fonts/Effra _Light/Effra _Light.eot");
    src: url("../fonts/Effra _Light/Effra _Light.eot@")format("embedded-opentype"),
    url("../fonts/Effra _Light/Effra _Light.woff") format("woff"),
    url("../fonts/Effra _Light/Effra _Light.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "Effra_Medium";
    src: url("../fonts/Effra_Medium/Effra_Medium.eot");
    src: url("../fonts/Effra_Medium/Effra_Medium.eot@")format("embedded-opentype"),
    url("../fonts/Effra_Medium/Effra_Medium.woff") format("woff"),
    url("../fonts/Effra_Medium/Effra_Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "Effra_Heavy";
    src: url("../fonts/Effra_Heavy/Effra_Heavy.eot");
    src: url("../fonts/Effra_Heavy/Effra_Heavy.eot@")format("embedded-opentype"),
    url("../fonts/Effra_Heavy/Effra_Heavy.woff") format("woff"),
    url("../fonts/Effra_Heavy/Effra_Heavy.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
#cont h1,#cont h2, #cont h3,#cont h4,#cont h5,#cont h6{
    margin-bottom: 11px;
    text-align: left;
}
#cont h1{
    font: 35px Effra;
    color: #484747;
}
#cont h2{
    font: 31px Effra;
    color: #484747;
}
#cont h3{
    font: 27px Effra;
    color: #484747;
}
#cont h4{
    font: 25px Effra;
    color: #484747;
}
#cont h5{
    font: 23px Effra;
    color: #484747;
}
#cont h6{
    font: 21px Effra;
    color: #484747;
}
h1{
    font: 35px Effra;
    color: #484747;
}
h2{
    font: 31px Effra;
    color: #484747;
}
h3{
    font: 27px Effra;
    color: #484747;
}
h4{
    font: 25px Effra;
    color: #484747;
}
h5{
    font: 23px Effra;
    color: #484747;
}
h6{
    font: 21px Effra;
    color: #484747;
}
#n2-ss-3 .n2-ss-layer[data-name="strela.png"],
#n2-ss-3 .n2-ss-layer[data-name="strela_bg.png"] {
    width: 71px !important;
    height: 71px !important;
}

#n2-ss-3 .n2-ss-layer[data-name="strela.png"] img,
#n2-ss-3 .n2-ss-layer[data-name="strela_bg.png"] img {
    width: 71px !important;
    height: 71px !important;
    max-width: 71px !important;
}
#n2-ss-3 .n2-ss-layer[data-name="strela.png"],
#n2-ss-3 .n2-ss-layer[data-name="strela_bg.png"] {
    top: 860px !important;
}

/* ===== VIDEOS ACCORDION ===== */
.custom-video-alex .bio_zag {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: opacity 0.2s;
}
.custom-video-alex .bio_zag::after {
    content: '▼';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.45em;
    opacity: 0.7;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}
.custom-video-alex .bio_zag.videos-open::after {
    transform: translateY(-50%) rotate(180deg);
}
.custom-video-alex .video_row .videos-accordion-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
}
.custom-video-alex .video_row .videos-accordion-body.open {
    max-height: 3000px;
    opacity: 1;
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s ease 0.1s;
}

/* ===== RELEASES SECTION ===== */
.custom-releases-alex { position: relative; background: #0a0010; overflow: hidden; }
.custom-releases-alex .releases-zag { cursor: pointer; user-select: none; }
.custom-releases-alex .releases-zag::after {
    content: '▼'; position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%); font-size: 0.45em; opacity: 0.7; color: #00e5ff;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); display: inline-block;
}
.custom-releases-alex .releases-zag.releases-open::after { transform: translateY(-50%) rotate(180deg); }
.releases-accordion-body {
    overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height 0.7s cubic-bezier(0.4,0,0.2,1), opacity 0.5s ease;
}
.releases-accordion-body.open { max-height: 2000px; opacity: 1; }

#cube1 {
    width: 100%; min-height: 420px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    background: radial-gradient(ellipse at center, #2a0050 0%, #0a0010 70%);
}
#cube1 #conteneur {
    position: absolute; width: 100px; height: 100px;
    perspective: 8000px; perspective-origin: 50% 50%;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
}
#cube1 .face { width:100%; height:100%; position:absolute; border:1px solid rgba(180,100,255,0.2); }
#cube1 .cote1 { transform:translateZ(50px); animation:face1 10s linear infinite alternate; }
#cube1 .cote2 { transform:translateZ(0) translateX(50px) rotateY(90deg); animation:face2 10s ease-in infinite alternate; }
#cube1 .cote3 { transform:translateZ(0) translateX(-50px) rotateY(-90deg); animation:face3 10s ease-in infinite alternate; }
#cube1 .cote4 { transform:translateZ(0) translateY(50px) rotateX(-90deg); animation:face4 10s ease-in infinite alternate; }
#cube1 .cote5 { transform:translateZ(0) translateY(-50px) rotateX(90deg); animation:face5 10s ease-in infinite alternate; }
#cube1 .cote6 { transform:translateZ(-50px); animation:face6 10s linear infinite alternate; }
#cube1 .parent { position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:cube 10s ease-in infinite alternate; }

.releases-content { position:relative; z-index:10; width:100%; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.album-card {
    display:flex; align-items:center; gap:40px; max-width:860px; width:100%;
    background:rgba(10,0,20,0.72); border:1px solid rgba(180,100,255,0.35);
    border-radius:12px; padding:30px 35px; backdrop-filter:blur(8px);
    box-shadow: 0 0 40px rgba(140,0,255,0.25), 0 0 80px rgba(0,229,255,0.08);
}
.album-cover { flex-shrink:0; width:220px; height:220px; border-radius:8px; overflow:hidden; border:2px solid rgba(0,229,255,0.4); box-shadow:0 0 30px rgba(0,229,255,0.3),0 0 60px rgba(140,0,255,0.3); }
.album-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.album-info { flex:1; color:#fff; }
.album-info .artist-name { font-size:11px; letter-spacing:4px; color:#00e5ff; text-transform:uppercase; margin-bottom:6px; }
.album-info h2 { font-size:42px; font-weight:900; letter-spacing:3px; text-transform:uppercase; line-height:1; margin-bottom:6px; background:linear-gradient(135deg,#ffffff 0%,#c084fc 50%,#00e5ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.album-info .album-year { font-size:13px; letter-spacing:3px; color:rgba(255,255,255,0.4); margin-bottom:24px; text-transform:uppercase; }
.album-info .album-type { font-size:11px; letter-spacing:3px; color:rgba(192,132,252,0.8); text-transform:uppercase; margin-bottom:28px; border-left:2px solid #c084fc; padding-left:10px; }
.download-buttons { display:flex; gap:12px; flex-wrap:wrap; }
.btn-download { display:inline-flex; align-items:center; gap:8px; padding:11px 24px; border-radius:4px; text-decoration:none; font-size:12px; font-weight:bold; letter-spacing:2px; text-transform:uppercase; transition:all 0.3s ease; border:none; cursor:pointer; }
.btn-flac { background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; box-shadow:0 0 20px rgba(168,85,247,0.4); }
.btn-flac:hover { background:linear-gradient(135deg,#6d28d9,#9333ea); box-shadow:0 0 30px rgba(168,85,247,0.7); transform:translateY(-2px); }
.btn-mp3 { background:linear-gradient(135deg,#0891b2,#00e5ff); color:#000; box-shadow:0 0 20px rgba(0,229,255,0.35); }
.btn-mp3:hover { background:linear-gradient(135deg,#0e7490,#22d3ee); box-shadow:0 0 30px rgba(0,229,255,0.65); transform:translateY(-2px); }

@keyframes cube { from{transform:rotateX(-180deg) rotateY(-200deg) rotateZ(-50deg)} to{transform:rotateX(100deg) rotateY(200000deg) rotateZ(5000000deg)} }
@keyframes face1 { 0%{background:rgba(180,0,255,0.4);transform:translateZ(50px) scale(1)} 100%{background:rgba(180,0,255,0);transform:translateZ(200px) scale(5)} }
@keyframes face2 { 0%{background:rgba(0,229,255,0.3);transform:translateZ(0) translateX(50px) rotateY(90deg) scale(1)} 100%{background:rgba(0,229,255,0);transform:translateZ(0) translateX(200px) rotateY(90deg) scale(10)} }
@keyframes face3 { 0%{background:rgba(140,0,255,0.4);transform:translateZ(0) translateX(-50px) rotateY(-90deg) scale(1)} 100%{background:rgba(140,0,255,0);transform:translateZ(0) translateX(-200px) rotateY(-90deg) scale(15)} }
@keyframes face4 { 0%{background:rgba(200,0,255,0.3);transform:translateZ(0) translateY(50px) rotateX(-90deg) scale(5)} 100%{background:rgba(200,0,255,0);transform:translateZ(0) translateY(200px) rotateX(-90deg) scale(1)} }
@keyframes face5 { 0%{background:rgba(0,200,255,0.3);transform:translateZ(0) translateY(-50px) rotateX(90deg) scale(1)} 100%{background:rgba(0,200,255,0);transform:translateZ(0) translateY(-200px) rotateX(90deg) scale(5)} }
@keyframes face6 { 0%{background:rgba(180,100,255,0.4);transform:translateZ(-50px) scale(20)} 100%{background:rgba(180,100,255,0);transform:translateZ(-200px) scale(1)} }

.custom-releases-alex .releases-zag {
    cursor: pointer;
    user-select: none;
    position: relative; /* ← это обязательно! */
}

.album-card {
    /* уже существующие стили + добавь: */
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.45s ease;
    will-change: transform;
}

.album-card:hover {
    transform: scale(1.22);
    box-shadow: 0 0 60px rgba(140,0,255,0.45),
                0 0 120px rgba(0,229,255,0.18),
                0 20px 60px rgba(0,0,0,0.5);
}

/* ===== RELEASES — точная копия VIDEOS ===== */
.custom-releases-alex .bio_zag.releases-zag {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    padding: 14px 22px !important;      /* те же паддинги что у .bio_zag VIDEOS */
    position: relative !important;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box !important;
}

/* Треугольник RELEASES — такой же как у VIDEOS */
.custom-releases-alex .bio_zag.releases-zag::after {
    content: '' !important;
    position: static !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 9px solid transparent !important;   /* ← увеличил с 7 до 9 */
    border-right: 9px solid transparent !important;  /* ← увеличил с 7 до 9 */
    border-top: 12px solid #00e5ff !important;       /* ← увеличил с 9 до 12 */
    border-bottom: none !important;
    margin-left: 14px !important;
    transform: none !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    top: auto !important;
    right: auto !important;
    font-size: unset !important;
    opacity: 1 !important;
}

/* Стрелка вверх когда открыто */
.custom-releases-alex .bio_zag.releases-zag.releases-open::after {
    transform: rotate(180deg) !important;
}

/* ===== ЕДИНЫЙ ДИЗАЙН КНОПОК VIDEOS И RELEASES ===== */

.custom-video-alex .bio_zag,
.custom-releases-alex .bio_zag.releases-zag {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    box-sizing: border-box !important;

    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 9;

    margin: 0 !important;
    padding: 14px 22px !important;

    background: #191919 !important;
    color: #ffffff !important;
    font: 55px Effra_Heavy !important;
    line-height: 1 !important;
    text-transform: uppercase;

    cursor: pointer;
    user-select: none;
}

/* Единые голубые треугольники */
.custom-video-alex .bio_zag::after,
.custom-releases-alex .bio_zag.releases-zag::after {
    content: '' !important;
    display: inline-block !important;
    position: static !important;

    width: 0 !important;
    height: 0 !important;

    margin-left: 14px !important;

    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-top: 12px solid #00e5ff !important;
    border-bottom: 0 !important;

    opacity: 1 !important;
    transform: none !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Поворот стрелки при открытии */
.custom-video-alex .bio_zag.videos-open::after,
.custom-releases-alex .bio_zag.releases-zag.releases-open::after {
    transform: rotate(180deg) !important;
}