/**
 * Путь: /assets/css/animations.css
 * Назначение: Микроанимации UI.
 */

/* Тосты (Всплывающие уведомления) */
.toast-container {
	position: fixed;
	bottom: var(--space-4);
	right: var(--space-4);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	pointer-events: none;
}

.toast {
	background: var(--color-bg-surface);
	color: var(--color-text-main);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	font-weight: 500;
	pointer-events: auto;
	
	/* Начальное состояние (скрыто снизу) */
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.toast--success .icon { color: var(--color-success); }
.toast--error .icon { color: var(--color-danger); }
.toast--info .icon { color: var(--color-primary); }

/* Анимация голоса (взлет числа +1) */
@keyframes vote-bounce {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

.vote-animation {
	animation: vote-bounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Скелетон загрузки (Pulse) */
@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .5; }
}
.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Анимация лоадера в кнопке (Точки ...) */
@keyframes ellipsis {
	to { width: 1.25em; }
}
.btn-loader {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	width: 0px;
	animation: ellipsis steps(4,end) 900ms infinite;
}