/* ============================================================
 * LOUNGE 幸良(KOURA) — Preloader (sumi 専用)
 * 墨のにじみ: 墨だまり・金砂子・金の下線・「幸」落款。
 * クリティカルCSS(functions.php のインライン)で最初のペイントは
 * 既に和紙(明)背景で覆われている。ここでは見た目と退場演出を定義する。
 * 新色は足さず、既存トークンのみ使用。
 * ============================================================ */

/* --- スクロールロック(クリティカルCSSと重複だが外部CSS側でも保証) --- */
html.is-loading { overflow: hidden; }

/* --- ベース ------------------------------------------------- */
.koura-preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--color-bg); /* 和紙(明)背景 */
	overflow: hidden;
	/* JS が is-loading を外したら opacity/visibility で退場(下記) */
}

/* 退場 — is-loading が外れたらフェードアウトして支援技術からも消す。 */
html:not(.is-loading) .koura-preloader {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s;
	pointer-events: none;
}

/* ステージ — 中央の演出領域。 */
.koura-preloader__stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

/* ロックアップ — 「幸良」+ LOUNGE + 補助要素のまとまり。 */
.koura-preloader__lockup {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	text-align: center;
}

/* 「幸良」(筆書き) — にじみ出る初期状態(blur+透明)。 */
.koura-preloader__mark {
	font-family: var(--font-brush-jp);
	font-weight: 400;
	font-size: clamp(3.5rem, 12vw, 8rem);
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--color-text);
	filter: blur(18px);
	opacity: 0;
}

/* LOUNGE(Cormorant italic)。 */
.koura-preloader__en {
	font-family: var(--font-serif-en);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(0.9rem, 2vw, 1.4rem);
	letter-spacing: 0.5em;
	text-indent: 0.5em; /* letter-spacing の右余白を補正して光学的に中央へ */
	color: var(--color-gold-strong);
	text-transform: uppercase;
	opacity: 0;
}

/* 墨だまり — 「幸良」の背後ににじむ墨。濃墨を紙に multiply。 */
.koura-preloader__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(260px, 46vw, 600px);
	height: clamp(200px, 34vw, 440px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(ellipse 60% 55% at 50% 50%,
		rgba(31, 28, 25, 0.20) 0%,
		rgba(31, 28, 25, 0.09) 44%,
		transparent 72%);
	mix-blend-mode: multiply;
	filter: blur(8px);
	pointer-events: none;
}

/* 金の下線をすっと引く(ドロー)。 */
.koura-preloader__hairline {
	display: block;
	width: clamp(110px, 20vw, 230px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--color-gold-strong) 50%, transparent);
	transform: scaleX(0);
	transform-origin: center;
	pointer-events: none;
}

/* 金の落款 — 「幸」字入りの金印。初期は縮小+透明(JSで「トン」と捺す)。 */
.koura-preloader__seal {
	position: relative;
	display: block;
	width: clamp(26px, 3.4vw, 40px);
	height: clamp(26px, 3.4vw, 40px);
	font-size: clamp(26px, 3.4vw, 40px);
	background: var(--color-gold-strong);
	border-radius: 3px;
	transform: scale(0);
	pointer-events: none;
}
.koura-preloader__seal::after {
	content: "幸";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-brush-jp);
	font-size: 0.62em;
	line-height: 1;
	color: var(--color-bg);
}
/* 墨紋ripple — 落款を捺した瞬間にふわりと広がる。 */
.koura-preloader__seal::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 3px;
	border: 1px solid var(--color-gold-strong);
	opacity: 0;
	pointer-events: none;
}
.koura-preloader__seal.is-stamped::before {
	animation: koura-seal-ripple 0.6s var(--ease-out) forwards;
}
@keyframes koura-seal-ripple {
	from { opacity: 0.55; transform: scale(1); }
	to   { opacity: 0;    transform: scale(2.3); }
}

/* 金砂子(きんすなご) — 和紙に散る細かな金片。 */
.koura-preloader__particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.koura-preloader__particle {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--color-gold-strong) 0%, rgba(176, 142, 63, 0.4) 55%, transparent 75%);
	pointer-events: none;
}

/* 装飾要素は初期非表示にしておく(JS が演出で出す)。 */
.koura-preloader__glow,
.koura-preloader__hairline,
.koura-preloader__seal,
.koura-preloader__particles {
	opacity: 0;
}

/* ============================================================
 * reduced-motion / フォールバック
 * 派手な演出は CSS 側でも抑制(JS が縮退版を実行するが二重保険)。
 * mark は即表示、装飾は非表示にする。
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.koura-preloader__glow,
	.koura-preloader__particles,
	.koura-preloader__hairline,
	.koura-preloader__seal {
		display: none !important;
	}
	.koura-preloader__mark {
		filter: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.koura-preloader__en {
		opacity: 1 !important;
	}
}