/* KAMITE LP — モーション一式（依存ゼロ）
   使い方は motion.js の冒頭コメントを参照。
   すべて prefers-reduced-motion: reduce で無効化される。 */

:root{
  --mo-ease: cubic-bezier(.22,.61,.36,1);
  --mo-ease-out: cubic-bezier(.16,1,.3,1);
  --mo-gold: #C9A227;
  --mo-gold-hi: #F0D778;
}

/* ── 1. スクロールリビール ───────────────────────────── */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--mo-ease-out), transform .9s var(--mo-ease-out);
  transition-delay:var(--mo-delay, 0ms);
  will-change:opacity, transform;
}
[data-reveal="left"]{ transform:translateX(-28px) }
[data-reveal="right"]{ transform:translateX(28px) }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="blur"]{ filter:blur(8px); transition:opacity .9s var(--mo-ease-out), transform .9s var(--mo-ease-out), filter .9s var(--mo-ease-out); }
[data-reveal].is-in{ opacity:1; transform:none; filter:none }

/* 子要素を順番に出す（親に data-stagger） */
[data-stagger] > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--mo-ease-out), transform .8s var(--mo-ease-out);
}
[data-stagger].is-in > *{ opacity:1; transform:none }

/* ── 2. 見出しの金線が伸びる ─────────────────────────── */
.mo-rule{ position:relative; padding-bottom:14px }
.mo-rule::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg, var(--mo-gold), rgba(201,162,39,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--mo-ease-out) .15s;
}
.mo-rule.is-in::after{ transform:scaleX(1) }

/* ── 3. ヒーロー ───────────────────────────────────── */
/* 背景の光がゆっくり呼吸する */
.mo-hero-bg{ animation:mo-breathe 14s ease-in-out infinite; transform-origin:64% 40% }
@keyframes mo-breathe{
  0%,100%{ transform:scale(1.02); opacity:.96 }
  50%    { transform:scale(1.07); opacity:1 }
}
/* 舞い上がる光の粒（ヒーローに .mo-dust の空divを1つ置く） */
.mo-dust{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.mo-dust i{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--mo-gold-hi); opacity:0;
  animation:mo-rise linear infinite;
}
@keyframes mo-rise{
  0%  { transform:translateY(0) translateX(0) scale(.6); opacity:0 }
  12% { opacity:.7 }
  80% { opacity:.35 }
  100%{ transform:translateY(-92vh) translateX(var(--mo-drift,20px)) scale(1); opacity:0 }
}
/* ヒーローのコピーを1行ずつ */
.mo-hero-line{ display:block; opacity:0; transform:translateY(18px);
  animation:mo-in .95s var(--mo-ease-out) forwards }
@keyframes mo-in{ to{ opacity:1; transform:none } }

/* ── 4. 数字のカウントアップ ─────────────────────────── */
.mo-count{ font-variant-numeric:tabular-nums }

/* ── 5. CTAボタン ──────────────────────────────────── */
.mo-cta{ position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--mo-ease), box-shadow .3s var(--mo-ease) }
.mo-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(122,46,60,.32) }
.mo-cta:active{ transform:translateY(0) }
.mo-cta::before{
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%; z-index:-1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg);
  animation:mo-shine 4.2s var(--mo-ease) infinite;
}
@keyframes mo-shine{ 0%,55%{ left:-140% } 85%,100%{ left:160% } }

/* ── 6. 案件カードのマーキー（推しセクション） ───────────── */
.mo-marquee{ overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.mo-marquee__track{ display:flex; gap:16px; width:max-content;
  animation:mo-scroll var(--mo-speed,38s) linear infinite }
.mo-marquee:hover .mo-marquee__track{ animation-play-state:paused }
.mo-marquee--rev .mo-marquee__track{ animation-direction:reverse }
@keyframes mo-scroll{ to{ transform:translateX(-50%) } }

/* ── 7. グラフの棒が伸びる ──────────────────────────── */
.mo-bar{ transform:scaleY(0); transform-origin:bottom;
  transition:transform 1s var(--mo-ease-out); transition-delay:var(--mo-delay,0ms) }
.is-in .mo-bar{ transform:scaleY(1) }

/* ── 8. 追従ヘッダー ───────────────────────────────── */
.mo-header{ transition:background .4s var(--mo-ease), box-shadow .4s var(--mo-ease),
  padding .4s var(--mo-ease), backdrop-filter .4s var(--mo-ease) }
.mo-header.is-stuck{
  background:rgba(251,247,241,.86); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(201,162,39,.28), 0 6px 20px rgba(43,38,34,.06);
}

/* ── 9. スマホ下部の固定CTA ─────────────────────────── */
.mo-dock{ transform:translateY(120%); transition:transform .5s var(--mo-ease-out) }
.mo-dock.is-shown{ transform:none }

/* ── 10. カードのホバー ────────────────────────────── */
.mo-card{ transition:transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease),
  border-color .35s var(--mo-ease) }
.mo-card:hover{ transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(43,38,34,.09); border-color:rgba(201,162,39,.55) }

/* ── 11. FAQアコーディオン ─────────────────────────── */
.mo-acc__body{ overflow:hidden; max-height:0;
  transition:max-height .45s var(--mo-ease), opacity .35s var(--mo-ease); opacity:0 }
.mo-acc.is-open .mo-acc__body{ opacity:1 }
.mo-acc__mark{ transition:transform .35s var(--mo-ease) }
.mo-acc.is-open .mo-acc__mark{ transform:rotate(45deg) }

/* ── 12. 軽いパララックス ──────────────────────────── */
[data-parallax]{ will-change:transform }

/* ── 動きを減らす設定を尊重 ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal], [data-stagger] > *{ opacity:1 !important; transform:none !important; filter:none !important }
  .mo-bar{ transform:scaleY(1) !important }
  .mo-rule::after{ transform:scaleX(1) !important }
  .mo-dust{ display:none }
}