/* 起動演出（マップ画面=index.htmlでのみ使用）。セッション中に一度再生したらsessionStorageで
   記憶し、以降このセッション中に再訪してもちらつき無く即座に非表示にする
   （「見たかどうか」の判定自体はindex.html内のインラインスクリプトが担当。詳細はそちら参照）。
   その日が誕生日のアイドルがいる場合（.birthday-mode、サーバー側でidol_service.get_todays_birthday_idol()
   により判定）は、部章マークの代わりにアイドルのSDアイコン（B案、星空背景）と「夜B・深夜の星空」の
   背景に差し替える。星は毎回同じ見た目でよいためJS生成ではなくradial-gradientの重ね書きで固定描画する。 */

.app-splash {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #F6F3E8;
	--dur-in: 620ms;
	--dur-hold: 560ms;
	--dur-out: 560ms;
}
.app-splash.is-skip,
.app-splash.done {
	display: none;
}

.app-splash.birthday-mode {
	background:
		radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,.8), transparent 60%),
		radial-gradient(1.5px 1.5px at 32% 68%, rgba(255,255,255,.55), transparent 60%),
		radial-gradient(2px 2px at 46% 15%, rgba(255,255,255,.7), transparent 60%),
		radial-gradient(1.5px 1.5px at 64% 42%, rgba(255,255,255,.6), transparent 60%),
		radial-gradient(2px 2px at 78% 74%, rgba(255,255,255,.75), transparent 60%),
		radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,.5), transparent 60%),
		radial-gradient(1.5px 1.5px at 10% 82%, rgba(255,255,255,.5), transparent 60%),
		radial-gradient(140% 120% at 50% 22%, #1c2a45 0%, #090e1b 70%);
}

.app-splash-glow {
	position: absolute;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(143,191,160,0.35), transparent 68%);
	opacity: 0;
	transform: scale(.6);
}
.app-splash.playing .app-splash-glow {
	animation: appSplashGlow calc(var(--dur-in) + var(--dur-hold)) cubic-bezier(.21, 1.36, .36, 1) both;
}
.app-splash.birthday-mode .app-splash-glow {
	background: radial-gradient(circle, color-mix(in srgb, var(--idol-color) 45%, transparent), transparent 68%);
}

.app-splash-mark {
	width: 132px;
	height: auto;
	opacity: 0;
	transform: scale(.68);
}
.app-splash.playing .app-splash-mark {
	animation: appSplashMarkIn var(--dur-in) cubic-bezier(.21, 1.36, .36, 1) both,
		appSplashMarkOut var(--dur-out) ease-in both;
	animation-delay: 0ms, calc(var(--dur-in) + var(--dur-hold));
}

.app-splash-sdicon {
	width: 124px;
	height: 124px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--idol-color) 55%, transparent);
}

.app-splash-greeting {
	margin-top: 14px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--idol-color);
	opacity: 0;
}
.app-splash.playing .app-splash-greeting {
	animation: appSplashWordIn 420ms ease-out both,
		appSplashMarkOut var(--dur-out) ease-in both;
	animation-delay: 160ms, calc(var(--dur-in) + var(--dur-hold));
}

.app-splash-wordmark {
	margin-top: 18px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #2F5233;
	opacity: 0;
}
.birthday-mode .app-splash-wordmark {
	font-size: 12px;
	margin-top: 10px;
	color: #93A2C2;
}
.app-splash.playing .app-splash-wordmark {
	animation: appSplashWordIn 480ms ease-out both,
		appSplashMarkOut var(--dur-out) ease-in both;
	animation-delay: 160ms, calc(var(--dur-in) + var(--dur-hold));
}
/* 誕生日モードはgreetingの方を主役にするため、wordmarkは少し遅れて控えめに現れるようにする */
.app-splash.birthday-mode.playing .app-splash-wordmark {
	animation-delay: 260ms, calc(var(--dur-in) + var(--dur-hold));
}

@keyframes appSplashMarkIn {
	0% { opacity: 0; transform: scale(.68); }
	60% { opacity: 1; transform: scale(1.05); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes appSplashMarkOut {
	0% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.1); }
}
@keyframes appSplashWordIn {
	0% { opacity: 0; transform: translateY(6px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes appSplashGlow {
	0% { opacity: 0; transform: scale(.6); }
	45% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.15); }
}

.app-splash.playing {
	animation: appSplashOverlayOut var(--dur-out) ease-in calc(var(--dur-in) + var(--dur-hold)) both;
}
@keyframes appSplashOverlayOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}