Add glitter

styles.css

@@ -75,6 +75,8 @@ h1 {
   font-weight: 500;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+  overflow: hidden;
 }
 
 #download:hover {
@@ -82,6 +84,94 @@ h1 {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }
 
+.glitter-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: 25px;
+}
+
+.glitter {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  pointer-events: none;
+  opacity: 0;
+}
+
+@keyframes glitter1 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-20px) translateX(10px) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-40px) translateX(20px) scale(0);
+  }
+}
+
+@keyframes glitter2 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0) rotate(0deg);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-15px) translateX(-15px) scale(1.2) rotate(180deg);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-30px) translateX(-30px) scale(0) rotate(360deg);
+  }
+}
+
+@keyframes glitter3 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0);
+  }
+
+  30% {
+    opacity: 1;
+    transform: translateY(-10px) translateX(5px) scale(0.8);
+  }
+
+  70% {
+    opacity: 1;
+    transform: translateY(-25px) translateX(-5px) scale(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-35px) translateX(-10px) scale(0);
+  }
+}
+
+.glitter.anim1 {
+  animation: glitter1 1.5s ease-out infinite;
+}
+
+.glitter.anim2 {
+  animation: glitter2 1.8s ease-out infinite;
+}
+
+.glitter.anim3 {
+  animation: glitter3 1.2s ease-out infinite;
+}
+
 .qr-container {
   margin: 30px 0;
   display: flex;
@@ -91,12 +181,14 @@ h1 {
   border-radius: 15px;
   padding: 20px;
   overflow: visible;
+  position: relative;
 }
 
 #qrcode {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 }
 
 #qrcode svg {
@@ -111,6 +203,94 @@ h1 {
   display: block;
 }
 
+.qr-glitter-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 10;
+}
+
+.qr-glitter {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  pointer-events: none;
+  opacity: 0;
+}
+
+@keyframes qrGlitter1 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-30px) translateX(15px) scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-60px) translateX(30px) scale(0);
+  }
+}
+
+@keyframes qrGlitter2 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0) rotate(0deg);
+  }
+
+  50% {
+    opacity: 1;
+    transform: translateY(-25px) translateX(-20px) scale(1.3) rotate(180deg);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-50px) translateX(-40px) scale(0) rotate(360deg);
+  }
+}
+
+@keyframes qrGlitter3 {
+  0% {
+    opacity: 0;
+    transform: translateY(0) translateX(0) scale(0);
+  }
+
+  30% {
+    opacity: 1;
+    transform: translateY(-15px) translateX(8px) scale(0.9);
+  }
+
+  70% {
+    opacity: 1;
+    transform: translateY(-35px) translateX(-8px) scale(1.2);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-55px) translateX(-15px) scale(0);
+  }
+}
+
+.qr-glitter.anim1 {
+  animation: qrGlitter1 2s ease-out;
+}
+
+.qr-glitter.anim2 {
+  animation: qrGlitter2 2.2s ease-out;
+}
+
+.qr-glitter.anim3 {
+  animation: qrGlitter3 1.8s ease-out;
+}
+
 .footer {
   margin-top: 20px;
   color: #666;