/*
 * 2026-10-22 動き（鈴木さん「動きが欲しかった。いろんな場所で」）
 *
 * 1. カードが順に出てくる：節が画面に入ったら（reveal.js が .is-visible を付ける）、中のカードを
 *    90msずつずらして下からふわっと出す。隠すのは .motion-ready（＝JSが動いた）ときだけなので、
 *    JSが止まっても読めなくなることはない。動きを減らす設定の人は reveal.js が最初から全部出す
 * 2. 触ったときの反応：カードは少し浮いて影が深くなる。ボタンは矢印が右へ動く
 * 3. 紺の帯の光がゆっくり漂う
 * ⚠️ 自動で横に流れているもの（声のカード・ショート動画・講師の縦の帯）は対象外。もう動いている
 */

/* ── 1. カードが順に出てくる ── */
@media (prefers-reduced-motion: no-preference) {
	.motion-ready .reveal-target :is(
		.proof-grid > article,
		.offers-split > article,
		.course-track > a,
		.report-track > a,
		.founders-grid > article,
		.ccx-benefits > div,
		.ccx-report-row > article,
		.ccx-screen-cards > span,
		.ccx-section > div > article,
		.ccx-zemi-track > a,
		.cnx3-section > div > article,
		.cnx-job-track > article,
		.cnx-quadrant-grid > article,
		.biz-ladder-grid > article,
		.biz-training-cases > article,
		.biz-consultation-grid > *,
		.contact-intro > div > article
	) {
		opacity: 0;
		translate: 0 26px;
		transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1);
	}

	.motion-ready .reveal-target.is-visible :is(
		.proof-grid > article,
		.offers-split > article,
		.course-track > a,
		.report-track > a,
		.founders-grid > article,
		.ccx-benefits > div,
		.ccx-report-row > article,
		.ccx-screen-cards > span,
		.ccx-section > div > article,
		.ccx-zemi-track > a,
		.cnx3-section > div > article,
		.cnx-job-track > article,
		.cnx-quadrant-grid > article,
		.biz-ladder-grid > article,
		.biz-training-cases > article,
		.biz-consultation-grid > *,
		.contact-intro > div > article
	) {
		opacity: 1;
		translate: none;
	}

	/* 90msずつずらす（カードだけ。ほかの要素の動きは遅らせない）。6枚目以降は画面の外なので、まとめて出す */
	.motion-ready .reveal-target.is-visible :is(
		.proof-grid > article, .offers-split > article, .course-track > a, .report-track > a, .founders-grid > article,
		.ccx-benefits > div, .ccx-report-row > article, .ccx-screen-cards > span, .ccx-section > div > article,
		.ccx-zemi-track > a, .cnx3-section > div > article, .cnx-job-track > article, .cnx-quadrant-grid > article,
		.biz-ladder-grid > article, .biz-training-cases > article, .biz-consultation-grid > *, .contact-intro > div > article
	):nth-child(2) { transition-delay: 90ms; }
	.motion-ready .reveal-target.is-visible :is(
		.proof-grid > article, .offers-split > article, .course-track > a, .report-track > a, .founders-grid > article,
		.ccx-benefits > div, .ccx-report-row > article, .ccx-screen-cards > span, .ccx-section > div > article,
		.ccx-zemi-track > a, .cnx3-section > div > article, .cnx-job-track > article, .cnx-quadrant-grid > article,
		.biz-ladder-grid > article, .biz-training-cases > article, .biz-consultation-grid > *, .contact-intro > div > article
	):nth-child(3) { transition-delay: 180ms; }
	.motion-ready .reveal-target.is-visible :is(
		.proof-grid > article, .offers-split > article, .course-track > a, .report-track > a, .founders-grid > article,
		.ccx-benefits > div, .ccx-report-row > article, .ccx-screen-cards > span, .ccx-section > div > article,
		.ccx-zemi-track > a, .cnx3-section > div > article, .cnx-job-track > article, .cnx-quadrant-grid > article,
		.biz-ladder-grid > article, .biz-training-cases > article, .biz-consultation-grid > *, .contact-intro > div > article
	):nth-child(4) { transition-delay: 270ms; }
	.motion-ready .reveal-target.is-visible :is(
		.proof-grid > article, .offers-split > article, .course-track > a, .report-track > a, .founders-grid > article,
		.ccx-benefits > div, .ccx-report-row > article, .ccx-screen-cards > span, .ccx-section > div > article,
		.ccx-zemi-track > a, .cnx3-section > div > article, .cnx-job-track > article, .cnx-quadrant-grid > article,
		.biz-ladder-grid > article, .biz-training-cases > article, .biz-consultation-grid > *, .contact-intro > div > article
	):nth-child(5) { transition-delay: 360ms; }
	.motion-ready .reveal-target.is-visible :is(
		.proof-grid > article, .offers-split > article, .course-track > a, .report-track > a, .founders-grid > article,
		.ccx-benefits > div, .ccx-report-row > article, .ccx-screen-cards > span, .ccx-section > div > article,
		.ccx-zemi-track > a, .cnx3-section > div > article, .cnx-job-track > article, .cnx-quadrant-grid > article,
		.biz-ladder-grid > article, .biz-training-cases > article, .biz-consultation-grid > *, .contact-intro > div > article
	):nth-child(n+6) { transition-delay: 450ms; }
}

/* ── 2. 触ったときの反応 ── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.site-shell :is(
		.course-card, .report-card, .ccx-zemi, .cnx-job-track > article, .cnx-quadrant-grid > article,
		.offers-split > article, .reason-grid > article, .founders-grid > article, .biz-consultation-grid > *,
		.contact-intro > div > article, .faq-list > details, .faq-category-nav > a
	) {
		transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, opacity .7s ease;
	}
	.site-shell :is(
		.course-card, .report-card, .ccx-zemi, .cnx-job-track > article, .cnx-quadrant-grid > article,
		.offers-split > article, .reason-grid > article, .founders-grid > article, .biz-consultation-grid > *,
		.contact-intro > div > article, .faq-list > details, .faq-category-nav > a
	):hover {
		translate: 0 -5px;
		box-shadow: 0 18px 38px rgb(64 38 30 / 12%);
		transition-delay: 0s;
	}

	/* ボタン：最後の矢印（→ ↗ ↓）が少し動く */
	.site-shell :is(.button, .cta, .ccx-button, .cnx-button, .nav-cta) > :is(span, b):last-child {
		display: inline-block;
		transition: translate .3s cubic-bezier(.2, .7, .2, 1);
	}
	.site-shell :is(.button, .cta, .ccx-button, .cnx-button, .nav-cta):hover > :is(span, b):last-child { translate: 5px 0; }
}

/* ── 3. 紺の帯の光がゆっくり漂う ── */
@keyframes motion-glow-drift {
	0% { background-position: 0% 0%, 100% 100%, 0 0; }
	50% { background-position: 30% 20%, 70% 80%, 0 0; }
	100% { background-position: 0% 0%, 100% 100%, 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
	.site-shell .story-collage {
		background-size: 140% 140%, 140% 140%, auto;
		animation: motion-glow-drift 26s ease-in-out infinite;
	}
}