From 217f1d969106d042c795c1781eb79cd41fcd5444 Mon Sep 17 00:00:00 2001
From: sucupira <sucupira@DenkyemX.cyber-mawonaj.net>
Date: Mon, 6 Jul 2026 20:41:57 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Design:=20Anneau=20com=C3=A8te=20do?=
 =?UTF-8?q?r=C3=A9=20sur=20le=20CTA=20principal=20(inspir=C3=A9=20d'unabys?=
 =?UTF-8?q?s.com)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Après inspection réelle du code d'unabyss.com (HTML/CSS servis, pas juste
une description générée) : anneau tournant en conic-gradient CSS pur,
masqué en anneau via mask-composite:exclude — aucun JS/WebGL. Reproduit à
l'identique dans la palette or/corail du site, appliqué au CTA principal
du hero ("Découvrir les prédictions") pour renforcer l'action unique mise
en avant (Von Restorff). Fige automatiquement sous prefers-reduced-motion
via le kill-switch déjà présent dans tokens.css.

Correction au passage : la première analyse d'unabyss (WebFetch, texte
seul) avait spéculé sur des animations "probables" sans les avoir
observées — un fetch réel du HTML/CSS a permis d'identifier précisément
les techniques utilisées (comet-ring, scroll-reveal, marquee CSS,
glassmorphism) plutôt que d'improviser.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/index.njk                        |  2 +-
 src/styles/app.css                   |  1 +
 src/styles/components/comet-ring.css | 40 ++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/styles/components/comet-ring.css

diff --git a/src/index.njk b/src/index.njk
index 396eba8..e9c5139 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -33,7 +33,7 @@ eleventyComputed:
       <strong>{{ nextRising.date | formatDate(locale) }} · {{ nextRising.time }}</strong>
     </p>
     <div class="cluster hero-cta">
-      <a class="btn btn-primary" href="{{ '/observer/' | localeHref(locale) }}">{{ "hero_cta_predictions" | t(locale) }}</a>
+      <a class="btn btn-primary comet-ring" href="{{ '/observer/' | localeHref(locale) }}">{{ "hero_cta_predictions" | t(locale) }}</a>
       <a class="btn btn-outline" href="{{ '/sirius-science/' | localeHref(locale) }}">{{ "hero_cta_learn" | t(locale) }}</a>
     </div>
   </div>
diff --git a/src/styles/app.css b/src/styles/app.css
index e081c55..fc12e56 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -17,3 +17,4 @@
 @import "./components/associations.css" layer(components);
 @import "./components/islands.css" layer(components);
 @import "./components/wave-badges.css" layer(components);
+@import "./components/comet-ring.css" layer(components);
diff --git a/src/styles/components/comet-ring.css b/src/styles/components/comet-ring.css
new file mode 100644
index 0000000..d13554e
--- /dev/null
+++ b/src/styles/components/comet-ring.css
@@ -0,0 +1,40 @@
+/* Anneau comète — bordure en conic-gradient tournante, technique d'unabyss.com
+   (masque XOR pour ne garder que l'anneau). Respecte prefers-reduced-motion
+   via le kill-switch global de tokens.css (figé, anneau statique). */
+@property --comet-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.comet-ring {
+  position: relative;
+  isolation: isolate;
+}
+
+.comet-ring::before {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: inherit;
+  padding: 2px;
+  background: conic-gradient(
+    from var(--comet-angle),
+    transparent 0deg,
+    transparent 250deg,
+    var(--gold-surface) 300deg,
+    var(--coral-surface) 330deg,
+    var(--gold-surface) 350deg,
+    transparent 360deg
+  );
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: comet-spin 7s linear infinite;
+  pointer-events: none;
+  z-index: -1;
+}
+
+@keyframes comet-spin {
+  to { --comet-angle: 360deg; }
+}