/* ========================================================================== Constructor animations — МАКРО-поведение кнопок «Да»/«Нет». Реестр: static/js/constructor-animations.js Подключается только на /create и /meeting/v/* (см. constructor.html, invitation_view.html) поверх base.css. Что здесь: - «Да»: idle (.anim-pulse/.anim-glow) + реакции на клик (.anim-shake, .anim-pulse-hit, .anim-glow-burst) — выбор в пикерах «Анимация "Да"» (yesAnim: shake|pulse|glow|none) и «Анимация "Нет"» (noAnim: dodge|shrink|teleport|none). - touch-action: none для убегающих кнопок (dodge нужна честная физика pointermove/touch без скролла браузера). Что НЕ здесь (остаётся в base.css): - МИКРО-эффекты button-fx.js: .btn-ripple, .ring, .sweep, .squish, .hearts/.heart (burst/swarm), hover-сердечки логотипа. - .floating-heart / @keyframes float-heart — общие для конструктора, превью, страницы получателя И финального билета (ticket.html), поэтому живут в base.css, а ConstructorAnimations.spawnHearts их переиспользует. - .confetti-piece (confetti.js). ========================================================================== */ /* --- «Да»: тряска (одноразовая реакция на клик) --- */ @keyframes shake-pop { 0%, 100% { transform: scale(1) rotate(0); } 20% { transform: scale(1.08) rotate(-3deg); } 40% { transform: scale(0.96) rotate(3deg); } 60% { transform: scale(1.1) rotate(-2deg); } 80% { transform: scale(1.02) rotate(1deg); } } .anim-shake { animation: shake-pop 0.5s ease; } /* --- «Да»: пульс (постоянная idle-анимация, пока получатель решает) --- */ @keyframes btn-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.07); } 28% { transform: scale(1); } 42% { transform: scale(1.07); } 70% { transform: scale(1); } } .anim-pulse { animation: btn-heartbeat 1.8s ease-in-out infinite; } .anim-pulse:active { animation-play-state: paused; } /* Каноническое имя из первой версии пикера — алиас, чтобы старые сохранённые страницы/кэш не мигнули без анимации. Новые вызовы используют .anim-pulse. */ .btn-heartbeat { animation: btn-heartbeat 1.8s ease-in-out infinite; } .btn-heartbeat:active { animation-play-state: paused; } /* --- «Да»: реакция на клик при пульсе — один сильный удар --- (позже .anim-pulse в файле, поэтому перебивает idle на время хита) */ @keyframes pulse-hit { 0% { transform: scale(1); } 25% { transform: scale(1.16); } 45% { transform: scale(.97); } 65% { transform: scale(1.1); } 100% { transform: scale(1); } } .anim-pulse-hit { animation: pulse-hit .6s ease-out; } /* --- «Да»: сияние (непрерывное, как пульс) --- */ @keyframes btn-glow { 0% { box-shadow: 0 8px 20px rgba(225,29,116,.28), 0 0 0 0 rgba(223,79,139,.55); } 70% { box-shadow: 0 8px 20px rgba(225,29,116,.28), 0 0 0 14px rgba(223,79,139,0); } 100% { box-shadow: 0 8px 20px rgba(225,29,116,.28), 0 0 0 0 rgba(223,79,139,0); } } .anim-glow { animation: btn-glow 1.8s ease-out infinite; } /* --- «Да»: реакция на клик при сиянии — двойная волна колец --- (позже .anim-glow в файле, поэтому перебивает idle на время вспышки) */ @keyframes glow-burst { 0% { box-shadow: 0 8px 20px rgba(225,29,116,.28), 0 0 0 0 rgba(223,79,139,.7), 0 0 0 0 rgba(223,79,139,.45); } 100% { box-shadow: 0 8px 20px rgba(225,29,116,.28), 0 0 0 22px rgba(223,79,139,0), 0 0 0 46px rgba(223,79,139,0); } } .anim-glow-burst { animation: glow-burst .7s ease-out; } /* --- «Нет»: уменьшение (shrink идёт по шагам из JS, финальное исчезновение оформлено классом, чтобы motion-язык был в CSS, а не в инлайн-стилях) --- */ @keyframes anim-shrink-away { to { transform: translate(var(--shrink-tx, 0px), var(--shrink-ty, 0px)) scale(0); opacity: 0; } } .anim-shrink { animation: anim-shrink-away 0.25s ease forwards; } @media (prefers-reduced-motion: reduce) { .anim-shrink { animation-duration: 0.01ms; } } /* Убегающей кнопке нужен честный pointermove/touch без вмешательства скролла — иначе dodge дёргается на тачскринах. Превью (phone-mock) здесь намеренно нет: previewNo зафиксирована и не убегает, ей скролл жестом нужен как обычно. */ #demoNoBtn, .invitation-no { touch-action: none; } /* ========================================================================== Always-play при prefers-reduced-motion. Демо-пикер обязан показывать выбранную анимацию при любой настройке ОС: это осознанный предпросмотр (и ответ получателя), а не фоновый декор — та же философия, что RESPECT_REDUCED_MOTION=false в button-fx.js. ВАЖНО: глобальное приглушение base.css — это селектор специфичностью (0,6,0) с !important, поэтому голый класс (0,1,0) его НЕ перебивает даже с !important. Здесь — ID-селекторы (1,1,0): демо-кнопки конструктора лежат в form#constructorForm, кнопки получателя — в div#step1, а кнопка «Да» из phone-screen — в .preview-pane ВНЕ формы (см. constructor.html: идёт раньше