/**
 * Chroma glitch 色差效果（红蓝错层）
 * 用于：选项卡、卡片、按钮、LOGO 等，选中/hover 时抖一下。
 *
 * 用法：
 * 1) 仅边框色差（容器有边框时）：容器加 .hover-chroma-border，hover 时跑边框动画
 * 2) 仅内容/文字色差：内容块加 .chroma-content，父级加 .hover-chroma-border，父 hover 时子跑内容动画
 * 3) 单元素（按钮/LOGO）边框+内容一起：元素加 .hover-chroma-inline
 *
 * 可覆盖变量定制：--chroma-red, --chroma-cyan, --chroma-offset, --chroma-duration 等
 */
:root {
  --chroma-red: rgba(255, 60, 80, 0.65);
  --chroma-cyan: rgba(0, 200, 255, 0.65);
  --chroma-offset: 3px;
  --chroma-offset-border: 2px;
  --chroma-duration: 0.12s;
}

/* 选中时抖一下 */
@keyframes chroma-glitch-border {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset calc(var(--chroma-offset-border) * -1) 0 0 var(--chroma-red), inset var(--chroma-offset-border) 0 0 var(--chroma-cyan); }
}

@keyframes chroma-glitch-content {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(calc(var(--chroma-offset) * -1) 0 0 var(--chroma-red)) drop-shadow(var(--chroma-offset) 0 0 var(--chroma-cyan)); }
}

@keyframes chroma-glitch-inline {
  0%, 100% { box-shadow: none; filter: none; }
  50% {
    box-shadow: inset calc(var(--chroma-offset-border) * -1) 0 0 var(--chroma-red), inset var(--chroma-offset-border) 0 0 var(--chroma-cyan);
    filter: drop-shadow(calc(var(--chroma-offset) * -1) 0 0 var(--chroma-red)) drop-shadow(var(--chroma-offset) 0 0 var(--chroma-cyan));
  }
}

/* 仅边框色差（容器） */
.hover-chroma-border:hover {
  animation: chroma-glitch-border var(--chroma-duration) ease-out;
}

/* 父 hover 时，子内容跑文字/图形色差（与 .hover-chroma-border 搭配：父加 hover-chroma-border，子加 chroma-content） */
.hover-chroma-border:hover .chroma-content {
  animation: chroma-glitch-content var(--chroma-duration) ease-out;
}

/* 单元素：边框 + 内容一起抖（按钮、LOGO 等） */
.hover-chroma-inline:hover {
  animation: chroma-glitch-inline var(--chroma-duration) ease-out;
}