/* ============================================================
   motion-kit.css  v0.1（2026-09-06）
   正本：00_クリエイティブ部署/design_system/knowledge/motion.md §10
   役割：動きのトークン（速さ・緩急）・動きを減らす設定の分岐・語彙の下地
   使い方：ブランドの色・書体は各サイトの CSS が持つ。ここは「動き」だけ。
   ============================================================ */
:root{
  /* トークン（ui-ux-pro-max motion.csv 準拠） */
  --mk-fast:.3s;  --mk-base:.6s;  --mk-slow:1.2s;
  --mk-ease:cubic-bezier(.16,1,.3,1);        /* expo.out 相当 */
  --mk-ease-io:cubic-bezier(.65,0,.35,1);    /* power2.inOut 相当 */
  --mk-stagger:50ms;
}

/* ---- 動きを減らす設定の人には、最初から静止版を出す ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mk-cursor{display:none!important}
}

/* ---- JS が有効化されるまでは要素を隠さない（JS 無しでも読める） ----
   .mk-on が html に付いた時だけ、入場前の状態を作る */
html.mk-on [data-mk="words"],
html.mk-on [data-mk="lines"],
html.mk-on [data-mk="stagger"] > *,
html.mk-on [data-mk="rise"]{visibility:hidden}
html.mk-on .mk-ready{visibility:visible}

/* ---- V6 単語単位の入場：はみ出しを隠す箱 ---- */
.mk-w{display:inline-block;will-change:transform,opacity}
[data-mk="words"],[data-mk="lines"]{overflow:hidden}

/* ---- V4 画面幅いっぱいの巨大文字 ---- */
.mk-huge{font-size:clamp(64px,13vw,220px);line-height:.92;letter-spacing:-.03em;font-weight:800;
  white-space:nowrap;margin:0;will-change:transform}
.mk-huge--fit{font-size:clamp(48px,11.5vw,200px)}

/* ---- V5 左右交互（奇数は左寄せ・偶数は右寄せ） ---- */
.mk-alt > *{margin:0}
.mk-alt > :nth-child(even){text-align:right}

/* ---- V9 角丸パネルで章を色反転 ---- */
.mk-panel{border-radius:clamp(18px,3vw,40px);padding:clamp(56px,8vw,120px) clamp(20px,5vw,72px);
  background:var(--mk-panel-bg,#111);color:var(--mk-panel-fg,#fff)}

/* ---- V10 ピン留め（sticky）＋段の切替 ---- */
.mk-pin{position:relative}
.mk-pin__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.mk-pin__step{grid-area:1/1;opacity:0;will-change:opacity,transform}
.mk-pin__step.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .mk-pin__stage{position:static;height:auto;display:block}
  .mk-pin__step{opacity:1;padding:24px 0}
}

/* ---- V11 横カルーセル（JS 不要・scroll-snap） ---- */
.mk-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mk-rail::-webkit-scrollbar{display:none}
.mk-rail > *{flex:0 0 min(78vw,520px);scroll-snap-align:start;border-radius:24px;overflow:hidden}

/* ---- V12 カスタムカーソル（PCのみ・JSが生成） ---- */
.mk-cursor{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;
  background:var(--mk-cursor,#111);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:width var(--mk-fast) var(--mk-ease),height var(--mk-fast) var(--mk-ease),opacity var(--mk-fast)}
.mk-cursor.is-hover{width:44px;height:44px;opacity:.35}
html.mk-cursor-on,html.mk-cursor-on a,html.mk-cursor-on button{cursor:none}
@media (max-width:900px){.mk-cursor{display:none!important}}

/* ---- V13 磁力ボタン ---- */
[data-mk-magnetic]{display:inline-block;will-change:transform}

/* ---- V1 映像ヒーロー：poster と mobile の切替下地 ---- */
.mk-hero-media{position:absolute;inset:0;overflow:hidden}
.mk-hero-media video,.mk-hero-media img,.mk-hero-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mk-hero-media img.mk-poster{display:none}
@media (max-width:900px){.mk-hero-media video{display:none}.mk-hero-media img.mk-poster{display:block}}

/* ---- QA 用 fps 表示（本番では外す） ---- */
.mk-fps{position:fixed;right:10px;bottom:10px;z-index:9998;font:600 11px/1 ui-monospace,monospace;
  padding:6px 8px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff;pointer-events:none}