/* ===========================================================
wedelab craft-kit v2 — 共有モーション/仕上げ基盤
目的: 各 showcase が「hero止まり」でなく最後まで finish を保つための土台。
2026-07-24 新設（社長FB「Framerマーケット級の天井に上げる」＝統合案）。
使い方（各 showcase の ）:
HTML側:
data-ck-reveal … 画面に入ったら現れる（既定=下からフェード上げ）
data-ck-reveal="left|right|scale|mask" … 現れ方の種類
data-ck-stagger … 直下の子を順番に出す（親に付ける）
data-ck-parallax="0.2" … スクロール量に対する視差係数（負=逆方向）
data-ck-progress … 自要素の通過進捗を --p(0..1) としてCSS変数に出す
data-ck-magnetic … カーソルに吸い寄る（pointer:fine のみ）
すべて prefers-reduced-motion で自動的に静止（最終状態を即表示）。
⚠ 制約: 外部CDN禁止（このファイルと craftkit.js は同一オリジンの共有資産）。
=========================================================== */
:root{
--ck-ease: cubic-bezier(.22,.61,.36,1);
--ck-ease-out: cubic-bezier(.16,1,.3,1);
--ck-dur: .9s;
}
/* ---------- reveal（現れ方） ---------- */
[data-ck-reveal]{
opacity:0;
transform:translate3d(0, 26px, 0);
transition:
opacity var(--ck-dur) var(--ck-ease-out),
transform var(--ck-dur) var(--ck-ease-out);
will-change:opacity, transform;
}
[data-ck-reveal="left"]{ transform:translate3d(-40px,0,0); }
[data-ck-reveal="right"]{ transform:translate3d(40px,0,0); }
[data-ck-reveal="scale"]{ transform:scale(.94); }
[data-ck-reveal="mask"]{
opacity:1;
transform:none;
clip-path:inset(0 100% 0 0);
transition:clip-path 1.1s var(--ck-ease-out);
}
[data-ck-reveal].ck-in{
opacity:1;
transform:none;
clip-path:inset(0 0 0 0);
}
/* stagger: 子に遅延を配る（--i は JS が付与） */
[data-ck-stagger] > *{ transition-delay:calc(var(--i, 0) * 80ms); }
/* parallax: JS は --ck-py(px) だけを更新し、ここで独立プロパティ translate に適用する。
transform とは別レイヤーなので、要素側の transform:scale(...) 等を壊さずに合成できる。 */
[data-ck-parallax]{ translate:0 var(--ck-py, 0px); will-change:translate; }
/* ---------- grain（粒子オーバーレイ） ---------- */
.ck-grain{
position:fixed; inset:0; z-index:2147483000; pointer-events:none;
opacity:.05; mix-blend-mode:overlay;
background-image:var(--ck-grain-uri);
background-size:180px 180px;
}
@media (prefers-reduced-motion:no-preference){
.ck-grain{ animation:ck-grain-shift 6s steps(6) infinite; }
@keyframes ck-grain-shift{
0%{transform:translate(0,0)} 16%{transform:translate(-4%, 3%)}
33%{transform:translate(2%,-5%)} 50%{transform:translate(-3%,2%)}
66%{transform:translate(4%,4%)} 83%{transform:translate(-2%,-3%)} 100%{transform:translate(0,0)}
}
}
/* ---------- custom cursor（pointer:fine のみ） ---------- */
.ck-cursor, .ck-cursor-dot{
position:fixed; top:0; left:0; z-index:2147483001; pointer-events:none;
border-radius:50%; transform:translate(-50%,-50%);
mix-blend-mode:difference;
}
.ck-cursor{
width:34px; height:34px; border:1.5px solid #fff;
transition:width .25s var(--ck-ease), height .25s var(--ck-ease), background-color .25s, opacity .3s;
}
.ck-cursor-dot{ width:5px; height:5px; background:#fff; }
.ck-cursor.is-hot{ width:56px; height:56px; background:rgba(255,255,255,.14); }
html.ck-has-cursor, html.ck-has-cursor *{ cursor:none !important; }
/* ---------- page-load 幕 ---------- */
.ck-load{
position:fixed; inset:0; z-index:2147483002;
background:var(--ck-load-bg, #0a0a0a); color:var(--ck-load-fg, #fff);
display:grid; place-items:center;
transition:opacity .7s var(--ck-ease), visibility .7s;
}
.ck-load.ck-done{ opacity:0; visibility:hidden; }
.ck-load__bar{ width:200px; height:2px; background:rgba(255,255,255,.18); overflow:hidden; }
.ck-load__bar > span{ display:block; height:100%; width:0; background:currentColor; transition:width .3s linear; }
/* ---------- reduced-motion: すべて静止 ---------- */
@media (prefers-reduced-motion:reduce){
[data-ck-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
[data-ck-parallax]{ translate:none !important; }
.ck-grain{ animation:none; }
.ck-load{ display:none !important; }
.ck-cursor, .ck-cursor-dot{ display:none !important; }
html.ck-has-cursor, html.ck-has-cursor *{ cursor:auto !important; }
}