/* ==========================================================================
   04 AOS CORE — サイトの中心となる演出
   COREを画面中央にSticky固定し、9つの機能へ光のラインが順に伸びる。
   ラインの座標はレイアウト後にJSがSVGへ描画する（modules/aos-core.js）。
   ========================================================================== */

.aa-core--aos [data-aa-sticky-track]{ --track-h:420vh }

.aa-core__heading{ display:grid; justify-items:center; gap:.7em; text-align:center }
.aa-core__heading-label{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(1.4rem,2.6vw,2.4rem);
	letter-spacing:.12em;
}
.aa-core__heading-title{ font-size:var(--fs-lead); color:var(--fg-sub) }

.aa-core__stage{
	position:relative;
	width:min(82vmin,720px);
	aspect-ratio:1;
	display:grid;
	place-items:center;
}

/* 光のライン（このサイトの signature） */
.aa-core__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.aa-core__lines line{
	stroke:url(#aa-beam);
	stroke-width:1;
	stroke-dasharray:var(--len);
	stroke-dashoffset:calc(var(--len) * (1 - var(--np,0)));
}

.aa-core__center{
	position:relative;
	z-index:2;
	width:clamp(120px,22vmin,220px);
	aspect-ratio:1;
	border-radius:50%;
	display:grid;
	place-items:center;
	text-align:center;
	overflow:hidden;
	background:radial-gradient(circle at 40% 34%, #fff, rgb(231 236 243/.9) 58%, rgb(201 211 226/.5));
	box-shadow:
		0 0 0 1px rgb(255 255 255/.9),
		0 30px 80px rgb(11 18 32/.1),
		0 0 calc(40px + var(--p,0) * 90px) rgb(127 168 255 / calc(.2 + var(--p,0) * .45));
}
/* ゆっくり回る光輪 */
.aa-core__center::before{
	content:"";
	position:absolute;
	inset:-14%;
	border-radius:50%;
	border:1px solid rgb(127 168 255 / .3);
	animation:aa-halo 9s linear infinite;
}
@keyframes aa-halo{ to{ transform:rotate(360deg) } }

.aa-core__image{ position:absolute; inset:0; height:100%; opacity:.9 }
.aa-core__image .aa-media__img{ height:100% }

.aa-core__mark{ position:relative; z-index:1; display:grid; gap:.2em }
.aa-core__mark-name{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(1.1rem,2.2vw,1.9rem);
	letter-spacing:.12em;
}
.aa-core__mark-sub{
	font-family:var(--font-mono);
	font-size:.6rem;
	letter-spacing:.28em;
	color:var(--c-ink-sub);
}

.aa-core__nodes{ position:absolute; inset:0 }

.aa-core__counter{ display:flex; gap:.5em; align-items:baseline; color:var(--fg-sub); letter-spacing:.2em }
.aa-core__counter [data-aa-core-count]{ color:var(--fg); font-size:1.4em }
.aa-core__counter-sep{ opacity:.5 }

/* --- Mobile：円形をやめ、COREを上に置いた縦型ストーリーへ ------------------ */
@media (max-width:599px){
	.aa-core--aos [data-aa-sticky-track]{ --track-h:340vh }
	.aa-core--aos [data-aa-sticky-view]{ justify-items:stretch; gap:24px }
	.aa-core--aos .aa-core__stage{ width:100%; aspect-ratio:auto; display:block }
	.aa-core--aos .aa-core__lines{ display:none }
	.aa-core--aos .aa-core__center{ margin-inline:auto; width:132px }

	.aa-core--aos .aa-core__nodes{
		position:relative;
		inset:auto;
		display:grid;
		gap:10px;
		margin-top:28px;
		padding-left:26px;
		border-left:1px solid var(--rule);
	}
	.aa-core--aos .aa-node{
		position:relative;
		top:auto;
		left:auto;
		transform:none;
		width:100%;
	}
	/* 接続の進行を、縦のレールから伸びる横線で表す */
	.aa-core--aos .aa-node::before{
		content:"";
		position:absolute;
		left:-27px;
		top:50%;
		width:20px;
		height:1px;
		background:var(--c-signal);
		transform-origin:left;
		scale:var(--np,0) 1;
		transition:scale 400ms var(--ease-out);
	}
	.aa-core--aos .aa-node__inner{
		grid-template-columns:auto 1fr;
		justify-items:start;
		align-items:center;
		gap:14px;
		text-align:left;
	}
	.aa-core--aos .aa-node__icon{ grid-row:span 2 }
	.aa-core--aos .aa-node__name{ white-space:normal }
}