/* ==========================================================================
   02 SALON WORK
   散在した業務が、スクロールに応じて中央へ収束する。
   ========================================================================== */

.aa-work [data-aa-sticky-track]{ --track-h:280vh }

.aa-work__title,
.aa-work__outro{ text-align:center; transition:opacity 600ms var(--ease-out), transform 600ms var(--ease-out) }

/* 収束が進むほどタイトルは退場する */
.aa-work__title{
	opacity:calc(1 - var(--p,0) * 2.4);
	transform:translateY(calc(var(--p,0) * -30px));
}
/* 収束しきった終盤にだけ現れる */
.aa-work__outro{
	position:absolute;
	opacity:clamp(0, calc((var(--p,0) - .74) * 5), 1);
	transform:translateY(calc((1 - clamp(0, (var(--p,0) - .74) * 5, 1)) * 24px));
}

.aa-work__items{
	position:relative;
	width:min(74vmin,660px);
	aspect-ratio:1;
	display:grid;
	place-items:center;
}
/* 中央に生まれる光の核 */
.aa-work__items::before{
	content:"";
	position:absolute;
	width:clamp(50px,9vmin,110px);
	aspect-ratio:1;
	border-radius:50%;
	background:radial-gradient(circle, rgb(255 255 255/.98), rgb(127 168 255/.35));
	box-shadow:0 0 calc(var(--p,0) * 90px) rgb(127 168 255/.62);
	opacity:var(--p,0);
	scale:calc(.4 + var(--p,0) * .6);
}

.aa-work__item{
	position:absolute;
	display:grid;
	justify-items:center;
	gap:10px;
	text-align:center;
	--r:calc(min(34vmin,290px) * (1 - var(--p,0) * .92));
	transform:rotate(var(--angle)) translate(var(--r)) rotate(calc(-1 * var(--angle)));
	opacity:calc(1 - var(--p,0) * .55);
}
.aa-work__icon{
	width:clamp(38px,5vmin,54px);
	aspect-ratio:1;
	display:grid;
	place-items:center;
	font-size:clamp(17px,2.2vmin,24px);
	border-radius:50%;
	border:1px solid var(--rule);
	background:rgb(255 255 255 / .72);
	color:var(--c-ink);
	box-shadow:0 0 calc(var(--p,0) * 40px) rgb(127 168 255 / calc(var(--p,0) * .5));
}
.aa-work__name{ font-size:clamp(.72rem,.95vw,.9rem); color:var(--fg-sub); white-space:nowrap }

@media (max-width:599px){
	.aa-work__items{ width:min(88vw,420px) }
	.aa-work__item{ --r:calc(min(38vw,180px) * (1 - var(--p,0) * .94)) }
	.aa-work__name{ font-size:.68rem }
}