/* ============================================================
   maksim-dr — приглашение на день рождения Максима
   Сборка дизайна из Claude Design («Приглашение Максика.dc.html»)
   в продакшн-статику. Позиции/цвета/анимации — из исходника 1:1.
   ============================================================ */
html, body { margin: 0; padding: 0; background: #d7e6ef; }
* { box-sizing: border-box; }
a { color: #2b6cb0; text-decoration: none; }
a:hover { color: #1f5a96; }
input { font-family: 'Neucha', cursive; }

/* контейнер для инлайн-дудла (SVG вставляется из app.js) */
.dd { display: block; width: 100%; height: 100%; }
.dd > svg { display: block; width: 100%; height: 100%; }

/* ключевые кадры — из исходного дизайна */
@keyframes introPop { 0%{transform:scale(.4) rotate(-8deg);opacity:0} 60%{transform:scale(1.08) rotate(3deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes bob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes bobR  { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-7px) rotate(4deg)} }
@keyframes sway  { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} }
@keyframes spinSlow { to{transform:rotate(360deg)} }
@keyframes walkX { 0%{left:6%} 50%{left:78%} 100%{left:6%} }
@keyframes rBob  { 0%,100%{transform:rotate(180deg) translateY(0)} 50%{transform:rotate(180deg) translateY(-4px)} }
@keyframes runL  { 0%,100%{left:1%;transform:translateY(0)} 50%{left:33%;transform:translateY(-6px)} }
@keyframes runR  { 0%,100%{right:1%;transform:translateY(0)} 50%{right:17%;transform:translateY(-5px)} }

/* ховеры (в дизайне были через style-hover) */
.btn-route:hover  { background: #1f5a96 !important; color: #fff; }
.btn-submit:hover { background: #f6ead2 !important; }

/* выбранный вариант в анкете */
.opt .dot { display: none; }
.opt.is-on .dot { display: block; }

@media (prefers-reduced-motion: reduce) {
  *[style*="animation"] { animation: none !important; }
}