/* ============================================================ AI CULTURE — анимации Сюда поедут @keyframes и классы анимаций после согласования дизайна каждой секции: - hero-окошки: появление + плавание + моргание - reveal при скролле (через .is-visible от IntersectionObserver) - blur-заголовки секций - прочие микро-взаимодействия ============================================================ */ /* ---------- БАЗА ДЛЯ REVEAL ПРИ СКРОЛЛЕ ---------- */ /* JS добавляет .is-visible когда элемент попадает во вьюпорт */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================ HERO — анимации окошек Три типа поведения, объединённые в одну animation-shorthand: 1) hero-window-appear — "открытие файла": scale 0.3→1, opacity 0→1 с последовательной задержкой между окошками 2) hero-window-float — вечное колебание ±float-y по вертикали, у каждого окошка свой период (4–6s), не синхронизируются 3) hero-window-blink — редкое моргание opacity 1→0.4→1 раз в ~10s, у каждого свой стартовый офсет Все CSS-переменные (--rotate, --appear-delay, --float-d, --float-y, --blink-delay) выставляются на самих .hero__window--N в style.css. Анимации применяются только при prefers-reduced-motion: no-preference. ============================================================ */ @keyframes hero-window-appear { from { opacity: 0; transform: scale(0.3) rotate(var(--rotate, 0deg)); } to { opacity: 1; transform: scale(1) rotate(var(--rotate, 0deg)); } } @keyframes hero-window-float { 0% { transform: scale(1) translateY(0) rotate(var(--rotate, 0deg)); } 25% { transform: scale(1) translateY(calc(var(--float-y, 6px) * -1)) rotate(var(--rotate, 0deg)); } 50% { transform: scale(1) translateY(0) rotate(var(--rotate, 0deg)); } 75% { transform: scale(1) translateY(var(--float-y, 6px)) rotate(var(--rotate, 0deg)); } 100% { transform: scale(1) translateY(0) rotate(var(--rotate, 0deg)); } } /* 10-секундный цикл, "просадка" длится ~0.3s (3% цикла) около середины. У каждого окошка свой --blink-delay, чтобы моргания не совпадали. */ @keyframes hero-window-blink { 0%, 50% { opacity: 1; } 51.5% { opacity: 0.4; } 53%, 100% { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .hero__window { /* Стартовое состояние — невидимо, появится через appear */ opacity: 0; animation: hero-window-appear 0.6s cubic-bezier(0.4, 0, 0.2, 1) var(--appear-delay, 0s) forwards, hero-window-float var(--float-d, 5s) ease-in-out calc(var(--appear-delay, 0s) + 0.6s) infinite, hero-window-blink 10s linear calc(var(--appear-delay, 0s) + 0.6s + var(--blink-delay, 0s)) infinite; } } /* ============================================================ WORKS — плавающие карточки Каждая из 9 .work-cell непрерывно качается между двумя предельными положениями. У каждой ячейки свой набор: - длительность (5–9 s, не кратные друг другу) - отрицательная задержка (-1…-6 s) — старт с разных фаз - амплитуда X (5–15 px) и Y (10–25 px) - наклон (-2…+2 deg) В сумме движения выглядят хаотично, не синхронно, как "дышащий" коллаж. Анимируется ТОЛЬКО transform — никаких top/left/margin, чтобы оставаться на GPU. Включается только при prefers-reduced-motion: no-preference. Глобальный reduce-motion override ниже всё равно поджимает всё к 0.01ms, но wrapper делает намерение явным. ============================================================ */ @media (prefers-reduced-motion: no-preference) { @keyframes work-float { from { transform: translate3d(calc(var(--tx) * -1), calc(var(--ty) * -1), 0) rotate(calc(var(--rot) * -1)); } to { transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot)); } } .work-cell { animation-name: work-float; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; will-change: transform; } /* 9 уникальных наборов значений: ни одна ячейка не повторяет чужие числа, длительности не кратны друг другу. */ .work-cell:nth-child(1) { --tx: 8px; --ty: 14px; --rot: 1.4deg; animation-duration: 5.3s; animation-delay: -2.4s; } .work-cell:nth-child(2) { --tx: 12px; --ty: 22px; --rot: -1.7deg; animation-duration: 6.7s; animation-delay: -4.8s; } .work-cell:nth-child(3) { --tx: 6px; --ty: 18px; --rot: 0.8deg; animation-duration: 7.9s; animation-delay: -1.2s; } .work-cell:nth-child(4) { --tx: 14px; --ty: 11px; --rot: -0.6deg; animation-duration: 8.4s; animation-delay: -3.6s; } .work-cell:nth-child(5) { --tx: 9px; --ty: 24px; --rot: 1.9deg; animation-duration: 5.7s; animation-delay: -5.1s; } .work-cell:nth-child(6) { --tx: 11px; --ty: 16px; --rot: -1.3deg; animation-duration: 7.3s; animation-delay: -2.9s; } .work-cell:nth-child(7) { --tx: 7px; --ty: 20px; --rot: 0.5deg; animation-duration: 6.1s; animation-delay: -4.2s; } .work-cell:nth-child(8) { --tx: 13px; --ty: 12px; --rot: -1.9deg; animation-duration: 8.9s; animation-delay: -1.7s; } .work-cell:nth-child(9) { --tx: 5px; --ty: 25px; --rot: 1.1deg; animation-duration: 6.3s; animation-delay: -5.5s; } } /* ---------- WORKS — сжатые амплитуды для mobile (<768px) ---------- На маленьком экране качание ±25px заметно "нервничает" — режем амплитуды (tx 3–8, ty 6–14, rot ±1) сохраняя разсинхронность. Длительности и delay из desktop-блока выше остаются — фазы карт не совпадают. Этот блок идёт ПОСЛЕ desktop-набора, поэтому при равной специфичности побеждает на mobile. */ @media (prefers-reduced-motion: no-preference) and (max-width: 768px) { .work-cell:nth-child(1) { --tx: 4px; --ty: 8px; --rot: 0.7deg; } .work-cell:nth-child(2) { --tx: 7px; --ty: 13px; --rot: -0.9deg; } .work-cell:nth-child(3) { --tx: 3px; --ty: 11px; --rot: 0.4deg; } .work-cell:nth-child(4) { --tx: 8px; --ty: 6px; --rot: -0.3deg; } .work-cell:nth-child(5) { --tx: 5px; --ty: 14px; --rot: 0.95deg; } .work-cell:nth-child(6) { --tx: 6px; --ty: 9px; --rot: -0.65deg; } .work-cell:nth-child(7) { --tx: 4px; --ty: 12px; --rot: 0.25deg; } .work-cell:nth-child(8) { --tx: 7px; --ty: 7px; --rot: -0.95deg; } .work-cell:nth-child(9) { --tx: 3px; --ty: 14px; --rot: 0.55deg; } } /* ---------- HERO — сжатые амплитуды для mobile (<768px) ---------- Меньше экран → меньше амплитуда колебания, чтобы 3 видимых полароида не нервничали и не задевали соседние области. --rotate сохраняем как у desktop — он задаёт характер, а не амплитуду. */ @media (prefers-reduced-motion: no-preference) and (max-width: 768px) { .hero__window--1 { --float-y: 4px; } .hero__window--3 { --float-y: 4px; } .hero__window--4 { --float-y: 4px; } } /* ---------- УВАЖАЕМ prefers-reduced-motion ---------- */ /* Глобальный страховочный слой: даже если у элемента есть animation, при reduce-режиме она прокручивается мгновенно. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }