/* =========================================================
   effects.css ─ ブラウン管エフェクトと「侵蝕」の段階定義
   body[data-erosion="0〜4"] を切り替えるだけで画面全体が変わる
   ========================================================= */

/* ---------- エフェクト層（共通） ---------- */
.fx {
  position: absolute;
  inset: 18px;
  border-radius: var(--radius-crt);
  pointer-events: none;
  z-index: 10;
}

/* 砂嵐ノイズ：SVGのturbulenceをデータURIで生成し、位置をずらしてチラつかせる */
.fx-noise {
  opacity: var(--noise-opacity);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: noise-shift 0.4s steps(5) infinite;
  transition: opacity 2s;
}

/* 走査線 */
.fx-scanlines {
  opacity: var(--scan-opacity);
  background: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, 0.9) 0 1px,
    transparent 1px 3px);
}

/* 周辺減光＋ガラスの反射 */
.fx-vignette {
  background:
    radial-gradient(ellipse at 30% 15%, rgba(255, 255, 255, 0.04) 0%, transparent 35%),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.7) 100%);
}

/* 明滅＋上から下へ流れる帯 */
.fx-flicker {
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--fg) 50%,
    transparent 100%) 0 0 / 100% 12% no-repeat;
  opacity: var(--flicker-opacity);
  animation:
    roll-bar 7s linear infinite,
    flicker 0.15s steps(2) infinite;
}

@keyframes noise-shift {
  0%   { background-position: 0 0; }
  20%  { background-position: -60px 40px; }
  40%  { background-position: 80px -30px; }
  60%  { background-position: -20px -90px; }
  80%  { background-position: 50px 70px; }
  100% { background-position: 0 0; }
}

@keyframes roll-bar {
  from { background-position: 0 -15%; }
  to   { background-position: 0 115%; }
}

@keyframes flicker {
  50% { opacity: calc(var(--flicker-opacity) * 0.6); }
}

/* =========================================================
   侵蝕レベル
   0: 平常（緑）
   1: 微かな乱れ（緑・ノイズ増）
   2: 変調（アンバー）
   3: 汚染（赤みがかったアンバー・色収差・揺れ）
   4: 侵蝕完了（赤・強いノイズ・グリッチ）
   ========================================================= */

body[data-erosion="1"] {
  --fg: #a8ff5a;
  --fg-dim: #5f9a2f;
  --fg-faint: #2c4a14;
  --glow: rgba(168, 255, 90, 0.45);
  --noise-opacity: 0.09;
  --flicker-opacity: 0.03;
}

body[data-erosion="2"] {
  --fg: #ffb000;
  --fg-dim: #a06c00;
  --fg-faint: #4a3200;
  --bg: #0a0600;
  --bg-panel: #120b00;
  --bg-hi: #2a1a00;
  --glow: rgba(255, 176, 0, 0.5);
  --noise-opacity: 0.13;
  --flicker-opacity: 0.04;
  --aberration: 0.5px;
}

body[data-erosion="3"] {
  --fg: #ff7a1a;
  --fg-dim: #a04a0c;
  --fg-faint: #4a2006;
  --bg: #0c0402;
  --bg-panel: #140603;
  --bg-hi: #2e0e04;
  --glow: rgba(255, 122, 26, 0.55);
  --noise-opacity: 0.18;
  --scan-opacity: 0.32;
  --flicker-opacity: 0.06;
  --aberration: 1.5px;
  --blur: 0.3px;
}

body[data-erosion="4"] {
  --fg: #ff2a3a;
  --fg-dim: #a0141f;
  --fg-faint: #4a070c;
  --bg: #0c0002;
  --bg-panel: #160003;
  --bg-hi: #300008;
  --glow: rgba(255, 42, 58, 0.6);
  --noise-opacity: 0.26;
  --scan-opacity: 0.4;
  --flicker-opacity: 0.09;
  --aberration: 2.5px;
  --blur: 0.5px;
}

/* レベル3以上：画面が時々横にズレる */
body[data-erosion="3"] .desktop,
body[data-erosion="4"] .desktop {
  animation: jitter 5s steps(1) infinite;
}

@keyframes jitter {
  0%, 92%, 100% { transform: none; }
  93% { transform: translateX(-3px) skewX(-0.5deg); }
  95% { transform: translateX(4px); }
  97% { transform: translateX(-1px) translateY(1px); }
}

/* レベル4：見出しがグリッチ */
body[data-erosion="4"] .window__title,
body[data-erosion="4"] .pane-header {
  animation: glitch-text 2.5s steps(1) infinite;
}

@keyframes glitch-text {
  0%, 85%, 100% { clip-path: none; transform: none; }
  86% { clip-path: inset(20% 0 50% 0); transform: translateX(4px); }
  88% { clip-path: inset(60% 0 10% 0); transform: translateX(-4px); }
  90% { clip-path: inset(0 0 70% 0); transform: translateX(2px); }
}

/* JSから一瞬付与する「判定直後の乱れ」用クラス
   （レベル3以上の揺れより優先させるため body から指定） */
body .desktop.is-glitching {
  animation: hard-glitch 0.6s steps(6) 1;
}

@keyframes hard-glitch {
  0%   { transform: translate(0); filter: blur(var(--blur)); }
  20%  { transform: translate(-8px, 2px); filter: blur(1px) brightness(1.6); }
  40%  { transform: translate(6px, -3px); filter: invert(1); }
  60%  { transform: translate(-3px, 0) skewX(3deg); filter: blur(2px); }
  80%  { transform: translate(2px, 1px); filter: brightness(0.4); }
  100% { transform: translate(0); filter: blur(var(--blur)); }
}

/* 動きを減らす設定のユーザーにはアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .fx { inset: 6px; }
}