Update index.html

Author: AionSystem

Mothersday/index.html

@@ -68,24 +68,23 @@
   z-index: 11;
 }
 
-/* CURSOR – faster response */
+/* CURSOR – identical to main site for smooth response */
 .custom-cursor {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   border: 2px solid var(--gold);
   border-radius: 50%;
   position: fixed;
   pointer-events: none;
   z-index: 9999;
   mix-blend-mode: screen;
-  will-change: transform;
-  transition: transform 0.05s ease, background 0.15s ease, box-shadow 0.15s ease;
+  transition: transform 0.1s ease, background 0.2s ease, box-shadow 0.2s ease;
   transform: translate(-50%, -50%);
   box-shadow: 0 0 15px var(--gold), 0 0 30px rgba(212,175,55,0.3);
 }
 .custom-cursor.hover {
   transform: translate(-50%, -50%) scale(1.8);
-  background: rgba(212,175,55,0.12);
+  background: rgba(212,175,55,0.1);
   border-color: var(--rose);
   box-shadow: 0 0 25px var(--rose), 0 0 50px rgba(232,160,176,0.5);
 }
@@ -97,9 +96,9 @@
   background: var(--gold);
   pointer-events: none;
   z-index: 9998;
-  opacity: 0.5;
+  opacity: 0.6;
   box-shadow: 0 0 10px var(--gold);
-  will-change: transform, opacity;
+  transition: opacity 0.3s ease;
 }
 
 #hero-canvas {
@@ -497,22 +496,19 @@ <h1 class="hero-title"><em>Happy</em> Mother's<br>Day</h1>
   const sctx = scrollCanvas.getContext('2d');
   const heartSymbols = ['♥','❤','♡','✦','✧','❀','🌸','🌺','🌷','🌹'];
   const centerX = 60, centerY = 60;
-  const heartScale = 28; // size of heart shape
   let startAngle = 0;
 
-  // Parametric heart shape
   function heartPoint(t) {
-    // t in [0, 2PI]
     const x = 16 * Math.pow(Math.sin(t), 3);
     const y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);
-    return { x: x * 1.8, y: -y * 1.8 }; // scale and flip y
+    return { x: x * 1.8, y: -y * 1.8 };
   }
 
-  const numHeartSymbols = 18; // symbols around heart
+  const numHeartSymbols = 18;
 
   function drawScrollIndicator(now) {
     sctx.clearRect(0, 0, 120, 120);
-    const angleOffset = startAngle + now * 0.0008; // rotate slowly
+    const angleOffset = startAngle + now * 0.0008;
 
     for (let i = 0; i < numHeartSymbols; i++) {
       const t = (i / numHeartSymbols) * Math.PI * 2 + angleOffset;
@@ -539,31 +535,29 @@ <h1 class="hero-title"><em>Happy</em> Mother's<br>Day</h1>
   }
   requestAnimationFrame(drawScrollIndicator);
 
-  // ========== CUSTOM CURSOR (optimized) ==========
+  // ========== CUSTOM CURSOR (matches main site) ==========
   const cursor = document.getElementById('custom-cursor');
   const trailContainer = document.getElementById('cursor-trail-container');
   let trailPositions = [];
-  const MAX_TRAIL = 5; // reduced for snappiness
+  const MAX_TRAIL = 8;
 
   function updateCursor(e) {
     const x = e.clientX, y = e.clientY;
     cursor.style.left = x + 'px'; cursor.style.top = y + 'px';
     trailPositions.push({ x, y, time: Date.now() });
     if (trailPositions.length > MAX_TRAIL) trailPositions.shift();
     trailContainer.innerHTML = '';
-    for (let i = 0; i < trailPositions.length; i++) {
-      const pos = trailPositions[i];
+    trailPositions.forEach((pos, i) => {
       const dot = document.createElement('div');
       dot.className = 'cursor-trail';
       const age = (Date.now() - pos.time) / 1000;
-      const opacity = Math.max(0, 0.5 - age * 1.2);
-      const scale = 1 - i * 0.12;
-      dot.style.left = pos.x + 'px';
-      dot.style.top = pos.y + 'px';
+      const opacity = Math.max(0, 0.6 - age * 0.8);
+      const scale = 1 - i * 0.1;
+      dot.style.left = pos.x + 'px'; dot.style.top = pos.y + 'px';
       dot.style.opacity = opacity;
       dot.style.transform = `translate(-50%, -50%) scale(${scale})`;
       trailContainer.appendChild(dot);
-    }
+    });
   }
 
   document.addEventListener('mousemove', updateCursor, { passive: true });