From d5d6c9231fd382c9c90b2c7ee22e41681f711eb2 Mon Sep 17 00:00:00 2001
From: swift-river542 <swift-river542@users.noreply.github.com>
Date: Wed, 16 Sep 2026 20:20:36 -0500
Subject: [PATCH] Share button: a thin, slowly turning rainbow ring
 (reduced-motion safe)

---
 library/components/map-controls/ShareButton.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/library/components/map-controls/ShareButton.vue b/library/components/map-controls/ShareButton.vue
index 6b69d66fc..0792e2ede 100644
--- a/library/components/map-controls/ShareButton.vue
+++ b/library/components/map-controls/ShareButton.vue
@@ -31,6 +31,16 @@ import MapControlButton from './MapControlButton.vue'
 /* Shadow-DOM styles                                                   */
 /* ------------------------------------------------------------------ */
 useShadowStyles(`
+/* ---- share button: a thin, slowly turning rainbow ring behind the round button ---- */
+.share-wrap{position:relative;display:inline-block;border-radius:50%;}
+.share-wrap::before{content:'';position:absolute;inset:-2px;border-radius:50%;padding:2px;pointer-events:none;
+  background:conic-gradient(from var(--share-ring-angle,0deg),#ff6b6b,#ffd166,#6bd67b,#4dabf7,#9775fa,#f783ac,#ff6b6b);
+  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
+  opacity:0.55;animation:share-ring-turn 6s linear infinite;}
+.share-wrap:hover::before{opacity:0.9;}
+@property --share-ring-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
+@keyframes share-ring-turn{to{--share-ring-angle:360deg;}}
+@media(prefers-reduced-motion:reduce){.share-wrap::before{animation:none;}}
 /* ---- popover shell ---- */
 /* ---- popover shell (imitates SemanticTreeLegend .stl-inner) ---- */
 .share-pop{
@@ -496,7 +506,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div style="position:relative;">
+  <div class="share-wrap">
     <MapControlButton
       ref="btnEl"
       :is-dark="isDark"