/* Атмосфера и движение: подсветка сцены, стекло, появление при прокрутке, * бегущая строка, живой макет продукта. * * Правило, отделяющее дорогой эффект от дешёвого: эффект показывает материал * и структуру, а не сам себя. Свет — рассеянный, движение — короткое и с * затуханием, всё выключается по prefers-reduced-motion. */ /* ── Свет сцены ────────────────────────────────────────────────────────── */ .scene { position: relative; isolation: isolate; } /* Посекционного слоя света больше нет: фон один на весь сайт и живёт в components/backdrop.css. Здесь оставлен только .scene — он создаёт контекст наложения, чтобы декоративные элементы секции не всплывали поверх шапки. Убранная пара «радиальное пятно + сетка-миллиметровка» — самый узнаваемый штамп ИИ-лендинга; в V1 её не было. */ /* ── Стекло ────────────────────────────────────────────────────────────── */ .glass { background: var(--c-glass); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); border: 1px solid var(--c-glass-border); box-shadow: var(--sh-inset-top), var(--sh-lg); } /* Запасной вариант там, где backdrop-filter не поддержан: прозрачная панель без размытия превращается в нечитаемую кашу поверх графики. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--c-glass-strong); } } /* ── Появление при прокрутке ───────────────────────────────────────────── */ /* Прятать содержимое имеет право только работающий JS: класс js ставит boot.js в до первой отрисовки. Раньше страховка была написана как `.no-js [data-reveal]`, но класс no-js не ставил никто — и при любой ошибке в app.js страница оставалась пустой. Теперь по умолчанию всё видно, а скрытие включается ровно тогда, когда есть кому его снять. */ html.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } html.js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; transform: none; transition: none; } } @media (max-width: 40rem) and (prefers-reduced-motion: no-preference) { html.js [data-reveal] { transform: translate3d(0, 8px, 0); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } html.js [data-reveal].is-visible { transform: translate3d(0, 0, 0); } } /* ── Подсветка карточки под курсором ───────────────────────────────────── */ .glow-card { position: relative; overflow: hidden; } .glow-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient( 15rem 15rem at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c-accent) 10.5%, transparent), transparent 72%); transition: opacity var(--dur-slow) var(--ease-out); } .glow-card:hover::before, .glow-card:focus-within::before { opacity: 1; } /* Постоянная тёплая подсветка угла — как на карточках преимуществ */ .glow-corner { position: relative; } .glow-corner::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: var(--glow-card); opacity: 0.22; } .glow-corner > * { position: relative; z-index: 1; } /* ── Бегущая строка интеграций ─────────────────────────────────────────── */ .marquee { position: relative; overflow: hidden; /* Гаснет к краям, иначе логотипы обрубаются по границе экрана */ mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; width: max-content; gap: var(--s-3); animation: marquee-slide var(--marquee-dur, 46s) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } /* Лента дублируется в разметке, поэтому сдвиг ровно на половину даёт бесшовный цикл. */ @keyframes marquee-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; } } .marquee__item { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-full); background: var(--c-surface); color: var(--c-text-secondary); font-size: var(--t-xs); font-weight: var(--fw-medium); white-space: nowrap; } .marquee__item img, .marquee__item svg { width: 16px; height: 16px; opacity: 0.9; } /* ── Пульсирующая точка «живого» состояния ─────────────────────────────── */ .pulse-dot { position: relative; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--c-ok); flex: none; } .pulse-dot::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 1px solid currentColor; color: var(--c-ok); opacity: 0; animation: pulse-ring 2.4s var(--ease-out) infinite; } @keyframes pulse-ring { 0% { transform: scale(0.7); opacity: 0.65; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pulse-dot::after { animation: none; } } /* ── Курсор набора текста в демо ───────────────────────────────────────── */ .caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -0.16em; background: var(--c-accent); animation: caret-blink 1.05s steps(1) infinite; } @keyframes caret-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .caret { animation: none; } }