Thêm nhiều hiệu ứng động hơn, hiệu ứng tuyết rơi nữa. Chuển chuột thành hình trái tim

index.html

@@ -192,6 +192,20 @@
         feather.replace();
     </script>
     <script src="script.js"></script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+    <style>
+        /* Add subtle heartbeat to hero section */
+        section.relative h1 {
+            animation: heartbeat 1.5s ease-in-out infinite;
+        }
+        
+        @keyframes heartbeat {
+            0% { transform: scale(1); }
+            25% { transform: scale(1.05); }
+            50% { transform: scale(1); }
+            75% { transform: scale(1.03); }
+            100% { transform: scale(1); }
+        }
+    </style>
 </body>
 </html>

script.js

@@ -1,8 +1,61 @@
+
+// Create snowflakes
+function createSnowflakes() {
+    const snowflakesCount = 50;
+    const body = document.body;
+    
+    for (let i = 0; i < snowflakesCount; i++) {
+        setTimeout(() => {
+            const snowflake = document.createElement('div');
+            snowflake.classList.add('snowflake');
+            snowflake.innerHTML = '❄';
+            
+            // Random properties
+            const size = Math.random() * 15 + 5;
+            const left = Math.random() * window.innerWidth;
+            const duration = Math.random() * 10 + 5;
+            const delay = Math.random() * 5;
+            const opacity = Math.random() * 0.5 + 0.5;
+            
+            snowflake.style.left = `${left}px`;
+            snowflake.style.fontSize = `${size}px`;
+            snowflake.style.animationDuration = `${duration}s`;
+            snowflake.style.animationDelay = `${delay}s`;
+            snowflake.style.opacity = opacity;
+            
+            body.appendChild(snowflake);
+            
+            // Remove snowflake after animation completes
+            setTimeout(() => {
+                snowflake.remove();
+            }, duration * 1000);
+        }, i * 300);
+    }
+    
+    // Keep creating snowflakes
+    setInterval(createSnowflakes, 15000);
+}
+
+// Add floating animation to elements
+function addFloatingEffects() {
+    const floatingElements = document.querySelectorAll('h1, h2, h3, .countdown-box');
+    floatingElements.forEach(el => {
+        el.style.animation = 'float 3s ease-in-out infinite';
+    });
+
+    const pulseElements = document.querySelectorAll('button, a[href="#rsvp"], a[href="#details"]');
+    pulseElements.forEach(el => {
+        el.style.animation = 'pulse 2s ease-in-out infinite';
+    });
+}
+
 // Intersection Observer for section animations
 document.addEventListener('DOMContentLoaded', () => {
-    const sections = document.querySelectorAll('section');
+    createSnowflakes();
+    addFloatingEffects();
     
-    const observer = new IntersectionObserver((entries) => {
+    const sections = document.querySelectorAll('section');
+const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
                 entry.target.classList.add('show');

style.css

@@ -1,8 +1,45 @@
+
 /* Smooth scrolling */
 html {
     scroll-behavior: smooth;
+    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ff3366'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>"), auto;
+}
+
+/* Heart cursor for clickable elements */
+a, button, input[type="submit"], label {
+    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='%23ff3366'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>"), pointer;
+}
+
+/* Floating animation */
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0px); }
 }
 
+/* Pulse animation */
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+/* Snowflakes */
+.snowflake {
+    position: fixed;
+    top: -10px;
+    z-index: 9999;
+    color: white;
+    user-select: none;
+    pointer-events: none;
+    animation: fall linear forwards;
+}
+
+@keyframes fall {
+    to {
+        transform: translateY(100vh);
+    }
+}
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;