/* ============================================================
   grain / noise = KAGVYA v1(kagvya.starseed108.com)デザインで使用しているものに差し替え
   (2026-07-03 ボス指示。旧 ning-h WebGL 静的grain は廃止 / kg-grain.js は未使用)。
   v1 実装をそのまま移植: grain.png(256²グレースケール)を全画面タイルで敷き、
   steps(10)/0.9s で translate ジッター = フィルムグレインのちらつき。opacity 0.09(mobile 0.045)。
   ============================================================ */
.site-grain{
  position:fixed; inset:0; width:100%; height:100vh;
  pointer-events:none; z-index:9000; opacity:0.09; overflow:hidden;
}
.site-grain__tile{
  position:absolute; inset:-200%; width:400%; height:400%;
  background-image:url("../img/grain.png");
  background-size:256px 256px; background-repeat:repeat;
  opacity:0.95; will-change:transform;
  animation:site-grain-shift 0.9s steps(10) infinite;
}
@keyframes site-grain-shift{
  0%  { transform: translate3d(0%,    0%,    0); }
  10% { transform: translate3d(-12%,  -15%,  0); }
  20% { transform: translate3d(-20%,  8%,    0); }
  30% { transform: translate3d(10%,   -20%,  0); }
  40% { transform: translate3d(-8%,   28%,   0); }
  50% { transform: translate3d(-22%,  15%,   0); }
  60% { transform: translate3d(20%,   -3%,   0); }
  70% { transform: translate3d(2%,    22%,   0); }
  80% { transform: translate3d(18%,   -18%,  0); }
  90% { transform: translate3d(-15%,  12%,   0); }
  100%{ transform: translate3d(8%,    32%,   0); }
}
@media (max-width:720px){ .site-grain{opacity:0.045;} }
@media (prefers-reduced-motion: reduce){ .site-grain__tile{animation:none;} }