/* =========================================
   初回ローディング（HD）
   ・ロゴの大きな文字が上から1文字ずつ落ちてきて弾む
   　→ 小さな文字（Graphic Design…）がふわっと出る
   　→ i の上のきらめきが「ピッ」と出る
   ・下の線とパーセントが100になったら、文字がもう一度跳ねて、
   　下の角が丸いシートごと上へ抜けていく。
========================================= */
.hd-loader{
	display:none;
}

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

html.hd-is-loading .hd-loader{
	display:grid;
	place-items:center;
	position:fixed;
	inset:0;
	z-index:100000;
	background:var(--hd-paper);
	color:var(--hd-ink);
	border-radius:0 0 0 0;
	transition:transform 1.1s var(--hd-ease-io), border-radius 1.1s var(--hd-ease-io);
}

.hd-loader__logo{
	width:clamp(230px, 36vw, 520px);
}

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

/* 大きな文字（最初の6つの path） */
.hd-loader__logo path:nth-of-type(-n+6){
	transform-box:fill-box;
	transform-origin:50% 100%;
	opacity:0;
	animation:hd-loader-drop .9s cubic-bezier(.3, 1.6, .5, 1) forwards;
}

.hd-loader__logo path:nth-of-type(1){ animation-delay:.10s; }
.hd-loader__logo path:nth-of-type(2){ animation-delay:.22s; }
.hd-loader__logo path:nth-of-type(3){ animation-delay:.55s; }
.hd-loader__logo path:nth-of-type(4){ animation-delay:.34s; }
.hd-loader__logo path:nth-of-type(5){ animation-delay:.46s; }
.hd-loader__logo path:nth-of-type(6){ animation-delay:.40s; }

@keyframes hd-loader-drop{
	0%   { opacity:0; transform:translateY(-140%) rotate(-12deg); }
	40%  { opacity:1; }
	100% { opacity:1; transform:none; }
}

/* 小さな文字（Graphic Design / Web Design / CG Art / Programming） */
.hd-loader__logo path:nth-of-type(n+7){
	opacity:0;
	animation:hd-loader-fade .6s ease forwards;
	animation-delay:1s;
}

/* きらめき（最後の3つの path） */
.hd-loader__logo path:nth-last-of-type(-n+3){
	transform-box:fill-box;
	transform-origin:0% 100%;
	animation:hd-loader-spark .5s cubic-bezier(.3, 1.8, .5, 1) forwards;
	animation-delay:1.2s;
}

.hd-loader__logo path:nth-last-of-type(2){ animation-delay:1.28s; }
.hd-loader__logo path:nth-last-of-type(1){ animation-delay:1.36s; }

@keyframes hd-loader-fade{
	to { opacity:1; }
}

@keyframes hd-loader-spark{
	0%   { opacity:0; transform:scale(0); }
	100% { opacity:1; transform:none; }
}

/* 下の線とパーセント */
.hd-loader__bar{
	position:absolute;
	left:50%;
	bottom:clamp(40px, 8vh, 80px);
	width:min(220px, 50vw);
	height:2px;
	border-radius:2px;
	background:var(--hd-line);
	translate:-50% 0;
	overflow:hidden;
}

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

.hd-loader__count{
	position:absolute;
	left:50%;
	bottom:calc(clamp(40px, 8vh, 80px) + 14px);
	translate:-50% 0;
	font-family:var(--hd-en);
	font-size:13px;
	font-weight:500;
	letter-spacing:.08em;
	font-variant-numeric:tabular-nums;
	color:var(--hd-sub);
}

/* 終了：文字がもう一度跳ねて、シートごと上へ */
html.hd-is-loading .hd-loader.is-done{
	transform:translateY(-100%);
	border-radius:0 0 50% 50% / 0 0 18vh 18vh;
	transition-delay:.35s;
}

.hd-loader.is-done .hd-loader__logo path:nth-of-type(-n+6){
	animation:hd-loader-jump .5s cubic-bezier(.3, 1.6, .5, 1) forwards;
	opacity:1;
}

@keyframes hd-loader-jump{
	0%   { transform:none; }
	40%  { transform:translateY(-18%); }
	100% { transform:none; }
}