/*--------------------------------------
    loadingArea
--------------------------------------*/

/* ローディング中はスクロールさせない */
html.is-loading {
	overflow: hidden;
}

.loadingArea {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	transition:
		background-color 0.6s ease,
		translate 1s cubic-bezier(0.76, 0, 0.24, 1);
}

.loadingArea .loadingInner {
	text-align: center;
	transition: opacity 0.4s ease;
}

/* ロゴ(島の集合体) */
.loadingArea .loadingLogo {
	width: 320px;
	margin: 0 auto;
}

.loadingArea .loadingLogo svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	fill: #43609b;
}

.loadingArea .loadingLogo path {
	transform-box: fill-box;
	transform-origin: center;
	scale: 0;
}

.loadingArea .loadingInner span {
	display: block;
	margin-top: 40px;
	font-family: univers-next-pro, sans-serif;
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	color: #2c5796;
	opacity: 0;
	translate: 0 20px;
	transition:
		opacity 0.8s ease 0.9s,
		translate 0.8s ease 0.9s;
}

/* 1. 島が中心から順に浮き出る */
.loadingArea.is-pop .loadingLogo path {
	scale: 1;
	transition: scale 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--pop, 0s);
}

.loadingArea.is-pop .loadingInner span {
	opacity: 1;
	translate: 0 0;
}

/* 2. 島が大きくなりながら画面端まで散らばる(テキストは残る) */
.loadingArea.is-scatter .loadingLogo path {
	scale: var(--grow, 2.5);
	translate: var(--tx) var(--ty);
	rotate: var(--tr);
	opacity: 0;
	transition:
		scale 1.2s cubic-bezier(0.3, 0, 0.3, 1) var(--scatter, 0s),
		translate 1.2s cubic-bezier(0.3, 0, 0.3, 1) var(--scatter, 0s),
		rotate 1.2s ease var(--scatter, 0s),
		opacity 0.4s ease-in calc(var(--scatter, 0s) + 0.85s);
}

/* 3. 画面全体が青一色になる */
.loadingArea.is-fill {
	background-color: #43609b;
}

.loadingArea.is-fill .loadingInner {
	opacity: 0;
}

/* 4. 青い面が下へ捲れてFVが出る */
.loadingArea.is-reveal {
	translate: 0 100%;
}

.loadingArea.is-done {
	display: none;
}

@media (max-width: 768px) {
	.loadingArea {
		padding: 0 20px;
	}

	.loadingArea .loadingLogo {
		width: 50vw;
	}

	.loadingArea .loadingInner span {
		font-size: 12px;
		margin-top: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.loadingArea .loadingLogo path {
		scale: 1;
		transition: none;
	}

	.loadingArea.is-done {
		display: none;
	}
}