/* Sarah247 — слой движения. Прототип, включается атрибутом data-motion на : отсутствует → сайт как есть; "calm" → сдержанно; "bold" → выразительно. Три правила, из-за которых это безопасно для SEO: 1. Контент виден всегда. Анимации появления работают ТОЛЬКО внутри @supports (animation-timeline: view()) — где эта возможность есть, элемент уже отрисован и просто «доезжает»; где нет — ничего не скрывается. 2. Двигаем только transform и opacity → нулевой CLS, композитинг на GPU. 3. Ноль JavaScript. Ни байта на критическом пути. Плюс полное отключение при prefers-reduced-motion. */ /* ---------- переходы между страницами (cross-document View Transitions) ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: s247-vt-out .18s ease both; } ::view-transition-new(root) { animation: s247-vt-in .26s cubic-bezier(.22,.61,.36,1) both; } @keyframes s247-vt-out { to { opacity: 0; } } @keyframes s247-vt-in { from { opacity: 0; transform: translateY(8px); } } /* шапка и футер не должны мигать при переходе — они одинаковы на всех страницах */ [data-motion] .hdr { view-transition-name: s247-header; } [data-motion] footer { view-transition-name: s247-footer; } /* ---------- появление блоков по скроллу ---------- */ @supports (animation-timeline: view()) { [data-motion="calm"] main > section > .wrap > .sec-head, [data-motion="calm"] main .grid > *, [data-motion="calm"] main .steps > *, [data-motion="calm"] main .two-col > *, [data-motion="calm"] main .tbl-wrap, [data-motion="calm"] main .price-hero, [data-motion="bold"] main > section > .wrap > .sec-head, [data-motion="bold"] main .grid > *, [data-motion="bold"] main .steps > *, [data-motion="bold"] main .two-col > *, [data-motion="bold"] main .tbl-wrap, [data-motion="bold"] main .price-hero { animation: s247-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; } /* карточки в сетке доезжают чуть вразнобой — «каскад» без JS */ [data-motion] main .grid > *:nth-child(2n) { animation-range: entry 0% entry 50%; } [data-motion] main .grid > *:nth-child(3n) { animation-range: entry 0% entry 58%; } [data-motion="bold"] main .hero-in > * { animation-range: entry 0% entry 30%; } /* hero не анимируем на входе: это LCP-элемент, он должен появиться сразу */ [data-motion] .hero h1, [data-motion] .hero .sub { animation: none !important; } } @keyframes s247-rise { from { opacity: .001; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ---------- живой hero ---------- */ [data-motion] .hero-glow { animation: s247-drift 18s ease-in-out infinite alternate; } @keyframes s247-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); opacity: .85; } to { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 1; } } [data-motion="bold"] .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 0%, rgba(255, 82, 56, .10), transparent 70%); animation: s247-pulse 7s ease-in-out infinite; } @keyframes s247-pulse { 50% { opacity: .45; } } /* пульсирующая точка в бейдже — «линия открыта» */ [data-motion] .badge .dot { animation: s247-blip 2.4s ease-in-out infinite; } @keyframes s247-blip { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 82, 56, .55); } 70% { box-shadow: 0 0 0 7px rgba(255, 82, 56, 0); } } /* ---------- звуковая волна: по смыслу бренда — Sarah на линии ---------- */ .s247-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; vertical-align: -3px; } .s247-wave i { width: 3px; border-radius: 2px; background: var(--neon); height: 30%; opacity: .55; } [data-motion] .s247-wave i { animation: s247-bar 1.1s ease-in-out infinite; } [data-motion] .s247-wave i:nth-child(2) { animation-delay: .12s; } [data-motion] .s247-wave i:nth-child(3) { animation-delay: .24s; } [data-motion] .s247-wave i:nth-child(4) { animation-delay: .36s; } [data-motion] .s247-wave i:nth-child(5) { animation-delay: .48s; } @keyframes s247-bar { 50% { height: 100%; opacity: 1; } } /* ---------- интерактив ---------- */ [data-motion] .card { transition: transform .28s cubic-bezier(.22,.61,.36,1), border-color .28s, box-shadow .28s; } [data-motion] a.card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px -18px rgba(255, 42, 20, .45); } [data-motion="bold"] a.card:hover { transform: translateY(-6px) scale(1.012); } [data-motion] .btn { transition: transform .2s cubic-bezier(.22,.61,.36,1), filter .2s, box-shadow .2s; } [data-motion] .btn:hover { transform: translateY(-2px); } [data-motion] .btn-red { position: relative; overflow: hidden; } [data-motion="bold"] .btn-red::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%); } [data-motion="bold"] .btn-red:hover::after { animation: s247-shine .7s ease both; } @keyframes s247-shine { to { transform: translateX(120%); } } [data-motion] .nav > a, [data-motion] .nav-link { position: relative; } [data-motion] .nav > a::after, [data-motion] .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--neon); transform: scaleX(0); transform-origin: left; transition: transform .24s cubic-bezier(.22,.61,.36,1); } [data-motion] .nav > a:hover::after, [data-motion] .nav-item:hover .nav-link::after { transform: scaleX(1); } [data-motion] .pill { transition: transform .2s, border-color .2s, color .2s; } [data-motion] a.pill:hover { transform: translateY(-2px); } /* аккордеон FAQ */ [data-motion] .faq details summary { transition: color .2s; } [data-motion] .faq details[open] > p { animation: s247-rise .28s ease both; } /* ---------- полоса прогресса чтения (только bold, без JS) ---------- */ @supports (animation-timeline: scroll()) { [data-motion="bold"] body::before { content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60; background: linear-gradient(90deg, var(--neon-soft), var(--neon)); transform-origin: 0 50%; transform: scaleX(0); animation: s247-progress linear both; animation-timeline: scroll(root block); } } @keyframes s247-progress { to { transform: scaleX(1); } } /* ---------- уважение к настройке «меньше движения» ---------- */ @media (prefers-reduced-motion: reduce) { [data-motion] *, [data-motion] *::before, [data-motion] *::after { animation: none !important; transition-duration: .01ms !important; } @view-transition { navigation: none; } } /* ---------- переключатель вариантов: ТОЛЬКО на staging ---------- */ .s247-lab { position: fixed; right: 14px; bottom: 14px; z-index: 200; display: flex; gap: 6px; padding: 6px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(20, 20, 28, .92); backdrop-filter: blur(8px); font-family: var(--font-mono); font-size: .72rem; } .s247-lab button { border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; background: transparent; color: var(--muted); font: inherit; } .s247-lab button.on { background: var(--red); color: #fff; } .s247-diag { padding: 0 10px 0 4px; color: var(--dim); align-self: center; white-space: nowrap; } .s247-diag b.yes { color: var(--ok); } .s247-diag b.no { color: var(--neon); } @media (max-width: 900px) { .s247-diag { display: none; } } @media (max-width: 760px) { .s247-lab { bottom: 74px; } } /* ---------- анимация волны во время проигрывания ---------- */ [data-motion] .call-card.playing .call-wave { opacity: 1; } [data-motion] .call-card.playing .call-wave i { animation: s247-wv 1.2s ease-in-out infinite; } [data-motion] .call-card.playing .call-wave i:nth-child(3n) { animation-delay: .15s; } [data-motion] .call-card.playing .call-wave i:nth-child(3n+1) { animation-delay: .3s; } @keyframes s247-wv { 50% { transform: scaleY(.45); } } } }