/*
 * むすびや：トップページ スクロール連動アニメーション（見た目の値は既存デザインを一切変えない）
 *
 * 方針
 *  - 初期の非表示（透明化）は html.msb-anim が付いているときだけ効く。
 *    JS が動かない環境では class が付かないので、内容は今まで通りそのまま見える。
 *  - 既存の `.musubiya-section-block [data-fade]{opacity:1!important}` を上書きする必要があるため、
 *    こちら側も !important ＋より高い詳細度（html.msb-anim ...）で指定している。
 *  - 動かすのは transform / opacity のみ。レイアウト（余白・サイズ・色）には触れない。
 */

html.msb-anim [data-msb-a] {
	opacity: 0 !important;
	transition-property: opacity, transform;
	transition-duration: 1.8s;
	/* すっと動いて、最後にゆっくり止まる（じわっと沁みる感じ） */
	transition-timing-function: cubic-bezier(0.16, 0.7, 0.2, 1);
	will-change: opacity, transform;
}

/* 表示後 */
html.msb-anim [data-msb-a].is-inview {
	opacity: 1 !important;
	transform: none !important;
	will-change: auto;
}

/* --- 動きの種類 --- */
html.msb-anim [data-msb-a='up'] {
	transform: translate3d(0, 28px, 0) !important;
}
html.msb-anim [data-msb-a='up-sm'] {
	transform: translate3d(0, 16px, 0) !important;
}
html.msb-anim [data-msb-a='left'] {
	transform: translate3d(-36px, 0, 0) !important;
}
html.msb-anim [data-msb-a='right'] {
	transform: translate3d(36px, 0, 0) !important;
}
html.msb-anim [data-msb-a='zoom'] {
	transform: scale(1.08) !important;
	transition-duration: 2.6s;
}
html.msb-anim [data-msb-a='rise'] {
	transform: translate3d(0, 40px, 0) !important;
	transition-duration: 2.0s;
}
/* 罫線・数字などの伸びる演出 */
html.msb-anim [data-msb-a='grow-x'] {
	transform: scaleX(0) !important;
	transform-origin: left center;
	transition-duration: 1.8s;
}
html.msb-anim [data-msb-a='grow-y'] {
	transform: scaleY(0) !important;
	transform-origin: center top;
	transition-duration: 1.8s;
}

/* 画像のズーム時に枠外へはみ出さないようにする（見た目の値は変えない） */
html.msb-anim .msb-a-clip {
	overflow: hidden;
}

/* 順番に現れる遅延（JS が data-msb-d に 0〜11 を入れる） */
html.msb-anim [data-msb-d='1'] { transition-delay: 0.22s; }
html.msb-anim [data-msb-d='2'] { transition-delay: 0.44s; }
html.msb-anim [data-msb-d='3'] { transition-delay: 0.66s; }
html.msb-anim [data-msb-d='4'] { transition-delay: 0.88s; }
html.msb-anim [data-msb-d='5'] { transition-delay: 1.10s; }
html.msb-anim [data-msb-d='6'] { transition-delay: 1.32s; }
html.msb-anim [data-msb-d='7'] { transition-delay: 1.54s; }
html.msb-anim [data-msb-d='8'] { transition-delay: 1.76s; }
html.msb-anim [data-msb-d='9'] { transition-delay: 1.98s; }
html.msb-anim [data-msb-d='10'] { transition-delay: 2.20s; }
html.msb-anim [data-msb-d='11'] { transition-delay: 2.42s; }

/* 動きを減らす設定のユーザーには一切アニメーションしない */
@media (prefers-reduced-motion: reduce) {
	html.msb-anim [data-msb-a],
	html.msb-anim [data-msb-a].is-inview {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		transition-delay: 0s !important;
	}
}

/* ==== 「画像なし」プレースホルダーの見た目（全箇所共通） ====
 * 実体の無い写真は img-placeholder.svg に差し替えられる（PHP: musubiya_he_fill_missing_images）。
 * 差し替え先の枠は写真用の bg-cover / object-cover のままなので、そのままだと
 * カメラのアイコンが枠いっぱいに引き伸ばされて崩れる。ここで等倍・中央表示に矯正する。
 * 枠線は付けない（背景画像で差し替わる箇所には枠が無いため、見た目をそちらに揃える）。 */
img[src*="img-placeholder.svg"] {
	object-fit: scale-down !important;
	background-color: #e6e4e1 !important;
	border: 0 !important;
}
[style*="img-placeholder.svg"] {
	background-size: auto !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: #e6e4e1 !important;
}