/* ========================================================================== SonicTheme — анимации Подключается после style.css. Все ключевые кадры собраны здесь. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Скоростные линии: тайл 480px сдвигается ровно на свою ширину — без шва -------------------------------------------------------------------------- */ @keyframes speed-lines-move { from { background-position: 0 0; } to { background-position: -480px 0; } } .speed-lines { animation: speed-lines-move 2.4s linear infinite; } /* -------------------------------------------------------------------------- 2. Вращение кольца: сжатие по оси X. steps() даёт «покадровый» ретро-вид -------------------------------------------------------------------------- */ @keyframes ring-spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.15); } 100% { transform: scaleX(1); } } /* Крутятся только несобранные кольца */ .ring-icon:not(.is-collected)::before { animation: ring-spin 1.2s steps(8) infinite; } /* Небольшой сдвиг фазы, чтобы кольца в ряду не вращались синхронно */ .ring-icon:nth-child(2n)::before { animation-delay: -0.3s; } .ring-icon:nth-child(3n)::before { animation-delay: -0.6s; } /* -------------------------------------------------------------------------- 3. СБОР КОЛЕЦ ПРИ СКРОЛЛЕ JS (rings.js) добавляет .is-collected, когда карточка появляется на экране. Кольцо подпрыгивает, вспыхивает и исчезает, всплывает «+1». -------------------------------------------------------------------------- */ @keyframes ring-collect { 0% { opacity: 1; transform: translateY(0) scale(1); filter: none; } 25% { opacity: 1; transform: translateY(-10px) scale(1.25); } 55% { opacity: 1; transform: translateY(-22px) scale(1.6); filter: brightness(2) drop-shadow(0 0 6px #fff7b0); } 100% { opacity: 0; transform: translateY(-34px) scale(0.6); filter: brightness(2); } } @keyframes ring-plus { 0% { opacity: 0; transform: translate(-50%, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } } .ring-icon.is-collected::before { /* opacity: 0 задан в style.css — здесь анимация «взлёта» перед исчезновением */ animation: ring-collect 0.7s steps(10) 1 both; } .ring-icon.is-collected::after { animation: ring-plus 0.9s steps(9) 1 both; } /* -------------------------------------------------------------------------- 4. Появление карточек «рывком» слева, как скоростной пролёт. Работает только при включённом JS (класс .js ставится в ), чтобы без скриптов контент никогда не оставался невидимым. -------------------------------------------------------------------------- */ .js .zone-card { opacity: 0; transform: translateX(-80px) skewX(-10deg); } .js .zone-card.is-visited { opacity: 1; transform: none; transition: opacity 0.25s steps(5), transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.15s; } /* -------------------------------------------------------------------------- 5. Чекпоинты: при активации лампа делает оборот и краснеет -------------------------------------------------------------------------- */ @keyframes lamp-spin { 0% { transform: scaleX(1); } 25% { transform: scaleX(0.1); } 50% { transform: scaleX(1); } 75% { transform: scaleX(0.1); } 100% { transform: scaleX(1); } } .checkpoint.is-active .checkpoint__lamp { animation: lamp-spin 0.6s steps(8) 1; } /* -------------------------------------------------------------------------- 6. Блик на титульной карточке главной -------------------------------------------------------------------------- */ @keyframes title-shine { 0% { transform: translateX(-140%) skewX(-18deg); } 60%, 100% { transform: translateX(340%) skewX(-18deg); } } .title-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 12%; background: rgba(255, 255, 255, 0.22); pointer-events: none; animation: title-shine 5s linear infinite; } /* -------------------------------------------------------------------------- 7. Мигание в стиле «PRESS START» (для надписей с классом .blink) -------------------------------------------------------------------------- */ @keyframes blink { 50% { opacity: 0; } } .blink { animation: blink 1s steps(1) infinite; } /* -------------------------------------------------------------------------- 8. Кольцо-меню: короткий «переворот» при наведении -------------------------------------------------------------------------- */ @keyframes ring-flip { 0% { transform: translateY(-3px) scaleX(1); } 50% { transform: translateY(-3px) scaleX(0.4); } 100% { transform: translateY(-3px) scaleX(1); } } .ring-menu a:hover { animation: ring-flip 0.4s steps(6) 1; } /* -------------------------------------------------------------------------- 9. Уважение к настройке «уменьшить движение» -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .js .zone-card { opacity: 1; transform: none; } /* Кольца сразу показываем «собранными» без анимации, лампы — красными */ .ring-icon.is-collected::after { opacity: 0; } }