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

style.css

@@ -112,10 +112,37 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
   content: '';
   position: absolute;
   inset: 0;
-  background: var(--hero-bg, url('images/city-amsterdam.jpg')) center/cover no-repeat;
-  opacity: 0.12;
+  background: var(--midnight);
+  opacity: 0.6;
   z-index: 0;
-  transition: background-image 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+}
+.hero-bg-slide {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.12;
+  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+}
+.hero-bg-slide.old {
+  transform: translateX(0);
+}
+.hero-bg-slide.old.out {
+  transform: translateX(100%);
+}
+.hero-bg-slide.new {
+  transform: translateX(100%);
+}
+.hero-bg-slide.new.in {
+  transform: translateX(0);
 }
 .hero .container { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; }
 .hero-kicker {
@@ -377,21 +404,6 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
   }
 }
 
-.hero-city-reveal {
-  position: absolute;
-  inset: 0;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  opacity: 0.12;
-  z-index: 0;
-  clip-path: inset(0 100% 0 0);
-  will-change: clip-path;
-  pointer-events: none;
-}
-.hero-city-reveal.open {
-  clip-path: inset(0 0 0 0);
-}
 .hero-city-label {
   position: absolute;
   bottom: 2rem;