/*
 * シフトリンク — UIが組み上がるアセンブル演出
 *
 * このLPだけの動き。共通の「ふわっと下から」（_shared/motion.js）は
 * 使わない。body.html の <main> に data-lp-motion="custom" を付けてある。
 * よくある質問の開閉だけは共通のものをそのまま使う。
 *
 *   FV        カレンダーのセルが左上から順に埋まり、LINE画面が右から入る
 *   Before/After  スクロール量に合わせて「3時間」が「5分」へ減り、バーが縮む
 *   3つの特徴  アイコンの線が描かれ、塗り → 文章の順に出る
 *   主な機能   格子の中心から外へ順に出る
 *   料金       左 → 右（0.15秒遅れ）→ おすすめのバッジが弾む
 *   導入の流れ ステップの間を線が伸びてつなぐ
 *
 * 動かすのは transform / opacity / clip-path / filter だけ。
 * 幅・高さ・位置は動かさない（レイアウトがずれないように）。
 *
 * スクロールで出すものは html.sl-motion が付いているときだけ隠す。
 * このクラスは motion.js が対象を見つけ終えたあとに付けるので、
 * JavaScript が動かない環境と「動きを減らす」設定では最初から全部見えている。
 */


/*
 * 幕を閉じたあとの「画面中央から拡大」（_shared/gate.css の kj-emerge）を
 * このLPでは使わない。B2Bは待たせないことを優先し、FVの演出だけにする。
 *
 * gate.css より **あとに** 読み込まれる前提で打ち消している
 * （inc/works-lp.php が kajitan-lp-gate に依存させている）。
 */
.kj-revealing .wp-site-blocks {
	animation: none;
	will-change: auto;
}


/* ==========================================================================
   ファーストビュー（CSSだけで動かす）
   ========================================================================== */

/*
 * **JavaScript を待たない。** 画像は最初から描かれていて（LCPを遅らせない）、
 * その上のセルを覆う板を外していくだけにしてある。
 *
 * 幕（html.kj-gated）が出ている間は止めておき、幕が外れた瞬間に動き出す。
 * 同じタブの2回目は gate.js が幕をすぐ外すので、そのまま再生される。
 * JavaScript が無い環境は body.html の <noscript> で板ごと消す。
 *
 * 時間割（幕が外れてから）:
 *   0.04〜0.55秒  42個のセルが 8ms ずつずれて埋まる（1個 0.18秒）
 *   0.55〜0.80秒  LINE画面が右から入る
 */

/* スマホが右から入るとき、画面の外へはみ出したぶんで横スクロールが
   出ないように切る。overflow: hidden にすると .hero が中身をスクロール
   できる箱になってしまうので clip にする */
.hero {
	overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
	.sl-cells {
		display: grid;
	}

	.sl-cells i {
		animation: sl-cell 0.18s cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--i) * 8ms + 40ms) both;
	}

	.sl-mock .sl-mock__phone {
		animation: sl-phone 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
	}

	.kj-gated .sl-cells i,
	.kj-gated .sl-mock .sl-mock__phone {
		animation-play-state: paused;
	}
}

/* 覆いが縮みながら消えて、下のセルが現れる */
@keyframes sl-cell {
	to {
		opacity: 0;
		transform: scale(0.4);
	}
}

@keyframes sl-phone {
	from {
		opacity: 0;
		transform: translateX(36%);
	}

	to {
		opacity: 1;
		transform: none;
	}
}


/* ==========================================================================
   3つの特徴 — 線を描いてから塗る
   ========================================================================== */

/* 線は pathLength="1" にしてあるので、長さは 1 として扱える */
.sl-motion .feature .sl-draw__line > * {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.sl-motion .feature .sl-draw__fill {
	opacity: 0;
}

.sl-motion .feature h3,
.sl-motion .feature p {
	opacity: 0;
}

.sl-motion .feature.is-in .sl-draw__line > * {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1) var(--sl-delay, 0s);
}

.sl-motion .feature.is-in .sl-draw__fill {
	opacity: 1;
	transition: opacity 0.35s ease calc(var(--sl-delay, 0s) + 0.55s);
}

.sl-motion .feature.is-in h3,
.sl-motion .feature.is-in p {
	opacity: 1;
	transition: opacity 0.45s ease calc(var(--sl-delay, 0s) + 0.75s);
}

.sl-motion .feature.is-in p {
	transition-delay: calc(var(--sl-delay, 0s) + 0.85s);
}


/* ==========================================================================
   主な機能 — 格子の中心から外へ
   ========================================================================== */

/* 順番（--sl-delay）は motion.js が、並んだ位置から中心までの距離で決める。
   PCの6列とスマホの2列で並びが変わるため、CSSでは決め打ちしない */
.sl-motion .function-grid > div {
	opacity: 0;
	transform: scale(0.82);
}

.sl-motion .function-grid.is-in > div {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.4s ease var(--sl-delay, 0s),
		transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) var(--sl-delay, 0s);
}


/* ==========================================================================
   料金 — 左、0.15秒遅れて右、最後にバッジ
   ========================================================================== */

.sl-motion .price-card {
	opacity: 0;
	transform: translateY(18px) scale(0.98);
}

.sl-motion .prices.is-in .price-card {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.5s ease,
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sl-motion .prices.is-in .price-card:nth-child(2) {
	transition-delay: 0.15s;
}

.sl-motion .sl-badge {
	opacity: 0;
	transform: scale(0.6);
}

.sl-motion .prices.is-in .sl-badge {
	animation: sl-badge 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both;
}

@keyframes sl-badge {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	55% {
		opacity: 1;
		transform: scale(1.12) translateY(-3px);
	}

	78% {
		transform: scale(0.96);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

/* 月額／年額の数字のロール。古い数字が上へ抜け、新しい数字が下から入る */
.sl-roll__old {
	position: absolute;
	top: 0;
	left: 0;
	animation: sl-roll-out 0.38s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.sl-roll__new {
	display: inline-block;
	animation: sl-roll-in 0.38s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes sl-roll-out {
	to {
		opacity: 0;
		transform: translateY(-100%);
	}
}

@keyframes sl-roll-in {
	from {
		opacity: 0;
		transform: translateY(100%);
	}

	to {
		opacity: 1;
		transform: none;
	}
}


/* ==========================================================================
   導入の流れ — カードが出て、線が次のカードへ伸びる
   ========================================================================== */

/* 1枚あたり 0.3 秒。カード → 線（0.15秒後）→ 次のカード の順 */
.sl-motion .steps li {
	opacity: 0;
	transform: scale(0.96);
}

.sl-motion .steps li:not(:last-child)::after {
	transform: scaleX(0);
}

.sl-motion .steps.is-in li {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.35s ease var(--sl-step, 0s),
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) var(--sl-step, 0s);
}

.sl-motion .steps.is-in li:not(:last-child)::after {
	transform: none;
	transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--sl-step, 0s) + 0.15s);
}

.sl-motion .steps li:nth-child(2) {
	--sl-step: 0.3s;
}

.sl-motion .steps li:nth-child(3) {
	--sl-step: 0.6s;
}

.sl-motion .steps li:nth-child(4) {
	--sl-step: 0.9s;
}

/* スマホは縦に積むので、線は上から下へ伸ばす */
@media (max-width: 767px) {
	.sl-motion .steps li:not(:last-child)::after {
		transform: scaleY(0);
	}
}


/* ==========================================================================
   マイクロインタラクション
   ========================================================================== */

/* CTA。ホバーで矢印が右へ4px、押下で明度を下げる */
.button > span,
.header-cta {
	transition: transform 0.2s ease, filter 0.15s ease;
}

.button > span {
	display: inline-block;
}

.button:hover > span {
	transform: translateX(4px);
}

.button:active,
.header-cta:active {
	filter: brightness(0.88);
}

/* 機能のアイコン。ホバーした瞬間に一度だけ、アイコンごとに違う動き */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.function-grid > [data-sl-hover="wiggle"]:hover .sl-icon {
		animation: sl-wiggle 0.5s ease;
	}

	.function-grid > [data-sl-hover="hop"]:hover .sl-icon {
		animation: sl-hop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.function-grid > [data-sl-hover="ring"]:hover .sl-icon {
		transform-origin: 50% 12%;
		animation: sl-ring 0.6s ease;
	}

	.function-grid > [data-sl-hover="spin"]:hover .sl-hands {
		transform-box: view-box;
		transform-origin: 24px 24px;
		animation: sl-spin 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	}

	.function-grid > [data-sl-hover="tilt"]:hover .sl-icon {
		animation: sl-tilt 0.5s ease;
	}

	.function-grid > [data-sl-hover="pop"]:hover .sl-icon {
		animation: sl-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
}

@keyframes sl-wiggle {
	25% { transform: rotate(-10deg); }
	60% { transform: rotate(7deg); }
}

@keyframes sl-hop {
	40% { transform: translateY(-7px); }
	70% { transform: translateY(1px); }
}

@keyframes sl-ring {
	20% { transform: rotate(14deg); }
	40% { transform: rotate(-12deg); }
	60% { transform: rotate(7deg); }
	80% { transform: rotate(-4deg); }
}

@keyframes sl-spin {
	to { transform: rotate(360deg); }
}

@keyframes sl-tilt {
	40% { transform: rotate(-9deg) translateY(-2px); }
}

@keyframes sl-pop {
	45% { transform: scale(1.14); }
}