/**
 * Loading Screen Styles
 * - ページ遷移時のローディング画面
 * - フェードイン/フェードアウト
 * - モダンでおしゃれなデザイン
 */

/* ===== ローディングオーバーレイ ===== */
.swx-loading {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* ローディング完了時の非表示 */
.swx-loading.is-loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ===== スピナー（3つのドット） ===== */
.swx-loading__spinner {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.swx-loading__dot {
	width: 12px;
	height: 12px;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	border-radius: 50%;
	animation: swx-loading-bounce 1.4s infinite ease-in-out both;
}

.swx-loading__dot:nth-child(1) {
	animation-delay: -0.32s;
}

.swx-loading__dot:nth-child(2) {
	animation-delay: -0.16s;
}

@keyframes swx-loading-bounce {
	0%, 80%, 100% {
		transform: scale(0.8);
		opacity: 0.5;
	}
	40% {
		transform: scale(1.2);
		opacity: 1;
	}
}

/* ===== コンテンツのフェードイン ===== */
/* ローディング中はコンテンツを非表示 */
.swx-loading:not(.is-loaded) ~ * {
	opacity: 0;
}

/* bodyにクラスが付与されたらコンテンツをフェードイン */
body.swx-loaded {
	opacity: 1 !important;
}

body.swx-loaded * {
	transition: opacity 0.5s ease;
}

/* ===== ダークモード対応 ===== */
@media (prefers-color-scheme: dark) {
	.swx-loading {
		background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
	}

	.swx-loading__dot {
		background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
	}
}

/* ===== 代替デザイン：リング型スピナー（オプション） ===== */
.swx-loading__spinner.-ring {
	width: 48px;
	height: 48px;
	border: 4px solid rgba(59, 130, 246, 0.1);
	border-top-color: #3b82f6;
	border-radius: 50%;
	animation: swx-loading-spin 0.8s linear infinite;
}

.swx-loading__spinner.-ring .swx-loading__dot {
	display: none;
}

@keyframes swx-loading-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ===== ロゴ付きローディング（オプション） ===== */
.swx-loading__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: -60px;
	max-width: 200px;
	opacity: 0.9;
}

.swx-loading__logo img {
	width: 100%;
	height: auto;
	display: block;
}