Hero: preload city image, left-to-right clip-path reveal, label slide-in

- Preloads the best server's city image via new Image() before showing
- Reveal overlay uses clip-path: inset(0 100% ...) → inset(0) for smooth
  left-to-right slide over the default Amsterdam background
- Label 'Our <City> server fits your location' slides in from right
  simultaneously with backdrop-blur and brass border
- Both animations start and end together via requestAnimationFrame

script.js

@@ -523,10 +523,28 @@ var si = 0,
                     c.el.classList.add('server-best');
                   }
                 });
-                /* Swap hero background to best server's city */
+                /* Preload city image and animate reveal */
                 var hero = document.querySelector('.hero');
-                if (hero && heroImages[best.host]) {
-                  hero.style.setProperty('--hero-bg', "url('" + heroImages[best.host] + "')");
+                var bestCard = cards.filter(function(c) { return c.server.host === best.host; })[0];
+                if (hero && bestCard && heroImages[best.host]) {
+                  var img = new Image();
+                  img.onload = function() {
+                    /* Reveal overlay — slides left-to-right via clip-path */
+                    var reveal = document.createElement('div');
+                    reveal.className = 'hero-city-reveal';
+                    reveal.style.backgroundImage = "url('" + heroImages[best.host] + "')";
+                    hero.appendChild(reveal);
+                    /* Label — slides right-to-left simultaneously */
+                    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() {
+                      reveal.classList.add('open');
+                      label.classList.add('visible');
+                    });
+                  };
+                  img.src = heroImages[best.host];
                 }
                 /* Update banner status */
                 bannerStatus.innerHTML =