@charset "utf-8";

/* ========================================
   魔術陣ページ専用
======================================== */

.abramelin-magic-circle {
	margin: 0;
	padding: 0;
	background: #000;
	color: #d4af37;
	overflow-x: hidden;
	font-family: serif;
}

.abramelin-magic-circle-inner {
	height: auto;
	overflow: visible;
}

/* ========================================
   魔術陣本体
======================================== */

.abramelin-magic-circle .magic {
	position: relative;
	overflow: hidden;
	padding: 80px 0;
	background:
		radial-gradient(circle at center, rgba(212, 175, 55, 0.08), transparent 60%),
		radial-gradient(circle at center, rgba(122, 0, 0, 0.08), transparent 70%);
}

.abramelin-magic-circle .magic::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 750px;
	height: 750px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(212, 175, 55, 0.15);
	border-radius: 50%;
	box-shadow: 0 0 30px rgba(212, 175, 55, 0.1);
	pointer-events: none;
}

.abramelin-magic-circle .magic::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
	pointer-events: none;
}

/* ========================================
   オーラ
======================================== */

.abramelin-magic-circle .aura {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 750px;
	height: 750px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212, 175, 55, 0.25), rgba(122, 0, 0, 0.15), transparent 70%);
	animation: abramelinMagicAuraPulse 4s ease-in-out infinite;
	z-index: 0;
}

@keyframes abramelinMagicAuraPulse {
	0% {
		opacity: 0.4;
		transform: translate(-50%, -50%) scale(1);
	}

	50% {
		opacity: 0.8;
		transform: translate(-50%, -50%) scale(1.08);
	}

	100% {
		opacity: 0.4;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* ========================================
   魔術陣（回転＋発動）
======================================== */

.abramelin-magic-circle .circle {
	display: block;
	position: relative;
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	transform-origin: center;
	will-change: transform, filter;
	filter: drop-shadow(0 0 10px #d4af37) drop-shadow(0 0 20px #7a0000);
	animation:
		abramelinMagicPower 20s linear infinite,
		abramelinMagicFlicker 5s ease-in-out infinite;
	z-index: 1;
}

@keyframes abramelinMagicPower {
	0% {
		transform: rotate(0deg) scale(1);
	}

	40% {
		transform: rotate(144deg) scale(1);
	}

	50% {
		transform: rotate(180deg) scale(1.07);
	}

	60% {
		transform: rotate(216deg) scale(1);
	}

	100% {
		transform: rotate(360deg) scale(1);
	}
}

@keyframes abramelinMagicFlicker {
	0% {
		filter: drop-shadow(0 0 8px #d4af37) drop-shadow(0 0 15px #7a0000);
	}

	50% {
		filter: drop-shadow(0 0 18px #d4af37) drop-shadow(0 0 30px #7a0000);
	}

	100% {
		filter: drop-shadow(0 0 8px #d4af37) drop-shadow(0 0 15px #7a0000);
	}
}

/* ========================================
   中央核
======================================== */

.abramelin-magic-circle .core {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #d4af37;
	box-shadow: 0 0 15px #d4af37, 0 0 30px #7a0000;
	animation: abramelinMagicPulse 2s ease-in-out infinite;
	z-index: 2;
}

.abramelin-magic-circle .core::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212, 175, 55, 0.25), rgba(122, 0, 0, 0.15), transparent 70%);
	animation: abramelinMagicCoreAura 2.5s ease-in-out infinite;
	z-index: -1;
}

@keyframes abramelinMagicCoreAura {
	0% {
		opacity: 0.4;
		transform: translate(-50%, -50%) scale(0.8);
	}

	50% {
		opacity: 0.8;
		transform: translate(-50%, -50%) scale(1.4);
	}

	100% {
		opacity: 0.4;
		transform: translate(-50%, -50%) scale(0.8);
	}
}

@keyframes abramelinMagicPulse {
	0% {
		opacity: 0.8;
		transform: translate(-50%, -50%) scale(1);
	}

	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.35);
	}

	100% {
		opacity: 0.8;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* ========================================
   テキスト
======================================== */

.abramelin-magic-circle .magic-text {
	margin-top: 60px;
	color: #d4af37;
	font-size: 18px;
	letter-spacing: 0.25em;
	text-align: center;
	text-shadow: 0 0 5px rgba(212, 175, 55, 0.3), 0 0 15px rgba(122, 0, 0, 0.2);
	opacity: 0.65;
}

/* ========================================
   時間帯変化
======================================== */

.abramelin-magic-circle .magic.midnight .aura {
	opacity: 0.9;
	filter: drop-shadow(0 0 25px #d4af37);
}

.abramelin-magic-circle .magic.midnight .circle {
	filter: drop-shadow(0 0 15px #d4af37) drop-shadow(0 0 40px #7a0000);
}

.abramelin-magic-circle .magic.midnight .core {
	animation: abramelinMagicPulse 1.4s ease-in-out infinite;
}

.abramelin-magic-circle .magic.night .aura {
	opacity: 0.7;
}

.abramelin-magic-circle .magic.night .circle {
	filter: drop-shadow(0 0 10px #d4af37) drop-shadow(0 0 25px #7a0000);
}

.abramelin-magic-circle .magic.day .aura {
	opacity: 0.3;
}

.abramelin-magic-circle .magic.day .circle {
	filter: drop-shadow(0 0 6px #d4af37);
}

.abramelin-magic-circle .magic.day .core {
	animation: abramelinMagicPulse 2.5s ease-in-out infinite;
}

/* ========================================
   スマートフォン
======================================== */

@media (max-width: 767px) {
	.abramelin-magic-circle .magic {
		padding: 40px 10px;
	}

	.abramelin-magic-circle .magic::before,
	.abramelin-magic-circle .aura {
		width: 120vw;
		height: 120vw;
	}

	.abramelin-magic-circle .magic-text {
		margin: 30px 15px 0;
		font-size: 15px;
		line-height: 1.9;
	}
}