@charset "utf-8";

/* loading wrapper */
.loading {
	position: fixed;
	inset: 0;
	z-index: 10000001;
	background: #000;
	display: grid;
	place-items: center;
	pointer-events: none;
	overflow: hidden;

	/* 微調整用CSS変数 (PC既定値) */
	--loadingRingSize: max(280px, min(70vw, 80vh, 1080px));
	--loadingTtlSize: clamp(110px, 12vw, 180px);
	--loadingParticleSize: clamp(16px, 2.6vw, 36px);
	--loadingParticleSpreadX: 38vmin;
	--loadingParticleSpreadY: 32vmin;
}

@media (max-width: 768px) {
	.loading {
		--loadingRingSize: max(220px, min(86vw, 80vh, 720px));
		--loadingTtlSize: clamp(90px, 26vw, 130px);
		--loadingParticleSize: clamp(12px, 5vw, 26px);
		--loadingParticleSpreadX: 30vmin;
		--loadingParticleSpreadY: 26vmin;
	}
}

/* 光の粒コンテナ */
.loading_particles {
	position: absolute;
	inset: 0;
}
.loading_particle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--size, var(--loadingParticleSize));
	height: var(--size, var(--loadingParticleSize));
	/* JS未到達時のfallback (通常はloading.jsで data-particles-src を上書き) */
	background-image: url("../images/hikari_tubu_1.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0));
	opacity: 0;
	pointer-events: none;
	will-change: opacity, transform;
}

/* 出現後の明滅（個別 animation-delay/duration をJSで付与） */
.loading_particle.is-blink {
	animation-name: loadingParticleBlink;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
@keyframes loadingParticleBlink {
	0% {
		opacity: var(--blinkMin, 0.55);
	}
	100% {
		opacity: var(--blinkMax, 1);
	}
}

/* 光の輪 */
.loading_ring {
	position: relative;
	grid-area: 1 / 1;
	width: var(--loadingRingSize);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	opacity: 0;
	will-change: transform, opacity;
}
.loading_ring img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	animation: loadingRingSpin 24s linear infinite;
	will-change: transform;
}
@keyframes loadingRingSpin {
	to {
		transform: rotate(360deg);
	}
}

/* タイトル（中央重ね） */
.loading_ttl {
	position: relative;
	grid-area: 1 / 1;
	place-self: center;
	display: grid;
	place-items: center;
	opacity: 0;
}
.loading_ttl img {
	width: var(--loadingTtlSize);
	height: auto;
}

/* 既存セレクタの互換非表示 */
.loading_control {
	display: none !important;
}
.loading_name {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.loading_ring img {
		animation: none;
	}
	.loading_particle.is-blink {
		animation: none;
	}
}