@charset "utf-8";

/*  ===============================
      loading（オープニング演出）の骨格
      読み込み順: 00_destyle → 10_common → [20_loading] → 50_style → 90_style_sp

      機構は assets/js/modules/loading.js（initLoading）。
      このファイルはオーバーレイ土台・skip ボタン・退場フェード・保険だけを持つ。
      題字などの演出は各案件が #loading 配下に足し、ここに追記する
      （.is-bgIn / .is-nameIn 等のクラスを CSS の起点に使う運用）。

      スクロール固定は 10_common.css の :root[data-load] .Gcontainer が担当。
===============================  */

:root {
	/* 退場フェード実尺（loading.js が同じ値を JS 側に持つ） */
	--loadingFadeOut: 800ms;
	/* skip 時のフェード実尺（loading.js の skipFadeOut と同期） */
	--loadingSkipDur: 400ms;
	/* skip ボタンが演出開始から遅れて出るまでの間（控えめに見せる） */
	--loadingSkipDelay: 1400ms;
}

/* overlay
===============================
*/
#loading {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background-color: var(--bgColor, #05040f);
	color: #fff;
	opacity: 1;
	transition: opacity var(--loadingFadeOut) ease-in-out;
	/* クリック / タップで skip できる（loading.js の createSkip） */
	cursor: pointer;

	/* JS が死んでも 15 秒で操作を妨げなくする保険（loading.php 側でも remove する） */
	animation: loadingFailsafe 0.4s 15s forwards;
}

#loading.is-out {
	opacity: 0;
	pointer-events: none;
}

@keyframes loadingFailsafe {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/*  背景画像を使う場合の土台。loading.js が .loading_bg の load を待ってから
    フェードさせられる（ポップイン防止）。案件側で .is-bgIn の遷移を定義する。 */
.loading_bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*  演出の器。案件はこの中に題字などを置く。 */
.loading_stage {
	position: absolute;
	inset: 0;
}

/* skip ボタン
===============================
	右下に控えめに。演出開始から少し遅れて出す（--loadingSkipDelay）。
	色や字面は案件のトーンに合わせて上書きする。
*/
.loading_skip {
	position: absolute;
	right: clamp(16px, 3vw, 40px);
	bottom: clamp(16px, 3vh, 40px);
	z-index: 1;

	padding: 8px 4px;
	border: 0;
	background: transparent;
	color: currentColor;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1;
	cursor: pointer;

	opacity: 0;
	animation: loadingSkipIn 0.6s var(--loadingSkipDelay, 1400ms) ease-out forwards;
}

.loading_skip::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 4px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease-out;
}

.loading_skip:hover::after,
.loading_skip:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

.loading_skip:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

@keyframes loadingSkipIn {
	to {
		opacity: 0.75;
	}
}

/* skip 済み / 退場中はボタンも一緒に消す */
#loading.is-out .loading_skip,
#loading.is-skip .loading_skip {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--loadingSkipDur) ease-out;
	animation: none;
}

/* a11y
===============================
	skip 時は演出をすぐ最終状態へ潰す（案件が .loading_ttl 等を足したらここが効く）。
*/
#loading.is-skip .loading_bg,
#loading.is-skip .loading_stage * {
	transition-duration: 1ms !important;
}

@media (prefers-reduced-motion: reduce) {
	#loading,
	.loading_bg,
	.loading_stage * {
		transition-duration: 1ms !important;
	}
	/* 演出が一瞬で終わるので skip ボタンは遅延なく即出す */
	.loading_skip {
		animation-delay: 0s;
	}
}

/*  ===============================
      この案件の演出（part/loading.php）
      渦巻きが傾いた面の上で回り、同心円が広がる。退場で渦巻きへ吸い込まれるように拡大して消える
===============================  */
.loading_stage {
	display: grid;
	place-items: center;
}

.loading_mark {
	position: relative;
	width: clamp(120px, 13vw, 190px);
	color: #fff;
	transition:
		transform var(--loadingFadeOut) cubic-bezier(0.7, 0, 0.84, 0),
		opacity var(--loadingFadeOut) ease,
		filter var(--loadingFadeOut) ease;
}
.loading_mark svg {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 0 12px rgba(150, 130, 255, 0.7));
}
.loading_mark .mk-spiral_spin {
	animation: spin 2.6s linear infinite;
}
.loading_mark .mk-word .ch {
	animation: flicker 0.6s linear calc(0.25s + var(--i) * 45ms) both;
}

.loading_ring {
	position: absolute;
	left: 50%;
	top: 42%;
	width: 70%;
	aspect-ratio: 1;
	border: 1px solid rgba(170, 160, 255, 0.75);
	border-radius: 50%;
	translate: -50% -50%;
	opacity: 0;
	animation: loadingRing 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.loading_ring--2 {
	animation-delay: 0.8s;
}
.loading_ring--3 {
	animation-delay: 1.6s;
}

.loading_bar {
	position: absolute;
	left: 50%;
	bottom: 14vh;
	width: min(220px, 50vw);
	height: 1px;
	background: rgba(255, 255, 255, 0.14);
	translate: -50% 0;
	overflow: hidden;
}
.loading_barFill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #7f7aff, #fff);
	transform-origin: left;
	transform: scaleX(0);
	animation: loadingBar 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#loading.is-out .loading_mark {
	transform: scale(2.6);
	opacity: 0;
	filter: blur(6px);
}
#loading.is-out .loading_barFill {
	transform: scaleX(1);
	animation: none;
	transition: transform 0.3s ease-out;
}

@keyframes loadingRing {
	0% {
		opacity: 0;
		transform: scale(0.2);
	}
	15% {
		opacity: 0.9;
	}
	100% {
		opacity: 0;
		transform: scale(3.4);
	}
}
@keyframes loadingBar {
	to {
		transform: scaleX(0.9);
	}
}

@media (prefers-reduced-motion: reduce) {
	.loading_ring,
	.loading_mark .mk-spiral_spin,
	.loading_mark .mk-word .ch {
		animation: none;
	}
}