/* ==========================================================================
   09 AOS × AOD — 2つのCOREの接続
   ========================================================================== */

.aa-connect [data-aa-sticky-track]{ --track-h:300vh }

.aa-connect__title{ display:grid; gap:1em; text-align:center }
.aa-connect__title-ja{ display:grid; gap:.2em; font-size:var(--fs-display) }
.aa-connect__title-en{
	display:grid;
	gap:.5em;
	font-family:var(--font-mono);
	font-size:var(--fs-label);
	letter-spacing:.24em;
	color:var(--fg-sub);
}

.aa-connect__stage{
	display:flex;
	align-items:center;
	justify-content:center;
	width:min(100%,900px);
}

.aa-connect__orb{
	position:relative;
	flex:0 0 auto;
	width:clamp(92px,15vmin,164px);
	aspect-ratio:1;
	border-radius:50%;
	display:grid;
	place-items:center;
	align-content:center;
	gap:.2em;
	background:radial-gradient(circle at 38% 32%, rgb(255 255 255/.22), rgb(255 255 255/.04));
	border:1px solid rgb(255 255 255 / .22);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
}
.aa-connect__orb-name{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(.95rem,1.7vw,1.5rem);
	letter-spacing:.1em;
}
.aa-connect__orb-role{
	font-family:var(--font-mono);
	font-size:.55rem;
	letter-spacing:.24em;
	color:var(--fg-sub);
}
.aa-connect__orb--aos{ box-shadow:0 0 calc(30px + var(--p,0) * 60px) rgb(127 168 255 / calc(.25 + var(--p,0) * .4)) }
.aa-connect__orb--aod{
	box-shadow:0 0 calc(20px + var(--p,0) * 90px) rgb(184 166 245 / calc(.12 + var(--p,0) * .5));
	scale:calc(.92 + var(--p,0) * .12);
}

.aa-connect__link{ position:relative; flex:1 1 auto; margin-inline:clamp(8px,2vw,24px) }
/* スクロールに合わせて伸びるビーム */
.aa-connect__beam{
	display:block;
	height:2px;
	background:linear-gradient(90deg, rgb(127 168 255/.9), rgb(184 166 245/.9));
	transform-origin:left center;
	scale:clamp(0, calc(var(--p,0) * 1.9), 1) 1;
	box-shadow:0 0 18px rgb(127 168 255 / .7);
}
/* 接続完了後に流れ出すデータ */
.aa-connect__packets{
	position:absolute;
	inset:-3px 0;
	overflow:hidden;
	opacity:clamp(0, calc((var(--p,0) - .5) * 3), 1);
}
.aa-connect__packets::before,
.aa-connect__packets::after{
	content:"";
	position:absolute;
	top:2px;
	width:26px;
	height:2px;
	border-radius:2px;
	background:#fff;
	opacity:.85;
	animation:aa-flow 2.2s linear infinite;
}
.aa-connect__packets::after{ animation-delay:-1.1s }
@keyframes aa-flow{ from{ left:-8% } to{ left:104% } }

.aa-connect__media{ position:absolute; inset:0; z-index:-1; height:100%; opacity:.28 }
.aa-connect__media .aa-media__img{ height:100% }

@media (max-width:599px){
	.aa-connect__stage{ flex-direction:column }
	.aa-connect__link{ width:2px; flex:0 0 auto; margin:16px 0 }
	.aa-connect__beam{
		width:2px;
		height:clamp(60px,12svh,120px);
		transform-origin:top center;
		background:linear-gradient(180deg, rgb(127 168 255/.9), rgb(184 166 245/.9));
		scale:1 clamp(0, calc(var(--p,0) * 1.9), 1);
	}
	.aa-connect__packets{ display:none }
}