/**
 * SPA トランジション用CSS
 * ページ遷移時のフェードイン・フェードアウト効果
 */

/* メインコンテンツのトランジション */
#main {
	transition: opacity 0.3s ease-in-out;
}

/* ページ読み込み中 */
body.is-page-loading #main {
	opacity: 0.5;
	pointer-events: none;
}

/* ページ読み込み完了 */
body:not(.is-page-loading) #main {
	opacity: 1;
	pointer-events: auto;
}

/* ローディングインジケーター（オプション） */
body.is-page-loading::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(to right, transparent, #4caf50, transparent);
	background-size: 200% 100%;
	animation: loading-bar 1s linear infinite;
	z-index: 9999;
}

@keyframes loading-bar {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}