/* =========================================
   Loading / 初回ローディング
   ・サイトを開いた最初の1回だけ表示（同じタブ内のページ移動では出さない）。
   　判定は head 内の小さなスクリプト（functions.php）で sessionStorage を見て、
   　初回なら <html> に .grm-is-loading を付ける。
   ・動き：GRMマークのパーツが1つずつ現れ → 文字「GRM Modules」が下からせり上がり
   　→ 右下のカウントが100になったら、パネルごと上へ抜けてサイトが現れる。
   ・「動きを減らす」設定の環境では表示しない。
========================================= */
.grm-loader{
	display:none;
}

html.grm-is-loading{
	overflow:hidden;
}

html.grm-is-loading .grm-loader{
	display:block;
	position:fixed;
	inset:0;
	z-index:100000;
	background:#fff;
	color:var(--color-main, #111);
	clip-path:inset(0 0 0 0);
	transition:clip-path 1s cubic-bezier(.76, 0, .24, 1);
}

/* 中央：マーク＋文字 */
.grm-loader__inner{
	position:absolute;
	top:50%;
	left:50%;
	display:flex;
	align-items:center;
	gap:clamp(18px, 2.4vw, 32px);
	translate:-50% -50%;
	transition:opacity .5s ease, translate .9s cubic-bezier(.76, 0, .24, 1);
}

.grm-loader__mark{
	width:clamp(72px, 9vw, 120px);
	animation:grm-loader-turn 2.4s cubic-bezier(.3, 0, .2, 1) both;
}

.grm-loader__mark svg{
	display:block;
	width:100%;
	height:auto;
	overflow:visible;
}

/* マークのパーツを1つずつ出す */
.grm-loader__mark path{
	transform-box:fill-box;
	transform-origin:center;
	opacity:0;
	animation:grm-loader-part .7s cubic-bezier(.2, .8, .2, 1) forwards;
}

.grm-loader__mark path:nth-child(1){ animation-delay:.05s; }
.grm-loader__mark path:nth-child(2){ animation-delay:.13s; }
.grm-loader__mark path:nth-child(3){ animation-delay:.21s; }
.grm-loader__mark path:nth-child(4){ animation-delay:.29s; }
.grm-loader__mark path:nth-child(5){ animation-delay:.37s; }
.grm-loader__mark path:nth-child(6){ animation-delay:.45s; }
.grm-loader__mark path:nth-child(7){ animation-delay:.53s; }
.grm-loader__mark path:nth-child(8){ animation-delay:.61s; }

@keyframes grm-loader-part{
	0%   { opacity:0; transform:scale(.2); }
	60%  { opacity:1; }
	100% { opacity:1; transform:scale(1); }
}

@keyframes grm-loader-turn{
	0%   { rotate:-90deg; scale:.85; }
	100% { rotate:0deg; scale:1; }
}

/* 文字：トップのヒーローと同じ「GRM太く・Modules細く」 */
.grm-loader__word{
	display:flex;
	flex-direction:column;
	font-size:clamp(28px, 3.6vw, 48px);
	line-height:1;
	letter-spacing:-.01em;
}

.grm-loader__word span{
	display:block;
	overflow:hidden;
}

.grm-loader__word span > i{
	display:block;
	font-style:normal;
	translate:0 110%;
	animation:grm-loader-rise .9s cubic-bezier(.2, .8, .2, 1) forwards;
}

.grm-loader__strong > i{
	font-weight:700;
	animation-delay:.55s !important;
}

.grm-loader__light > i{
	font-weight:200;
	animation-delay:.68s !important;
}

@keyframes grm-loader-rise{
	to { translate:0 0; }
}

/* 下：進み具合の線とカウント */
.grm-loader__bar{
	position:absolute;
	left:clamp(20px, 4vw, 60px);
	right:clamp(20px, 4vw, 60px);
	bottom:clamp(28px, 5vw, 56px);
	height:1px;
	background:#e6e6e6;
}

.grm-loader__bar span{
	display:block;
	width:100%;
	height:100%;
	background:currentColor;
	transform-origin:left center;
	transform:scaleX(var(--grm-loader-progress, 0));
}

.grm-loader__count{
	position:absolute;
	right:clamp(20px, 4vw, 60px);
	bottom:calc(clamp(28px, 5vw, 56px) + 14px);
	font-size:clamp(40px, 5vw, 64px);
	font-weight:100;
	line-height:1;
	letter-spacing:-.02em;
	font-variant-numeric:tabular-nums;
}

.grm-loader__by{
	position:absolute;
	left:clamp(20px, 4vw, 60px);
	bottom:calc(clamp(28px, 5vw, 56px) + 16px);
	font-size:11px;
	font-weight:500;
	letter-spacing:.08em;
	color:var(--color-sub, #8a8a8a);
}

.grm-loader__by span{
	font-weight:300;
	margin-right:4px;
}

/* 終了：中身が少し上へ抜け、パネル全体が下から上へ閉じていく */
html.grm-is-loading .grm-loader.is-done .grm-loader__inner{
	opacity:0;
	translate:-50% calc(-50% - 40px);
}

html.grm-is-loading .grm-loader.is-done{
	clip-path:inset(0 0 100% 0);
	transition-delay:.25s;
}