From d2211ab8f597db3dceda423523b20a93edd71f6a Mon Sep 17 00:00:00 2001
From: Gabriel Fontes <hi@m7.rs>
Date: Wed, 2 Sep 2026 16:40:49 -0300
Subject: [PATCH] feat(projects/website): refine ambient star field

Assisted-by: pi (gpt-5.6-sol)
---
 projects/website/_src/_sass/_base.scss    | 13 +++++++------
 projects/website/_src/_sass/_content.scss |  6 ++++++
 projects/website/_src/_sass/_tokens.scss  | 14 ++++++++++++++
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/projects/website/_src/_sass/_base.scss b/projects/website/_src/_sass/_base.scss
index 3c40cd25..8f62baf8 100644
--- a/projects/website/_src/_sass/_base.scss
+++ b/projects/website/_src/_sass/_base.scss
@@ -211,10 +211,11 @@ body {
     inset: 0;
     z-index: 0;
     background-image:
-      radial-gradient(circle, color-mix(in srgb, var(--primary) 72%, transparent) 0 0.065rem, color-mix(in srgb, var(--primary) 18%, transparent) 0.1rem, transparent 0.2rem),
-      radial-gradient(circle, color-mix(in srgb, var(--primary) 58%, transparent) 0 0.055rem, color-mix(in srgb, var(--primary) 14%, transparent) 0.09rem, transparent 0.18rem);
-    background-position: 2rem 3rem, 11rem 8rem;
-    background-size: 23rem 19rem, 31rem 29rem;
+      radial-gradient(circle, color-mix(in srgb, var(--primary) var(--ambient-star-core), transparent) 0 0.065rem, color-mix(in srgb, var(--primary) var(--ambient-star-inner), transparent) 0.1rem, color-mix(in srgb, var(--primary) var(--ambient-star-glow), transparent) 0.2rem, transparent 0.32rem),
+      radial-gradient(circle, color-mix(in srgb, var(--primary) var(--ambient-star-faint-core), transparent) 0 0.055rem, color-mix(in srgb, var(--primary) var(--ambient-star-faint-inner), transparent) 0.09rem, color-mix(in srgb, var(--primary) var(--ambient-star-glow), transparent) 0.18rem, transparent 0.28rem),
+      radial-gradient(circle, color-mix(in srgb, var(--primary) var(--ambient-star-dust-core), transparent) 0 0.045rem, color-mix(in srgb, var(--primary) var(--ambient-star-dust-inner), transparent) 0.075rem, color-mix(in srgb, var(--primary) var(--ambient-star-glow), transparent) 0.15rem, transparent 0.24rem);
+    background-position: 2rem 3rem, 11rem 8rem, 17rem 15rem;
+    background-size: 23rem 19rem, 31rem 29rem, 43rem 37rem;
     content: "";
     opacity: 0.46;
     pointer-events: none;
@@ -222,8 +223,8 @@ body {
   }
 
   &::after {
-    background-position: 7rem 13rem, 19rem 4rem;
-    background-size: 37rem 31rem, 29rem 41rem;
+    background-position: 7rem 13rem, 19rem 4rem, 29rem 23rem;
+    background-size: 37rem 31rem, 29rem 41rem, 47rem 43rem;
     opacity: 0.3;
     animation-delay: -4.5s;
     animation-duration: 13s;
diff --git a/projects/website/_src/_sass/_content.scss b/projects/website/_src/_sass/_content.scss
index ed624ef5..c81bd74a 100644
--- a/projects/website/_src/_sass/_content.scss
+++ b/projects/website/_src/_sass/_content.scss
@@ -90,6 +90,12 @@ main > article > section > ul {
   }
 }
 
+// Keep ambient stars clear of article content while softly feathering the edges.
+article > section {
+  background: var(--background-body);
+  box-shadow: 0 0 1.5rem 0.5rem var(--background-body);
+}
+
 .document > section {
   max-width: var(--document-width);
   margin-inline: auto;
diff --git a/projects/website/_src/_sass/_tokens.scss b/projects/website/_src/_sass/_tokens.scss
index 52b884c8..1d29860f 100644
--- a/projects/website/_src/_sass/_tokens.scss
+++ b/projects/website/_src/_sass/_tokens.scss
@@ -43,6 +43,13 @@
   --focus-offset: 2px;
   --glow-soft: 0 0 var(--space-3) color-mix(in srgb, var(--primary) 30%, transparent);
   --glow-strong: 0 0 var(--space-4) color-mix(in srgb, var(--primary) 65%, transparent);
+  --ambient-star-core: 72%;
+  --ambient-star-inner: 18%;
+  --ambient-star-faint-core: 58%;
+  --ambient-star-faint-inner: 14%;
+  --ambient-star-dust-core: 42%;
+  --ambient-star-dust-inner: 10%;
+  --ambient-star-glow: 6%;
   --starlight-rule: linear-gradient(90deg, var(--border), color-mix(in srgb, var(--primary) 75%, var(--border)), var(--border)) 1;
 
   // Motion
@@ -54,6 +61,13 @@
   @media (prefers-color-scheme: light) {
     --background-body: color-mix(in srgb, var(--surface_container_lowest) 89%, var(--primary) 11%);
     --background-alt: color-mix(in srgb, var(--surface_container_high) 79%, var(--primary) 21%);
+    --ambient-star-core: 90%;
+    --ambient-star-inner: 28%;
+    --ambient-star-faint-core: 74%;
+    --ambient-star-faint-inner: 22%;
+    --ambient-star-dust-core: 56%;
+    --ambient-star-dust-inner: 16%;
+    --ambient-star-glow: 10%;
   }
 
   @include settings.mobile {