✨ RESTORE: Water-like анимации pill маркеров с растягиванием и разворачиванием текста

smartsoltech/web/templates/web/home_modern.html

@@ -702,6 +702,10 @@
     border-radius: 50px;
     padding: 8px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    min-width: 60px;
+    display: flex;
+    justify-content: center;
 }
 
 .pill-indicators {
@@ -712,39 +716,85 @@
     background: transparent;
     border-radius: 40px;
     padding: 4px;
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .pill-indicator {
-    background: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.4);
     border: none;
-    border-radius: 25px;
+    border-radius: 50%;
-    padding: 8px 16px;
+    width: 12px;
-    color: white;
+    height: 12px;
-    font-size: 12px;
+    padding: 0;
-    font-weight: 600;
+    margin: 0;
+    color: transparent;
+    font-size: 0;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(5px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
+}
+
+.pill-indicator::before {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: white;
+    border-radius: 50%;
+    opacity: 0.8;
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .pill-indicator.active {
     background: rgba(255, 255, 255, 0.9);
     color: #333;
-    transform: scale(1.05);
+    font-size: 11px;
+    font-weight: 600;
+    padding: 8px 16px;
+    border-radius: 25px;
+    width: auto;
+    height: auto;
     box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(10px);
+}
+
+.pill-indicator.active::before {
+    opacity: 0;
+    width: 0;
+    height: 0;
 }
 
 .pill-indicator:not(.active):hover {
-    background: rgba(255, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 0.6);
-    transform: scale(1.02);
+    transform: scale(1.2);
+    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
+}
+
+.pill-indicator:not(.active):hover::before {
+    opacity: 1;
+    transform: scale(1.2);
 }
 
 .pill-indicator-title {
     font-size: 11px;
     font-weight: 600;
     white-space: nowrap;
+    opacity: 0;
+    transform: scale(0.8);
+    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    display: inline-block;
+}
+
+.pill-indicator.active .pill-indicator-title {
+    opacity: 1;
+    transform: scale(1);
+    transition-delay: 0.1s;
 }
 
 .animate-fade-in-up {
@@ -842,19 +892,49 @@
 document.addEventListener('DOMContentLoaded', function() {
     const carousel = document.getElementById('heroCarousel');
     const indicators = document.querySelectorAll('.pill-indicator');
+    const outerPill = document.querySelector('.outer-pill');
     
     let currentActiveIndex = 0;
     
     function updatePillState(index) {
-        // Обновляем классы индикаторов
+        // Убираем активный класс у всех индикаторов
         indicators.forEach((indicator, i) => {
             if (i === index) {
                 indicator.classList.add('active');
+                // Показываем текст активного индикатора
+                const title = indicator.querySelector('.pill-indicator-title');
+                if (title) {
+                    indicator.style.color = '#333';
+                    title.style.opacity = '1';
+                    title.style.transform = 'scale(1)';
+                }
             } else {
                 indicator.classList.remove('active');
+                // Скрываем текст неактивных индикаторов
+                const title = indicator.querySelector('.pill-indicator-title');
+                if (title) {
+                    indicator.style.color = 'transparent';
+                    title.style.opacity = '0';
+                    title.style.transform = 'scale(0.8)';
+                }
             }
         });
         
+        // Анимация внешней pill (растягивается под активный элемент)
+        if (outerPill) {
+            const activeIndicator = indicators[index];
+            if (activeIndicator) {
+                // Измеряем ширину активного элемента
+                const activeRect = activeIndicator.getBoundingClientRect();
+                const containerRect = outerPill.getBoundingClientRect();
+                
+                // Вычисляем нужную ширину (с учетом padding)
+                const newWidth = Math.max(activeRect.width + 40, 120);
+                outerPill.style.width = newWidth + 'px';
+                outerPill.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
+            }
+        }
+        
         currentActiveIndex = index;
     }
     
@@ -864,6 +944,21 @@ document.addEventListener('DOMContentLoaded', function() {
             currentActiveIndex = index;
             updatePillState(index);
         });
+        
+        // Hover эффекты для неактивных элементов
+        indicator.addEventListener('mouseenter', function() {
+            if (!this.classList.contains('active')) {
+                this.style.transform = 'scale(1.2)';
+                this.style.background = 'rgba(255, 255, 255, 0.6)';
+            }
+        });
+        
+        indicator.addEventListener('mouseleave', function() {
+            if (!this.classList.contains('active')) {
+                this.style.transform = 'scale(1)';
+                this.style.background = 'rgba(255, 255, 255, 0.4)';
+            }
+        });
     });
     
     // Bootstrap carousel события
@@ -875,7 +970,9 @@ document.addEventListener('DOMContentLoaded', function() {
         });
         
         // Инициализируем первое состояние
-        updatePillState(0);
+        setTimeout(() => {
+            updatePillState(0);
+        }, 100);
     }
     
     // Animate elements on scroll