/* ==========================================================================
   STARFIELD / METEOR
   AOSマイページ（bms-core / MyPageCosmicView）の演出をサイト側へ移植したもの。
   実装値（尾の角度 -33度、飛距離 360/-234px、頭と尾のサイズ）は製品と揃えている。
   暗いトーンのセクションへ、JS（modules/starfield.js）が自動で敷く。
   ========================================================================== */

.aa-sky{
	position:absolute;
	inset:0;
	z-index:-1;
	overflow:hidden;
	pointer-events:none;
}

/* --- 星（ちらつき＋ごくゆっくり流れる） --- */
.aa-sky__stars{
	position:absolute;
	inset:-40px 0;
	animation:aa-drift 120s linear infinite;
}
@keyframes aa-drift{ from{ transform:translateY(0) } to{ transform:translateY(-40px) } }

.aa-star{
	position:absolute;
	border-radius:50%;
	background:#fff;
	animation:aa-twinkle var(--dur,4s) ease-in-out infinite;
	animation-delay:var(--delay,0s);
}
@keyframes aa-twinkle{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } }

/* --- 流れ星（左下→右上へ上がる。尾は進行方向の真後ろへ一直線） --- */
.aa-meteor{
	position:absolute;
	width:var(--head,4px);
	height:var(--head,4px);
	border-radius:50%;
	background:#fff;
	box-shadow:
		0 0 10px 3px rgb(255 255 255 / .9),
		0 0 22px 6px rgb(150 200 255 / .5);
	opacity:0;
}
.aa-meteor::after{
	content:"";
	position:absolute;
	right:50%;
	top:50%;
	width:var(--tail,120px);
	height:2px;
	border-radius:2px;
	background:linear-gradient(270deg, rgb(255 255 255 / .95), rgb(180 210 255 / .35), transparent);
	transform-origin:right center;
	transform:translateY(-50%) rotate(-33deg);
}
@keyframes aa-meteor-fly{
	0%{ opacity:0; transform:translate(0,0) }
	8%{ opacity:1 }
	100%{ opacity:0; transform:translate(360px,-234px) }
}

/* 演出を減らす設定では、星は静止して残し、流れ星は出さない */
@media (prefers-reduced-motion:reduce){
	.aa-sky__stars{ animation:none }
	.aa-star{ animation:none; opacity:.6 }
	.aa-meteor{ display:none }
}