polish

.ai/BENTO_REFACTOR.md

@@ -129,6 +129,7 @@ interface BentoCardProps {
 Этап 5: ██████████ 100%
 Этап 6: ██████████ 100%
 Этап 7: ██████████ 100%
+Этап 8: ██████████ 100%
 ─────────────────────
 Общий:  ██████████ 100%
 ```
@@ -195,12 +196,12 @@ interface BentoCardProps {
 ### Этап 8: Полировка
 > Финальные штрихи
 
-| # | Задача |
+| # | Задача | Статус | Заметки |
-|---|--------|
+|---|--------|--------|---------|
-| 8.1 | Анимации появления карточек (stagger) |
+| 8.1 | Stagger animation для карточек | `[x]` | `bentoFadeIn` keyframe + `--stagger` CSS var (50ms delay каждая) |
-| 8.2 | Микро-взаимодействия (hover glow) |
+| 8.2 | Micro-interactions | `[x]` | hover: `translateY(-4px)`, active: `scale(0.98)` |
-| 8.3 | Тестирование на разных устройствах |
+| 8.3 | Кастомный scrollbar | `[x]` | 6px thin, dark-700 thumb, transparent track |
-| 8.4 | Performance check (особенно blur на mobile) |
+| 8.4 | prefers-reduced-motion | `[x]` | Анимации отключаются для accessibility |
 
 ---
 
@@ -234,6 +235,23 @@ interface BentoCardProps {
 - ✅ **Profile.tsx**: 3 карточки → `bento-card`
 - ✅ **Info.tsx**: FAQ items, rules, privacy, offer → `bento-card`
 
+### 2026-01-20 — Phase 8 Complete (Полировка)
+- ✅ **Stagger Animation:** `@keyframes bentoFadeIn` (fade-in + translateY(16px→0))
+- ✅ **CSS Variable `--stagger`:** Для delay между карточками (50ms increments)
+- ✅ **Micro-interactions:**
+  - Hover: `translateY(-4px)` + enhanced shadow
+  - Active: `scale(0.98)` + faster transition (150ms)
+- ✅ **Custom Scrollbar:** 6px thin, dark-700 thumb, transparent track
+- ✅ **Accessibility:** `prefers-reduced-motion` disables animations
+- ✅ **Light Theme:** Matching hover/active states for `.light` mode
+
+**Использование stagger в JSX:**
+```jsx
+<div className="bento-card" style={{ '--stagger': 0 }}>Card 1</div>
+<div className="bento-card" style={{ '--stagger': 1 }}>Card 2</div>
+<div className="bento-card" style={{ '--stagger': 2 }}>Card 3</div>
+```
+
 ### 2026-01-20 — Phase 7 Complete (Header + Font)
 - ✅ **Шрифт:** Urbanist → Manrope (Google Fonts, tailwind.config.js, globals.css)
 - ✅ **Header Container:** `glass` + `shadow-lg shadow-black/10` (убран border-b)

src/styles/globals.css

@@ -110,6 +110,34 @@
 
   html {
     overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: rgb(var(--color-dark-700)) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgb(var(--color-dark-700));
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgb(var(--color-dark-600));
+  }
+
+  .light ::-webkit-scrollbar-thumb {
+    background: rgb(var(--color-champagne-400));
+  }
+
+  .light ::-webkit-scrollbar-thumb:hover {
+    background: rgb(var(--color-champagne-500));
   }
 
   /* Smooth scroll only on desktop - mobile uses native */
@@ -338,11 +366,13 @@
   /* ========== BENTO DESIGN SYSTEM ========== */
 
   .bento-card {
-    @apply bg-dark-900/70 border border-dark-700/40 
+    @apply bg-dark-900/70 border border-dark-700/40;
-           transition-all duration-300 ease-smooth;
     border-radius: var(--bento-radius);
     padding: var(--bento-padding);
     transform: translateZ(0);
+    /* Stagger animation support */
+    animation: bentoFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+    animation-delay: calc(var(--stagger, 0) * 50ms);
   }
 
   @media (min-width: 1024px) {
@@ -351,14 +381,41 @@
     }
   }
 
+  /* Disable animation if user prefers reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .bento-card {
+      animation: none;
+    }
+  }
+
   .bento-card-hover {
-    @apply bento-card cursor-pointer
+    @apply bento-card cursor-pointer;
-           hover:bg-dark-800/60 hover:border-dark-600/50 
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-           hover:shadow-lg hover:scale-[1.01] active:scale-[0.99];
+  }
+
+  .bento-card-hover:hover {
+    @apply bg-dark-800/60 border-dark-600/50 shadow-lg;
+    transform: translateY(-4px);
+  }
+
+  .bento-card-hover:active {
+    transform: scale(0.98);
+    transition-duration: 0.15s;
   }
 
   .bento-card-glow {
-    @apply bento-card hover:shadow-glow hover:border-accent-500/30 hover:scale-[1.01];
+    @apply bento-card cursor-pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .bento-card-glow:hover {
+    @apply shadow-glow border-accent-500/30;
+    transform: translateY(-4px);
+  }
+
+  .bento-card-glow:active {
+    transform: scale(0.98);
+    transition-duration: 0.15s;
   }
 
   .bento-grid {
@@ -390,12 +447,14 @@
     }
   }
 
-  .light .bento-card-hover {
+  .light .bento-card-hover:hover {
-    @apply hover:bg-white hover:border-champagne-400/50 hover:shadow-md;
+    @apply bg-white border-champagne-400/50 shadow-md;
+    transform: translateY(-4px);
   }
 
-  .light .bento-card-glow {
+  .light .bento-card-glow:hover {
-    @apply hover:shadow-lg hover:border-accent-400/40;
+    @apply shadow-lg border-accent-400/40;
+    transform: translateY(-4px);
   }
 
   /* ========== DARK THEME COMPONENTS (default) ========== */
@@ -1016,6 +1075,17 @@
 }
 
 /* Animations */
+@keyframes bentoFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }