/* 特效层 - CSS 动画类 */

.fx-mount {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.fx-mount canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.fx-css {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 流光渐变 */
.fx-wave-gradient {
  background: linear-gradient(-45deg, #ff0050, #7c4dff, #00e5ff, #ff6b00, #ff0050);
  background-size: 400% 400%;
  animation: fx-wave-grad 8s ease infinite;
  opacity: 0.55;
  mix-blend-mode: screen;
}
@keyframes fx-wave-grad {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 扫光 */
.fx-shimmer {
  background: rgba(0, 0, 0, 0.35);
}
.fx-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: rotate(25deg);
  animation: fx-shimmer 3s ease-in-out infinite;
}
@keyframes fx-shimmer {
  0% { left: -60%; }
  100% { left: 120%; }
}

/* 流光边框 */
.fx-border-flow {
  background: transparent;
  box-shadow: inset 0 0 0 3px transparent;
}
.fx-border-flow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(90deg, #ff0050, #00e5ff, #ffd700, #ff0050);
  background-size: 300% 100%;
  animation: fx-border-flow 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@keyframes fx-border-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* 脉冲波纹 */
.fx-pulse-ring {
  background: radial-gradient(circle at center, transparent 30%, rgba(255,0,80,0.08) 70%);
}
.fx-pulse-ring::before,
.fx-pulse-ring::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20%;
  height: 20%;
  margin: -10% 0 0 -10%;
  border: 2px solid rgba(255, 0, 80, 0.6);
  border-radius: 50%;
  animation: fx-pulse-ring 3s ease-out infinite;
}
.fx-pulse-ring::after { animation-delay: 1.5s; }
@keyframes fx-pulse-ring {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

/* 扫描线 */
.fx-scan-line {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 229, 255, 0.03) 2px,
    rgba(0, 229, 255, 0.03) 4px
  );
}
.fx-scan-line::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.8), transparent);
  box-shadow: 0 0 20px rgba(0,229,255,0.6);
  animation: fx-scan-line 4s linear infinite;
}
@keyframes fx-scan-line {
  0% { top: -4px; }
  100% { top: 100%; }
}

/* 故障 */
.fx-glitch {
  background: rgba(0, 0, 0, 0.2);
}
.fx-glitch::before,
.fx-glitch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,0,80,0.05) 0 2px, transparent 2px 4px);
  animation: fx-glitch 2.5s steps(2) infinite;
}
.fx-glitch::after {
  background: repeating-linear-gradient(90deg, rgba(0,229,255,0.05) 0 3px, transparent 3px 6px);
  animation-duration: 3s;
  mix-blend-mode: screen;
}
@keyframes fx-glitch {
  0%, 90%, 100% { transform: translate(0); clip-path: inset(0 0 0 0); }
  92% { transform: translate(-4px, 2px); clip-path: inset(20% 0 60% 0); }
  94% { transform: translate(4px, -2px); clip-path: inset(40% 0 30% 0); }
  96% { transform: translate(-2px, 1px); clip-path: inset(10% 0 70% 0); }
}

/* 全息 */
.fx-hologram {
  background: linear-gradient(180deg, rgba(0,229,255,0.12), rgba(124,77,255,0.08));
  animation: fx-hologram 4s ease-in-out infinite;
}
.fx-hologram::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,229,255,0.06) 3px, rgba(0,229,255,0.06) 4px);
  animation: fx-holo-scan 6s linear infinite;
}
@keyframes fx-hologram {
  0%, 100% { opacity: 0.85; filter: hue-rotate(0deg); }
  50% { opacity: 1; filter: hue-rotate(30deg); }
}
@keyframes fx-holo-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(20px); }
}

/* RGB 色散 */
.fx-rgb-split {
  background: rgba(0, 0, 0, 0.15);
}
.fx-rgb-split::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 8px 0 30px rgba(255,0,0,0.15), inset -8px 0 30px rgba(0,255,255,0.15);
  animation: fx-rgb-split 3s ease-in-out infinite;
}
@keyframes fx-rgb-split {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* VHS 噪点 */
.fx-vhs-noise {
  background: rgba(0, 0, 0, 0.25);
}
.fx-vhs-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fx-vhs-flicker 0.15s steps(4) infinite;
}
.fx-vhs-noise::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.08);
  animation: fx-vhs-line 5s linear infinite;
}
@keyframes fx-vhs-flicker {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.2; }
}
@keyframes fx-vhs-line {
  0% { top: -3px; }
  100% { top: 100%; }
}

/* 漏光 */
.fx-light-leak {
  background: radial-gradient(ellipse at 0% 0%, rgba(255,107,0,0.35), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(255,0,80,0.3), transparent 45%);
  animation: fx-light-leak 6s ease-in-out infinite alternate;
}
@keyframes fx-light-leak {
  0% { opacity: 0.6; filter: blur(0); }
  100% { opacity: 1; filter: blur(2px); }
}

/* 激光束 */
.fx-laser {
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.fx-laser span {
  position: absolute;
  width: 2px;
  height: 120%;
  top: -10%;
  background: linear-gradient(180deg, transparent, #ff0050, #00e5ff, transparent);
  box-shadow: 0 0 12px #ff0050;
  animation: fx-laser 4s ease-in-out infinite;
}
.fx-laser span:nth-child(2) { left: 35%; animation-delay: 1.2s; background: linear-gradient(180deg, transparent, #00e5ff, #ffd700, transparent); }
.fx-laser span:nth-child(3) { left: 70%; animation-delay: 2.4s; }
@keyframes fx-laser {
  0%, 100% { transform: rotate(-15deg) translateY(0); opacity: 0.3; }
  50% { transform: rotate(-15deg) translateY(10%); opacity: 0.9; }
}

/* 霓虹光晕 */
.fx-neon-glow {
  background: radial-gradient(circle at 30% 40%, rgba(255,0,80,0.25), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(0,229,255,0.2), transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(124,77,255,0.2), transparent 30%);
  animation: fx-neon-glow 5s ease-in-out infinite alternate;
}
@keyframes fx-neon-glow {
  0% { filter: brightness(0.9); }
  100% { filter: brightness(1.3); }
}

/* 色谱波浪 */
.fx-chromatic {
  background: linear-gradient(90deg,
    rgba(255,0,80,0.2) 0%, rgba(255,215,0,0.15) 25%,
    rgba(0,229,255,0.2) 50%, rgba(124,77,255,0.15) 75%, rgba(255,0,80,0.2) 100%);
  background-size: 200% 100%;
  animation: fx-chromatic 6s linear infinite;
}
@keyframes fx-chromatic {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 呼吸光晕 */
.fx-breathe {
  background: radial-gradient(circle at center, rgba(255,0,80,0.2), transparent 60%);
  animation: fx-breathe 3s ease-in-out infinite;
}
@keyframes fx-breathe {
  0%, 100% { transform: scale(0.95); opacity: 0.6; }
  50% { transform: scale(1.05); opacity: 1; }
}

/* 棱镜折射 */
.fx-prism {
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255,0,80,0.15), rgba(255,215,0,0.1), rgba(0,229,255,0.15),
    rgba(124,77,255,0.1), rgba(255,0,80,0.15));
  animation: fx-prism 10s linear infinite;
}
@keyframes fx-prism {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 预览缩略图 */
.fx-preview {
  background: #0a0a12;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.fx-preview .fx-mount,
.fx-preview .fx-css {
  transform: scale(1);
}

.fx-cat-btn.active { border-color: #ff0050; background: rgba(255,0,80,0.15); color: #fff; }

.el-effect { mix-blend-mode: screen; }
.el-effect.selected { mix-blend-mode: normal; }