/*
======================================
Loading Animation
======================================
*/

/* ローディングオーバーレイ */
.loading {
	align-items: center;
	background: var(--white, #fff);
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}

.loading.is-hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.loading.is-removed {
	display: none;
}

/* カウンター（アニメーション1） */
.loading__counter {
	color: var(--orange-accent, #ee7800);
	font-family: var(--main-font-family);
	font-size: 80px;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.05em;
	line-height: 1;
	opacity: 1;
	position: absolute;
	text-align: center;
	transition: opacity 0.5s ease;
}

.loading__counter.is-hidden {
	opacity: 0;
}

/* ヘッダー表示用（アニメーション3） */
body.is-loading .header {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

body.is-loading.header-visible .header {
	opacity: 1;
	pointer-events: auto;
}

/* メインコンテンツのスクロール制御 */
body.is-loading {
	overflow: hidden;
	overflow-y: scroll; /* スクロールバーを常に表示してレイアウトシフトを防ぐ */
	scrollbar-gutter: stable; /* モダンブラウザ向け：スクロールバーのスペースを確保 */
}

/* Heroセクション以外のメインコンテンツは非表示 */
body.is-loading .main > *:not(.hero) {
	opacity: 0;
	visibility: hidden;
}

body.loading-complete .main > * {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.8s ease;
}

/* Hero セクションの初期状態（ローディング中も表示） */
body.is-loading .hero {
	opacity: 1;
	visibility: visible;
}

body.loading-complete .hero {
	opacity: 1;
}

/* Hero ロゴエリアの初期状態（ローディング中も表示、高さ固定） */
body.is-loading .hero-logo-area {
	height: 100vh;
	max-height: 900px;
	opacity: 1;
	overflow: hidden;
	visibility: visible;
}

@media screen and (max-width: 599px) {
	body.is-loading .hero-logo-area {
		height: 100vh;
		max-height: 668px;
	}
}

/* Hero ロゴの初期状態（ローディング中も表示） */
body.is-loading .hero-logo {
	opacity: 1;
	visibility: visible;
	transform: none;
}

body.loading-complete .hero-logo {
	opacity: 1;
	transform: none;
}

/*
======================================
Hero Confetti Animation（アニメーション4）
紙吹雪が中心からはじける
======================================
*/

/* 初期状態：非表示（中心に配置、スケール0） */
body.is-loading .hero-confetti__item {
	opacity: 0;
	transform: scale(0);
	transition: none;
}

/* アニメーション4開始：中心から出現（透明→徐々に表示） */
body.is-loading.confetti-explode .hero-confetti__item {
	opacity: 0;
	transform: translate(-50%, -50%) scale(1);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
	            opacity 0.2s ease-out;
}

/* 所定位置へ移動（さらに透明度を上げる） */
body.is-loading.confetti-settle .hero-confetti__item {
	opacity: 1;
	transform: none;
	transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            top 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.2s ease,
	            opacity 0.4s ease-in;
}

/* ローディング完了後：表示 */
body.loading-complete .hero-confetti__item {
	opacity: 1;
	transform: none;
}

/* 各アイテムに遅延を追加 */
body.is-loading.confetti-explode .hero-confetti__item--21,
body.is-loading.confetti-settle .hero-confetti__item--21 { transition-delay: 0s; }
body.is-loading.confetti-explode .hero-confetti__item--26,
body.is-loading.confetti-settle .hero-confetti__item--26 { transition-delay: 0.02s; }
body.is-loading.confetti-explode .hero-confetti__item--02,
body.is-loading.confetti-settle .hero-confetti__item--02 { transition-delay: 0.04s; }
body.is-loading.confetti-explode .hero-confetti__item--27,
body.is-loading.confetti-settle .hero-confetti__item--27 { transition-delay: 0.06s; }
body.is-loading.confetti-explode .hero-confetti__item--25,
body.is-loading.confetti-settle .hero-confetti__item--25 { transition-delay: 0.08s; }
body.is-loading.confetti-explode .hero-confetti__item--18,
body.is-loading.confetti-settle .hero-confetti__item--18 { transition-delay: 0.1s; }
body.is-loading.confetti-explode .hero-confetti__item--08,
body.is-loading.confetti-settle .hero-confetti__item--08 { transition-delay: 0.12s; }
body.is-loading.confetti-explode .hero-confetti__item--22,
body.is-loading.confetti-settle .hero-confetti__item--22 { transition-delay: 0.03s; }
body.is-loading.confetti-explode .hero-confetti__item--24,
body.is-loading.confetti-settle .hero-confetti__item--24 { transition-delay: 0.05s; }
body.is-loading.confetti-explode .hero-confetti__item--15,
body.is-loading.confetti-settle .hero-confetti__item--15 { transition-delay: 0.07s; }
body.is-loading.confetti-explode .hero-confetti__item--16,
body.is-loading.confetti-settle .hero-confetti__item--16 { transition-delay: 0.09s; }
body.is-loading.confetti-explode .hero-confetti__item--17,
body.is-loading.confetti-settle .hero-confetti__item--17 { transition-delay: 0.11s; }
body.is-loading.confetti-explode .hero-confetti__item--07,
body.is-loading.confetti-settle .hero-confetti__item--07 { transition-delay: 0.13s; }
body.is-loading.confetti-explode .hero-confetti__item--06,
body.is-loading.confetti-settle .hero-confetti__item--06 { transition-delay: 0.15s; }
body.is-loading.confetti-explode .hero-confetti__item--01,
body.is-loading.confetti-settle .hero-confetti__item--01 { transition-delay: 0.04s; }
body.is-loading.confetti-explode .hero-confetti__item--k01,
body.is-loading.confetti-settle .hero-confetti__item--k01 { transition-delay: 0.06s; }
body.is-loading.confetti-explode .hero-confetti__item--23,
body.is-loading.confetti-settle .hero-confetti__item--23 { transition-delay: 0.08s; }
body.is-loading.confetti-explode .hero-confetti__item--20,
body.is-loading.confetti-settle .hero-confetti__item--20 { transition-delay: 0.1s; }
body.is-loading.confetti-explode .hero-confetti__item--19,
body.is-loading.confetti-settle .hero-confetti__item--19 { transition-delay: 0.12s; }
body.is-loading.confetti-explode .hero-confetti__item--14,
body.is-loading.confetti-settle .hero-confetti__item--14 { transition-delay: 0.14s; }
body.is-loading.confetti-explode .hero-confetti__item--13,
body.is-loading.confetti-settle .hero-confetti__item--13 { transition-delay: 0.05s; }
body.is-loading.confetti-explode .hero-confetti__item--12,
body.is-loading.confetti-settle .hero-confetti__item--12 { transition-delay: 0.07s; }
body.is-loading.confetti-explode .hero-confetti__item--11,
body.is-loading.confetti-settle .hero-confetti__item--11 { transition-delay: 0.09s; }
body.is-loading.confetti-explode .hero-confetti__item--10,
body.is-loading.confetti-settle .hero-confetti__item--10 { transition-delay: 0.11s; }
body.is-loading.confetti-explode .hero-confetti__item--09,
body.is-loading.confetti-settle .hero-confetti__item--09 { transition-delay: 0.13s; }
body.is-loading.confetti-explode .hero-confetti__item--05,
body.is-loading.confetti-settle .hero-confetti__item--05 { transition-delay: 0.15s; }
body.is-loading.confetti-explode .hero-confetti__item--04,
body.is-loading.confetti-settle .hero-confetti__item--04 { transition-delay: 0.06s; }
body.is-loading.confetti-explode .hero-confetti__item--03,
body.is-loading.confetti-settle .hero-confetti__item--03 { transition-delay: 0.08s; }
body.is-loading.confetti-explode .hero-confetti__item--k02,
body.is-loading.confetti-settle .hero-confetti__item--k02 { transition-delay: 0.1s; }
body.is-loading.confetti-explode .hero-confetti__item--28,
body.is-loading.confetti-settle .hero-confetti__item--28 { transition-delay: 0.12s; }
body.is-loading.confetti-explode .hero-confetti__item--sp01,
body.is-loading.confetti-settle .hero-confetti__item--sp01 { transition-delay: 0.07s; }
body.is-loading.confetti-explode .hero-confetti__item--sp02,
body.is-loading.confetti-settle .hero-confetti__item--sp02 { transition-delay: 0.09s; }

/*
======================================
Hero Background Animation（アニメーション5）
背景が上から下へ「道」のように展開
======================================
*/

/* 初期状態：非表示（clip-pathとopacityの両方で制御） */
body.is-loading .hero-bg {
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	opacity: 0;
	visibility: hidden;
}

/* 背景展開準備（アニメーション5開始前） */
body.is-loading.bg-ready .hero-bg {
	opacity: 1;
	visibility: visible;
	transition: clip-path 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 展開アニメーション */
body.is-loading.bg-reveal .hero-bg {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	opacity: 1;
	visibility: visible;
}

body.loading-complete .hero-bg {
	clip-path: none;
	opacity: 1;
	visibility: visible;
}

/* Hero message area 初期状態 */
body.is-loading .hero-message-area {
	opacity: 0;
}

body.is-loading.content-visible .hero-message-area {
	opacity: 1;
	transition: opacity 0.8s ease 0.3s;
}

body.loading-complete .hero-message-area {
	opacity: 1;
}

/*
======================================
Loading Animation - SP
======================================
*/
@media screen and (max-width: 599px) {
	.loading__counter {
		font-size: 48px;
	}
}