/* ============================================================
   RiARIO PRO — トップページ専用モーション
   すべて home.js（GSAP）と対で動く。JSが無い環境では
   このファイルは見た目をほぼ変えない＝素の表示のまま。
   ============================================================ */

/* Lenis（慣性スクロール）と両立させるため、ネイティブの smooth は切る */
html{scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ナビ：下へ読み進めたら退避、上に戻ると現れる */
.nav{transition:transform .6s var(--ease),background .45s,box-shadow .45s,backdrop-filter .45s}
.nav.is-hidden{transform:translateY(-102%)}

/* 文字分割の1文字 */
.ch{display:inline-block;will-change:transform}
/* .mech__script span{display:block} が分割文字に効かないよう打ち消す */
.mech__script .ch{display:inline-block;padding-left:0!important}

/* マスク付き見出し（clip-path は JS が駆動） */
.bp__en{overflow:hidden;padding-bottom:.08em}
.wcard b{overflow:hidden}

/* フィルムグレイン（JSが注入。5%の粒子で平坦さを消す） */
#grain{position:fixed;inset:-120px;z-index:96;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:260px 260px;
  animation:grainShift .9s steps(2) infinite}
@keyframes grainShift{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-34px,22px)}
  40%{transform:translate(26px,-30px)}
  60%{transform:translate(-20px,-26px)}
  80%{transform:translate(30px,18px)}
}

/* Business Produce カード：
   ポインタ環境では CSS の持ち上げを止め、JS のチルトに一本化 */
@media (hover:hover) and (pointer:fine){
  .bcard:hover{transform:none}
}
.bcard{position:relative}
/* カーソルを追うスポットライト */
.bcard::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(185,151,77,.16),transparent 62%);
  transition:opacity .45s var(--ease)}
.bcard:hover::after{opacity:1}

/* ご相談の流れ：点灯した瞬間のさざ波 */
.step .step__dot{position:relative}
.step.on .step__dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--wine);opacity:.9;
  animation:dotRipple 1s var(--ease) forwards}
@keyframes dotRipple{to{transform:scale(2.1);opacity:0}}

/* LEO パネルは clip-path で開く（JSが駆動） */
.lion{will-change:clip-path}

@media (prefers-reduced-motion:reduce){
  #grain{display:none}
  .nav.is-hidden{transform:none}
}