/* ══════════════════════════════════════════════════════════════
   故障演出：按五类分开实现
   1. RGB split        —— 元素三通道错位（drop-shadow 反向偏移）
   2. datamosh         —— 真实克隆切片，横向错位，steps(1) 跳帧
   3. scanlines        —— 扫描线叠层 + 偶发整屏抖动
   4. white flash      —— 极短过曝闪白
   5. pixel sorting    —— 从边缘拽出来的发光竖条
   另加：彩色噪点 + 暗角（analog decay）
   ══════════════════════════════════════════════════════════════ */

.glitch {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}
/* 关掉"闪"只关刺眼的那些（闪白、扫描线抖动），撕裂/RGB 错位照旧 */
html[data-flash="off"] .glitch__white,
html[data-flash="off"] .glitch__scan { display: none; }
html[data-flash="off"] html.scan-hot .glitch__scan { animation: none; }

/* ── 3 · 扫描线（常驻极淡，抖动时变浓） ── */
.glitch__scan {
  position: absolute;
  inset: -4px 0;
  opacity: .28;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, .55) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
  transition: opacity .1s linear;
}
html.scan-hot .glitch__scan {
  opacity: .85;
  animation: scanJitter .09s steps(2, end) 3;
}
@keyframes scanJitter {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(2px); }
  100% { transform: translateY(-1px); }
}

/* ── 4 · 过曝闪白 ── */
.glitch__white {
  position: absolute;
  inset: 0;
  background: #eaf8ff;
  opacity: 0;
  mix-blend-mode: screen;
  animation: whiteOut var(--wf, 70ms) steps(1, end) forwards;
}
@keyframes whiteOut {
  0%   { opacity: 0; }
  12%  { opacity: var(--wpeak, .12); }
  55%  { opacity: calc(var(--wpeak, .12) * .55); }
  100% { opacity: 0; }
}

/* ── 2 · datamosh：真实元素的切片副本 ── */
.glitch__mosh {
  position: fixed;
  margin: 0 !important;
  pointer-events: none !important;
  z-index: 9998;
  animation: moshShift var(--mlife, 180ms) steps(2, end) forwards;
  will-change: transform;
}
/* 关键：位移的同时把这一条横向拉伸，边缘又在抖 —— 才是"解码出错"的拖影 */
@keyframes moshShift {
  0%   { transform: translateX(var(--mx, 0px)) scaleX(var(--msx, 1)); }
  50%  { transform: translateX(calc(var(--mx, 0px) * -0.6)) scaleX(calc(var(--msx, 1) * 1.08)); }
  100% { transform: translateX(var(--mx, 0px)) scaleX(var(--msx, 1)); }
}

/* 切片里再撒一层块状噪点（解码错误的马赛克） */
.glitch__moshnoise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255, 255, 255, .55) 0deg 90deg,
      rgba(56, 225, 255, .35) 90deg 180deg,
      rgba(255, 79, 216, .3) 180deg 270deg,
      rgba(0, 0, 0, .3) 270deg 360deg);
  background-size: var(--nz, 10px) var(--nz, 10px);
  mix-blend-mode: overlay;
  opacity: var(--nza, .45);
}

/* ── 5 · pixel sorting：被拽出来的发光竖条 ── */
.glitch__streak {
  position: absolute;
  width: var(--sw, 2px);
  background: linear-gradient(180deg, transparent, var(--sc, #38e1ff) 18%, var(--sc, #38e1ff) 82%, transparent);
  opacity: 0;
  filter: blur(.4px) drop-shadow(0 0 6px var(--sc, #38e1ff));
  animation: streak var(--slife, 420ms) steps(6, end) forwards;
}
@keyframes streak {
  0%   { opacity: 0; transform: scaleY(.1); }
  15%  { opacity: var(--speak, .8); transform: scaleY(1); }
  60%  { opacity: calc(var(--speak, .8) * .8); }
  100% { opacity: 0; transform: scaleY(1.15); }
}

/* ── 1 · RGB split：给元素加三通道错位 ── */
.glitch__rgb {
  filter:
    drop-shadow(calc(var(--rgb, 3px) * -1) 0 rgba(255, 0, 128, .75))
    drop-shadow(var(--rgb, 3px) 0 rgba(0, 230, 255, .75)) !important;
}

/* ── 色块（点缀） ── */
.glitch__block {
  position: absolute;
  background: currentColor;
  opacity: 0;
  box-shadow: 0 0 10px currentColor, 0 0 30px currentColor;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  animation: gGrow var(--life, 900ms) steps(6, end) forwards;
}
@keyframes gGrow {
  0%   { transform: scale(.04); opacity: 0; }
  6%   { transform: scale(.55); opacity: var(--peak, .95); }
  12%  { transform: scale(1);   opacity: var(--peak, .95); }
  74%  { transform: scale(1);   opacity: var(--peak, .95); }
  86%  { transform: scale(.6);  opacity: calc(var(--peak, .95) * .8); }
  94%  { transform: scale(.24); opacity: calc(var(--peak, .95) * .4); }
  100% { transform: scale(.03); opacity: 0; }
}
.glitch__block--black { color: #05030a; box-shadow: 0 0 0 1px rgba(120, 240, 255, .12); }
.glitch__block--L {
  background: none; box-shadow: none;
  border-color: currentColor; border-style: solid; border-width: 0;
  filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 14px currentColor);
}
.glitch__block--L.flip { border-left-width: 3px; border-top-width: 3px; }
.glitch__block--L:not(.flip) { border-right-width: 3px; border-bottom-width: 3px; }

/* ── 文字的 RGB 重影（渐变字只能用伪元素复制） ── */
.name, .bar__title { position: relative; }
html.is-glitch .name::before,
html.is-glitch .name::after,
html.is-glitch .bar__title::before,
html.is-glitch .bar__title::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  white-space: nowrap; pointer-events: none;
  background: none; -webkit-background-clip: initial;
  mix-blend-mode: screen; opacity: .9;
}
html.is-glitch .name::before,
html.is-glitch .bar__title::before {
  color: #ff2e97; -webkit-text-fill-color: #ff2e97;
  transform: translate(-7px, 0); clip-path: inset(10% 0 56% 0);
}
html.is-glitch .name::after,
html.is-glitch .bar__title::after {
  color: #00e6ff; -webkit-text-fill-color: #00e6ff;
  transform: translate(7px, 0); clip-path: inset(54% 0 12% 0);
}

/* 暗角 */
.glitch__vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(4, 2, 8, .55) 100%);
  opacity: 0;
  transition: opacity .18s ease;
}
html.is-glitch .glitch__vig { opacity: 1; }

/* ══════════ 渐变字：大标题 + 弹幕 ══════════ */
html[data-scheme="sw"] .name {
  background-image: linear-gradient(100deg,
    #8ff6ff 0%, #38e1ff 14%, #a855f7 34%, #ff4fd8 54%, #ffd166 72%, #b6ff3c 88%, #8ff6ff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(168, 85, 247, .45));
  animation: swHueSweep 11s linear infinite;
}
@keyframes swHueSweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

html[data-scheme="sw"] .wishes span {
  background-image: linear-gradient(100deg,
    #8ff6ff, #38e1ff 22%, #a855f7 46%, #ff4fd8 68%, #ffd166 86%, #b6ff3c);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: swDmSweep 8s linear infinite;
  animation-delay: var(--dm-delay, 0s);
  filter: drop-shadow(0 0 10px rgba(56, 225, 255, .35));
}
html[data-scheme="sw"] .wishes span:nth-child(3n)   { --dm-delay: -1.6s; }
html[data-scheme="sw"] .wishes span:nth-child(3n+1) { --dm-delay: -3.4s; }
html[data-scheme="sw"] .wishes span:nth-child(3n+2) { --dm-delay: -5.2s; }
@keyframes swDmSweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .glitch { display: none; }
}