/* motion-kit.css — motion-kit.js と対。色はページ側の変数を使う（--mk-ink / --mk-paper / --mk-accent を上書き可） */
:root { --mk-ink: #16212a; --mk-paper: #f5f1e9; --mk-accent: #c85f50; --mk-line: #d9d1c6; --mk-ease: cubic-bezier(.19,1,.22,1); }

/* [1] 画面に入ったら出す（JS が動いた時だけ隠す＝JS が落ちても読める） */
.mk-js [data-reveal] { transition: opacity 1s var(--mk-ease), transform 1.1s var(--mk-ease), clip-path 1.3s var(--mk-ease), filter 1s var(--mk-ease); }
.mk-js [data-reveal="up"]:not(.mk-in) { opacity: 0; transform: translateY(28px); }
.mk-js [data-reveal="fade"]:not(.mk-in) { opacity: 0; filter: blur(6px); }
.mk-js [data-reveal="clip"]:not(.mk-in) { clip-path: inset(0 0 100% 0); }
.mk-js [data-reveal="side"]:not(.mk-in) { clip-path: inset(0 100% 0 0); }

/* [3] パララックス用の枠: 中の画像を少し大きくしておく（動いても端が見えない） */
.mk-frame { overflow: hidden; position: relative; }
.mk-frame > [data-parallax] { will-change: transform; }

/* [4] カーソルの光（要素に data-pointer-light と .mk-light） */
.mk-light { position: relative; isolation: isolate; }
.mk-light::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), var(--mk-light, rgba(200,95,80,.13)), transparent 62%);
  transition: background .2s; }

/* [5][6] 奥行き・吸い寄せ */
[data-depth-layer], [data-magnetic] { transition: translate .6s var(--mk-ease); }

/* [7] 横に流れる帯 */
[data-marquee] { overflow: hidden; position: relative; touch-action: pan-y; cursor: grab; user-select: none; }
[data-marquee].mk-dragging { cursor: grabbing; }
/* 乗せたときだけ出る案内（隠し操作に気づかせる） */
[data-marquee]::after { content: attr(data-hint); position: absolute; right: 16px; top: 12px; pointer-events: none;
  background: rgba(22,33,42,.78); color: #fff; font-size: 12px; letter-spacing: .08em; padding: 5px 12px; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
[data-marquee].mk-hold::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-marquee] { overflow-x: auto; } }
.mk-track { display: flex; gap: var(--mk-gap, 24px); width: max-content; will-change: transform; }

/* [9] 縦書きの小さな見出し（宝善亭の型）: <span class="mk-vlabel">お悩み</span> */
.mk-vlabel { writing-mode: vertical-rl; display: inline-block; font-family: var(--mk-mincho, "Shippori Mincho B1", serif);
  font-size: 12px; letter-spacing: .32em; padding: 12px 7px; border: 1px solid currentColor; line-height: 1; }

/* [10] 背景に置く大きな英字（薄く・少し流れる） */
.mk-ghost { position: absolute; pointer-events: none; font-family: var(--mk-mincho, "Shippori Mincho B1", serif); font-weight: 400;
  font-size: clamp(90px, 16vw, 230px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(22,33,42,.10); white-space: nowrap; user-select: none; }

/* [8] 浮いたナビ（画面下中央・宝善亭の型） */
[data-float-nav] { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40;
  transform: translate(-50%, 140%); opacity: 0; transition: transform .6s var(--mk-ease), opacity .4s; }
[data-float-nav].mk-show { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mk-js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none; }
}