From 10f94cc306e29e5742a0b02604bf744d5d22c7af Mon Sep 17 00:00:00 2001
From: root <root@oyhkwtigrd.local>
Date: Sat, 19 Sep 2026 15:13:45 +0200
Subject: [PATCH] =?UTF-8?q?feat(marquee):=20flicker=20animation=20?=
 =?UTF-8?q?=E2=80=94=20fade=20in/show/fade-out=20per=20tag,=20max=203=20vi?=
 =?UTF-8?q?sible=20(scoped=20to=20grid)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/main.css | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/public/css/main.css b/public/css/main.css
index 5dc8b40..1ddc046 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -5499,6 +5499,8 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
 .marquee-grid__cell {
   margin: 0;
   flex: 0 0 auto;
+  opacity: 0;
+  animation: tagFlicker var(--tag-cycle, 15s) ease-in-out infinite;
 }
 .marquee-grid__cell .hero__tag {
   display: inline;
@@ -5514,6 +5516,39 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
   line-height: 1.4;
 }
 
+/* Flicker: каждый тег по очереди fade-in → show → fade-out.
+   Цикл 15s, шаг 1s; окно видимости ~18% цикла → одновременно видимы ≤3 тега. */
+.marquee-grid__cell:nth-child(1)  { animation-delay: -1s; }
+.marquee-grid__cell:nth-child(2)  { animation-delay: -2s; }
+.marquee-grid__cell:nth-child(3)  { animation-delay: -3s; }
+.marquee-grid__cell:nth-child(4)  { animation-delay: -4s; }
+.marquee-grid__cell:nth-child(5)  { animation-delay: -5s; }
+.marquee-grid__cell:nth-child(6)  { animation-delay: -6s; }
+.marquee-grid__cell:nth-child(7)  { animation-delay: -7s; }
+.marquee-grid__cell:nth-child(8)  { animation-delay: -8s; }
+.marquee-grid__cell:nth-child(9)  { animation-delay: -9s; }
+.marquee-grid__cell:nth-child(10) { animation-delay: -10s; }
+.marquee-grid__cell:nth-child(11) { animation-delay: -11s; }
+.marquee-grid__cell:nth-child(12) { animation-delay: -12s; }
+.marquee-grid__cell:nth-child(13) { animation-delay: -13s; }
+.marquee-grid__cell:nth-child(14) { animation-delay: -14s; }
+.marquee-grid__cell:nth-child(15) { animation-delay: -15s; }
+
+@keyframes tagFlicker {
+  0%   { opacity: 0; }
+  2%   { opacity: 1; }
+  16%  { opacity: 1; }
+  18%  { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marquee-grid__cell {
+    opacity: 1;
+    animation: none;
+  }
+}
+
 /* Marquee появляется мягче, чем обычные секции (без большого сдвига) */
 .marquee[data-reveal] {
   opacity: 0;