/* motion-kit.css — web-motion-catalog スキルの演出キット（data属性で付ける）
   使い方は ../SKILL.md。番号（W01など）は SKILL.md の演出カタログと同じ。
   JSが動かないときは全部「最終の見た目」で表示される（html.m-js の時だけ初期状態を隠す） */

:root{
  --m-ease: cubic-bezier(.22,1,.36,1);        /* 滑らかに止まる（既定） */
  --m-ease-back: cubic-bezier(.34,1.56,.64,1); /* M10 オーバーシュート */
  --m-dur: .8s;
  --m-dist: 24px;
  --m-accent: #52bcb1;                         /* スマカクのティール。案件ごとに上書き */
  --m-marker: rgba(255,230,0,.55);
}
html,body{overflow-x:clip} /* hidden は sticky（W03/W04/W05）を壊す */

/* W21 スムーススクロール（ページ内リンク）。<html class="m-smooth"> の時だけ（JSの scrollTo まで滑らかになるため既定では入れない） */
@media (prefers-reduced-motion:no-preference){ html.m-smooth{scroll-behavior:smooth} }

/* ---------- W02 フェードイン／M01 ポップイン／M05 マスクリビール ／M02 スタガー ---------- */
.m-js [data-m="fade"]{opacity:0;transform:translate3d(0,var(--m-dist),0);transition:opacity var(--m-dur) var(--m-ease) var(--m-delay,0s),transform var(--m-dur) var(--m-ease) var(--m-delay,0s)}
.m-js [data-m="fade"][data-m-dir="left"]{transform:translate3d(calc(var(--m-dist)*-1.5),0,0)}
.m-js [data-m="fade"][data-m-dir="right"]{transform:translate3d(calc(var(--m-dist)*1.5),0,0)}
.m-js [data-m="fade"][data-m-dir="none"]{transform:none}
.m-js [data-m="pop"]{opacity:0;transform:scale(.8);transition:opacity .5s ease var(--m-delay,0s),transform .6s var(--m-ease-back) var(--m-delay,0s)}
/* 切り抜きは子に付ける（親ごと切ると画面に入った判定が取れない） */
.m-js [data-m="reveal"]>*{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--m-ease) var(--m-delay,0s)}
.m-js [data-m="reveal"][data-m-dir="up"]>*{clip-path:inset(100% 0 0 0)}
.m-js [data-m].is-in{opacity:1;transform:none}
.m-js [data-m="reveal"].is-in>*{clip-path:inset(0 0 0 0)}

/* M05 見出しが下からせり上がる（文字の行を overflow で切る） */
.m-js [data-m="rise"]{display:block;overflow:hidden}
.m-js [data-m="rise"]>*{display:block;transform:translateY(105%);transition:transform .9s var(--m-ease) var(--m-delay,0s)}
.m-js [data-m="rise"].is-in>*{transform:none}

/* M08 キネティックタイポ（短い見出し限定。JSが1文字ずつ span にする） */
.m-js [data-m="chars"] .m-ch{display:inline-block;opacity:0;transform:translateY(.6em) rotate(8deg);transition:opacity .5s ease,transform .7s var(--m-ease-back);transition-delay:calc(var(--m-delay,0s) + var(--i)*.04s)}
.m-js [data-m="chars"].is-in .m-ch{opacity:1;transform:none}

/* ---------- W03 追従ヘッダー ---------- */
.m-header{position:sticky;top:0;z-index:50;transition:background-color .3s,box-shadow .3s,transform .35s var(--m-ease)}
.m-header.is-scrolled{background:color-mix(in srgb,#fff 88%,transparent);backdrop-filter:blur(8px);box-shadow:0 2px 16px rgba(0,0,0,.08)}
.m-header.is-hidden{transform:translateY(-100%)}

/* ---------- W04 ピン留め（CSS sticky 方式。GSAPのpinは使わない） ---------- */
.m-pin{position:relative;height:calc(var(--m-steps,3)*100svh)}
.m-pin__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.m-pin__step{position:absolute;inset:0;opacity:0;transform:translateY(30px);transition:opacity .5s ease,transform .6s var(--m-ease);pointer-events:none}
.m-pin__step.is-active{opacity:1;transform:none;pointer-events:auto}

/* ---------- W05 横スクロール ---------- */
.m-hscroll{position:relative}
.m-hscroll__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.m-hscroll__track{display:flex;gap:24px;width:max-content;will-change:transform}

/* ---------- W06 スクロールスナップ（横に並べたカード向け。ページ全体には付けない） ---------- */
.m-snap{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.m-snap>*{scroll-snap-align:start;flex:0 0 auto}
.m-snap::-webkit-scrollbar{display:none}

/* ---------- W07 スクロールプログレスバー ---------- */
.m-progress{position:fixed;left:0;top:0;width:100%;height:3px;background:var(--m-accent);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* ---------- W09 浮き上がる／W10 画像ズーム／W14 下線 ---------- */
.m-lift{transition:transform .3s var(--m-ease),box-shadow .3s}
.m-zoom{overflow:hidden}
.m-zoom img{transition:transform .6s var(--m-ease);display:block;width:100%;height:auto}
.m-underline{position:relative;text-decoration:none}
.m-underline::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--m-ease)}
.m-underline:focus-visible::after{transform:scaleX(1)}
@media (hover:hover){
  .m-lift:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
  .m-zoom:hover img{transform:scale(1.06)}
  .m-underline:hover::after{transform:scaleX(1)}
}

/* ---------- W11 マウスストーカー ---------- */
.m-stalker{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--m-accent);opacity:.7;pointer-events:none;z-index:9999;transition:width .25s,height .25s,margin .25s,opacity .25s;mix-blend-mode:multiply}
.m-stalker.is-hover{width:44px;height:44px;margin:-22px 0 0 -22px;opacity:.35}

/* ---------- W13 リップル ---------- */
.m-ripple{position:relative;overflow:hidden}
.m-ripple__wave{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:m-ripple .6s ease-out forwards;pointer-events:none}
@keyframes m-ripple{to{transform:scale(1);opacity:0}}

/* ---------- W15 ビフォーアフタースライダー ---------- */
.m-ba{position:relative;--pos:50%;overflow:hidden;user-select:none}
.m-ba img{display:block;width:100%;height:auto}
.m-ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.m-ba__after img{width:100%;height:100%;object-fit:cover}
.m-ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.3);pointer-events:none}
.m-ba__knob{position:absolute;top:50%;left:var(--pos);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none;z-index:2}
.m-ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}

/* ---------- W16 離脱防止ポップアップ（<dialog>） ---------- */
.m-exit{border:0;border-radius:16px;padding:28px;max-width:min(92vw,440px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.m-exit::backdrop{background:rgba(0,0,0,.55)}

/* ---------- W17 ローディング画面（使う時は短く。1.2秒で必ず消える） ---------- */
.m-loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#fff;transition:opacity .5s ease,visibility .5s}
.m-loader.is-done{opacity:0;visibility:hidden}
.m-loader__num{font:700 clamp(32px,6vw,64px)/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--m-accent)}

/* ---------- W18 遅延読み込み画像をふわっと出す ---------- */
.m-js img[data-m="img"]{opacity:0;transition:opacity .6s ease}
.m-js img[data-m="img"].is-loaded{opacity:1}

/* ---------- W22 マーキー ---------- */
.m-marquee{overflow:hidden;white-space:nowrap}
.m-marquee__track{display:inline-flex;gap:var(--m-gap,48px);padding-right:var(--m-gap,48px);animation:m-marquee var(--m-speed,30s) linear infinite}
.m-marquee[data-m-reverse] .m-marquee__track{animation-direction:reverse}
@media (hover:hover){.m-marquee[data-m-pause]:hover .m-marquee__track{animation-play-state:paused}}
@keyframes m-marquee{to{transform:translateX(-50%)}}

/* ---------- W24 ふわふわ（fade/parallax と同じ要素に付けず、外側の箱に付ける） ---------- */
.m-float{animation:m-float var(--m-float-dur,3.2s) ease-in-out infinite alternate;animation-delay:var(--m-float-delay,0s)}
@keyframes m-float{from{transform:translateY(0)}to{transform:translateY(var(--m-float-dist,-10px))}}

/* ---------- M21 フリップ（カード裏返し。タップでも切り替わる） ---------- */
.m-flip{perspective:1000px}
.m-flip__inner{position:relative;display:grid;transition:transform .7s var(--m-ease);transform-style:preserve-3d}
.m-flip__inner>*{grid-area:1/1;backface-visibility:hidden}
.m-flip__back{transform:rotateY(180deg)}
.m-flip.is-flipped .m-flip__inner{transform:rotateY(180deg)}
@media (hover:hover){.m-flip[data-m-hover]:hover .m-flip__inner{transform:rotateY(180deg)}}

/* ---------- 動きを減らす設定の人には全部止めて最終の見た目で出す ---------- */
@media (prefers-reduced-motion:reduce){
  .m-js [data-m],.m-js [data-m="rise"]>*,.m-js [data-m="reveal"]>*,.m-js .m-ch,.m-js .m-marker,.m-js img[data-m="img"]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;background-size:100% 100%}
  .m-marquee__track,.m-gradient,.m-float,.m-sweep--loop::after{animation:none!important}
  .m-pin{height:auto}
  .m-pin__stage{position:static;height:auto;overflow:visible}
  .m-pin__step{position:static;opacity:1;transform:none;pointer-events:auto}
  .m-hscroll{height:auto!important}
  .m-hscroll__stage{position:static;height:auto;overflow-x:auto;scroll-snap-type:x mandatory}
  .m-hscroll__track{transform:none!important}
  .m-hscroll__track>*{scroll-snap-align:start}
  .m-stalker,.m-loader{display:none!important}
  .m-flip__inner{transition:none}
}