/* Background Stars Animation */
.stars-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(125deg, var(--primary) 0%, var(--secondary) 100%);
overflow: hidden;
}
#stars, #stars2, #stars3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@keyframes animateStars {
from {
transform: translateY(0);
}
to {
transform: translateY(-1000px);
}
}
#stars {
background: transparent url('data:image/svg+xml;utf8,') repeat top center;
animation: animateStars 150s linear infinite;
}
#stars2 {
background: transparent url('data:image/svg+xml;utf8,') repeat top center;
animation: animateStars 100s linear infinite;
}
#stars3 {
background: transparent url('data:image/svg+xml;utf8,') repeat top center;
animation: animateStars 200s linear infinite;
}
/* Pulse Animation */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(50, 255, 227, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(50, 255, 227, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(50, 255, 227, 0);
}
}
/* Button Glow Animation */
@keyframes buttonGlow {
0% {
box-shadow: 0 0 5px rgba(50, 255, 227, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(50, 255, 227, 0.8);
}
100% {
box-shadow: 0 0 5px rgba(50, 255, 227, 0.5);
}
}
.btn-primary {
animation: buttonGlow 3s infinite;
}
/* Hover Animation for Cards */
@keyframes borderGlow {
0% {
border-color: rgba(50, 255, 227, 0.3);
}
50% {
border-color: rgba(255, 90, 205, 0.5);
}
100% {
border-color: rgba(50, 255, 227, 0.3);
}
}
.game-card:hover {
animation: borderGlow 2s infinite;
}
/* Comet Trail Animation */
@keyframes cometTrail {
0% {
transform: translateX(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) rotate(45deg);
}
}
.glass-card:hover .comet-trail {
animation: cometTrail 1.5s ease-in-out;
}
/* Logo Glow Animation */
@keyframes logoGlow {
0% {
text-shadow: 0 0 5px rgba(50, 255, 227, 0.5);
}
50% {
text-shadow: 0 0 15px rgba(50, 255, 227, 0.8);
}
100% {
text-shadow: 0 0 5px rgba(50, 255, 227, 0.5);
}
}
.logo-text {
animation: logoGlow 3s infinite;
}
/* Grid Line Animation */
@keyframes gridPulse {
0% {
opacity: 0.1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0.1;
}
}
.grid-line {
animation: gridPulse 4s infinite;
}
.grid-line:nth-child(even) {
animation-delay: 2s;
}
/* Hamburger Menu Animation */
@keyframes hamburgerTop {
0% {
transform: translateY(0);
}
50% {
transform: translateY(9px);
}
100% {
transform: translateY(9px) rotate(45deg);
}
}
@keyframes hamburgerMiddle {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes hamburgerBottom {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-9px);
}
100% {
transform: translateY(-9px) rotate(-45deg);
}
}
.hamburger.active span:nth-child(1) {
animation: hamburgerTop 0.3s forwards;
}
.hamburger.active span:nth-child(2) {
animation: hamburgerMiddle 0.3s forwards;
}
.hamburger.active span:nth-child(3) {
animation: hamburgerBottom 0.3s forwards;
}
/* Holographic Card Animation */
@keyframes holographicShimmer {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
.card-inner::before {
animation: holographicShimmer 6s linear infinite;
background-size: 200% 200%;
}
/* Rank Badge Pulse */
@keyframes rankPulse {
0% {
transform: scale(1);
box-shadow: 0 0 10px rgba(255, 90, 205, 0.5);
}
50% {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(255, 90, 205, 0.8);
}
100% {
transform: scale(1);
box-shadow: 0 0 10px rgba(255, 90, 205, 0.5);
}
}
.player-rank {
animation: rankPulse 2s infinite;
}
/* Tournament Date Glow */
@keyframes dateGlow {
0% {
box-shadow: 0 0 10px rgba(255, 90, 205, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(255, 90, 205, 0.6);
}
100% {
box-shadow: 0 0 10px rgba(255, 90, 205, 0.3);
}
}
.tournament-date {
animation: dateGlow 3s infinite;
}