/* ==========================================
            SerVik Official Website
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;

    max-width:100%;

    overflow-x:hidden;

    scrollbar-gutter:stable;

}

body{

    background:#050505;

    color:white;

    font-family:'Montserrat',sans-serif;

    overflow-x:hidden;

    min-height:100vh;

    max-width:100%;

    width:100%;

}

.hero,

.heroText,

header,

.musicSection{

    max-width:100vw;

}



/*==============================*/

body.theme-de{

    --main:#ff2d2d;
    --second:#ffd500;
    --shadow:#ff0000;

}

body.theme-en{

    --main:#004cff;
    --second:#ffffff;
    --shadow:#ff0000;

}

body.theme-ru{

    --main:#005eff;
    --second:#ffffff;
    --shadow:#ff2d2d;

}

/*==============================*/

#bgCanvas{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

z-index:-5;

}

/*==============================*/

#loader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#000;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

animation:fadeLoader 4s forwards;

}

/*==============================*/

.loaderLogo{

font-size:80px;

font-weight:900;

font-family:Orbitron;

letter-spacing:5px;

text-shadow:

0 0 15px var(--main),

0 0 35px var(--main),

0 0 60px var(--main);

}

/*==============================*/

.ser{

color:white;

}

.vik{

color:var(--main);

}

/*==============================*/

.loaderBar{

margin-top:40px;

width:320px;

height:8px;

border-radius:20px;

overflow:hidden;

background:#202020;

}

/*==============================*/

.loaderProgress{

height:100%;

width:0;

background:linear-gradient(90deg,

var(--main),

var(--second));

animation:loading 3.8s linear forwards;

}

/*==============================*/

@keyframes loading{

100%{

width:100%;

}

}

/*==============================*/

@keyframes fadeLoader{

0%,80%{

opacity:1;

}

100%{

opacity:0;

visibility:hidden;

}

}

/*==============================*/

header{

position:fixed;

left:0;

top:0;

width:100%;

padding:25px 80px;

display:flex;

justify-content:space-between;

align-items:center;

z-index:1000;

backdrop-filter:blur(25px);

background:rgba(255,255,255,.05);

border-bottom:1px solid rgba(255,255,255,.12);

}

/*==============================*/

.logo{

font-family:Orbitron;

font-size:38px;

font-weight:900;

cursor:pointer;

transition:.5s;

}

.logo:hover{

transform:scale(1.08);

}

/*==============================*/

nav{

display:flex;

gap:35px;

}

nav a{

text-decoration:none;

color:white;

font-size:17px;

transition:.35s;

position:relative;

}

nav a:hover{

color:var(--main);

}

nav a.active{

color:var(--main);

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:var(--main);

transition:.4s;

}

nav a:hover::after{

width:100%;

}

/*==============================*/

.flags{

display:flex;

gap:18px;

}

.flag{

width:34px;

cursor:pointer;

transition:.35s;

border-radius:50%;

box-shadow:

0 0 0 transparent;

}

.flag:hover{

transform:scale(1.2) rotate(8deg);

box-shadow:

0 0 18px var(--main);

}

/*======================================
                HERO
=======================================*/

.hero{

position:relative;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

height:100vh;

overflow:hidden;

padding-top:80px;

}

.heroGlow{

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:radial-gradient(circle,

rgba(255,0,70,.45),

transparent 70%);

filter:blur(80px);

animation:glowRotate 18s linear infinite;

z-index:-2;

}

@keyframes glowRotate{

0%{

transform:rotate(0deg) scale(1);

}

50%{

transform:rotate(180deg) scale(1.25);

}

100%{

transform:rotate(360deg) scale(1);

}

}

/*======================================*/

.hero h1{

font-size:140px;

font-family:Orbitron;

font-weight:900;

letter-spacing:8px;

text-transform:none;

text-shadow:

0 0 12px var(--main),

0 0 35px var(--main),

0 0 60px var(--main),

0 0 110px var(--main);

transform-style:preserve-3d;

animation:titleFloat 6s ease-in-out infinite;

}

@keyframes titleFloat{

0%{

transform:

translateY(0px)

rotateX(0deg);

}

50%{

transform:

translateY(-18px)

rotateX(8deg);

}

100%{

transform:

translateY(0px)

rotateX(0deg);

}

}

/*======================================*/

.hero h2{

margin-top:20px;

font-size:32px;

font-weight:600;

letter-spacing:4px;

opacity:.95;

}

.hero p{

margin-top:15px;

font-size:20px;

opacity:.8;

letter-spacing:3px;

}

/*======================================*/

.heroButtons{

display:flex;

gap:25px;

margin-top:50px;

}

/*======================================*/

.btnPrimary{

padding:18px 42px;

border-radius:60px;

background:linear-gradient(90deg,

var(--main),

var(--second));

text-decoration:none;

color:#fff;

font-weight:700;

transition:.35s;

box-shadow:

0 0 30px var(--main);

}

.btnPrimary:hover{

transform:

translateY(-5px)

scale(1.05);

box-shadow:

0 0 60px var(--main),

0 0 100px var(--main);

}

/*======================================*/

.btnGlass{

padding:18px 42px;

border-radius:60px;

border:1px solid rgba(255,255,255,.25);

backdrop-filter:blur(25px);

background:rgba(255,255,255,.05);

color:white;

text-decoration:none;

transition:.35s;

}

.btnGlass:hover{

background:rgba(255,255,255,.12);

transform:translateY(-5px);

}

/*======================================
          FLOATING GLASS OBJECTS
=======================================*/

.floatingGlass{

position:absolute;

border-radius:35px;

background:rgba(255,255,255,.05);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.12);

box-shadow:

0 0 35px rgba(255,255,255,.12);

animation:glassMove 14s ease-in-out infinite;

}

.glass1{

width:180px;

height:180px;

left:10%;

top:22%;

transform:rotate(18deg);

}

.glass2{

width:120px;

height:120px;

right:12%;

top:30%;

animation-delay:3s;

}

.glass3{

width:250px;

height:250px;

right:18%;

bottom:12%;

animation-delay:5s;

}

@keyframes glassMove{

0%{

transform:

translateY(0px)

rotate(0deg);

}

50%{

transform:

translateY(-40px)

rotate(18deg);

}

100%{

transform:

translateY(0px)

rotate(0deg);

}

}

/*======================================
           3D SPHERE
=======================================*/

.floatingSphere{

position:absolute;

right:-180px;

bottom:-120px;

width:520px;

height:520px;

border-radius:50%;

background:

radial-gradient(circle at 30% 30%,

rgba(255,255,255,.7),

rgba(255,255,255,.02));

box-shadow:

0 0 120px var(--main),

inset 0 0 80px rgba(255,255,255,.25);

filter:blur(.2px);

animation:sphereRotate 20s linear infinite;

}

@keyframes sphereRotate{

0%{

transform:

rotate(0deg)

scale(1);

}

50%{

transform:

rotate(180deg)

scale(1.08);

}

100%{

transform:

rotate(360deg)

scale(1);

}

}

/*======================================
         MUSIC SECTION
=======================================*/

.musicSection{

padding:120px 8%;

}

.sectionTitle{

font-size:54px;

font-family:Orbitron;

margin-bottom:60px;

text-shadow:

0 0 20px var(--main);

}

.cards{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(340px,1fr));

gap:45px;

}

/*=========================================
            SONG CARD
=========================================*/

.songCard{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.12);

    transition:.55s;

    cursor:pointer;

    transform-style:preserve-3d;

    box-shadow:

        0 15px 35px rgba(0,0,0,.45);

}

.songCard::before{

    content:"";

    position:absolute;

    left:-150%;

    top:0;

    width:70%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transform:skewX(-25deg);

    transition:1s;

}

.songCard:hover::before{

    left:170%;

}

.songCard:hover{

    transform:

        translateY(-15px)

        rotateX(7deg)

        rotateY(-7deg)

        scale(1.03);

    box-shadow:

        0 0 25px var(--main),

        0 0 60px rgba(255,0,80,.35),

        0 40px 90px rgba(0,0,0,.55);

}

/*====================================*/

.cover{

    position:relative;

    overflow:hidden;

}

.cover img,

.cover video{

    width:100%;

    height:360px;

    object-fit:cover;

    transition:.8s;

    display:block;

    background:#000;

}

@media (max-width:768px){

    .cover video{

        height:260px;

    }

}

.songCard:hover .cover img{

    transform:scale(1.12);

}

/*====================================*/

.songInfo{

    padding:28px;

}

.songInfo h3{

    font-size:30px;

    font-family:Orbitron;

    margin-bottom:10px;

}

.songInfo p{

    opacity:.7;

    margin-bottom:28px;

    letter-spacing:2px;

}

/*====================================*/

.buttons{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

/*====================================*/

.playBtn{

    border:none;

    border-radius:50px;

    padding:15px 28px;

    cursor:pointer;

    background:linear-gradient(

        90deg,

        var(--main),

        var(--second)

    );

    color:white;

    font-size:15px;

    font-weight:700;

    transition:.35s;

}

.playBtn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 0 25px var(--main);

}

/*====================================*/

.spotify{

    text-decoration:none;

    color:white;

    padding:15px 24px;

    border-radius:40px;

    background:#1db954;

    transition:.35s;

}

.spotify:hover{

    transform:scale(1.08);

    box-shadow:

        0 0 25px #1db954;

}

/*====================================*/

.apple{

    text-decoration:none;

    color:white;

    padding:15px 24px;

    border-radius:40px;

    background:#303030;

    transition:.35s;

}

.apple:hover{

    transform:scale(1.08);

    box-shadow:

        0 0 25px white;

}

/*=========================================
            TRACK LIST (Player Rows)
=========================================*/

.trackList{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.trackRow{

    display:flex;

    align-items:center;

    gap:20px;

    width:100%;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(28px);

    border-radius:24px;

    padding:16px 22px;

    border:1px solid rgba(255,255,255,.12);

    box-shadow:

        0 10px 25px rgba(0,0,0,.35);

    transition:.35s;

}

.trackRow.playing{

    border-color:rgba(255,255,255,.3);

    box-shadow:

        0 0 20px var(--main),

        0 10px 25px rgba(0,0,0,.35);

}

.trackCover{

    width:56px;

    height:56px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid rgba(255,255,255,.2);

    flex-shrink:0;

}

.trackPlayBtn{

    flex-shrink:0;

    width:48px;

    height:48px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(90deg,var(--main),var(--second));

    color:white;

    font-size:16px;

    transition:.3s;

}

.trackPlayBtn:hover{

    transform:scale(1.08);

    box-shadow:0 0 20px var(--main);

}

.trackInfo{

    min-width:0;

    flex:1;

}

.trackTitle{

    font-size:18px;

    margin-bottom:8px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.trackProgressRow{

    display:flex;

    align-items:center;

    gap:10px;

}

.trackProgressRow span{

    opacity:.65;

    font-size:12px;

    min-width:36px;

}

.trackProgress{

    flex:1;

    -webkit-appearance:none;

    appearance:none;

    height:5px;

    border-radius:10px;

    background:rgba(255,255,255,.18);

    cursor:pointer;

    accent-color:var(--main);

}

.trackProgress::-webkit-slider-thumb{

    -webkit-appearance:none;

    appearance:none;

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--main);

    box-shadow:0 0 8px var(--main);

    cursor:pointer;

}

.trackProgress::-moz-range-thumb{

    width:14px;

    height:14px;

    border-radius:50%;

    border:none;

    background:var(--main);

    box-shadow:0 0 8px var(--main);

    cursor:pointer;

}

.trackLinks{

    display:flex;

    gap:10px;

    flex-shrink:0;

}

.trackIconLink{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    color:white;

    text-decoration:none;

    font-size:15px;

    transition:.3s;

}

.trackIconLink:hover{

    background:rgba(255,255,255,.2);

    transform:scale(1.1);

}

/*=========================================
        RESPONSIVE / MOBILE
=========================================*/

@media (max-width:1024px){

    header{

        padding:20px 30px;

    }

    .hero h1{

        font-size:90px;

    }

    .cards{

        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    }

}

/*====================================*/

@media (max-width:768px){

    header{

        flex-wrap:wrap;

        gap:14px;

        padding:16px 20px;

    }

    .logo{

        font-size:28px;

    }

    nav{

        order:3;

        width:100%;

        justify-content:center;

        gap:20px;

        flex-wrap:wrap;

    }

    nav a{

        font-size:15px;

    }

    .flags{

        gap:10px;

    }

    .flag{

        width:26px;

    }

    .hero{

        padding-top:140px;

        height:auto;

        min-height:100vh;

    }

    .hero h1{

        font-size:56px;

        letter-spacing:3px;

    }

    .hero h2{

        font-size:20px;

        text-align:center;

        letter-spacing:2px;

    }

    .hero p{

        font-size:15px;

        text-align:center;

    }

    .heroButtons{

        flex-direction:column;

        width:80%;

    }

    .btnPrimary,

    .btnGlass{

        justify-content:center;

        text-align:center;

        padding:16px 28px;

    }

    .floatingSphere,

    .floatingGlass{

        display:none;

    }

    .musicSection{

        padding:80px 6% 100px 6%;

    }

    .sectionTitle{

        font-size:36px;

    }

    .cards{

        grid-template-columns:1fr;

        gap:30px;

    }

    .cover img{

        height:260px;

    }

    .trackRow{

        flex-wrap:wrap;

        align-items:center;

        padding:14px;

        gap:12px;

    }

    .trackCover{

        width:44px;

        height:44px;

    }

    .trackPlayBtn{

        width:40px;

        height:40px;

    }

    .trackInfo{

        min-width:0;

        flex:1 1 100%;

        order:3;

    }

    .trackLinks{

        order:2;

    }

    .trackProgressRow{

        width:100%;

    }

}

/*====================================*/

@media (max-width:480px){

    .hero h1{

        font-size:42px;

    }

    .heroButtons{

        width:100%;

    }

    .sectionTitle{

        font-size:28px;

    }

    .songInfo{

        padding:20px;

    }

    .songInfo h3{

        font-size:22px;

    }

    .buttons{

        gap:10px;

    }

    .playBtn,

    .spotify,

    .apple{

        padding:12px 18px;

        font-size:13px;

    }

}
/*=========================================
            TABS
=========================================*/

.tabView{

    display:none;

}

.tabView.active{

    display:block;

}

.tabTopSection{

    padding:160px 6% 100px 6%;

    min-height:70vh;

}

/*=========================================
            PAGINATION
=========================================*/

.pagination{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-top:50px;

}

.pagination button{

    width:44px;

    height:44px;

    border-radius:50%;

    border:none;

    background:rgba(255,255,255,.08);

    color:white;

    font-size:15px;

    cursor:pointer;

    transition:.3s;

}

.pagination button:hover:not(:disabled){

    background:rgba(255,255,255,.2);

    transform:scale(1.08);

}

.pagination button:disabled{

    opacity:.3;

    cursor:not-allowed;

}

.pageLabel{

    opacity:.7;

    font-size:14px;

    min-width:60px;

    text-align:center;

}

/*=========================================
            ABOUT (basic)
=========================================*/

.aboutBox{

    max-width:800px;

    margin:0 auto;

    text-align:center;

}

.aboutBox h2{

    font-size:42px;

    font-family:Orbitron;

    margin-bottom:24px;

    text-shadow:0 0 20px var(--main);

}

.aboutBox p{

    font-size:18px;

    line-height:1.8;

    opacity:.85;

}

/*=========================================
            CONTACT (basic)
=========================================*/

.contactBox{

    max-width:600px;

    margin:0 auto;

    text-align:center;

}

.contactBox h2{

    font-size:42px;

    font-family:Orbitron;

    margin-bottom:30px;

    text-shadow:0 0 20px var(--main);

}

.socials{

    display:flex;

    justify-content:center;

    gap:24px;

    flex-wrap:wrap;

}

.socials a{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    color:white;

    font-size:22px;

    text-decoration:none;

    transition:.3s;

}

.socials a:hover{

    background:linear-gradient(90deg,var(--main),var(--second));

    transform:scale(1.1);

}

/*=========================================
            FOOTER (minimal)
=========================================*/

footer{

    text-align:center;

    padding:30px 6%;

    opacity:.7;

    font-size:14px;

}

.footerSocials{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:16px;

    margin-top:14px;

}

.footerSocials a{

    color:white;

    font-size:18px;

    text-decoration:none;

    opacity:.75;

    transition:.3s;

}

.footerSocials a:hover{

    opacity:1;

    color:var(--main);

}

/*=========================================
            MOBILE — Tabs/Pagination
=========================================*/

@media (max-width:768px){

    .tabTopSection{

        padding:130px 6% 60px 6%;

    }

    .aboutBox h2,

    .contactBox h2{

        font-size:30px;

    }

    .aboutBox p{

        font-size:15px;

    }

    .socials a{

        width:46px;

        height:46px;

        font-size:18px;

    }

    .pagination{

        gap:14px;

    }

}