/* アニメーション関連のスタイル */

/* 要素のフェードイン */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.fade-in {
	animation: fadeIn 0.5s ease forwards;
}

/* 要素のフェードアウト */
@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.fade-out {
	animation: fadeOut 0.5s ease forwards;
}

/* スライドイン（左から） */
@keyframes slideInLeft {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.slide-in-left {
	animation: slideInLeft 0.5s ease forwards;
}

/* スライドイン（右から） */
@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.slide-in-right {
	animation: slideInRight 0.5s ease forwards;
}

/* スライドイン（上から） */
@keyframes slideInTop {
	from {
		transform: translateY(-50px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.slide-in-top {
	animation: slideInTop 0.5s ease forwards;
}

/* スケールイン（拡大） */
@keyframes scaleIn {
	from {
		transform: scale(0.5);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.scale-in {
	animation: scaleIn 0.5s ease forwards;
}

/* パルス（注目を集めるエフェクト） */
@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

.pulse {
	animation: pulse 1s ease infinite;
}

/* ダンサー移動アニメーション */
@keyframes movePosition {
	0% {
		transform: translate(var(--start-x), var(--start-y));
	}
	100% {
		transform: translate(var(--end-x), var(--end-y));
	}
}

.dancer-moving {
	animation: movePosition var(--duration) ease forwards;
}

/* 鼓動エフェクト（アクティブなダンサー） */
@keyframes heartbeat {
	0% {
		transform: scale(1);
	}
	14% {
		transform: scale(1.1);
	}
	28% {
		transform: scale(1);
	}
	42% {
		transform: scale(1.1);
	}
	70% {
		transform: scale(1);
	}
}

.heartbeat {
	animation: heartbeat 1.5s ease infinite;
}

/* シェイク（警告などに使用） */
@keyframes shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-5px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(5px);
	}
}

.shake {
	animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

/* タイムラインインジケーター */
@keyframes timelineProgress {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

.timeline-progress {
	animation: timelineProgress var(--duration) linear forwards;
}

/* 回転エフェクト */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.spin {
	animation: spin 1s linear infinite;
}

/* ローディングエフェクト（点滅） */
@keyframes blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

.blink {
	animation: blink 1s ease infinite;
}

/* ヒントのバウンス効果 */
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-20px);
	}
	60% {
		transform: translateY(-10px);
	}
}

.bounce {
	animation: bounce 2s ease infinite;
}

/* トーストメッセージ表示エフェクト */
@keyframes toastIn {
	0% {
		transform: translateY(100px);
		opacity: 0;
	}
	10% {
		transform: translateY(-10px);
		opacity: 1;
	}
	20% {
		transform: translateY(0);
	}
	80% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(100px);
		opacity: 0;
	}
}

.toast {
	animation: toastIn 3s ease forwards;
}