From f8d88ed76012df3e196c539a0fd126a364a64351 Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 11:56:49 +0200
Subject: [PATCH] fix(route): 'you are here' marker is unmistakable + dot
 animates with hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous .rr-current was a 1.15× scale on top of an animated pulsing
::after ring — subtle, and the pulse was easy to miss against the cream
ground. Replaced with a static box-shadow ring at 6px offset in 45%
terracotta, plus a 1.3× scale on the dot itself. The pulse is gone;
the ring is now visible at rest, which is what the marker needs to do.

Hover/focus on a milestone card now scales its sibling dot via :has():
  - any card hover/focus → its dot 1.15
  - the current-shipping card hover/focus → its dot 1.4
The dot acknowledges that you've engaged with its card. Cleaner than
tying scroll position or click state.

:has() ships in every evergreen browser since 2023; older Firefox just
won't grow the dot, which degrades to no harm.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/RoadmapRoute.astro | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/RoadmapRoute.astro b/src/components/RoadmapRoute.astro
index 590a50d..b456547 100644
--- a/src/components/RoadmapRoute.astro
+++ b/src/components/RoadmapRoute.astro
@@ -310,25 +310,25 @@ const initialShippingX = lastShippingIndex >= 0 ? itemXByIndex[lastShippingIndex
     height: 14px;
     border-radius: 50%;
     box-shadow: 0 0 0 5px var(--background);   /* halo cuts the path under the dot */
-    transition: transform .25s ease;
+    transition: transform .25s ease, box-shadow .25s ease;
     scroll-snap-align: center;
   }
   .rr-dot.rr-current {
+    transform: scale(1.3);
+    box-shadow:
+      0 0 0 5px var(--background),              /* cream halo */
+      0 0 0 6px rgba(185, 107, 88, 0.45);       /* terracotta ring outside */
+  }
+
+  /* Hover-on-card animates the sibling dot too. :has() is fine on every
+     evergreen browser we target; older Firefox just doesn't grow the dot. */
+  .rr-milestone:has(.rr-card:hover) .rr-dot,
+  .rr-milestone:has(.rr-card:focus-visible) .rr-dot {
     transform: scale(1.15);
   }
-  .rr-dot.rr-current::after {
-    /* a quiet pulsing ring around the 'you are here' milestone */
-    content: '';
-    position: absolute;
-    inset: -6px;
-    border-radius: 50%;
-    border: 1px solid #6d8c7c;
-    opacity: 0.4;
-    animation: rr-pulse 2.4s ease-in-out infinite;
-  }
-  @keyframes rr-pulse {
-    0%, 100% { transform: scale(1);   opacity: 0.4; }
-    50%      { transform: scale(1.3); opacity: 0;   }
+  .rr-milestone:has(.rr-card:hover) .rr-dot.rr-current,
+  .rr-milestone:has(.rr-card:focus-visible) .rr-dot.rr-current {
+    transform: scale(1.4);
   }
 
   .rr-attach {