/* ==========================================================================================
   glitch.css — 隐藏彩蛋「？？？」（2026-10-25 服主需求，public/js/ui/glitchMode.js）。

   只在 <html class="is-glitch"> 时生效（glitchMode.enterGlitch / exitGlitch 加/删这个 class）：
     * .glitch-layer--scan     扫描线 + 快速下移的亮带 + 竖向细纹
     * .glitch-layer--noise    高对比噪点（三层 repeating-gradient，屏幕混合）
     * .glitch-layer--tear     横向撕裂：粗 RGB 色带 + 大幅 clip-path / translate 跳变
     * .glitch-layer--rgb      额外的红 / 青 / 品红色块，横向错位（更花）
     * .glitch-layer--invert   局部反色（白色 + difference，横向宽条）
     * .glitch-layer--invert-b 第二块局部反色（竖向 / 斜向，和第一条不同步）
   六个层都是 position:fixed + pointer-events:none，所以再花也点得到退出按钮；帧动画全在 CSS，
   JS 只负责挂/摘节点、全量替换文字、以及每隔几秒随机换一套节奏（--glitch-*-speed / burst class），
   所以不会完全按同一个循环重复。
   ========================================================================================== */

/* 覆盖层挂在 .app-root 里面（glitchMode.mountLayers），整组抬到页面最上层：
   屏幕内容 z 1 < 覆盖层 2147483000+ < 点击屏障 2147483400 < 红色退出 2147483600。
   这样覆盖层不会盖住退出按钮（按钮保持正红），也压过本机测试服水印。 */
html.is-glitch .app-root { z-index: 2147483700; isolation: isolate; }

/* ---- 覆盖层 ------------------------------------------------------------------------------- */
.glitch-layer {
  position: fixed;
  inset: -2%;
  display: block;
  pointer-events: none;
  will-change: opacity, transform, clip-path;
}

/* 扫描线：粗横纹 + 竖向细纹 + 快速下移的亮带 */
.glitch-layer--scan {
  z-index: 2147483000;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .55) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(90, 255, 230, .12) 0 1px, rgba(90, 255, 230, 0) 1px 5px),
    linear-gradient(to bottom, rgba(120, 220, 255, 0) 0%, rgba(120, 220, 255, .12) 42%, rgba(235, 255, 255, .38) 50%, rgba(120, 220, 255, .12) 58%, rgba(0, 0, 0, 0) 100%);
  background-size: 100% 100%, 100% 100%, 100% 18vh;
  background-repeat: repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, 0 -22vh;
  opacity: .95;
  animation:
    glitch-scan var(--glitch-scan-speed, 2s) linear infinite,
    glitch-flicker var(--glitch-flicker-speed, .8s) steps(1, end) infinite;
}

@keyframes glitch-scan {
  from { background-position: 0 0, 0 0, 0 -22vh; }
  to   { background-position: 0 0, 0 0, 0 122vh; }
}
@keyframes glitch-flicker {
  0%, 100% { opacity: .92; }
  7% { opacity: .55; }
  11% { opacity: 1; }
  23% { opacity: .7; }
  24% { opacity: .35; }
  27% { opacity: .98; }
  51% { opacity: .6; }
  52% { opacity: .95; }
  68% { opacity: .45; }
  70% { opacity: 1; }
  88% { opacity: .66; }
}

/* 噪点：三层不同角度的细纹，0.07–0.2s 跳一次（屏幕混合） */
.glitch-layer--noise {
  z-index: 2147483001;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1px, rgba(255, 255, 255, 0) 1px 2px),
    repeating-linear-gradient(90deg, rgba(255, 0, 70, .26) 0 1px, rgba(255, 0, 70, 0) 1px 3px),
    repeating-linear-gradient(45deg, rgba(0, 255, 240, .22) 0 1px, rgba(0, 255, 240, 0) 1px 4px);
  background-size: 2px 2px, 4px 4px, 6px 6px;
  mix-blend-mode: screen;
  opacity: .55;
  animation: glitch-noise var(--glitch-noise-speed, .12s) steps(2, end) infinite;
}

@keyframes glitch-noise {
  0%   { transform: translate3d(0, 0, 0); }
  15%  { transform: translate3d(-4px, 2px, 0); }
  30%  { transform: translate3d(3px, -4px, 0); }
  45%  { transform: translate3d(-2px, 4px, 0); }
  60%  { transform: translate3d(5px, -1px, 0); }
  75%  { transform: translate3d(-3px, -3px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* 横向撕裂：整层只露出一条粗横带，位置 / 宽度 / 左右错位每 0.5–1.5s 大跳一次 */
.glitch-layer--tear {
  z-index: 2147483002;
  background:
    repeating-linear-gradient(0deg, rgba(255, 0, 60, .26) 0 3px, rgba(0, 255, 240, .16) 3px 5px, rgba(0, 0, 0, 0) 5px 9px),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0 3%,
      rgba(255, 0, 70, .62) 3% 8%,
      rgba(0, 220, 255, .48) 8% 9%,
      rgba(0, 0, 0, 0) 9% 17%,
      rgba(0, 255, 240, .55) 17% 22%,
      rgba(255, 255, 255, .34) 22% 23%,
      rgba(0, 0, 0, 0) 23% 34%,
      rgba(255, 0, 160, .52) 34% 39%,
      rgba(0, 0, 0, 0) 39% 54%,
      rgba(255, 0, 70, .58) 54% 59%,
      rgba(0, 255, 240, .46) 59% 61%,
      rgba(0, 0, 0, 0) 61% 74%,
      rgba(120, 255, 220, .40) 74% 79%,
      rgba(0, 0, 0, 0) 79% 100%);
  mix-blend-mode: screen;
  opacity: .95;
  clip-path: inset(4% 0 80% 0);
  animation: glitch-tear var(--glitch-tear-speed, 1s) steps(1, end) infinite;
}

@keyframes glitch-tear {
  0%   { clip-path: inset(2% 0 84% 0);   transform: translate3d(-4%, 0, 0) scaleX(1.01); }
  7%   { clip-path: inset(28% 0 49% 0);  transform: translate3d(5%, 0, 0) scaleX(1.03); }
  14%  { clip-path: inset(58% 0 17% 0);  transform: translate3d(-6%, 0, 0) scaleX(1.02); }
  21%  { clip-path: inset(11% 0 72% 0);  transform: translate3d(4%, 0, 0); }
  29%  { clip-path: inset(45% 0 33% 0);  transform: translate3d(-5%, 0, 0) scaleX(.99); }
  37%  { clip-path: inset(76% 0 5% 0);   transform: translate3d(7%, 0, 0) scaleX(1.04); }
  45%  { clip-path: inset(22% 0 58% 0);  transform: translate3d(-4%, 0, 0); }
  53%  { clip-path: inset(3% 0 88% 0);   transform: translate3d(6%, 0, 0) scaleX(1.02); }
  61%  { clip-path: inset(52% 0 27% 0);  transform: translate3d(-7%, 0, 0) scaleX(1.03); }
  69%  { clip-path: inset(15% 0 66% 0);  transform: translate3d(4%, 0, 0); }
  77%  { clip-path: inset(66% 0 14% 0);  transform: translate3d(-5%, 0, 0) scaleX(1.02); }
  85%  { clip-path: inset(38% 0 43% 0);  transform: translate3d(6%, 0, 0); }
  93%  { clip-path: inset(81% 0 2% 0);   transform: translate3d(-4%, 0, 0) scaleX(1.03); }
  100% { clip-path: inset(6% 0 80% 0);   transform: translate3d(5%, 0, 0); }
}

/* 额外的红 / 青 / 品红块：和撕裂层不同步，横向错位更强 */
.glitch-layer--rgb {
  z-index: 2147483003;
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0 5%,
      rgba(255, 0, 60, .58) 5% 9%,
      rgba(0, 0, 0, 0) 9% 18%,
      rgba(0, 255, 240, .52) 18% 23%,
      rgba(0, 0, 0, 0) 23% 33%,
      rgba(255, 0, 180, .48) 33% 38%,
      rgba(0, 0, 0, 0) 38% 49%,
      rgba(255, 230, 0, .42) 49% 52%,
      rgba(0, 0, 0, 0) 52% 63%,
      rgba(0, 90, 255, .54) 63% 69%,
      rgba(0, 0, 0, 0) 69% 84%,
      rgba(255, 0, 60, .50) 84% 90%,
      rgba(0, 0, 0, 0) 90% 100%);
  mix-blend-mode: screen;
  opacity: .9;
  clip-path: inset(1% 0 55% 0);
  animation: glitch-rgb var(--glitch-rgb-speed, .7s) steps(1, end) infinite;
}

@keyframes glitch-rgb {
  0%   { clip-path: inset(1% 0 78% 0);  transform: translate3d(-7%, 0, 0) scaleX(1.02); }
  12%  { clip-path: inset(44% 0 38% 0); transform: translate3d(8%, 0, 0) scaleX(1.04); }
  24%  { clip-path: inset(72% 0 9% 0);  transform: translate3d(-9%, 0, 0) scaleX(1.01); }
  36%  { clip-path: inset(18% 0 64% 0); transform: translate3d(6%, 0, 0) scaleX(1.05); }
  48%  { clip-path: inset(59% 0 24% 0); transform: translate3d(-8%, 0, 0); }
  60%  { clip-path: inset(7% 0 85% 0);  transform: translate3d(9%, 0, 0) scaleX(1.03); }
  72%  { clip-path: inset(34% 0 47% 0); transform: translate3d(-6%, 0, 0) scaleX(1.02); }
  84%  { clip-path: inset(80% 0 3% 0);  transform: translate3d(7%, 0, 0); }
  100% { clip-path: inset(12% 0 70% 0); transform: translate3d(-5%, 0, 0) scaleX(1.04); }
}

/* 局部反色 1：白色 + difference，粗横带，0.8–1.9s 跳一次 */
.glitch-layer--invert {
  z-index: 2147483004;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 1;
  clip-path: inset(8% 0 80% 0);
  animation: glitch-invert var(--glitch-invert-speed, 1s) steps(1, end) infinite;
}

@keyframes glitch-invert {
  0%   { clip-path: inset(2% 0 86% 0); }
  9%   { clip-path: inset(31% 0 57% 0); }
  18%  { clip-path: inset(56% 0 26% 0); }
  27%  { clip-path: inset(13% 0 70% 0); }
  36%  { clip-path: inset(71% 0 12% 0); }
  45%  { clip-path: inset(43% 0 39% 0); }
  54%  { clip-path: inset(84% 0 4% 0); }
  63%  { clip-path: inset(20% 0 64% 0); }
  72%  { clip-path: inset(63% 0 22% 0); }
  81%  { clip-path: inset(5% 0 79% 0); }
  90%  { clip-path: inset(48% 0 33% 0); }
  100% { clip-path: inset(74% 0 10% 0); }
}

/* 局部反色 2：竖向 / 斜向的块，和横带不同步 */
.glitch-layer--invert-b {
  z-index: 2147483005;
  background: #fff;
  mix-blend-mode: difference;
  opacity: .96;
  clip-path: inset(0 60% 55% 0);
  animation: glitch-invert-b var(--glitch-invert-b-speed, 1s) steps(1, end) infinite;
}

@keyframes glitch-invert-b {
  0%   { clip-path: inset(18% 55% 58% 0); }
  11%  { clip-path: inset(54% 0 22% 45%); }
  22%  { clip-path: inset(5% 35% 74% 12%); }
  33%  { clip-path: inset(66% 18% 8% 30%); }
  44%  { clip-path: inset(26% 72% 42% 0); }
  55%  { clip-path: inset(0 8% 63% 52%); }
  66%  { clip-path: inset(78% 40% 2% 8%); }
  77%  { clip-path: inset(37% 24% 31% 36%); }
  88%  { clip-path: inset(12% 65% 70% 0); }
  100% { clip-path: inset(61% 10% 14% 48%); }
}

@supports not (mix-blend-mode: difference) {
  .glitch-layer--invert,
  .glitch-layer--invert-b { display: none; }
}

/* 数据切片：竖向的红 / 青 / 品红条纹，整层左右滑动（burst 时更明显） */
.glitch-layer--slice {
  z-index: 2147483006;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 0, 60, .58) 0 2%,
      rgba(0, 0, 0, 0) 2% 3.2%,
      rgba(0, 255, 240, .48) 3.2% 5.2%,
      rgba(0, 0, 0, 0) 5.2% 7%,
      rgba(255, 255, 255, .30) 7% 8%,
      rgba(0, 0, 0, 0) 8% 11%,
      rgba(255, 0, 180, .46) 11% 13%,
      rgba(0, 0, 0, 0) 13% 16%);
  mix-blend-mode: screen;
  opacity: .32;
  animation: glitch-slice var(--glitch-slice-speed, .8s) steps(1, end) infinite;
}

@keyframes glitch-slice {
  0%   { transform: translate3d(-3%, 0, 0) scaleX(1.02); filter: hue-rotate(0deg); }
  18%  { transform: translate3d(4%, 0, 0) scaleX(1.04); filter: hue-rotate(70deg); }
  36%  { transform: translate3d(-6%, 0, 0) scaleX(1.01); filter: hue-rotate(-80deg); }
  54%  { transform: translate3d(3%, 0, 0) scaleX(1.05); filter: hue-rotate(140deg); }
  72%  { transform: translate3d(-4%, 0, 0) scaleX(1.03); filter: hue-rotate(-30deg); }
  100% { transform: translate3d(5%, 0, 0) scaleX(1.02); filter: hue-rotate(40deg); }
}

/* 像素棋盘：错位的红青方块，overlay 混合，让整页像被压坏 */
.glitch-layer--checker {
  z-index: 2147483007;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255, 0, 60, .30) 0% 25%,
      rgba(0, 255, 240, .24) 25% 50%,
      rgba(255, 255, 255, .10) 50% 75%,
      rgba(0, 0, 0, 0) 75% 100%) 0 0 / 44px 44px;
  mix-blend-mode: overlay;
  opacity: .26;
  animation: glitch-checker var(--glitch-checker-speed, 1s) steps(2, end) infinite;
}

@keyframes glitch-checker {
  0%   { background-position: 0 0; filter: hue-rotate(0deg); }
  20%  { background-position: 22px -11px; filter: hue-rotate(80deg); }
  40%  { background-position: -18px 16px; filter: hue-rotate(-60deg); }
  60%  { background-position: 12px 26px; filter: hue-rotate(150deg); }
  80%  { background-position: -26px -8px; filter: hue-rotate(-120deg); }
  100% { background-position: 8px 12px; filter: hue-rotate(30deg); }
}

/* 整页颜色也一起发花：只在彩蛋模式、且每轮 burst 换一次色相（不是逐帧滤镜） */
html.is-glitch .screen {
  filter: saturate(1.7) contrast(1.18) hue-rotate(var(--glitch-hue, 0deg));
}

/* ---- 页面内容的小幅色差 / 抖动（transform 只作用于文字与按钮本身，不影响布局） --------------- */
html.is-glitch .hub-center__title,
html.is-glitch .hub-center__en {
  animation: glitch-title-jitter 1.4s steps(1, end) infinite;
  text-shadow:
    .04em 0 rgba(255, 0, 70, .95),
    -.04em 0 rgba(0, 255, 240, .85),
    0 0 .22rem rgba(255, 0, 70, .55);
}

html.is-glitch .hub-entry__name,
html.is-glitch .hub-entry__en,
html.is-glitch .verchip__label {
  text-shadow: .03em 0 rgba(255, 0, 70, .9), -.03em 0 rgba(0, 255, 240, .8);
}

html.is-glitch .hub-entry__name {
  animation: glitch-btn-jitter 2.2s steps(1, end) infinite;
}

@keyframes glitch-title-jitter {
  0%, 62%, 100% { transform: translate3d(0, 0, 0); }
  63% { transform: translate3d(-4px, 2px, 0); }
  66% { transform: translate3d(5px, -2px, 0); }
  69% { transform: translate3d(-2px, 3px, 0); }
  72% { transform: translate3d(4px, 0, 0); }
  75% { transform: translate3d(-5px, -2px, 0); }
  78% { transform: translate3d(2px, 2px, 0); }
}

@keyframes glitch-btn-jitter {
  0%, 74%, 100% { transform: none; }
  75% { transform: translate3d(3px, 0, 0) skewX(-3deg); }
  78% { transform: translate3d(-3px, 2px, 0) skewX(2deg); }
  81% { transform: translate3d(2px, -2px, 0); }
  84% { transform: translate3d(-2px, 1px, 0) skewX(-1deg); }
}

/* ---- 安静期（1:04）：粗白菱形 + 边缘氛围压暗；其它地方保留乱码，不是全黑 ---------------- */
div.glitch-quiet {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}

html.is-glitch.glitch-quiet div.glitch-quiet {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease;
}

div.glitch-quiet::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(0, 0, 0, 0) 0 38%,
      rgba(0, 0, 0, .10) 55%,
      rgba(0, 0, 0, .28) 76%,
      rgba(0, 0, 0, .48) 100%);
  box-shadow: inset 0 0 4vmin rgba(0, 0, 0, .18);
}

div.glitch-quiet::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26vmin;
  height: 26vmin;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1.4vmin solid rgba(255, 255, 255, .96);
  outline: .5vmin solid rgba(255, 255, 255, .82);
  outline-offset: 1vmin;
  background: rgba(255, 255, 255, .03);
  box-shadow:
    0 0 1vmin rgba(255, 255, 255, .95),
    0 0 4vmin rgba(255, 255, 255, .85),
    0 0 9vmin rgba(255, 255, 255, .45),
    inset 0 0 2.5vmin rgba(255, 255, 255, .55);
  animation: glitch-diamond-pulse 3.8s ease-in-out infinite;
}

@keyframes glitch-diamond-pulse {
  0%, 100% { opacity: .82; box-shadow: 0 0 1vmin rgba(255, 255, 255, .9), 0 0 3vmin rgba(255, 255, 255, .75), 0 0 6.5vmin rgba(255, 255, 255, .35), inset 0 0 2vmin rgba(255, 255, 255, .5); }
  50% { opacity: 1; box-shadow: 0 0 1.4vmin #fff, 0 0 4.5vmin rgba(255, 255, 255, .95), 0 0 10vmin rgba(255, 255, 255, .55), inset 0 0 3vmin rgba(255, 255, 255, .7); }
}

html.is-glitch.glitch-quiet .screen {
  filter: none;
}

/* 安静期把扫描线 / 噪点也压暗、停掉抖动：只留氛围，不抢菱形和问号 */
html.is-glitch.glitch-quiet .glitch-layer--scan { animation: none; opacity: .35; }
html.is-glitch.glitch-quiet .glitch-layer--noise { animation: none; opacity: .15; }

html.is-glitch.glitch-quiet .hub-center__title,
html.is-glitch.glitch-quiet .hub-center__en,
html.is-glitch.glitch-quiet .hub-entry__name {
  animation: none;
  text-shadow: none;
}

/* 2:07 之后的最乱期：所有特效层拉满，几乎看不清 */
html.is-glitch.glitch-max .glitch-layer--scan { opacity: 1; }
html.is-glitch.glitch-max .glitch-layer--noise { opacity: .9; animation-duration: .04s; }
html.is-glitch.glitch-max .glitch-layer--tear { opacity: 1; animation-duration: .22s; }
html.is-glitch.glitch-max .glitch-layer--rgb { opacity: 1; animation-duration: .18s; }
html.is-glitch.glitch-max .glitch-layer--invert { opacity: 1; animation-duration: .25s; }
html.is-glitch.glitch-max .glitch-layer--invert-b { opacity: 1; animation-duration: .2s; }
html.is-glitch.glitch-max .glitch-layer--slice { opacity: 1; animation-duration: .12s; }
html.is-glitch.glitch-max .glitch-layer--checker { opacity: .95; animation-duration: .14s; }
html.is-glitch.glitch-max .screen {
  filter: saturate(2.3) contrast(1.4) hue-rotate(var(--glitch-hue, 0deg));
}

/* ---- 点击屏障：彩蛋模式只有红色「退出」可以点（在 app-root 内，z-index 低于退出按钮） --------- */
.glitch-blocker {
  position: fixed;
  inset: 0;
  z-index: 2147483400;
  background: transparent;
  cursor: not-allowed;
  touch-action: none;
}

/* ---- 左上角红色「退出」（只在彩蛋模式下渲染；glitchMode.js GlitchExitButton） ----------------- */
.glitch-exit {
  position: fixed;
  z-index: 2147483600;
  top: max(.14rem, env(safe-area-inset-top));
  left: max(.14rem, env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  gap: .09rem;
  min-height: max(.44rem, 34px);
  padding: 0 .2rem;
  border: 1px solid #ff6b73;
  background: linear-gradient(180deg, #e5202c 0%, #b0101d 55%, #7a0712 100%);
  color: #fff;
  font: inherit;
  font-size: calc(.16 * var(--t));
  font-weight: 800;
  letter-spacing: .1em;
  cursor: pointer;
  box-shadow: 0 0 .22rem rgba(255, 0, 40, .7), inset 0 0 0 1px rgba(255, 255, 255, .12);
  animation: glitch-exit-in .18s ease-out both;
}

.glitch-exit:hover { filter: brightness(1.2); }
.glitch-exit:active { transform: translateY(1px); filter: brightness(.94); }
.glitch-exit:focus-visible { outline: 2px solid #ffd2d2; outline-offset: 2px; }

.glitch-exit__led {
  width: .09rem;
  height: .09rem;
  flex: none;
  background: #fff;
  box-shadow: 0 0 .07rem #fff, 0 0 .16rem #ff2b3d;
  animation: glitch-led .55s steps(2, end) infinite;
}

@keyframes glitch-exit-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes glitch-led {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: .22; }
}

/* ---- 版本弹层里的「？？？」条目（versionPicker.js，仅大厅） ---------------------------------- */
.verpick__row--glitch {
  border-color: rgba(225, 20, 40, .9);
  background: linear-gradient(90deg, rgba(92, 4, 12, .95) 0%, rgba(30, 4, 8, .8) 52%, rgba(92, 4, 12, .55) 100%);
  box-shadow: inset 0 0 .14rem rgba(255, 0, 40, .35);
  animation: verpick-glitch-row 2.6s steps(1, end) infinite;
}

.verpick__pick--glitch { color: #ffd7d7; }
.verpick__pick--glitch:hover,
.verpick__pick--glitch:focus-visible {
  background: rgba(225, 20, 40, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 96, 110, .5);
}

.verpick__name--glitch {
  color: #ff3348;
  font-family: var(--font-mono);
  font-size: calc(.24 * var(--t));
  letter-spacing: .22em;
  text-indent: .22em;
  text-shadow: 2px 0 rgba(255, 0, 70, .95), -2px 0 rgba(0, 255, 240, .6), 0 0 .22rem rgba(255, 0, 40, .7);
  animation: verpick-glitch-name 1.8s steps(1, end) infinite;
}

.verpick__badge.is-glitch {
  color: #ff8a8a;
  border-color: rgba(255, 70, 90, .8);
  letter-spacing: .12em;
}

@keyframes verpick-glitch-row {
  0%, 82%, 100% { transform: none; filter: none; }
  83% { transform: translateX(-2px); filter: hue-rotate(20deg) brightness(1.3); }
  86% { transform: translateX(3px); filter: none; }
  89% { transform: translateX(-1px); filter: brightness(1.4); }
}

@keyframes verpick-glitch-name {
  0%, 68%, 100% { opacity: 1; transform: none; }
  69% { opacity: .45; transform: translateX(-3px); }
  72% { opacity: 1; transform: translateX(3px); }
  75% { opacity: .6; transform: translateX(-1px); }
  78% { opacity: 1; transform: none; }
}

/* ---- burst：每次随机挑一种，强调整体强度，不是同一个循环的固定节奏 ------------------------- */
html.is-glitch.glitch-burst-a .glitch-layer--scan { opacity: 1; }
html.is-glitch.glitch-burst-a .glitch-layer--tear { animation-duration: .38s; opacity: 1; }
html.is-glitch.glitch-burst-a .glitch-layer--rgb { animation-duration: .3s; opacity: 1; }
html.is-glitch.glitch-burst-a .glitch-layer--invert { animation-duration: .42s; opacity: 1; }
html.is-glitch.glitch-burst-a .glitch-layer--invert-b { animation-duration: .36s; opacity: 1; }
html.is-glitch.glitch-burst-a .hub-center__title {
  text-shadow: .08em 0 rgba(255, 0, 70, 1), -.08em 0 rgba(0, 255, 240, .95), 0 0 .3rem rgba(255, 0, 90, .8);
}

html.is-glitch.glitch-burst-b .glitch-layer--noise { opacity: .88; animation-duration: .05s; }
html.is-glitch.glitch-burst-b .glitch-layer--scan { filter: hue-rotate(120deg) saturate(2.2); }
html.is-glitch.glitch-burst-b .glitch-layer--rgb { filter: hue-rotate(160deg) saturate(1.8); }
html.is-glitch.glitch-burst-b .glitch-layer--invert-b { animation-name: glitch-invert-b2; }
html.is-glitch.glitch-burst-b .glitch-layer--tear { filter: hue-rotate(-90deg) saturate(2); }

html.is-glitch.glitch-burst-c .glitch-layer--tear { filter: hue-rotate(-140deg) saturate(2.2); animation-duration: .26s; }
html.is-glitch.glitch-burst-c .glitch-layer--invert { animation-name: glitch-invert-burst; }
html.is-glitch.glitch-burst-c .glitch-layer--invert-b { animation-name: glitch-invert-burst; animation-duration: .5s; }
html.is-glitch.glitch-burst-c .glitch-layer--noise { opacity: .7; }
html.is-glitch.glitch-burst-c .glitch-layer--rgb { filter: hue-rotate(40deg); }

/* d：数据切片 + 整页短促横抖 */
html.is-glitch.glitch-burst-d .glitch-layer--slice { opacity: 1; animation-duration: .18s; }
html.is-glitch.glitch-burst-d .glitch-layer--checker { opacity: .5; }
html.is-glitch.glitch-burst-d .screen { animation: glitch-screen-shake .09s steps(2, end) 5; }

/* e：棋盘 + 整页反色（只持续不足 1 秒，退出按钮在 screen 外，不受影响） */
html.is-glitch.glitch-burst-e .glitch-layer--checker { opacity: .92; animation-duration: .22s; }
html.is-glitch.glitch-burst-e .screen { filter: invert(1) saturate(2.4) contrast(1.2); }

/* f：竖向切片 + 棋盘 + 轻微缩放脉冲 */
html.is-glitch.glitch-burst-f .glitch-layer--slice { opacity: .9; filter: hue-rotate(140deg); animation-duration: .22s; }
html.is-glitch.glitch-burst-f .glitch-layer--invert-b { animation-name: glitch-invert-b2; }
html.is-glitch.glitch-burst-f .screen { animation: glitch-screen-zoom .14s steps(2, end) 4; }

@keyframes glitch-screen-shake {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-3px, 2px, 0); }
  50% { transform: translate3d(3px, -2px, 0); }
  75% { transform: translate3d(-2px, -1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes glitch-screen-zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

@keyframes glitch-invert-burst {
  0%   { clip-path: polygon(0 18%, 100% 6%, 100% 22%, 0 34%); }
  20%  { clip-path: polygon(0 68%, 100% 56%, 100% 74%, 0 86%); }
  40%  { clip-path: polygon(0 4%, 100% 0, 100% 14%, 0 26%); }
  60%  { clip-path: polygon(0 84%, 100% 70%, 100% 88%, 0 98%); }
  80%  { clip-path: polygon(0 44%, 100% 30%, 100% 50%, 0 62%); }
  100% { clip-path: polygon(0 24%, 100% 14%, 100% 32%, 0 44%); }
}

@keyframes glitch-invert-b2 {
  0%   { clip-path: polygon(0 10%, 44% 10%, 46% 44%, 0 44%); }
  25%  { clip-path: polygon(56% 30%, 100% 30%, 100% 70%, 54% 70%); }
  50%  { clip-path: polygon(12% 58%, 66% 58%, 64% 92%, 10% 92%); }
  75%  { clip-path: polygon(40% 4%, 96% 4%, 94% 36%, 38% 36%); }
  100% { clip-path: polygon(0 30%, 50% 30%, 48% 76%, 0 76%); }
}

/* ---- prefers-reduced-motion：保留静态扫描线质感，停掉撕裂 / 反色 / burst / 抖动 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .glitch-layer--tear,
  .glitch-layer--rgb,
  .glitch-layer--invert,
  .glitch-layer--invert-b,
  .glitch-layer--slice,
  .glitch-layer--checker { display: none; }
  .glitch-layer--scan,
  .glitch-layer--noise { animation: none; }
  .glitch-layer--scan { opacity: .45; }
  .glitch-layer--noise { opacity: .12; }
  html.is-glitch .screen,
  html.is-glitch.glitch-max .screen { filter: none; }
  html.is-glitch .hub-center__title,
  html.is-glitch .hub-center__en,
  html.is-glitch .hub-entry__name { animation: none; text-shadow: none; }
  div.glitch-quiet::after { animation: none; }
  .verpick__row--glitch,
  .verpick__name--glitch,
  .glitch-exit,
  .glitch-exit__led { animation: none; }
}