feat: glitter border on team/class cards, mobile-friendly class selector

- Animated gold border glitter effect on active team card and class image
- Classes selector: 2-column grid on mobile (no scroll), list on desktop
- Selector appears above detail on mobile (flex-col-reverse)
- Compact selector items on mobile (icon + name only)

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

src/components/sections/Classes.tsx

@@ -44,7 +44,7 @@ export function Classes() {
                 <div>
                   {/* Hero image */}
                   {item.images && item.images[0] && (
-                    <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl">
+                    <div className="team-card-glitter relative aspect-[16/9] w-full overflow-hidden rounded-2xl">
                       <Image
                         src={item.images[0]}
                         alt={item.name}
@@ -75,10 +75,10 @@ export function Classes() {
                 </div>
               )}
               renderSelectorItem={(item, _i, isActive) => (
-                <div className="flex items-center gap-3 p-3">
+                <div className="flex items-center gap-2 px-3 py-2 lg:gap-3 lg:p-3">
                   {/* Icon */}
                   <div
-                    className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-colors ${
+                    className={`flex h-7 w-7 lg:h-9 lg:w-9 shrink-0 items-center justify-center rounded-lg transition-colors ${
                       isActive
                         ? "bg-[#c9a96e]/20 text-[#d4b87a]"
                         : "bg-neutral-200/50 text-neutral-500 dark:bg-white/[0.06] dark:text-neutral-400"
@@ -88,7 +88,7 @@ export function Classes() {
                   </div>
                   <div className="min-w-0">
                     <p
-                      className={`text-sm font-semibold truncate transition-colors ${
+                      className={`text-xs lg:text-sm font-semibold truncate transition-colors ${
                         isActive
                           ? "text-[#c9a96e]"
                           : "text-neutral-700 dark:text-neutral-300"
@@ -96,7 +96,7 @@ export function Classes() {
                     >
                       {item.name}
                     </p>
-                    <p className="text-xs text-neutral-500 dark:text-neutral-500 truncate">
+                    <p className="hidden lg:block text-xs text-neutral-500 dark:text-neutral-500 truncate">
                       {item.description}
                     </p>
                   </div>

src/components/sections/Team.tsx

@@ -213,7 +213,7 @@ export function Team() {
                 return (
                   <div
                     key={m.name}
-                    className="absolute bottom-0 overflow-hidden rounded-2xl border pointer-events-none"
+                    className={`absolute bottom-0 overflow-hidden rounded-2xl border pointer-events-none ${style.isCenter ? "team-card-glitter" : ""}`}
                     style={{
                       width: style.width,
                       height: style.height,
@@ -221,8 +221,10 @@ export function Team() {
                       zIndex: style.zIndex,
                       transform: style.transform,
                       filter: style.filter,
-                      borderColor: style.borderColor,
-                      boxShadow: style.boxShadow,
+                      borderColor: style.isCenter ? "transparent" : style.borderColor,
+                      boxShadow: style.isCenter
+                        ? "0 0 40px rgba(201,169,110,0.15), 0 0 80px rgba(201,169,110,0.08)"
+                        : style.boxShadow,
                       transition: style.transition,
                     }}
                   >

src/components/ui/ShowcaseLayout.tsx

@@ -97,7 +97,7 @@ export function ShowcaseLayout<T>({
 
   return (
     <div
-      className="flex flex-col gap-6 lg:flex-row lg:gap-8"
+      className="flex flex-col-reverse gap-6 lg:flex-row lg:gap-8"
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
@@ -131,14 +131,14 @@ export function ShowcaseLayout<T>({
       <div className="lg:w-[40%]">
         <div
           ref={selectorRef}
-          className="styled-scrollbar flex gap-3 overflow-x-auto pb-2 lg:max-h-[600px] lg:flex-col lg:overflow-y-auto lg:overflow-x-visible lg:pb-0 lg:pr-1"
+          className="grid grid-cols-2 gap-2 lg:grid-cols-1 lg:gap-3 lg:max-h-[600px] lg:overflow-y-auto lg:pr-1 styled-scrollbar"
         >
           {items.map((item, i) => (
             <button
               key={i}
               ref={i === activeIndex ? activeItemRef : null}
               onClick={() => onSelect(i)}
-              className={`flex-shrink-0 cursor-pointer rounded-xl border-2 text-left transition-all duration-300 ${
+              className={`cursor-pointer rounded-xl border-2 text-left transition-all duration-300 ${
                 i === activeIndex
                   ? "border-[#c9a96e]/60 bg-[#c9a96e]/10 dark:bg-[#c9a96e]/5"
                   : "border-transparent bg-neutral-100 hover:bg-neutral-200 dark:bg-white/[0.03] dark:hover:bg-white/[0.06]"