chrome: add moving shard background + CLAUDE.md

Implements the chrome theme's metallic shard ambient field from the
redesign handoff. Adds spawnShards() to aero.js, shard CSS (clip-path
polygon, chrome gradient, specular streak, shard-rise keyframes) to
aero.css, and wires up calls in index.js and enter.html. Shard field
is hidden by default; shown only when body[data-theme="chrome"].
Also adds prefers-reduced-motion guard for both fields.

Adds CLAUDE.md with architecture overview for future sessions.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 46 insertions, 0 deletions

diff --git a/aero.css b/aero.css
index 0781382..28322a1 100644
--- a/aero.css
+++ b/aero.css
@@ -66,6 +66,46 @@ html, body {
   100% { transform: translate(var(--drift, 30px), -110vh) scale(1.05); opacity: 0; }
 }
 
+/* SHARDS (chrome theme counterpart to bubbles) */
+.shard-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; display: none; }
+.chrome-shard {
+  position: absolute; bottom: -170px;
+  background: linear-gradient(135deg,
+    oklch(96% 0.02 240) 0%,
+    oklch(78% 0.04 280) 30%,
+    oklch(45% 0.06 290) 52%,
+    oklch(72% 0.04 240) 75%,
+    oklch(92% 0.02 240) 100%);
+  filter:
+    drop-shadow(0 0 8px oklch(60% 0.20 290 / 0.55))
+    drop-shadow(0 4px 12px oklch(5% 0.03 270 / 0.7));
+  animation: shard-rise linear infinite;
+}
+.chrome-shard.shard { clip-path: polygon(50% 0%, 70% 38%, 56% 100%, 30% 64%); }
+.chrome-shard.blade { clip-path: polygon(50% 0%, 57% 50%, 50% 100%, 43% 50%); }
+.chrome-shard::before {
+  content: "";
+  position: absolute; inset: 0;
+  background: linear-gradient(115deg,
+    transparent 20%,
+    oklch(99% 0.02 200 / 0.65) 42%,
+    oklch(92% 0.08 320 / 0.35) 50%,
+    transparent 68%);
+  background-size: 200% 200%;
+  animation: shard-streak 3s ease-in-out infinite alternate;
+}
+@keyframes shard-rise {
+  0%   { transform: translate(0, 0) rotate(var(--rot0, 0deg)); opacity: 0; }
+  8%   { opacity: 0.95; }
+  90%  { opacity: 0.75; }
+  100% { transform: translate(var(--drift, 0px), -130vh) rotate(var(--rot1, 120deg)); opacity: 0; }
+}
+@keyframes shard-streak {
+  0%   { background-position: 200% 0%; }
+  100% { background-position: -20% 0%; }
+}
+body[data-theme="chrome"] .shard-field { display: block; }
+
 /* GLOSSY AQUA BUTTON */
 .aqua {
   position: relative; display: inline-flex; align-items: center; gap: 6px;
@@ -1834,3 +1874,9 @@ body[data-theme="aero"] .mark::after {
   pointer-events: none;
   opacity: 0.8;
 }
+
+/* Disable ambient motion for users who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bubble-field, .shard-field { display: none !important; }
+  .sparkle { display: none !important; }
+}