# ThemeMotion — 動画ヒーロー & モーションテーマ

若い世代向けのハイエンドなフロントテーマです。
オフブラック × オフホワイト × ビビッドライムの抑制された3色、Zen Kaku Gothic New の大胆なタイポグラフィ、
フルスクリーン動画ヒーロー、スクロール演出（フェードイン / パララックス / スライダー / カウントアップ）を備えます。

## 有効化

管理画面 **[テーマ]** から「Motion（動画ヒーロー・ハイエンド）」を選択するだけです
（プラグインは自動ロードされます。コアの変更は不要）。

## 構成

```
ThemeMotion/
├── Config/bootstrap.php        テーマ登録（CSS/JS リソース）
├── Lib/MotionLayout.php        ページ別レイアウト設定の正規化
├── View/
│   ├── Layouts/default.ctp     レイアウト本体（ヒーロー/ヘッダー/フッター/固定バー）
│   ├── Display/{show,blog,entry,404}.ctp
│   └── Elements/entry.ctp      記事カード / 記事本文
└── webroot/
    ├── css/theme.css           テーマCSS（bk-系ブロック対応込み）
    ├── js/theme.js             演出JS（依存なし Vanilla JS）
    ├── videos/hero.mp4         既定のヒーロー動画（10秒ループ・約0.5MB）
    ├── images/hero-poster.jpg  モバイル/読込前のポスター画像
    └── _meta/screen.png        テーマ一覧サムネイル
```

## 動画ヒーローについて

- **トップページ**（name=index）で自動的にフルスクリーン動画ヒーローが表示されます。
  サイト名とキャッチコピー（管理画面 [設定 > サイト設定]）が動画の上に重なります。
- ページに **BlockHero** ブロックが置かれている場合はそちらを優先し、テーマのヒーローは出しません。
- **モバイルでは通信量に配慮**し、ポスター画像を表示したうえで、ヒーローが画面内にある間だけ
  動画を読み込み・再生します（`prefers-reduced-motion` やデータセーバー有効時は動画を読み込みません）。

### 動画の差し替え方法（2通り）

1. **ファイル差し替え（推奨）**
   `app/Plugin/ThemeMotion/webroot/videos/hero.mp4` を任意の mp4（H.264 / 音声なし / 2MB以下推奨）に置き換え、
   あわせて `webroot/images/hero-poster.jpg` も差し替えます。

2. **管理画面から（コード変更なし）**
   メディアライブラリに mp4 をアップロードし、トップページに **コード（BlockCode）** ブロックを追加して
   次の1行を貼り付けます（公開側には何も表示されません）:

   ```html
   <div data-motion-hero-src="/files/xxxxxxxx.mp4" hidden></div>
   ```

   theme.js がこの属性を見つけると、ヒーロー動画の src をその URL に差し替えます。

## 追加の演出タグ（任意）

- **数字カウントアップ**: `<span data-mo-count="1200">0</span>`
  → 画面に入るとカウントアップ（コード/テキストブロック内で使用可）。
- **パララックス**: 任意の要素に `data-mo-parallax="0.15"`
  → 縦スクロールでゆっくり追従します（数値は速度・省略時 0.12）。
- **画像スライダー**: 写真ギャラリーブロック（5枚以上）は自動で
  スワイプ対応スライダー（自動再生＋ドット）になります。

## レイアウト

- 管理画面 [テーマ > ページ別レイアウト] の 1 / 2 / 3 カラム設定・コンテナ幅・
  デバイス別表示・スマホ並び順に対応（デフォルトは LP 向きの 1 カラム）。
- 1 カラムページでは BlockHero が自動で全幅（フルブリード）になり、
  「ヒーロー → 特徴 → ギャラリー → CTA」をブロックの積み上げだけで LP として組めます。

## モバイル固定フッターバー

サイト設定の **TEL**、メニュー内の **お問い合わせ / 予約** ページ（タイトルから自動検出）が
固定バーとして表示されます。設定が無い項目は自動で非表示、1つも無ければバー自体が出ません。
iOS セーフエリア（`env(safe-area-inset-bottom)`）対応。PC では表示されません。

## アクセシビリティ / 品質

- `prefers-reduced-motion: reduce` で全アニメーション無効化
- ハンバーガー: `aria-expanded` / Esc で閉じる / フォーカストラップ / タップ領域 44px+
- WCAG AA コントラスト・セマンティック HTML・`loading="lazy"`・OGP / JSON-LD
- 編集モード（EDITTING）では演出を停止し、ブロック編集を妨げません
