/* ============================================================
   SITE FX — 全ページ共通のインタラクティブレイヤー
   TOP（netweb_v4.1）のFX仕様を全ページへ統一。
   既存レイアウトに非干渉（追加レイヤーのみ）。
   ============================================================ */

/* ── ① フィルムグレイン（映像制作の質感・全面に薄く） ── */
.fx-grain{
  position:fixed;inset:-120px;z-index:9996;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='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:fxGrain .7s steps(4) infinite;
}
@keyframes fxGrain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,2%)}
}

/* ── ② スクロール進捗バー ── */
.fx-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,var(--gold,#b89a58),var(--goldh,#c9a96a));
  box-shadow:0 0 14px rgba(184,154,88,.55);
  transition:width .1s linear;
}

/* ── ③ カスタムカーソル（ネイティブ併用の追従リング） ── */
.fx-ring{
  position:fixed;top:0;left:0;width:30px;height:30px;z-index:9997;
  border:1.5px solid rgba(184,154,88,.65);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  transition:width .28s cubic-bezier(.22,.61,.36,1),height .28s cubic-bezier(.22,.61,.36,1),
             background .28s ease,border-color .28s ease,opacity .4s;
  will-change:transform;opacity:0;
}
.fx-ring.is-active{opacity:1}
.fx-ring.is-hover{
  width:54px;height:54px;border-color:var(--goldh,#c9a96a);
  background:rgba(184,154,88,.10);
}
@media (hover:none),(pointer:coarse){.fx-ring{display:none}}

/* ── ⑧ マグネティック対象の基準 ── */
.fx-magnetic{will-change:transform;transition:transform .35s cubic-bezier(.22,.61,.36,1)}

/* ── ⑨ タップ反応（タッチ端末：PCのhover持ち上げ/磁力が発動しない分の補完。
       押した瞬間だけわずかに沈んで戻る＝全下層ページ共通。TOPは各ページ側で実装済み） ── */
@media(hover:none){
  .btn-gold:active,.btn-hdr:active,.btn-sv-cta:active,.btn-cta-gold:active,
  .btn-cta:active,.btn-ft-dl:active{
    transform:scale(.96);transition:transform .15s ease}
  .sv-card:active,.wk-media-card:active,.person-card:active,.method-card:active,
  .step-item:active,.result-card:active,.award-card:active{
    transform:translateY(2px) scale(.99);transition:transform .18s ease}
}

/* ── アクセシビリティ：動きを減らす設定を尊重 ── */
@media (prefers-reduced-motion:reduce){
  .fx-grain,.fx-ring{display:none!important}
  .btn-gold:active,.btn-hdr:active,.btn-sv-cta:active,.btn-cta-gold:active,.btn-cta:active,.btn-ft-dl:active,
  .sv-card:active,.wk-media-card:active,.person-card:active,.method-card:active,
  .step-item:active,.result-card:active,.award-card:active{transform:none}
}