#arcaweb-content .grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.gradient {
background: linear-gradient(90deg, #542eff 0%, #238dce 100%);
}
@keyframes ki-explosion {
0% {
transform: scale(0.2);
opacity: 0;
}
30% {
transform: scale(1.4);
opacity: 0.1;
}
50% {
transform: scale(2);
opacity: 0.4;
}
70% {
transform: scale(2.0);
opacity: 0.2;
}
100% {
transform: scale(0.2);
opacity: 0;
}
}
.animate-ki-explosion {
animation: ki-explosion 2s ease-in-out infinite;
}
@keyframes waveTop1 {
0%, 100% {
transform: translateY(-5px);
}
50% {
transform: translateY(10px); }
}
@keyframes waveTop2 {
0%, 100% {
transform: translateY(-5px);
}
50% {
transform: translateY(-20px); }
}
@keyframes waveTop3 {
0%, 100% {
transform: translateY(10);
}
50% {
transform: translateY(150px); }
} .wave-top .wave path:nth-child(1) {
animation: waveTop1 5s ease-in-out infinite;
}
.wave-top .wave path:nth-child(2) {
animation: waveTop2 5s ease-in-out infinite;
}
.wave-top .wave path:nth-child(3) {
animation: waveTop3 5s ease-in-out infinite;
}
@keyframes wave1 {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(5px); }
}
@keyframes wave2 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px); }
}
@keyframes wave3 {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(50px); }
}
.relative svg path:nth-child(1) {
animation: wave1 5s ease-in-out infinite;
}
.relative svg path:nth-child(2) {
animation: wave2 5s ease-in-out infinite;
}
.relative svg path:nth-child(3) {
animation: wave3 5s ease-in-out infinite;
}