/* eivyx art rock animation */


/* ロゴバウンド */

.logo{

width:180px;

animation:logoBounce 0.8s ease-out 1,
inkSpread 1.6s ease-out 0.4s 1;

}


/* バウンド */

@keyframes logoBounce{

0%{transform:translateY(-40px);opacity:0;}
40%{transform:translateY(12px);opacity:1;}
65%{transform:translateY(-6px);}
85%{transform:translateY(3px);}
100%{transform:translateY(0);}

}


/* インク広がり */

@keyframes inkSpread{

0%{
filter:blur(6px);
transform:scale(0.9);
}

50%{
filter:blur(2px);
}

100%{
filter:blur(0);
transform:scale(1);
}

}


/* 背景ペイント */

.paint-bg{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background-image:

radial-gradient(circle at 20% 30%, rgba(255,0,120,0.4), transparent 300px),
radial-gradient(circle at 80% 20%, rgba(0,140,255,0.4), transparent 300px),
radial-gradient(circle at 40% 80%, rgba(255,200,0,0.4), transparent 300px),
radial-gradient(circle at 70% 70%, rgba(0,255,180,0.4), transparent 300px);

animation:paintMove 18s linear infinite;

z-index:-1;

}


/* 背景ゆっくり移動 */

@keyframes paintMove{

0%{
transform:translate(0,0);
}

50%{
transform:translate(-40px,-20px);
}

100%{
transform:translate(0,0);
}

}