diff --git a/index.html b/index.html
index 52d5b9f..e63930f 100644
--- a/index.html
+++ b/index.html
@@ -339,6 +339,60 @@
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
+ /* Enhanced random twinkling animation */
+@keyframes twinkle-random {
+ 0% {
+ opacity: 0.3;
+ transform: scale(1);
+ }
+ 20% {
+ opacity: 1;
+ transform: scale(1.2);
+ }
+ 40% {
+ opacity: 0.4;
+ transform: scale(0.9);
+ }
+ 60% {
+ opacity: 0.9;
+ transform: scale(1.1);
+ }
+ 80% {
+ opacity: 0.5;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0.3;
+ transform: scale(1);
+ }
+}
+
+@keyframes shine-burst {
+ 0% {
+ opacity: 0.3;
+ box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
+ }
+ 50% {
+ opacity: 1;
+ box-shadow: 0 0 15px rgba(255, 255, 255, 1),
+ 0 0 25px rgba(255, 255, 255, 0.6);
+ }
+ 100% {
+ opacity: 0.3;
+ box-shadow: 0 0 2px rgba(255, 255, 255, 0.3);
+ }
+}
+
+ @keyframes gentle-pulse {
+ 0%, 100% {
+ opacity: 0.4;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.8;
+ transform: scale(1.15);
+ }
+}
@keyframes float-asteroid {
0% {
@@ -635,7 +689,7 @@
const stardustContainer = document.querySelector('.stardust');
// Generate enhanced stars with different sizes and colors
- for (let i = 0; i < 200; i++) {
+ for (let i = 0; i < 200; i++) {
const star = document.createElement('div');
star.classList.add('star');
@@ -651,7 +705,13 @@
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
- star.style.animationDelay = `${Math.random() * 3}s`;
+ // Assign random animation types for variety
+ const animations = ['twinkle-random', 'shine-burst', 'gentle-pulse', 'twinkle', 'twinkle-fast', 'twinkle-slow'];
+ const randomAnimation = animations[Math.floor(Math.random() * animations.length)];
+ star.style.animation = `${randomAnimation} ${2 + Math.random() * 4}s ease-in-out infinite`;
+
+ // Random delay for non-synchronized twinkling
+ star.style.animationDelay = `${Math.random() * 5}s`;
starsContainer.appendChild(star);
}
@@ -765,4 +825,4 @@
}, 1000);