@charset "utf-8";

/*  ===============================
      loading（オープニング演出）
      読み込み順: 00_destyle → 10_common → [20_loading] → 50_style → 90_style_sp
      SP の位置調整は 90_style_sp.css の loading 節に置く。

      スクロール固定は 10_common.css L232-242 の :root[data-load="loading"] が担当。
      演出の駆動は assets/js/modules/loading.js（クラス .is-bgIn / .is-nameIn / .is-workIn / .is-epIn / .is-out）。
===============================  */

:root {
	/* 演出時間（loading.js が同じ値を持つ。CSS 側は transition の実尺として使う） */
	--loadingBgDur: 1200ms;
	--loadingNameDur: 900ms;
	--loadingWorkDur: 850ms;
	--loadingEpDur: 800ms;
	--loadingFadeOut: 800ms;

	/* 位置・大きさ（design/web_0703/jpg/PC/PC_OPENING.jpg の実測値にレンダリング結果を突き合わせて調整済み） */
	--loadingNameLeft: 50.1%;
	--loadingNameTop: 25.5%;
	--loadingNameH: 35.8vh;

	--loadingWorkLeft: 45.2%;
	--loadingWorkTop: 39.0%;
	--loadingWorkH: 42.2vh;

	--loadingEpLeft: 38.8%;
	--loadingEpTop: 56.2%;
	--loadingEpW: 19.1%;

	--loadingEase: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* overlay
===============================
*/
#loading {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background-color: #fff;
	opacity: 1;
	transition: opacity var(--loadingFadeOut) ease-in-out;

	/* 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;
	}
}

/* background (bg_section_01.jpg)
===============================
*/
.loading_bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--loadingBgDur) ease-out;
}

#loading.is-bgIn .loading_bg {
	opacity: 1;
}

/* calligraphy
===============================
	縦書き（マカロニえんぴつ / 運命さがし・終宵）は inset(0 0 100% 0) → inset(0 0 0 0) で「上から下へ」書かれる。
	横書き（New E.P）は inset(0 100% 0 0) → inset(0 0 0 0) で「左から右へ」書かれる。
	SVG は塗りの輪郭のみで stroke を持たないため、一筆書きではなくワイプで近似する（SPEC §6-3）。
*/
.loading_stage {
	position: absolute;
	inset: 0;
}

.loading_ttl {
	position: absolute;
}

.loading_ttl > svg,
.loading_ttl > img {
	display: block;
	width: 100%;
	height: 100%;
}

/* ① マカロニえんぴつ */
.loading_ttl--name {
	left: var(--loadingNameLeft);
	top: var(--loadingNameTop);
	height: var(--loadingNameH);
	aspect-ratio: 111.267 / 578.67;
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--loadingNameDur) var(--loadingEase);
}

/* hero では #fff。ローディングは明るい背景なので primaryColor に上書きする（presentation attribute より CSS が優先） */
.loading_ttl--name svg path {
	fill: var(--primaryColor);
}

#loading.is-nameIn .loading_ttl--name {
	clip-path: inset(0 0 0 0);
}

/* ② 運命さがし / 終宵 */
.loading_ttl--work {
	left: var(--loadingWorkLeft);
	top: var(--loadingWorkTop);
	height: var(--loadingWorkH);
	aspect-ratio: 94.257 / 587.292;
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--loadingWorkDur) var(--loadingEase);
}

/*  紙の地。pop_ttl01.svg から内包テクスチャ（base64 PNG）を外したので CSS で敷く。
    inset は 50_style.css の .pop_ttl--main::before と同値（元 SVG の紙の矩形）。
    親の clip-path で切られるため、紙も赤字と一緒に上から書かれていく。 */
.loading_ttl--work::before {
	content: "";
	position: absolute;
	inset: 0.87% 8.46% 1.32% 0;
	background: url(../images/bg--ftr.webp) center / cover no-repeat;
}

.loading_ttl--work > img {
	/* ::before より後に描かせる */
	position: relative;
}

#loading.is-workIn .loading_ttl--work {
	clip-path: inset(0 0 0 0);
}

/* ③ New E.P */
.loading_ttl--ep {
	left: var(--loadingEpLeft);
	top: var(--loadingEpTop);
	width: var(--loadingEpW);
	aspect-ratio: 234.343 / 145.37;
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--loadingEpDur) var(--loadingEase);
}

#loading.is-epIn .loading_ttl--ep {
	clip-path: inset(0 0 0 0);
}

/* a11y
===============================
*/
@media (prefers-reduced-motion: reduce) {
	#loading,
	.loading_bg,
	.loading_ttl {
		transition-duration: 1ms !important;
	}
}