/*
======================================
Concert Page Loading Animation
コンサートページ専用ローディングアニメーション
conic-gradient スピナー（弧の伸縮 + 回転）
======================================
*/

/* =============================================
   オーバーレイ全体
   ============================================= */
.concert-loading {
	align-items: center;
	background: var(--white, #fff);
	display: flex;
	height: 100vh;
	height: 100dvh;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}

/* フェードアウト状態 */
.concert-loading.is-hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

/* DOM 除去状態 */
.concert-loading.is-removed {
	display: none;
}

/* =============================================
   スピナー内コンテナ
   ============================================= */
.concert-loading__inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: center;
}

/* =============================================
   スピナー本体（回転コンテナ）
   ============================================= */
.concert-loading__spinner {
	animation: concertSpin 1.2s linear infinite;
	border-radius: 50%;
	height: 120px;
	position: relative;
	width: 120px;
}

/* ピンクリング（30度の欠けあり） */
.concert-loading__ring {
	background: conic-gradient(#FF69B4 0deg, #FF69B4 330deg, transparent 330deg, transparent 360deg);
	border-radius: 50%;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* 内側マスク（白円でドーナツ型に） */
.concert-loading__ring-mask {
	background: var(--white, #fff);
	border-radius: 50%;
	height: calc(100% - 24px); /* リング幅 12px × 2 */
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 24px);
}

/* =============================================
   ローディングテキスト
   ============================================= */
.concert-loading__text {
	display: none;
}

/* =============================================
   キーフレーム
   ============================================= */

/* スピン回転 */
@keyframes concertSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* テキストのパルス（点滅） */
@keyframes concertPulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.4; }
}

/* =============================================
   ページコンテンツ制御
   ============================================= */

/* ローディング中: スクロール禁止 */
body.is-concert-loading {
	overflow: hidden;
	overflow-y: scroll; /* スクロールバーを常に表示してレイアウトシフトを防ぐ */
	scrollbar-gutter: stable;
}

/* ローディング中: メインコンテンツ非表示 */
body.is-concert-loading .main-concert {
	opacity: 0;
	visibility: hidden;
}

/* ローディング完了: メインコンテンツ表示 */
body.loading-concert-complete .main-concert {
	opacity: 1;
	transition: opacity 0.6s ease;
	visibility: visible;
}

/* =============================================
   アクセシビリティ: モーション低減設定
   ============================================= */
@media (prefers-reduced-motion: reduce) {
	.concert-loading__spinner {
		animation: none;
	}
	.concert-loading__text {
		animation: none;
	}
}

/* =============================================
   SP 対応
   ============================================= */
@media screen and (max-width: 599px) {
	.concert-loading__spinner {
		height: 80px;
		width: 80px;
	}

	.concert-loading__ring-mask {
		height: calc(100% - 16px); /* リング幅 8px × 2 */
		width: calc(100% - 16px);
	}

	.concert-loading__text {
		font-size: 12px;
	}
}