/*
 * サンプルLPで共通して使う動き
 *
 *   ・スクロールに合わせてふわっと出す
 *   ・黒い帯が右から左へ走ってから出す（かじたん本体の「4つの入口」と同じ）
 *   ・よくある質問の開閉をなめらかにする
 *
 * 隠す指定は html.kj-motion が付いているときだけ効かせる。このクラスは
 * motion.js が対象を見つけ終えたあとに付けるので、JavaScript が動かない
 * 環境や「動きを減らす」設定では、最初から全部見えている。
 *
 * クラス名は kj- で始める。LP側のCSSとぶつからないようにするため。
 */


/* ==========================================================================
   ふわっと下から
   ========================================================================== */

.kj-motion [data-kj-reveal="up"] {
	opacity: 0;
	transform: translateY(22px);
}

.kj-motion [data-kj-reveal="up"].is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--kj-delay, 0s),
		transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--kj-delay, 0s);
}


/* ==========================================================================
   黒い帯が右から左へ走ってから出す
   ========================================================================== */

/* 帯が通り過ぎるまで中身を隠す。カードの面（背景・枠線）も消して、
   何も無いところを帯が走っていくように見せる。 */
.kj-motion [data-kj-reveal="wipe"] {
	position: relative;
	background-color: transparent;
	border-color: transparent;
}

.kj-motion [data-kj-reveal="wipe"] > * {
	opacity: 0;
}

/* 中身が出るまでは押せないようにしておく */
.kj-motion [data-kj-reveal="wipe"]:not(.is-in) {
	pointer-events: none;
}

.kj-motion [data-kj-reveal="wipe"]::after {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	background: var(--navy, #0c2e5d);
	transform: scaleX(0);
	transform-origin: right center;
	pointer-events: none;
}

.kj-motion [data-kj-reveal="wipe"].is-in::after {
	animation: kj-band 0.9s cubic-bezier(0.78, 0, 0.22, 1) var(--kj-delay, 0s) forwards;
}

.kj-motion [data-kj-reveal="wipe"].is-in {
	animation: kj-face 0.9s linear var(--kj-delay, 0s) forwards;
}

.kj-motion [data-kj-reveal="wipe"].is-in > * {
	animation: kj-content 0.9s linear var(--kj-delay, 0s) forwards;
}

/* 右端を起点に左へ伸ばし、覆いきったところで起点を左端へ持ち替えて縮める。
   持ち替えは 49.9% → 50% の一瞬で済ませる。ここを広くとると
   transform-origin が補間されて、帯が横滑りして見えるため。 */
@keyframes kj-band {
	0% {
		transform: scaleX(0);
		transform-origin: right center;
	}

	49.9% {
		transform: scaleX(1);
		transform-origin: right center;
	}

	50% {
		transform: scaleX(1);
		transform-origin: left center;
	}

	100% {
		transform: scaleX(0);
		transform-origin: left center;
	}
}

/* 帯が覆っている最中にカードの面を戻す */
@keyframes kj-face {
	0%,
	46% {
		background-color: transparent;
		border-color: transparent;
	}

	54%,
	100% {
		background-color: var(--kj-face, #ffffff);
		border-color: var(--kj-edge, #deecf6);
	}
}

/* 帯が覆っている最中に中身を戻す */
@keyframes kj-content {
	0%,
	46% {
		opacity: 0;
	}

	54%,
	100% {
		opacity: 1;
	}
}


/* ==========================================================================
   よくある質問の開閉
   ========================================================================== */

/* 高さは motion.js が測って入れる。details は素のままでは高さを
   アニメーションできないため。

   **中身を箱で包まない。** LP側のCSSが `.faq details>p` のように直下の子を
   指していると、あいだに要素をはさんだ時点で余白が外れる。 */
[data-kj-details] > summary {
	cursor: pointer;
	list-style: none;
}

[data-kj-details] > summary::-webkit-details-marker {
	display: none;
}

[data-kj-details].is-animating {
	overflow: hidden;
	transition: height 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

/* **高さを変えるだけでは、トグルに見えない。**
   答えは1行しかないことが多く、伸びる量が 40px ほどしかない。そのうえ
   中の文章は最初から濃さ100%で置かれているので、「箱が少し伸びて文字が
   一瞬で出た」としか見えなかった。文章自体を上から下ろして、濃さも
   つけていく。summary は動かさないので :not(summary) で除く。 */
[data-kj-details].is-opening > :not(summary) {
	animation: kj-answer-in 0.44s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both;
}

[data-kj-details].is-closing > :not(summary) {
	animation: kj-answer-out 0.26s ease both;
}

@keyframes kj-answer-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

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

@keyframes kj-answer-out {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* 「動きを減らす」設定でも、開閉そのものは短く動かす。押したところが開く
   だけの小さな動きなので、まったく動かないより分かりやすい。ただし中身を
   滑らせるのはやめて、高さだけを短く変える。
   LP側に `*{transition:none!important}` という全体指定があるため、
   ここは !important で打ち消す必要がある。 */
@media (prefers-reduced-motion: reduce) {
	[data-kj-details].is-animating {
		transition: height 0.16s linear !important;
	}

	[data-kj-details].is-opening > :not(summary),
	[data-kj-details].is-closing > :not(summary) {
		animation: none !important;
	}
}


/* ==========================================================================
   ポップアップ（<dialog>）をなめらかに開閉する
   ==========================================================================

   どのLPのポップアップも showModal() / close() でパッと出てパッと消えて
   いた。開くときは少し下から浮き上がりながら濃く、閉じるときはその逆。
   後ろの暗幕（::backdrop）も濃さだけで出し入れする。

   閉じたあとも動き終わるまで表示を残すため、display と overlay
   （最前面の層から外すタイミング）を allow-discrete で遅らせる。
   開閉の JavaScript は各LPの納品物のまま。対応していない古いブラウザでは
   これまでどおりパッと切り替わるだけ。

   LP側の dialog の指定は、どれも opacity / transform / transition を
   使っていない（ぶつからない）。 */

dialog {
	opacity: 0;
	transform: translateY(14px) scale(0.98);
	transition:
		opacity 0.28s ease,
		transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
		overlay 0.36s allow-discrete,
		display 0.36s allow-discrete;
}

dialog[open] {
	opacity: 1;
	transform: none;
}

@starting-style {
	dialog[open] {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
}

dialog::backdrop {
	opacity: 0;
	transition:
		opacity 0.28s ease,
		overlay 0.36s allow-discrete,
		display 0.36s allow-discrete;
}

dialog[open]::backdrop {
	opacity: 1;
}

@starting-style {
	dialog[open]::backdrop {
		opacity: 0;
	}
}

/* 「動きを減らす」設定でも止めきらず、濃さだけを短く。
   LP側の `*{transition:none!important}` を上書きする */
@media (prefers-reduced-motion: reduce) {
	dialog {
		transform: none;
		transition:
			opacity 0.15s linear,
			overlay 0.15s allow-discrete,
			display 0.15s allow-discrete !important;
	}

	dialog::backdrop {
		transition:
			opacity 0.15s linear,
			overlay 0.15s allow-discrete,
			display 0.15s allow-discrete !important;
	}

	@starting-style {
		dialog[open] {
			transform: none;
		}
	}
}


/* ==========================================================================
   印刷・動きを減らす設定
   ========================================================================== */

@media print {
	.kj-motion [data-kj-reveal],
	.kj-motion [data-kj-reveal] > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.kj-motion [data-kj-reveal]::after {
		display: none !important;
	}
}