a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
html{    height: 100%;    width: 100%;    background:#000;color:#fff;}
body{    height: 100%;    width: 100%;    font-family:Inter;    margin:0;}

header{height:100%; width:100%;}

#player{position:absolute;z-index:-1;
    width: 100%;
    height: 100vh;
    bottom:12vh;
    margin:0 0 100px 0;
    left:0;
    display: block;
    pointer-events:none;
}
#canvas1{width: 50%;position: absolute;bottom:0;left:0;}
#canvas2{width: 50%;position: absolute;bottom:0;left:50%;transform: scaleX(-1)}

.bg-logo{
    position:absolute;z-index:-4;
    width: 100%;
    height: 50vh;
    background: url(/img/logo-dzhimix.svg) 45% 0 no-repeat;
}
    
.plashka
{
    position: absolute;
    bottom:12vh;
    margin:0 0 0 0;
    width: 100%;
    height: 100px;
    z-index:-4;
    background: #e3e3e3;
/*background: linear-gradient(0deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
background: linear-gradient(0deg, rgba(215,215,215,1) 10%, rgba(255,247,0,1) 100%);*/
}
.pereliv
{
    position: absolute;
    width: 100%;
    height: 100%;
    padding-bottom:25vh;
    z-index:-5;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.main-scene
{
    display:flex;
    position: absolute;
    width: 100%;
    height: 100%;
    align-items:flex-end;
    justify-content:center;
    top:0;
    left:0;
    margin:0;
overflow:hidden;
}
#boubRed01, #boubRed02{
    position:absolute;
    bottom:12vh;
    margin:0 3px 200px 0;
    border-radius: 50%;
}
.boubRed01{
    z-index:-1;
    width: 200px;
    height: 200px;
    filter: blur(50px);
    background: #fff700;
}
.boubRed02{
    width: 700px;
    height: 500px;
    z-index:-2;
    filter: blur(30px);
    background: #fff700;
    opacity:0.1;
}

.bg-sky{
    position:absolute;
    bottom:12vh;
    margin:0 0 100px 0;
    z-index:-3;
    width:100%;
    height:100%;
    background: url(/img/bg-sky-01.png) bottom no-repeat;}

.censide,.lefside,.rigside
{
    position:relative;
    display:flex;
    height:100%;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
}
.am-l
{
    position:relative;
    bottom:16vh;
    height:746px;
    width:470px;
    background-image: url(/img/am-l.png);
    background-repeat:no-repeat;
    background-position:center;
}
.dimon
{
    position:relative;
    bottom:12vh;
    width: 350px;
    height: 337px;
    background: url(/img/Dimon5.png) center no-repeat;
}
.am-r
{
    position:relative;
    bottom:16vh;
    height:746px;
    width:470px;
    background-image: url(/img/am-r.png);
    background-repeat:no-repeat;
    background-position:center;
}
.audiopre
{
    display:none;
    position:relative;
    top:100px;
    width:100%;
    height:60px;
    opacity:0;
    pointer-events:none;
}

main{position:relative;top:-25%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;}
.crowed{width:100%;}
/*article{max-width:1200px;}*/

article, section, footer{width:100%;max-width:1200px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}

article{margin-bottom:24vh;}

/*------------------------FONTS-------------------------*/
        h1 {font-family:Inter;font-weight:900;font-size:5rem;padding:0 0 0.5rem 0;}
        p {font-family:Inter;font-weight:200;padding:0.5rem 0;line-height:1.4rem;}
/*------------------------Бегущая СТРОКА-------------------------*/

        .player-card {
            position:absolute;bottom:0;
            box-sizing:border-box;
            height:12vh;
            width: 100%;
            transition: all 0.2s ease;
            display:flex;align-items:center;justify-content:center;
            background:rgba(255, 255, 255, 0.5);
        }
        .ticker-wrapper {
            width: 100%;
            overflow: hidden;
        }
        .ticker {
            display: flex;
            align-items: center;
            width: fit-content;
            animation: scrollTicker 28s linear infinite;
            will-change: transform;
        }

/*#tickerTrack{width: 100%;overflow: hidden;margin:0;padding:0;}*/

        /* Блоки с текстом – абсолютно одинаковые */
        .ticker-item {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            white-space: nowrap;
            gap: 2rem;
            padding: 1.2rem 0 0.8rem 0;
            font-size: 3rem;
            font-family: "Bitcount Grid Double", system-ui, monospace;
            text-transform: uppercase;
            background: transparent;
            color: #fff;
        }
        
 .genre {
            display: inline-block;
        }

        .separator {
            display: inline-block;
            margin: 0 8px 0 4px;
            font-size: 1.5rem;
            font-weight: 400;
            color: #ff44aa;
            text-shadow: 0 0 4px #ff44aa;
        }
        /* Эффект при наведении на саму строку — пауза */
        .ticker-wrapper:hover .ticker {
            animation-play-state: paused;
        }

        /* Анимация: сдвиг на половину ширины (ровно на один блок) */
        @keyframes scrollTicker {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
        
        
        .sec-01{flex-wrap:wrap;margin:12vh 0; gap: 2vw;}
        
        .sec-01 a{display:block;box-sizing: border-box; width:22.5%;aspect-ratio: 1;
            border:3px solid #00ffe4;border-radius:5px;
        }
        
        .sec-01 img{width:100%;height:100%;}
        
        .sec-02{flex-direction:column;}
        
        .sec-02-01,.sec-02-02{justify-content:space-between;}
        
        .asi-01{display:flex;align-items:center;justify-content:center;}
        /*.asi-01 img{width:100%;}*/
        .dimon6{width:300px;}
        
        .sec-02-01-01{flex-direction:column;padding:5rem;box-sizing:border-box;}
        
        .slider-01{display:flex;flex-direction:column;box-sizing:border-box;border:3px solid #00ffe4;border-radius:5px;}
        
        .slider-01 img{width:100%;}
        
.sec-04{overflow:visible;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;}

.record-plate{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:center;    width:100%;padding:50%;border-radius:50%;background:#535353;}

.record-label{height:400px;width:400px;position:absolute;display:flex;flex-direction:column;box-sizing:border-box;align-items:center;justify-content:center;border-radius:50%;background-color:#ff0000;
    animation: spinClockwise 2s linear infinite;
}
@keyframes spinClockwise {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
.record-label:hover { animation-play-state: paused; }

.record-hole{position:absolute;height:40px;width:40px;border-radius:50%;background-color:#000;}

.record-txt{height:400px;width:400px;position:absolute;z-index:1;display:flex;flex-direction:column;box-sizing:border-box;align-items:center;justify-content:space-between;text-align:center;}
.record-logo{height:22%;margin:13% 5% 0 0;}
.record-txt div{margin:0 0 20% 0;}
.record-txt p{font-weight: 800; padding:0;}
.record-txt a{color:#000;}
        
/* footer */

        footer{flex-direction:column;        }
        
        .foot-logo{width:100%;}
        
        .copyra{margin:5rem 0;
            font-weight:900;
            font-size:3rem;
        }
        
        
        @media (max-width: 1300px) {
            .sec-01 iframe{width:33.333%;}
        }
        @media (max-width: 680px) {
            .sec-01 iframe{width:50%;}
        }