/* TY4WHALE — Glitch Effects */
/* 間欠的なグリッチ・ノイズ表現 */

/* ===== Grain Overlay ===== */

.glitch-grain {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 9000;
  animation: grain-shift 0.18s steps(1) infinite;
  mix-blend-mode: soft-light;
}

.glitch-grain--intense {
  opacity: 0.085;
}

@keyframes grain-shift {
  0%   { transform: translate(0,    0);    }
  14%  { transform: translate(-2%,  -3%);  }
  28%  { transform: translate(3%,    1%);  }
  42%  { transform: translate(-1%,   4%);  }
  56%  { transform: translate(2%,   -2%);  }
  70%  { transform: translate(-3%,   1%);  }
  84%  { transform: translate(1%,   -4%);  }
  100% { transform: translate(2%,    3%);  }
}

/* ===== Scan Lines ===== */

.glitch-scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 9001;
}

.glitch-scanlines--intense {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.13) 2px,
    rgba(0, 0, 0, 0.13) 4px
  );
}

/* ===== RGB Split（ロゴ・テキスト） ===== */

.glitch-rgb {
  animation: rgb-split 0.09s steps(1) infinite;
  position: relative;
}

@keyframes rgb-split {
  0%   { text-shadow: -3px  0   rgba(248, 113, 113, 0.9),  3px  0   rgba(126, 184, 212, 0.9); transform: none; }
  20%  { text-shadow: -5px  1px rgba(248, 113, 113, 0.9),  5px -1px rgba(126, 184, 212, 0.9); transform: translateX(2px); }
  40%  { text-shadow:  4px  0   rgba(248, 113, 113, 0.9), -4px  0   rgba(126, 184, 212, 0.9); transform: translateX(-2px); }
  60%  { text-shadow: -2px -1px rgba(248, 113, 113, 0.9),  2px  1px rgba(126, 184, 212, 0.9); transform: translateX(1px); }
  80%  { text-shadow:  6px  0   rgba(248, 113, 113, 0.9), -6px  0   rgba(126, 184, 212, 0.9); transform: translateX(-3px); }
  100% { text-shadow: -3px  0   rgba(248, 113, 113, 0.9),  3px  0   rgba(126, 184, 212, 0.9); transform: none; }
}

/* ===== テキストスライス（ヒーロー・見出し） ===== */

.glitch-slice {
  animation: text-slice 0.07s steps(1) infinite;
}

@keyframes text-slice {
  0%   { transform: none;                           }
  15%  { transform: translateX(-8px) skewX(-1.5deg); }
  30%  { transform: translateX(5px);                }
  45%  { transform: translateX(-4px) skewX(1deg);   }
  60%  { transform: translateX(7px)  skewX(-0.5deg); }
  75%  { transform: translateX(-2px);               }
  90%  { transform: translateX(4px)  skewX(0.8deg); }
  100% { transform: none;                           }
}

/* ===== スクリーン破断（水平ライン） ===== */

.glitch-tear {
  position: fixed;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-text-primary);
  pointer-events: none;
  z-index: 9002;
  animation: tear-flicker 0.09s steps(1) infinite;
}

@keyframes tear-flicker {
  0%   { opacity: 0.7; transform: scaleX(1)    translateX(0);   }
  33%  { opacity: 0.3; transform: scaleX(0.6)  translateX(8%);  }
  66%  { opacity: 0.9; transform: scaleX(1.15) translateX(-4%); }
  100% { opacity: 0.7; transform: scaleX(1)    translateX(0);   }
}

/* ===== ボディ揺れ（弱） ===== */

.glitch-jitter-weak {
  animation: jitter-weak 0.1s steps(1) infinite;
}

@keyframes jitter-weak {
  0%   { transform: translate(0,    0);   }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, 2px); }
  100% { transform: translate(0,    0);   }
}

/* ===== ボディ揺れ（強） ===== */

.glitch-jitter-strong {
  animation: jitter-strong 0.08s steps(1) infinite;
}

@keyframes jitter-strong {
  0%   { transform: translate(0,    0);    }
  20%  { transform: translate(-5px,  2px); }
  40%  { transform: translate(6px,  -3px); }
  60%  { transform: translate(-3px,  5px); }
  80%  { transform: translate(5px,  -2px); }
  100% { transform: translate(0,    0);    }
}

/* ===== コンテンツ歪み（Observer用） ===== */

.glitch-distort {
  filter: url(#glitch-displacement);
  transition: none;
}