@charset "UTF-8";
/*
 * animations.css
 * IntersectionObserver と連動するスクロールアニメーション定義
 * JS（common.js）で .is-visible クラスを付与することで発火する
 *
 * @package ds-basketballclub-2026
 */

/* =============================================
   共通設定
   ============================================= */

/* アニメーション対象要素の初期状態 */
.fade-in,
.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right {
	opacity: 0;
	/* モーション低減設定への配慮 */
}

/* モーション低減を希望するユーザーへの配慮:
   大きな移動（translate）は無効化するが、控えめなopacityフェードは残す。
   WCAG上もopacityフェードは問題にならず（抑制対象は大きな動き・パララックス・点滅）、
   完全停止より「全ユーザーで最低限ふわっと表示される」方が体験が揃う */
@media (prefers-reduced-motion: reduce) {
	.fade-in,
	.fade-in-up,
	.fade-in-down,
	.fade-in-left,
	.fade-in-right {
		transform: none;
		transition: opacity 1s ease-out;
	}
}

/* =============================================
   フェードイン（その場で表示）
   ============================================= */
.fade-in {
	transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in.is-visible {
	opacity: 1;
}

/* =============================================
   フェードインアップ（下から上へ）
   ============================================= */
.fade-in-up {
	transform: translateY(80px);
	transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* =============================================
   フェードインダウン（上から下へ）
   ============================================= */
.fade-in-down {
	transform: translateY(-80px);
	transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-down.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* =============================================
   フェードインレフト（右から左へ）
   ============================================= */
.fade-in-left {
	transform: translateX(80px);
	transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-left.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* =============================================
   フェードインライト（左から右へ）
   ============================================= */
.fade-in-right {
	transform: translateX(-80px);
	transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-right.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* =============================================
   遅延クラス（連続アニメーション用）
   ============================================= */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* =============================================
   TOPメイン リード文の2段スタッガー演出
   親(.sec-lead-stagger)が画面に入ると .is-visible が付き、
   子(キャッチ→本文)が時間差で「下からふわっと」順番に立ち上がる。
   PC/SP共通（横移動を使わないためSPでも横ズレなし）
   ============================================= */
/* 初期状態は非表示（下に40px）。transitionではなく@keyframesのanimationで確実に再生する
   （transitionはSafari等で「変化前の状態を描画する前にis-visibleが付く」と途中経過を飛ばして
   パッと出てしまうことがある。animationは0%→100%を必ず通るため、SP含め確実にふわっと出る＝SOWA方式） */
.sec-lead-stagger__item {
	opacity: 0;
}

@keyframes sec-lead-fade-up {
	0%   { opacity: 0; transform: translateY(40px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* 親が画面に入ったら子をanimationで順番に再生。キャッチ→本文の間に約0.7sのタメ。
   forwardsで再生後の状態（表示）を保持 */
.sec-lead-stagger.is-visible .sec-lead-stagger__item--1 {
	/* both: 再生前はopacity:0（0%状態）を保持、再生後は表示（100%状態）を保持 */
	animation: sec-lead-fade-up 1.3s ease-out 0.1s both;
}

.sec-lead-stagger.is-visible .sec-lead-stagger__item--2 {
	animation: sec-lead-fade-up 1.3s ease-out 0.8s both;
}


/* =============================================
   SP：translateX を無効化（横方向のみ）
   translateY は維持してふわっと表示を実現
   ============================================= */
@media screen and (max-width: 768px) {
	.fade-in-left,
	.fade-in-right {
		transform: none;
		transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.fade-in-left.is-visible,
	.fade-in-right.is-visible {
		opacity: 1;
		transform: none;
	}

	/* MEMBERカード（横スクロールコンテナ内・アーカイブグリッド内）はtransformを無効化 */
	.member-grid-outer .fade-in-up,
	.member-grid-outer .fade-in-down,
	.member-grid .fade-in-up,
	.member-grid .fade-in-down {
		transform: none;
		transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.member-grid-outer .fade-in-up.is-visible,
	.member-grid-outer .fade-in-down.is-visible,
	.member-grid .fade-in-up.is-visible,
	.member-grid .fade-in-down.is-visible {
		opacity: 1;
		transform: none;
	}
}