/* ============================================================
MOTION LAYER — BASARA GROUP shared motion / 3D presentation
------------------------------------------------------------
再利用可能な「上品に動く」演出レイヤー（全サイト横展開用）
Reusable, opt-in motion utilities. Pair with motion.js.
── 使い方 / How to use ─────────────────────────────────────
1) 既存CSSの後ろで読み込む:
← after site.css
2) 既存JSの後ろで読み込む:
← after site.js
3) HTMLに data 属性を付けるだけで効きます（下の各節を参照）。
── 設計方針 / Principles ───────────────────────────────────
• 上品・控えめ寄りの標準（派手/過剰にしない）。角度・距離・速度は浅め。
• すべて opt-in。属性が無い要素は一切変化しません。
• JSが無い / prefers-reduced-motion / 低負荷モバイル → 自動で静的表示。
• CLS(レイアウトシフト)ゼロ：transform と opacity だけを動かし、
要素のボックス(領域)は最初から確保されたまま。
• motion.js が に .mo-ready（+ .mo-fine）を付与して初めて発火。
→ JS未実行や無効化時は素の静的レイアウトのまま。
グローバル調整トークン（サイトごとに :root で上書き可）:
--mo-dur : 既定の登場アニメ時間 (default .7s / 控えめ)
--mo-ease : 既定のイージング
============================================================ */
:root{
--mo-dur: .7s; /* 上品：短め */
--mo-ease: cubic-bezier(.22,1,.36,1); /* 滑らかに減速 */
}
/* ============================================================
1. SCROLL REVEAL — 登場（フェード / スライド / スケール）
------------------------------------------------------------
使い方:
…
上に少しスライド＋フェード
値: up | down | left | right | zoom | fade
任意:
data-mo-delay="120" 遅延(ms) 例: 連続カードのstagger
data-mo-duration="600" 個別の時間(ms)
※ 距離は控えめ(24px / scale .96)。CLSを出さないため transform のみ。
※ 既に自前のreveal機構を持つサイトでは、無い要素にだけ足せばOK。
============================================================ */
.mo-ready [data-mo-reveal]{
opacity:0;
transition:opacity var(--mo-dur) var(--mo-ease),
transform var(--mo-dur) var(--mo-ease);
transition-delay:var(--mo-delay,0s);
will-change:opacity,transform;
}
.mo-ready [data-mo-reveal="up"] {transform:translate3d(0,24px,0);}
.mo-ready [data-mo-reveal="down"] {transform:translate3d(0,-24px,0);}
.mo-ready [data-mo-reveal="left"] {transform:translate3d(-28px,0,0);}
.mo-ready [data-mo-reveal="right"]{transform:translate3d(28px,0,0);}
.mo-ready [data-mo-reveal="zoom"] {transform:scale(.96);}
.mo-ready [data-mo-reveal="fade"] {transform:none;}
.mo-ready [data-mo-reveal].mo-in {opacity:1;transform:none;}
/* ============================================================
2. 3D TILT — カード/画像のごく浅い立体傾き（マウス追従）
------------------------------------------------------------
使い方:
…
任意:
data-mo-tilt-max="4" 最大傾き角(deg) ※既定4°の控えめ
data-mo-glare ハイライトの光沢(任意・淡い)
• マウス(pointer:fine)環境のみ作動。スマホ等の coarse pointer では無効。
• motion.js が CSS変数 --mo-rx / --mo-ry / --mo-gx / --mo-gy を更新。
============================================================ */
[data-mo-tilt]{--mo-rx:0deg;--mo-ry:0deg;--mo-gx:50%;--mo-gy:50%;}
.mo-ready.mo-fine [data-mo-tilt]{
transform:perspective(var(--mo-persp,1000px))
rotateX(var(--mo-rx,0deg)) rotateY(var(--mo-ry,0deg));
transform-style:preserve-3d;
transition:transform .5s var(--mo-ease); /* 指を離すとふわっと戻る */
will-change:transform;
}
/* 追従中は素早く、離すとゆっくり戻る */
.mo-ready.mo-fine [data-mo-tilt].mo-tilting{transition:transform .12s ease-out;}
/* 光沢(glare)：淡いソフトライト。過剰にしない */
[data-mo-glare]{position:relative;}
.mo-ready.mo-fine [data-mo-glare]::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
background:radial-gradient(circle at var(--mo-gx,50%) var(--mo-gy,50%),
rgba(255,255,255,.28),transparent 46%);
opacity:0;transition:opacity .4s var(--mo-ease);mix-blend-mode:soft-light;
}
.mo-ready.mo-fine [data-mo-glare].mo-tilting::after{opacity:1;}
/* ============================================================
3. PARALLAX — 背景/装飾レイヤーの奥行き（スクロール連動・抑制的）
------------------------------------------------------------
使い方:
…
値 = 速度係数(0〜0.3程度を推奨。既定0.1・控えめ)。正=ゆっくり上へ。
※ transform の Y移動のみ。JSが translate3d を適用します。
※ pre-existing transform を持つ要素には付けない（上書き衝突回避）。
============================================================ */
.mo-ready [data-mo-parallax]{will-change:transform;}
/* ============================================================
4. HERO AMBIENT — ヒーローの環境演出（軽量Canvas：光の揺らぎ）
------------------------------------------------------------
使い方（ヒーロー内に空のホストを1つ置く）:
値(プリセット): night | day （色調のみ変更。粒子/光の量は自動で控えめ）
任意:
data-mo-parallax="0.06" さらに奥行きを付けたい場合に併用可
• motion.js が