feat: showcase layout, photo filter, team specializations, scroll UX

- Replace modals with ShowcaseLayout for Team and Classes sections
- Add warm photo filter matching dark/gold color scheme
- Replace generic "Тренер" with actual specializations per member
- Fix heart logo color animation loop (seamless repeat)
- Style scrollbar with gold theme, pause auto-rotation on hover
- Auto-scroll only when active item is out of view

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

src/app/styles/animations.css

@@ -200,6 +200,38 @@
   transform: translateY(0);
 }
 
+/* ===== Showcase ===== */
+
+@keyframes showcase-detail-enter {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes showcase-image-enter {
+  from {
+    opacity: 0;
+    transform: scale(1.03);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.showcase-detail-enter {
+  animation: showcase-detail-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.showcase-detail-enter img {
+  animation: showcase-image-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
 /* ===== Modal ===== */
 
 @keyframes modal-fade-in {
@@ -270,6 +302,11 @@
     animation: none !important;
   }
 
+  .showcase-detail-enter,
+  .showcase-detail-enter img {
+    animation: none !important;
+  }
+
   .glow-hover:hover {
     transform: none;
   }

src/app/styles/theme.css

@@ -88,3 +88,38 @@
 .glass-card:hover {
   @apply dark:border-[#c9a96e]/15 dark:bg-white/[0.06];
 }
+
+/* ===== Photo Filter ===== */
+
+.photo-filter {
+  filter: saturate(0.7) sepia(0.15) brightness(0.95) contrast(1.05);
+}
+
+:is(.dark) .photo-filter {
+  filter: saturate(0.6) sepia(0.2) brightness(0.9) contrast(1.1);
+}
+
+/* ===== Custom Scrollbar ===== */
+
+.styled-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(201, 169, 110, 0.25) transparent;
+}
+
+.styled-scrollbar::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.styled-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.styled-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(201, 169, 110, 0.25);
+  border-radius: 4px;
+}
+
+.styled-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(201, 169, 110, 0.4);
+}