update animasi

login.css

@@ -229,6 +229,12 @@ input:focus {
 .f2 { top: 65%; right: 12%; animation-delay: .7s; }
 .f3 { top: 22%; right: 55%; animation-delay: 1.1s; }
 .f4 { bottom: 15%; left: 28%; animation-delay: .9s; }
+.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; }
+.f6 { top: 40%; left: 50%; animation-delay: .5s; }
+.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; }
+.f8 { top: 75%; right: 40%; animation-delay: .8s; }
+.f9 { top: 50%; left: 80%; animation-delay: 1s; }
+.f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; }
 
 @keyframes float {
   0% { transform: translateY(0) rotate(0deg); }
@@ -241,3 +247,10 @@ input:focus {
   50% { transform: translateX(15px); }
   100% { transform: translateX(0); }
 }
+
+.login-card, .container {
+  transition: transform .4s ease;
+}
+.login-card:hover, .container:hover {
+  transform: scale(1.012);
+}

login.html

@@ -16,6 +16,17 @@
       <div class="bg-circle three"></div>
     </div>
 
+    <img src="images/fruit1.png" class="fruit f1">
+    <img src="images/fruit2.png" class="fruit f2">
+    <img src="images/fruit3.png" class="fruit f3">
+    <img src="images/fruit4.png" class="fruit f4">
+    <img src="images/fruit5.png" class="fruit f5">
+    <img src="images/fruit6.png" class="fruit f6">
+    <img src="images/fruit7.png" class="fruit f7">
+    <img src="images/fruit8.png" class="fruit f8">
+    <img src="images/fruit9.png" class="fruit f9">
+    <img src="images/fruit10.png" class="fruit f10">
+
     <!-- Login Card -->
     <div class="login-card">
       <div class="icon-wrapper">

login.js

@@ -85,3 +85,11 @@ document.addEventListener("DOMContentLoaded", function () {
   }
 });
 
+setInterval(() => {
+  document.querySelectorAll(".glitter").forEach(g => {
+    g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
+    g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
+    g.style.left = Math.random() * window.innerWidth + "px";
+    g.style.top = Math.random() * window.innerHeight + "px";
+  });
+}, 900);