/* ════════════════════════════════════════
   Glitch FX — dark-web / corrupted style (REMOVABLE)
   無効化: index.html の glitch.css / glitch.js の2行を消すだけ。
════════════════════════════════════════ */

.gfx-tear,
.gfx-warp,
.gfx-jitter {
  will-change: transform, filter, clip-path;
}

/* ── TEAR：横スライスがズレて裂ける + ハードなRGB分離 ── */
.gfx-tear { animation: gfxTear 0.3s steps(4, jump-none) 1; }
@keyframes gfxTear {
  0%   { clip-path: inset(0 0 0 0);      transform: translateX(0);    filter: none; }
  14%  { clip-path: inset(8% 0 78% 0);   transform: translateX(-14px); filter: drop-shadow(4px 0 0 #1500ff) drop-shadow(-4px 0 0 #ff00d4); }
  28%  { clip-path: inset(42% 0 33% 0);  transform: translateX(16px);  filter: drop-shadow(-3px 0 0 #00e5ff); }
  43%  { clip-path: inset(68% 0 14% 0);  transform: translateX(-10px); }
  57%  { clip-path: inset(22% 0 58% 0);  transform: translateX(12px);  filter: drop-shadow(5px 0 0 #1500ff); }
  71%  { clip-path: inset(52% 0 24% 0);  transform: translateX(-7px); }
  100% { clip-path: inset(0 0 0 0);      transform: translateX(0);    filter: none; }
}

/* ── WARP：引き伸ばし・歪み（主に文字向け） ── */
.gfx-warp { animation: gfxWarp 0.3s steps(5, jump-none) 1; transform-origin: center; }
@keyframes gfxWarp {
  0%   { transform: none; filter: none; }
  20%  { transform: scaleY(1.45) skewX(-10deg); filter: blur(0.4px) drop-shadow(3px 0 0 #1500ff) drop-shadow(-3px 0 0 #ff0033); }
  40%  { transform: scaleX(1.12) skewX(7deg);   filter: drop-shadow(-3px 0 0 #00e5ff); }
  60%  { transform: scaleY(0.78) skewX(-5deg);  filter: drop-shadow(4px 0 0 #1500ff); }
  80%  { transform: skewX(4deg); }
  100% { transform: none; filter: none; }
}

/* ── JITTER：高速にブレてゴーストが残る（フレーム崩れ風） ── */
.gfx-jitter { animation: gfxJitter 0.22s steps(2, jump-none) 1; }
@keyframes gfxJitter {
  0%, 100% { transform: translate(0); filter: none; }
  25% { transform: translate(-6px, 2px); filter: drop-shadow(6px 0 0 #1500ff) drop-shadow(-5px 0 0 #ff00d4); }
  50% { transform: translate(5px, -3px); }
  75% { transform: translate(-3px, 1px); filter: drop-shadow(-6px 0 0 #00e5ff); }
}

/* ── COLOR BLOCK：画面の一部が原色（青系）に汚損 ── */
.gfx-block {
  position: fixed;
  z-index: 949;
  pointer-events: none;
}