@charset "utf-8";
/* ==========================================================================
   オープニングローダー  ―  THE GOOD WORK ロゴのモーション
   ロゴを「星 → 円 → GOOD → THE → WORK」の順に組み上げ、
   最後にパネルが上へ抜けて本編を見せる。
   タイムラインは --knd-* 変数でまとめて調整できる。
   ========================================================================== */

:root {
	--knd-ink: #231f20;
	--knd-yellow: #fbc707;
}

/* 再訪問時（同一セッション2回目以降）は出さない */
html.knd-skip-loader .knd-loader { display: none !important; }

/* ローダー表示中はスクロールを止める（JS が外す。JS 無効時も下の安全弁で必ず解除） */
html.knd-lock,
html.knd-lock body { overflow: hidden; }

/* --------------------------------------------------------------------------
   土台
   -------------------------------------------------------------------------- */
.knd-loader {
	--knd-out: 2.05s;             /* 本編を出し始めるタイミング */
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	animation: kndLoaderGone .01s linear 4.15s forwards;
}

/* 背景パネル（最後に上へ抜ける幕） */
.knd-loader__panel {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 42%, #322d2e 0%, #1d1a1b 58%, #121011 100%);
	animation: kndPanelUp 1.15s cubic-bezier(.76, 0, .24, 1) 2.95s both;
	will-change: transform;
}

/* 幕の下端に走る黄色いライン（シャッター感） */
.knd-loader__panel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--knd-yellow);
	opacity: 0;
	animation: kndEdge 1.15s linear 2.95s both;
}

.knd-loader__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding: 24px;
	/* 幕とまったく同じ動きで、ロゴを乗せたまま画面外へ持ち上げる */
	animation: kndInnerOut 1.15s cubic-bezier(.76, 0, .24, 1) 2.95s both;
	will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   ロゴマーク
   -------------------------------------------------------------------------- */
.knd-loader__mark {
	width: clamp(230px, 56vw, 380px);
	animation: kndPunch .55s cubic-bezier(.3, 1.4, .5, 1) 1.85s both;
}

.knd-mark { display: block; width: 100%; height: auto; overflow: visible; }

/* 外周の周回リング（ローディングらしさを担当） */
.knd-orbit {
	fill: none;
	stroke: rgba(251, 199, 7, .55);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1025;
	stroke-dashoffset: 1025;
	transform-box: view-box;
	transform-origin: 420.89px 297.28px;
	animation:
		kndOrbitDraw 1.7s cubic-bezier(.4, 0, .2, 1) .1s both,
		kndOrbitSpin 11s linear 0s infinite;
}

/* 星・円弧・文字：共通の変形基準 */
.knd-star,
.knd-arc,
.knd-ch {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.knd-star {
	fill: var(--knd-yellow);
	filter: drop-shadow(0 0 16px rgba(251, 199, 7, .45));
	animation: kndStarIn .8s cubic-bezier(.16, 1.05, .3, 1.15) .1s both;
}

.knd-arc { fill: #fff; }
.knd-arc--t { animation: kndArcTop .75s cubic-bezier(.2, .8, .2, 1) .35s both; }
.knd-arc--b { animation: kndArcBottom .75s cubic-bezier(.2, .8, .2, 1) .35s both; }

.knd-ch { fill: #fff; }
/* GOOD（大きい主役の4文字） */
.knd-ch--m { animation: kndCharUp .62s cubic-bezier(.2, .85, .25, 1) calc(.55s + var(--i) * .07s) both; }
/* THE（上段） */
.knd-ch--t { animation: kndCharDown .5s cubic-bezier(.2, .85, .25, 1) calc(.95s + var(--i) * .05s) both; }
/* WORK（下段） */
.knd-ch--b { animation: kndCharUp .5s cubic-bezier(.2, .85, .25, 1) calc(1.05s + var(--i) * .05s) both; }

/* --------------------------------------------------------------------------
   コピー & プログレスバー
   -------------------------------------------------------------------------- */
.knd-loader__copy {
	margin: 0;
	font-size: clamp(13px, 3.6vw, 17px);
	letter-spacing: .22em;
	line-height: 1.9;
	text-align: center;
	color: rgba(255, 255, 255, .78);
	animation: kndCopyIn .75s cubic-bezier(.2, .8, .2, 1) 1.5s both;
}

.knd-loader__bar {
	position: relative;
	width: min(300px, 60vw);
	height: 2px;
	background: rgba(255, 255, 255, .14);
	overflow: hidden;
	animation: kndFadeIn .4s linear .2s both;
}

.knd-loader__bar span {
	position: absolute;
	inset: 0;
	background: var(--knd-yellow);
	transform: scaleX(0);
	transform-origin: 0 50%;
	animation: kndBar 2.45s cubic-bezier(.35, 0, .15, 1) .2s both;
}

/* --------------------------------------------------------------------------
   本編の立ち上がり（幕が抜けるのに合わせてヒーローを起こす）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html.knd-has-loader:not(.knd-skip-loader) .knd-opening .site-header,
	html.knd-has-loader:not(.knd-skip-loader) .knd-opening .hero {
		animation: kndPageIn 1.25s cubic-bezier(.2, .75, .2, 1) 3.1s both;
	}
	/* .hero__copy には個別アニメを掛けない：
	   テーマ側が transform:translateY(-50%) でセンタリングしており、
	   transform を含むアニメを fill:both で当てると終了後も上書きが残って位置がずれる */
}

/* --------------------------------------------------------------------------
   キーフレーム
   -------------------------------------------------------------------------- */
@keyframes kndOrbitDraw {
	from { stroke-dashoffset: 1025; opacity: 0; }
	20%  { opacity: 1; }
	to   { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes kndOrbitSpin {
	from { transform: rotate(-90deg); }
	to   { transform: rotate(270deg); }
}
@keyframes kndStarIn {
	from { opacity: 0; transform: scale(.12) rotate(-150deg); }
	to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes kndArcTop {
	from { opacity: 0; transform: translateY(-30px) scale(1.1); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kndArcBottom {
	from { opacity: 0; transform: translateY(30px) scale(1.1); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kndCharUp {
	from { opacity: 0; transform: translateY(26px) scale(.82); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kndCharDown {
	from { opacity: 0; transform: translateY(-18px) scale(.86); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kndPunch {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.035); }
	100% { transform: scale(1); }
}
@keyframes kndCopyIn {
	from { opacity: 0; transform: translateY(12px); letter-spacing: .38em; }
	to   { opacity: 1; transform: translateY(0); letter-spacing: .22em; }
}
@keyframes kndBar {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
@keyframes kndFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes kndInnerOut {
	0%   { opacity: 1; transform: translateY(0); }
	70%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-101%); }
}
@keyframes kndPanelUp {
	from { transform: translateY(0); }
	to   { transform: translateY(-101%); }
}
@keyframes kndEdge {
	0%      { opacity: 0; }
	12%     { opacity: 1; }
	88%     { opacity: 1; }
	100%    { opacity: 0; }
}
@keyframes kndLoaderGone {
	to { visibility: hidden; pointer-events: none; }
}
@keyframes kndPageIn {
	from { opacity: .35; transform: translateY(20px) scale(1.02); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* クリック / Esc でスキップされたとき */
.knd-loader.is-skipped { animation: kndSkipOut .35s ease forwards; }
.knd-loader.is-skipped .knd-loader__panel,
.knd-loader.is-skipped .knd-loader__panel::after,
.knd-loader.is-skipped .knd-loader__inner { animation: none; }
@keyframes kndSkipOut {
	from { opacity: 1; }
	to   { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* --------------------------------------------------------------------------
   モーションを控えたい環境では出さない
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.knd-loader { display: none !important; }
}