GSAP for all animations, 3x slower, brighter city images

- Added GSAP 3.12.5 from CDN
- Card stagger entrance now uses gsap.fromTo with 0.6s duration, 0.09 stagger
- Carousel slide uses gsap.timeline: old slides out right (3s), new slides
  in from right (3s), label slides in (2.5s after 0.3s offset)
- All animations use power2.out easing
- Image brightness: opacity 0.12→0.25, filter brightness(1.15) saturate(1.1)
- ::after overlay changed from solid midnight @ 0.6 to gradient
  (midnight→transparent @ 0.5) — brighter image with smooth falloff

script.js

@@ -461,12 +461,11 @@ var si = 0,
                 cards.push({ el: card, server: s, idx: idx });
               });
 
-              /* Stagger the card entrance animation */
-              cards.forEach(function(c, i) {
-                setTimeout(function() {
-                  c.el.classList.add('visible');
-                }, 80 + i * 70);
-              });
+              /* GSAP stagger entrance for cards */
+              gsap.fromTo('.server-card',
+                { opacity: 0, y: 20 },
+                { opacity: 1, y: 0, duration: 0.6, stagger: 0.09, ease: 'power2.out' }
+              );
 
               function pingServer(host) {
                 return new Promise(function(resolve) {
@@ -523,7 +522,7 @@ var si = 0,
                     c.el.classList.add('server-best');
                   }
                 });
-                /* Preload city image and carousel-slide */
+                /* Preload city image and carousel-slide with GSAP */
                 var hero = document.querySelector('.hero');
                 var bestCard = cards.filter(function(c) { return c.server.host === best.host; })[0];
                 if (hero && bestCard && heroImages[best.host]) {
@@ -546,21 +545,23 @@ var si = 0,
                     newEl.className = 'hero-bg-slide new';
                     newEl.style.backgroundImage = "url('" + heroImages[best.host] + "')";
                     bg.appendChild(newEl);
-                    /* Fire both animations together */
-                    requestAnimationFrame(function() {
-                      oldEl.classList.add('out');
-                      newEl.classList.add('in');
-                    });
                     /* Label slides in from right */
                     var label = document.createElement('div');
                     label.className = 'hero-city-label';
                     label.innerHTML = 'Our <strong>' + bestCard.server.city + '</strong> server fits your location';
                     hero.appendChild(label);
-                    requestAnimationFrame(function() {
-                      label.classList.add('visible');
+
+                    /* GSAP timeline — 3x slower */
+                    gsap.set(oldEl, { x: '0%' });
+                    gsap.set(newEl, { x: '100%' });
+                    gsap.set(label, { x: '150%' });
+
+                    var tl = gsap.timeline({
+                      onComplete: function() { oldEl.remove(); }
                     });
-                    /* Clean up old slide after animation done */
-                    setTimeout(function() { oldEl.remove(); }, 1200);
+                    tl.to(oldEl,  { x: '100%', duration: 3, ease: 'power2.out' }, 0)
+                      .to(newEl,  { x: '0%',   duration: 3, ease: 'power2.out' }, 0)
+                      .to(label,  { x: '0%',   duration: 2.5, ease: 'power2.out' }, 0.3);
                   };
                   img.src = heroImages[best.host];
                 }