/**
 * Automancy 六壬神課 儀式演出スタイル
 * 地盤(左)・天盤(右) → 回転 → タップ停止 → 中央和合 → 発光
 */

.rikujin-ritual {
	position: relative;
	padding: 10px 0 20px;
	text-align: center;
}

.rikujin-stage {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6%;
	min-height: 280px;
	margin: 0 auto;
	max-width: 560px;
}

/* ==== 盤 ==== */
.rikujin-disc {
	position: relative;
	width: 220px;
	height: 220px;
	max-width: 42vw;
	max-height: 42vw;
	cursor: pointer;
	transition: transform 1.1s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.6s ease, filter 0.6s ease;
	z-index: 2;
	opacity: 0.45;
	filter: saturate(0.6);
	-webkit-tap-highlight-color: transparent;
}

.rikujin-disc.active-disc {
	opacity: 1;
	filter: none;
}

.rikujin-disc.stopped {
	opacity: 1;
	filter: none;
	cursor: default;
}

.rikujin-disc-rotor {
	width: 100%;
	height: 100%;
	will-change: transform;
}

.rikujin-disc-rotor svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

/* 回転アニメーション */
.rikujin-disc.spinning .rikujin-disc-rotor {
	animation: rikujin-spin 1.6s linear infinite;
}

.rikujin-disc-ten.spinning .rikujin-disc-rotor {
	animation-direction: reverse;
	animation-duration: 1.3s;
}

@keyframes rikujin-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* アクティブ盤の金色パルス */
.rikujin-disc.active-disc::after {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid rgba(212, 175, 55, 0.75);
	animation: rikujin-pulse 1.4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes rikujin-pulse {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50% { transform: scale(1.06); opacity: 0.25; }
}

/* ==== フェーズ3: 和合（中央へ移動して重なる） ==== */
.rikujin-stage.rikujin-merged .rikujin-disc {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
}

.rikujin-stage.rikujin-merged .rikujin-disc-chi {
	transform: translate(-50%, -50%);
}

.rikujin-stage.rikujin-merged .rikujin-disc-ten {
	transform: translate(-50%, -50%) scale(0.78);
	z-index: 3;
}

.rikujin-stage.rikujin-merged .rikujin-disc::after {
	display: none;
}

/* ==== フェーズ4: 発動（発光＋テキスト） ==== */
.rikujin-glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 300px;
	height: 300px;
	max-width: 80vw;
	max-height: 80vw;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 236, 170, 0.8) 28%,
		rgba(212, 175, 55, 0.45) 55%,
		rgba(212, 175, 55, 0) 75%);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}

.rikujin-stage.rikujin-activated .rikujin-glow {
	animation: rikujin-glow-in 2s ease-out forwards;
}

@keyframes rikujin-glow-in {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
	45% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
	100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}

.rikujin-stage.rikujin-activated .rikujin-disc {
	filter: drop-shadow(0 0 22px rgba(255, 226, 140, 0.9));
}

.rikujin-gouki-text {
	margin-top: 18px;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.18em;
	color: #d4af37;
	text-shadow: 0 0 14px rgba(212, 175, 55, 0.65);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 1.1s ease, transform 1.1s ease;
	min-height: 1.6em;
}

.rikujin-gouki-text.visible {
	opacity: 1;
	transform: translateY(0);
}

/* 準備中はぼかしておく */
.rikujin-ritual:not(.rikujin-ready) .rikujin-stage {
	opacity: 0.35;
}

.rikujin-hint {
	margin-top: 14px;
	font-size: 14px;
	color: #b8a26a;
	letter-spacing: 0.06em;
	min-height: 1.5em;
}

/* スマホ調整 */
@media (max-width: 600px) {
	.rikujin-stage {
		min-height: 220px;
		gap: 4%;
	}

	.rikujin-gouki-text {
		font-size: 17px;
	}
}