/*--------------------------------------------------------------
# Page Loader Component (ページローダーコンポーネント)
--------------------------------------------------------------*/

.page-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s cubic-bezier(0.47, 0.16, 0.24, 1), visibility 0.6s cubic-bezier(0.47, 0.16, 0.24, 1);
}

.page-loader.loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.page-loader__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-primary); /* 緑背景 */
	opacity: 0;
	animation: fadeInBackground 0.8s cubic-bezier(0.47, 0.16, 0.24, 1) forwards;
}

@keyframes fadeInBackground {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.page-loader__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0; /* ロゴとテキストの間隔 */
}

.page-loader__logo {
	max-width: 20.0rem; /* 200px */
	max-height: 20.0rem; /* 200px */
	width: auto;
	height: auto;
	opacity: 0;
	transform: translate3d(0, 3vw, 0) scale(0.8);
	animation: logoAnimation 1.4s cubic-bezier(0.47, 0.16, 0.24, 1) 0.3s forwards;
	will-change: transform, opacity; /* GPUアクセラレーションを有効化 */
	backface-visibility: hidden; /* レンダリングの最適化 */
	-webkit-backface-visibility: hidden; /* Safari対応 */
	/* 画像読み込み前は完全に透明にして、黒い画像が見えないようにする */
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

@keyframes logoAnimation {
	0% {
		opacity: 0;
		transform: translate3d(0, 3vw, 0) scale(0.8);
	}
	50% {
		opacity: 1;
		transform: translate3d(0, -0.5vw, 0) scale(1.05);
	}
	70% {
		transform: translate3d(0, 0.2vw, 0) scale(0.98);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

/* ローディング完了時のフェードアウト */
.page-loader.fade-out {
	animation: fadeOutLoader 0.6s cubic-bezier(0.47, 0.16, 0.24, 1) forwards;
}

@keyframes fadeOutLoader {
	0% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

/* スマホ時の調整 */
@media screen and (max-width: 768px) {
	.page-loader__logo {
		max-width: 16.0rem; /* 160px */
		max-height: 16.0rem; /* 160px */
		transform: translate3d(0, 4vw, 0) scale(0.8);
	}
	
	.page-loader__content {
		gap: 2.0rem; /* スマホ時は間隔を少し狭く */
	}
}