/* Анімації гри. Переходи екранів, оверлеї й числа малює app.js (Web Animations API); тут — лише те,
 * що живе в самій розмітці: пульс таймера, зірки, старт раунду (тасування колоди, відлік 3-2-1). */

/* ---------- шари сцени ---------- */
#stage .layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#stage .layer.old { z-index: 3; pointer-events: none; }
body { transition: background-color .4s ease; }

/* ---------- кнопки: натискання «в’язне», як у грі ---------- */
button, [data-act] { transition: transform .12s cubic-bezier(.3, 1.6, .5, 1), filter .12s; }
button:active:not(:disabled), [data-act]:active { transform: scale(.965); }

/* ---------- таймер: останні секунди б’ються ---------- */
.t-low, .t-crit { display: inline-block; transform-origin: 50% 60%; }
.t-low { animation: t-beat 1s ease-in-out infinite; }
.t-crit { animation: t-beat .5s ease-in-out infinite; color: #FFC531; }
@keyframes t-beat { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.1); } }

/* ---------- зірки слова / нагороди ---------- */
.st-row { display: inline-flex; align-items: center; }
.st-row svg { display: block; flex: none; }
.st-pop svg { animation: st-pop .5s cubic-bezier(.2, 1.7, .4, 1) both; animation-delay: calc(var(--i, 0) * 90ms + var(--sd, 0ms)); }
@keyframes st-pop { 0% { transform: scale(0) rotate(-60deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.st-shine svg { animation: st-shine 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 160ms); }
@keyframes st-shine { 0%, 70%, 100% { transform: scale(1) rotate(0); } 82% { transform: scale(1.18) rotate(8deg); } }

/* ---------- табло рахунку ---------- */
.sb-knot { transition: left .9s cubic-bezier(.22, .9, .3, 1); }

/* ---------- старт раунду ---------- */
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes in-fadeout { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes in-drop { 0% { transform: translateY(-46px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes in-rise { 0% { transform: translateY(34px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes in-pop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes in-slide-l { 0% { transform: translateX(-120px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes in-slide-r { 0% { transform: translateX(120px); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* хвиля від центру */
@keyframes in-burst { 0% { transform: scale(.05); opacity: .55; } 100% { transform: scale(1); opacity: 0; } }
@keyframes in-ring { 0% { transform: scale(.35); opacity: 0; } 8% { opacity: .85; } 100% { transform: scale(1.8); opacity: 0; } }
/* цифра відліку: удар на початку своєї секунди, тримається, зникає до наступної */
@keyframes in-num {
  0% { transform: scale(1.7); opacity: 0; }
  9% { transform: scale(.94); opacity: 1; }
  16% { transform: scale(1.05); }
  24% { transform: scale(1); }
  86% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.7); opacity: 0; }
}
@keyframes in-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- кінець гри ---------- */
@keyframes fin-pop { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.12) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes fin-float { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-10px) rotate(calc(var(--rot, 0deg) + 4deg)); } }
.fin-float { animation: fin-float 3.2s ease-in-out infinite; animation-delay: var(--fd, 0s); }

/* «Ну шо…»: крапки по черзі підстрибують і світлішають — назва ще «друкується» (UI.logo з live) */
.logo-dot { animation: logo-dot 1.5s ease-in-out infinite; animation-delay: calc(var(--i) * .18s); }
@keyframes logo-dot { 0%, 55%, 100% { transform: translateY(0); opacity: .6; } 25% { transform: translateY(-.22em); opacity: 1; } }

/* Кубик: стрічка звірів у кружечку аватарки крутиться, як барабан слот-машини, сповільнюється й зупиняється на новому звірі з відскоком */
.av-reel { animation: av-reel 1.6s cubic-bezier(.16, .62, .24, 1) both; will-change: transform; }
@keyframes av-reel {
  0% { transform: translateY(var(--from)); filter: blur(0); }
  12% { filter: blur(2.5px); }
  60% { filter: blur(1px); }
  84% { transform: translateY(var(--ov)); filter: blur(0); }
  100% { transform: translateY(var(--to)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .t-low, .t-crit { animation: none; }
}