/* ════════════════════════════════════════
   Glitch FX — shared styles (REMOVABLE)
   各案の JS が共通で使うクローン用スタイル。
   無効化: index.html の glitch.css / glitch.js の2行を消すだけ。
   案の切替: index.html の <script> の src を
     js/glitch.js         … 現在ロード中の案
     js/glitch_melt.js    … 「溶解する世界」案（バックアップ）
   に変えるだけ。
════════════════════════════════════════ */

/* 残像 / 分身クローン共通 */
.gfx-clone {
  position: fixed !important;
  margin: 0 !important;
  pointer-events: none !important;
  z-index: 948;
  will-change: transform, opacity;
}

/* 部分エフェクト用：単語フラグメント（transformを効かせるため inline-block） */
.gfx-frag {
  display: inline-block;
}

/* 浮遊と同時に走る、画面の一部の砂嵐ノイズ片（グレースケール・アナログ風） */
.gfx-noise {
  position: fixed;
  z-index: 947;
  pointer-events: none;
  opacity: 0;
  background-size: 120px 120px;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='gfxn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23gfxn)'/%3E%3C/svg%3E");
  animation: gfxNoiseFlick 0.36s steps(5, jump-none) 1;
}
@keyframes gfxNoiseFlick {
  0%   { opacity: 0;    background-position: 0 0; }
  20%  { opacity: 0.55; background-position: 40px 12px; }
  40%  { opacity: 0.38; background-position: 7px 60px; }
  60%  { opacity: 0.6;  background-position: 80px 30px; }
  80%  { opacity: 0.33; background-position: 20px 90px; }
  100% { opacity: 0;    background-position: 50px 50px; }
}

/* ネガポジ反転：背後（背景・画像・文字）の一部を反転させる矩形 */
.gfx-invert {
  position: fixed;
  z-index: 946;
  pointer-events: none;
  backdrop-filter: invert(1);
  -webkit-backdrop-filter: invert(1);
}