/* AI-driven slogan — placed below the "Заказать проект" / "Заказать поддержку" buttons in the parallax hero. A character-by-character typing effect runs once on page load (4s) and the text stays visible afterwards. A gentle SVG displacement filter (#slogan-damage, defined inline in header.php) keeps animating after typing completes, producing a subtle persistent glitch overlay. The first "i" in "Ai" stays gold serif lowercase (visible tittle, the rest is uppercase Oswald). Matches theme yellow #ffcc00. Glitch overlay: SVG #slogan-damage displaces pixels via animated feTurbulence + feDisplacementMap. Seed (11s cycle) and scale (13s cycle) animate independently and forever, producing a continuously varying glitch rhythm. Added 2026-08-05. */ .ai-driven-slogan { display: none; text-align: center; margin-top: 60px; font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 400; color: #fff; text-transform: uppercase; letter-spacing: 3px; line-height: 1.4; } /* Show only when site theme toggle is set to dark (v=15). Mirrors the pattern in /css/dark-theme.css and respects /js/theme-toggle.js, which sets and persists the choice in localStorage('theme'). This decouples slogan visibility from the unreliable `prefers-color-scheme` media query (Chrome Auto Dark Mode flag, dark-mode extensions, etc. can make the browser report `dark` regardless of OS theme). When `data-theme` is `light` or unset, the default `display: none` on the rule above keeps the slogan hidden. */ [data-theme="dark"] .ai-driven-slogan { display: block; } .ai-driven-slogan .typed { display: inline-block; white-space: nowrap; animation: slogan-typing 4s steps(19, end) 0.3s forwards; filter: url(#slogan-damage); } .ai-driven-slogan .gold-i { color: #ffcc00; text-transform: none; font-family: 'Georgia', 'PT Serif', 'Times New Roman', serif; font-size: 1.15em; font-weight: 600; vertical-align: -1px; } .ai-driven-slogan .cursor { display: inline-block; width: 3px; height: 0.85em; background: #ffcc00; margin-left: 4px; vertical-align: -2px; animation: slogan-blink 0.75s step-end infinite; } @keyframes slogan-typing { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } } @keyframes slogan-blink { 50% { opacity: 0; } } .slogan-svg { position: absolute; width: 0; height: 0; overflow: hidden; } /* Responsive: scale down on small screens */ @media (max-width: 767px) { .ai-driven-slogan { font-size: 16px; letter-spacing: 2px; margin-top: 40px; padding: 0 16px; } } /* Accessibility: respect reduced-motion preference — show full text, no animation */ @media (prefers-reduced-motion: reduce) { .ai-driven-slogan .typed { animation: none; filter: none; } .ai-driven-slogan .cursor { animation: none; opacity: 0; } }