@charset "utf-8";
/* CSS Document */

.header-top-line{

position:absolute;

top:20;

left:0;

width:100%;

height:5px;

overflow:hidden;

background:#111;

z-index:999;

}

.header-top-line::after{

content:"";

position:absolute;

left:-30%;

width:30%;

height:100%;

background:linear-gradient(

90deg,

transparent,

#A54CC4,

#ffffff,

#A54CC4,

transparent

);

animation:headerLineMove 7s linear infinite;

}

@keyframes headerLineMove{

0%{

left:-30%;

}

100%{

left:130%;

}

}

/*hero backroung over lay*/
.hero-overlay{

position:absolute;

inset:0;

pointer-events:none;

background:

radial-gradient(

circle at center,

rgba(165,76,196,.06),

transparent 70%

);

animation:

overlayMove 22s linear infinite;

}

@keyframes overlayMove{

0%{

transform:translateX(-5%);

}

50%{

transform:translateX(5%);

}

100%{

transform:translateX(-5%);

}

}

/*mounse glow*/
.header-light{

position:absolute;

width:320px;

height:320px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(165,76,196,.22),

transparent 70%

);

pointer-events:none;

opacity:0;

filter:blur(40px);

transform:translate(-50%,-50%);

transition:

opacity .35s,

left .08s linear,

top .08s linear;

z-index:2;

}

 

/*AUTOMAITIC REVEAL ANIMATION*/
section{

opacity:0;

transform:

translateY(70px);

transition:

1s cubic-bezier(.22,1,.36,1);

}

section.section-visible{

opacity:1;
 /*drop top voew before disc in index*/
transform:none;
 padding-top:15%;

}

/*cards*/
.card{

transition:.4s;

}

.card:hover{

transform:

translateY(-10px);

box-shadow:

0 25px 60px rgba(165,76,196,.20);

}

/*buttons*/
button,

.btn{

transition:.35s;

}

button:hover,

.btn:hover{

box-shadow:

0 0 25px rgba(165,76,196,.45);

}

/*images*/
img{

transition:.4s;

}

img:hover{

transform:scale(1.02);

}

/*noise*/
body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

opacity:.025;

background-image:

radial-gradient(#fff 1px,transparent 1px);

background-size:6px 6px;

z-index:99999;

animation:noiseMove 18s linear infinite;

}

@keyframes noiseMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-150px);

}

}

/*audio visuallizer*/
/*==================================================
AUDIO VISUALIZER
==================================================*/

/*==================================================
AUDIO VISUALIZER
==================================================*/

#visualizer{

    position:absolute;

    left:50%;
    top:50%;

    width:640px;
    height:640px;

    transform:translate(-50%,-50%);

    pointer-events:none;

    z-index:25;

    /* Hidden until playing */
    opacity:0;

    transition:
        opacity .8s ease,
        filter .6s ease;

    filter:blur(.4px);

}

/*resposive visualizer*/
@media(max-width:1400px){

#visualizer{

width:520px;
height:520px;

}

}

@media(max-width:992px){

#visualizer{

width:430px;
height:430px;

}

}

@media(max-width:600px){

#visualizer{

width:320px;
height:320px;

}

}