Carousel hero bg: old image slides out right, new slides in from right

- ::after is now a dark overlay only (no bg image)
- .hero-bg container created on first swap
- Old slide (Amsterdam default) starts at translateX(0), animates to
  translateX(100%) — slides out to the right
- New slide (winning city) starts at translateX(100%), animates to
  translateX(0) — slides in from the right
- Both fire simultaneously via requestAnimationFrame, same easing
- Old slide removed after 1.2s cleanup timeout
- Label 'Our <City> server fits your location' slides in from right
  alongside the carousel animation

script.js

@@ -523,26 +523,44 @@ var si = 0,
                     c.el.classList.add('server-best');
                   }
                 });
-                /* Preload city image and animate reveal */
+                /* Preload city image and carousel-slide */
                 var hero = document.querySelector('.hero');
                 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 */
+                    /* Create background container on first swap */
+                    var bg = hero.querySelector('.hero-bg');
+                    if (!bg) {
+                      bg = document.createElement('div');
+                      bg.className = 'hero-bg';
+                      hero.insertBefore(bg, hero.firstChild);
+                    }
+                    /* Old slide — starts at current position, slides out right */
+                    var oldEl = document.createElement('div');
+                    oldEl.className = 'hero-bg-slide old';
+                    oldEl.style.backgroundImage = "url('images/city-amsterdam.jpg')";
+                    bg.appendChild(oldEl);
+                    /* New slide — starts off-screen right, slides in */
+                    var newEl = document.createElement('div');
+                    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() {
-                      reveal.classList.add('open');
                       label.classList.add('visible');
                     });
+                    /* Clean up old slide after animation done */
+                    setTimeout(function() { oldEl.remove(); }, 1200);
                   };
                   img.src = heroImages[best.host];
                 }