147 lines
3.8 KiB
CSS
147 lines
3.8 KiB
CSS
/* ==========================
|
|
BACKGROUND EFFECTS
|
|
========================== */
|
|
.particles {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
background:
|
|
radial-gradient(circle at 20% 30%, rgba(0,234,255,0.2), transparent 48%),
|
|
radial-gradient(circle at 80% 70%, rgba(255,0,90,0.2), transparent 48%),
|
|
radial-gradient(circle at 50% 50%, rgba(140,0,255,0.16), transparent 58%),
|
|
radial-gradient(circle at 10% 85%, rgba(0,255,200,0.14), transparent 58%),
|
|
radial-gradient(circle at 90% 15%, rgba(255,0,255,0.17), transparent 48%);
|
|
filter: blur(60px) brightness(125%) saturate(135%);
|
|
animation: particlesFloat 20s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes particlesFloat {
|
|
0% { transform: translateY(0px) translateX(0px); }
|
|
50% { transform: translateY(-30px) translateX(12px); }
|
|
100% { transform: translateY(-45px) translateX(-18px); }
|
|
}
|
|
|
|
.starfield {
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.starfield span {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: rgba(0,255,255,0.85);
|
|
border-radius: 50%;
|
|
filter: blur(2px);
|
|
animation: starMove linear infinite;
|
|
}
|
|
|
|
@keyframes starMove {
|
|
0% { transform: translateY(0); opacity: 0.85; }
|
|
100% { transform: translateY(-750px); opacity: 0; }
|
|
}
|
|
|
|
.cursor-light {
|
|
position: absolute;
|
|
width: 250px;
|
|
height: 250px;
|
|
background: radial-gradient(circle, rgba(0,255,255,0.28), transparent 72%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
filter: blur(45px);
|
|
mix-blend-mode: screen;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.merge-particle {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
opacity: 0.95;
|
|
will-change: transform, opacity;
|
|
filter: blur(1px) drop-shadow(0 0 8px rgba(255,255,255,0.1));
|
|
}
|
|
/* ENHANCED BACKGROUND EFFECTS */
|
|
/* Update .particles styling */
|
|
.particles {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
background:
|
|
radial-gradient(circle at 20% 30%, rgba(0,234,255,0.15), transparent 40%),
|
|
radial-gradient(circle at 80% 70%, rgba(255,0,90,0.15), transparent 40%),
|
|
radial-gradient(circle at 50% 50%, rgba(140,0,255,0.12), transparent 50%),
|
|
radial-gradient(circle at 10% 85%, rgba(0,255,200,0.1), transparent 50%),
|
|
radial-gradient(circle at 90% 15%, rgba(255,0,255,0.13), transparent 40%);
|
|
filter: blur(50px) brightness(110%);
|
|
animation: particlesFloat 18s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes particlesFloat {
|
|
0% {
|
|
transform: translateY(0px) translateX(0px);
|
|
opacity: 0.8;
|
|
}
|
|
50% {
|
|
transform: translateY(-25px) translateX(15px);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(-40px) translateX(-20px);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
/* Enhanced Starfield */
|
|
.starfield {
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.starfield span {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
background: rgba(0,255,255,0.7);
|
|
border-radius: 50%;
|
|
filter: blur(1.5px);
|
|
box-shadow: 0 0 8px rgba(0, 234, 255, 0.6);
|
|
animation: starMove linear infinite;
|
|
}
|
|
|
|
@keyframes starMove {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: translateY(-750px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Enhanced Cursor Light */
|
|
.cursor-light {
|
|
position: absolute;
|
|
width: 280px;
|
|
height: 280px;
|
|
background: radial-gradient(circle, rgba(0,255,255,0.2), rgba(255,0,255,0.15) 50%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
filter: blur(50px);
|
|
mix-blend-mode: screen;
|
|
opacity: 0.5;
|
|
transition: opacity 0.3s ease;
|
|
} |