/*
 * 会員プロフィールと活動実績のページ（/introduce/data/）の登場演出。
 *
 * 写し元: legacy/www.p-a.jp/public/introduce/data/assets/css/animations.css
 *
 * 写し元は 71 種の演出を持つ汎用の部品集だが、このページが本文で使うのは
 * 次の 8 つだけである（本文の class 属性を数え上げて確認した）。
 *
 *   animated / slow / fadeIn / flipInY /
 *   fadeInUpShort / fadeInDownShort / fadeInLeftShort / fadeInRightShort
 *
 * 使わない 63 種は持ち込まない。写し元の 38,824 バイトのうち、必要なのは
 * この範囲だけである。
 *
 * **仕組み**: 対象の要素は最初 `opacity: 0` で見えない。画面に入ったときに
 * JavaScript（assets/introduce-data/js/introduce-data.js）が `go` を足し、
 * そこで初めて演出が始まる。したがって **この CSS だけを入れると本文が
 * 見えなくなる。** 必ず JavaScript と対で読み込む。
 *
 * 移行元も同じ引き換え条件を持っていた（JavaScript が動かないと対象要素が
 * 見えない）。トップページの登場演出を作り直したときと同じ判断で、忠実に
 * 写す方針としてこれを踏襲する（assets/js/front-page.js の冒頭の説明）。
 *
 * クラス名（animated / go / fadeIn 等）は一般的で、テーマの他の指定と
 * 衝突しうる。読み込むのはこのページだけだが、念のためすべての
 * セレクタを本文の中（.page-content .page-content__body）へ閉じ込めてある。
 */

.page-content .page-content__body .animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

.page-content .page-content__body .slow {
	animation-duration: 1.5s;
	animation-fill-mode: both;
}

/* --- 淡く現れる --- */

@keyframes paIntroduceDataFadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.page-content .page-content__body .fadeIn {
	opacity: 0;
}

.page-content .page-content__body .fadeIn.go {
	animation-name: paIntroduceDataFadeIn;
}

/* --- 縦軸で回りながら現れる --- */

@keyframes paIntroduceDataFlipInY {
	0% {
		transform: perspective(400px) rotateY(90deg);
		opacity: 0;
	}

	40% {
		transform: perspective(400px) rotateY(-10deg);
	}

	70% {
		transform: perspective(400px) rotateY(10deg);
	}

	100% {
		transform: perspective(400px) rotateY(0deg);
		opacity: 1;
	}
}

.page-content .page-content__body .flipInY {
	opacity: 0;
}

.page-content .page-content__body .flipInY.go {
	backface-visibility: visible !important;
	animation-name: paIntroduceDataFlipInY;
}

/* --- 20px ずれた位置から淡く現れる（上下左右の 4 方向） --- */

@keyframes paIntroduceDataFadeInUpShort {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.page-content .page-content__body .fadeInUpShort {
	opacity: 0;
	transform: translateY(20px);
}

.page-content .page-content__body .fadeInUpShort.go {
	animation-name: paIntroduceDataFadeInUpShort;
}

@keyframes paIntroduceDataFadeInDownShort {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.page-content .page-content__body .fadeInDownShort {
	opacity: 0;
	transform: translateY(-20px);
}

.page-content .page-content__body .fadeInDownShort.go {
	animation-name: paIntroduceDataFadeInDownShort;
}

@keyframes paIntroduceDataFadeInRightShort {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.page-content .page-content__body .fadeInRightShort {
	opacity: 0;
	transform: translateX(20px);
}

.page-content .page-content__body .fadeInRightShort.go {
	animation-name: paIntroduceDataFadeInRightShort;
}

@keyframes paIntroduceDataFadeInLeftShort {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.page-content .page-content__body .fadeInLeftShort {
	opacity: 0;
	transform: translateX(-20px);
}

.page-content .page-content__body .fadeInLeftShort.go {
	animation-name: paIntroduceDataFadeInLeftShort;
}

/*
 * --- 円グラフの開く動きは、この CSS では持たない（Bug #3103） ---
 *
 * 2026-09-03 まで、ここには円グラフ専用の覆い（mask）を動かす規則があった。覆いは
 * 絵を最終角度に固定したまま根元から見せる仕掛けなので、**開く途中で赤と青の境目が
 * 動かず、2 枚の扇の間にすき間が空いていた**（移行元は境目も 0 度から 194.4 度へ
 * 動く）。
 *
 * いまは assets/introduce-data/js/introduce-data.js が扇の `<path>` の `d` を毎
 * フレーム描き直す。動きは JavaScript が持つので、この CSS に円グラフ専用の規則は
 * 1 つも要らない。**覆いを動かす規則を足し戻さないこと**（覆いの仕掛けは廃止した）。
 */

/*
 * 動きを減らす設定にしている利用者には演出を出さず、最初から見える状態にする
 * （移行元にはこの配慮が無い。動かない環境で中身が読めなくなるのを防ぐため、
 * dev 側で足す）。
 *
 * 円グラフはここに書かなくてよい。inc/introduce-data.php が出すのは開き終わった
 * 形そのもので、JavaScript は動きを減らす設定のとき `d` を 1 度も触らないため、
 * 最初から完成形が出る（Bug #3089 の振る舞いを、覆いを捨てたあとも保つ）。
 */
@media (prefers-reduced-motion: reduce) {
	.page-content .page-content__body .animated,
	.page-content .page-content__body .fadeIn,
	.page-content .page-content__body .flipInY,
	.page-content .page-content__body .fadeInUpShort,
	.page-content .page-content__body .fadeInDownShort,
	.page-content .page-content__body .fadeInRightShort,
	.page-content .page-content__body .fadeInLeftShort {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}