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;