/* ============================================================
   NMNL Logo Animation CSS
   初期状態とキーフレーム定義のみ
   アニメーションの適用はJSから行う（.is-inview不使用）
   ============================================================ */

/* ===== Initial states: all hidden ===== */
#nmnl-flag,
#nmnl-circle,
#nmnl-texts path {
	opacity: 0;
}

/* ===== 1. Flag ===== */
#nmnl-flag {
	transform-origin: 74px 105px;
	transform: scale(0);
}
@keyframes nmnl-flag-pop {
	0%   { opacity: 0; transform: scale(0) rotate(-10deg); }
	40%  { opacity: 1; transform: scale(1.15) rotate(4deg); }
	60%  { transform: scale(0.92) rotate(-2deg); }
	80%  { transform: scale(1.05) rotate(1deg); }
	100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ===== 2. Circle ===== */
#nmnl-circle-group {
	transform-origin: 155.8px 206.7px;
}
#nmnl-circle {
	opacity: 0;
}
@keyframes nmnl-circle-fill {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

.nmnl-circle-stroke {
	fill: none;
	stroke: #d7000f;
	stroke-linecap: round;
	opacity: 0;
}
#nmnl-circle-outer {
	stroke-width: 1.2;
	stroke-dasharray: 766;
	stroke-dashoffset: 766;
}
#nmnl-circle-inner {
	stroke-width: 1.2;
	stroke-dasharray: 729;
	stroke-dashoffset: 729;
}
@keyframes nmnl-draw-outer {
	0%   { stroke-dashoffset: 766; }
	100% { stroke-dashoffset: 0; }
}
@keyframes nmnl-draw-inner {
	0%   { stroke-dashoffset: 729; }
	100% { stroke-dashoffset: 0; }
}

/* ===== 3. Texts ===== */
@keyframes nmnl-text-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

/* ===== ポスターカード等: アニメ完了後にフェードイン ===== */
.after-preloader-anim {
	opacity: 0;
	transition: opacity 0.8s ease;
}
.after-preloader-anim.is-visible {
	opacity: 1;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	#nmnl-flag,
	#nmnl-circle,
	#nmnl-texts path {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.nmnl-circle-stroke {
		opacity: 0 !important;
		animation: none !important;
	}
}