vzxipsule: Replace the featured rail with an auto-rotating FeaturedCarousel

src/styles/featured.css

@@ -0,0 +1,116 @@
+/* Featured experts carousel (ADR 0001, section 6; spec "Featured experts
+   carousel"). Ported from the mockup's .cf rules; colors are tokens only.
+   --cfw is the center photo width, set by the component's size prop. */
+
+.featured { flex: none; }
+.featured-title { display: inline-flex; align-items: center; gap: 8px; }
+.featured-title svg { width: 16px; height: 16px; color: var(--accent); }
+.featured-count { font-variant-numeric: tabular-nums; }
+
+.featured-cf {
+  --cfw: 96px;
+  position: relative;
+  height: calc(var(--cfw) * 1.155 + 6px);
+  overflow: hidden;
+  overflow: clip;
+  overflow-clip-margin: 24px;
+}
+.featured-cf::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: calc(var(--cfw) * 1.9);
+  height: calc(var(--cfw) * 1.3);
+  transform: translate(-50%, -50%);
+  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent), transparent 70%), transparent);
+  filter: blur(12px);
+  animation: featured-breathe 4s ease-in-out infinite;
+}
+@keyframes featured-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
+
+.featured-item {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: var(--cfw);
+  margin-left: calc(var(--cfw) / -2);
+  transition: transform 1.1s var(--ease), opacity 1.1s, filter 1.1s;
+}
+.featured-ring {
+  display: block;
+  padding: 3px;
+  background: var(--line-2);
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+  transition: background .8s;
+}
+.featured-photo {
+  display: block;
+  width: 100%;
+  aspect-ratio: .866;
+  object-fit: cover;
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+}
+/* Photos sit on the tile while loading; initials keep their HexAvatar tone. */
+img.featured-photo { background: var(--tile-3); }
+.featured-initials {
+  display: grid;
+  place-items: center;
+  color: var(--avatar-ink);
+  font-weight: 600;
+  letter-spacing: .02em;
+  font-size: calc(var(--cfw) * .3);
+}
+
+.featured-c0 { z-index: 5; }
+.featured-c0 .featured-ring { background: linear-gradient(180deg, var(--accent-hi), var(--accent) 50%, var(--accent-lo)); }
+.featured-r1 { transform: translateX(76%) scale(.7); opacity: .85; z-index: 4; filter: grayscale(.7) brightness(.72); }
+.featured-l1 { transform: translateX(-76%) scale(.7); opacity: .85; z-index: 4; filter: grayscale(.7) brightness(.72); }
+.featured-r2 { transform: translateX(132%) scale(.48); opacity: .45; z-index: 3; filter: grayscale(1) brightness(.55); }
+.featured-l2 { transform: translateX(-132%) scale(.48); opacity: .45; z-index: 3; filter: grayscale(1) brightness(.55); }
+.featured-r3 { transform: translateX(170%) scale(.3); opacity: 0; z-index: 1; }
+.featured-l3 { transform: translateX(-170%) scale(.3); opacity: 0; z-index: 1; }
+
+.featured-cap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 3px;
+  padding: 12px 16px 2px;
+  animation: featured-cap .8s var(--ease) both;
+}
+@keyframes featured-cap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+.featured-name { font-size: 23px; line-height: 1.1; }
+.featured-by {
+  font-size: 12.5px;
+  color: var(--ink-3);
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.featured-rate {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+.featured-rate > span { display: inline-flex; align-items: center; gap: 4px; }
+.featured-rate svg { width: 13px; height: 13px; color: var(--accent); }
+.featured-rate em { font-style: normal; font-weight: 500; color: var(--ink-3); }
+
+.featured-dots { display: flex; justify-content: center; gap: 5px; padding: 10px 0 16px; }
+.featured-dots-gap { height: 16px; }
+.featured-dot {
+  display: block;
+  width: 5px;
+  height: 5px;
+  border-radius: 3px;
+  background: var(--line-2);
+  transition: width .5s var(--ease), background-color .5s;
+}
+.featured-dot-on { width: 18px; background: var(--accent); }

src/styles/layout.css

@@ -91,7 +91,7 @@
 .bento-left .expert-search { flex: 1 1 0; }
 .bento-center .feed { flex: 1 1 0; }
 .bento-right { justify-content: flex-start; }
-.bento-right .rail-featured { flex: 0 1 auto; max-height: 40%; }
+.bento-right .rail-featured { flex: none; }
 .bento-right .rail-trending { flex: 1 1 0; }
 
 /* Panel contents keep their inner padding off the scroll edge. */
@@ -107,7 +107,6 @@
 @container app (max-width: 1000px) {
   .bento-col .panel { flex: 0 0 auto; }
   .bento-col .panel-scroll { flex: 0 0 auto; max-height: 70vh; }
-  .bento-right .rail-featured { max-height: none; }
 }
 
 /* Account panel ---------------------------------------------------------- */