Переписаны компоенты главной страницы

frontend/src/components/home/Faq.astro

@@ -37,6 +37,19 @@ const {
 ---
 
 <section class="faq-section" id="faq">
+    <!-- КРИТИЧНО: Инлайн-скрипт скрывает элементы ДО рендера, но только если JS работает -->
+    <script is:inline>
+        (function() {
+            // Проверяем prefers-reduced-motion
+            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+            // Создаем стиль немедленно, чтобы избежать мигания (FOUC)
+            const style = document.createElement('style');
+            style.textContent = '.animate-on-scroll{opacity:0;transform:translateY(30px)}';
+            document.head.appendChild(style);
+        })();
+    </script>
+
     <div class="site-container">
         <!-- Заголовок секции -->
         <div class="section-header">
@@ -180,18 +193,21 @@ const {
         line-height: 1.6;
     }
 
-    /* Анимации при скроллинге */
+    /*
+        ИСПРАВЛЕНИЕ LCP:
+        opacity: 1 по умолчанию!
+        Если JS не загрузится - контент виден.
+        Если JS загрузится - инлайн-скрипт выше добавит opacity:0 и анимация сработает.
+    */
     .animate-on-scroll {
-        opacity: 0;
+        opacity: 1;
+        transform: translateY(0);
         will-change: opacity, transform;
-    }
-
-    [data-animation="fade-up"] {
-        transform: translateY(40px);
         transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
         transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
+    /* Класс is-visible добавляется через JS при появлении в viewport */
     .animate-on-scroll.is-visible {
         opacity: 1;
         transform: translateY(0);
@@ -276,10 +292,6 @@ const {
         height: 100%;
     }
 
-    /*
-        КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: ИСПОЛЬЗУЕМ GRID ВМЕСТО MAX-HEIGHT
-        Это полностью устраняет дерганье и делает анимацию плавной
-    */
     .faq-answer {
         display: grid;
         grid-template-rows: 0fr;
@@ -290,7 +302,6 @@ const {
         grid-template-rows: 1fr;
     }
 
-    /* Внутренний контейнер для предотвращения сжатия содержимого */
     .answer-inner {
         overflow: hidden;
     }
@@ -362,9 +373,9 @@ const {
     /* Уважаем prefers-reduced-motion */
     @media (prefers-reduced-motion: reduce) {
         .animate-on-scroll {
-            opacity: 1;
-            transform: none;
-            transition: none;
+            opacity: 1 !important;
+            transform: none !important;
+            transition: none !important;
         }
 
         .faq-item,
@@ -389,8 +400,8 @@ const {
     // Intersection Observer для анимаций при скроллинге
     const observerOptions = {
         root: null,
-        rootMargin: '0px',
-        threshold: 0.15
+        rootMargin: '50px', // Немного раньше начинаем анимацию
+        threshold: 0.1
     };
 
     const observer = new IntersectionObserver((entries) => {
@@ -399,8 +410,11 @@ const {
                 const el = entry.target as HTMLElement;
                 const delay = parseInt(el.dataset.delay || '0');
 
+                // Используем requestAnimationFrame для плавности
                 setTimeout(() => {
-                    el.classList.add('is-visible');
+                    requestAnimationFrame(() => {
+                        el.classList.add('is-visible');
+                    });
                 }, delay);
 
                 observer.unobserve(el);
@@ -408,9 +422,18 @@ const {
         });
     }, observerOptions);
 
-    document.querySelectorAll('.animate-on-scroll').forEach((el) => {
-        observer.observe(el);
-    });
+    // Инициализация после загрузки DOM
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelectorAll('.animate-on-scroll').forEach((el) => {
+                observer.observe(el);
+            });
+        });
+    } else {
+        document.querySelectorAll('.animate-on-scroll').forEach((el) => {
+            observer.observe(el);
+        });
+    }
 
     // Аккордеон FAQ - улучшенная версия
     document.querySelectorAll('[data-faq-toggle]').forEach((button) => {
@@ -419,7 +442,6 @@ const {
             const answer = faqItem?.querySelector('[data-faq-content]');
             const isExpanded = button.getAttribute('aria-expanded') === 'true';
 
-            // Если этот элемент уже открыт, просто закрываем его
             if (isExpanded) {
                 faqItem?.classList.remove('active');
                 button.setAttribute('aria-expanded', 'false');
@@ -427,7 +449,6 @@ const {
                 return;
             }
 
-            // Закрываем все другие открытые элементы
             document.querySelectorAll('.faq-item.active').forEach((item) => {
                 if (item !== faqItem) {
                     item.classList.remove('active');
@@ -438,7 +459,6 @@ const {
                 }
             });
 
-            // Открываем текущий
             faqItem?.classList.add('active');
             button.setAttribute('aria-expanded', 'true');
             answer?.classList.add('open');