/* ============================================================
   SYHLA · 色彩引擎 V2 特效样式表 (effects.css)
   85 项特效 CSS 化，通过 body.ce2-fx-{id} 切换
   色相流转：body.ce2-hue 启用 @property 动画
   ============================================================ */

/* 色相流转注册属性 */
@property --ce2-hue {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* 色相流转动画（纯 CSS，零 JS） */
.ce2-hue {
  animation: ce2-hue-rotate 20s linear infinite;
}
@keyframes ce2-hue-rotate {
  from { --ce2-hue: 0deg; }
  to   { --ce2-hue: 360deg; }
}

/* 特效层基础：所有特效作用于 body 背景伪元素 */
body[class*="ce2-fx-"]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity .4s;
}

/* ========== 渐变类 ========== */
.ce2-fx-gradient::before {
  background: linear-gradient(120deg, #3b82f6, #a855f7, #ec4899, #3b82f6);
  background-size: 300% 300%;
  animation: ce2-bg-shift 10s ease infinite;
}
.ce2-fx-midnight::before {
  background: linear-gradient(160deg, #020617, #1e293b, #0f172a, #020617);
  background-size: 260% 260%;
  animation: ce2-bg-shift 16s ease infinite;
}
.ce2-fx-glass::before {
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
  backdrop-filter: blur(20px);
}
.ce2-fx-eternal::before {
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e, #0f0c29);
  background-size: 400% 400%;
  animation: ce2-bg-shift 20s ease infinite;
}
.ce2-fx-singularity::before {
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #000 100%);
}
.ce2-fx-legacy::before {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #e94560, #1a1a2e);
  background-size: 300% 300%;
  animation: ce2-bg-shift 14s ease infinite;
}

/* ========== 日式类 ========== */
.ce2-fx-sunset::before {
  background: linear-gradient(160deg, #1e3a8a, #b45309, #f59e0b 55%, #fbbf24);
  background-size: 250% 250%;
  animation: ce2-bg-shift 14s ease infinite;
}
.ce2-fx-candy::before {
  background: linear-gradient(135deg, #fbcfe8, #bfdbfe, #fde68a, #fbcfe8);
  background-size: 280% 280%;
  animation: ce2-bg-shift 12s ease infinite;
}
.ce2-fx-sakura::before {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8, #f9a8d4, #fce7f3);
  background-size: 250% 250%;
  animation: ce2-bg-shift 15s ease infinite;
}
.ce2-fx-wave::before {
  background: linear-gradient(180deg, #1e3a5f 0%, #2563eb 40%, #60a5fa 70%, #dbeafe 100%);
}
.ce2-fx-koi::before {
  background: linear-gradient(135deg, #fff7ed, #fed7aa, #f97316, #ea580c);
  background-size: 250% 250%;
  animation: ce2-bg-shift 13s ease infinite;
}
.ce2-fx-zen::before {
  background: linear-gradient(135deg, #f5f5f4, #e7e5e4, #d6d3d1, #f5f5f4);
  background-size: 200% 200%;
  animation: ce2-bg-shift 18s ease infinite;
}
.ce2-fx-plum::before {
  background: linear-gradient(135deg, #fef2f2, #fecaca, #dc2626, #7f1d1d);
  background-size: 250% 250%;
  animation: ce2-bg-shift 14s ease infinite;
}
.ce2-fx-orchid::before {
  background: linear-gradient(135deg, #f5f3ff, #ddd6fe, #8b5cf6, #6d28d9);
  background-size: 250% 250%;
  animation: ce2-bg-shift 15s ease infinite;
}
.ce2-fx-chrysanthemum::before {
  background: linear-gradient(135deg, #fffbeb, #fef3c7, #f59e0b, #b45309);
  background-size: 250% 250%;
  animation: ce2-bg-shift 13s ease infinite;
}

/* ========== 自然类 ========== */
.ce2-fx-aurora::before {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364, #10b981);
  background-size: 300% 300%;
  animation: ce2-bg-shift 12s ease infinite;
}
.ce2-fx-ocean::before {
  background: linear-gradient(180deg, #0c4a6e, #0369a1, #0ea5e9, #38bdf8);
}
.ce2-fx-forest::before {
  background: linear-gradient(135deg, #14532d, #166534, #15803d, #22c55e);
  background-size: 250% 250%;
  animation: ce2-bg-shift 16s ease infinite;
}
.ce2-fx-desert::before {
  background: linear-gradient(180deg, #fef3c7, #fcd34d, #f59e0b, #b45309);
}
.ce2-fx-starry::before {
  background: radial-gradient(ellipse at top, #1e1b4b 0%, #0f0c29 50%, #000 100%);
}
.ce2-fx-galaxy::before {
  background: radial-gradient(ellipse at 30% 50%, #581c87 0%, #1e1b4b 30%, #0f0c29 60%, #000 100%);
}
.ce2-fx-volcano::before {
  background: linear-gradient(180deg, #1a0a0a 0%, #7f1d1d 30%, #dc2626 60%, #f97316 80%, #fbbf24 100%);
}
.ce2-fx-glacier::before {
  background: linear-gradient(180deg, #e0f2fe 0%, #7dd3fc 30%, #0284c7 60%, #0c4a6e 100%);
}
.ce2-fx-bamboo::before {
  background: linear-gradient(135deg, #dcfce7, #86efac, #22c55e, #15803d);
  background-size: 250% 250%;
  animation: ce2-bg-shift 15s ease infinite;
}
.ce2-fx-cosmos::before {
  background: radial-gradient(circle at 20% 30%, #7c3aed 0%, transparent 40%),
              radial-gradient(circle at 80% 70%, #db2777 0%, transparent 40%),
              radial-gradient(circle at 50% 50%, #1e1b4b 0%, #000 100%);
}
.ce2-fx-zenith::before {
  background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 20%, #38bdf8 50%, #7dd3fc 70%, #e0f2fe 100%);
}

/* ========== 科技类 ========== */
.ce2-fx-neon::before {
  background: linear-gradient(135deg, #0a0a0f, #1a0a2e, #0a1a2e, #0a0a0f);
  background-size: 300% 300%;
  animation: ce2-bg-shift 12s ease infinite;
  box-shadow: inset 0 0 100px rgba(0,255,255,.1);
}
.ce2-fx-cyber::before {
  background: linear-gradient(135deg, #0a0a1a, #1a0a3a, #0a1a3a, #ff006e22);
  background-size: 300% 300%;
  animation: ce2-bg-shift 10s ease infinite;
}
.ce2-fx-matrix::before {
  background: linear-gradient(180deg, #000 0%, #001a00 50%, #003300 100%);
}
.ce2-fx-hologram::before {
  background: linear-gradient(135deg, rgba(0,255,255,.1), rgba(255,0,255,.1), rgba(0,255,255,.1));
  background-size: 200% 200%;
  animation: ce2-bg-shift 8s ease infinite;
}
.ce2-fx-grid::before {
  background:
    linear-gradient(rgba(124,156,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,156,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: #0a0c18;
}
.ce2-fx-circuit::before {
  background:
    linear-gradient(90deg, rgba(0,255,100,.08) 2px, transparent 2px),
    linear-gradient(rgba(0,255,100,.08) 2px, transparent 2px);
  background-size: 60px 60px;
  background-color: #0a0f0a;
}
.ce2-fx-binary::before {
  background: linear-gradient(135deg, #000, #001122, #000);
  background-size: 200% 200%;
  animation: ce2-bg-shift 15s ease infinite;
}
.ce2-fx-quantum::before {
  background: radial-gradient(circle at 30% 40%, #4f46e5 0%, transparent 50%),
              radial-gradient(circle at 70% 60%, #9333ea 0%, transparent 50%),
              #0a0a1a;
}
.ce2-fx-paradox::before {
  background: conic-gradient(from 0deg, #0a0a1a, #1a0a3a, #0a1a3a, #3a1a0a, #0a0a1a);
  animation: ce2-rotate 30s linear infinite;
}

/* ========== 光效类 ========== */
.ce2-fx-gold::before {
  background: linear-gradient(135deg, #fef3c7, #fcd34d, #f59e0b, #d97706, #fef3c7);
  background-size: 300% 300%;
  animation: ce2-bg-shift 12s ease infinite;
}
.ce2-fx-silver::before {
  background: linear-gradient(135deg, #f8fafc, #cbd5e1, #94a3b8, #f8fafc);
  background-size: 250% 250%;
  animation: ce2-bg-shift 14s ease infinite;
}
.ce2-fx-rainbow::before {
  background: linear-gradient(135deg, #ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  background-size: 400% 400%;
  animation: ce2-bg-shift 15s ease infinite;
}
.ce2-fx-glow::before {
  background: radial-gradient(circle at 50% 50%, rgba(124,156,255,.3) 0%, rgba(124,156,255,.1) 40%, transparent 70%);
}
.ce2-fx-jade::before {
  background: linear-gradient(135deg, #d1fae5, #6ee7b7, #10b981, #047857);
  background-size: 250% 250%;
  animation: ce2-bg-shift 14s ease infinite;
}
.ce2-fx-amber::before {
  background: linear-gradient(135deg, #fffbeb, #fcd34d, #f59e0b, #92400e);
  background-size: 250% 250%;
  animation: ce2-bg-shift 13s ease infinite;
}
.ce2-fx-ruby::before {
  background: linear-gradient(135deg, #fef2f2, #fca5a5, #dc2626, #7f1d1d);
  background-size: 250% 250%;
  animation: ce2-bg-shift 14s ease infinite;
}
.ce2-fx-sapphire::before {
  background: linear-gradient(135deg, #eff6ff, #93c5fd, #2563eb, #1e3a8a);
  background-size: 250% 250%;
  animation: ce2-bg-shift 15s ease infinite;
}
.ce2-fx-amethyst::before {
  background: linear-gradient(135deg, #faf5ff, #d8b4fe, #9333ea, #581c87);
  background-size: 250% 250%;
  animation: ce2-bg-shift 14s ease infinite;
}
.ce2-fx-pearl::before {
  background: linear-gradient(135deg, #fefce8, #fef9c3, #fef3c7, #fefce8);
  background-size: 200% 200%;
  animation: ce2-bg-shift 18s ease infinite;
}
.ce2-fx-neonpulse::before {
  background: radial-gradient(circle at 50% 50%, rgba(239,68,68,.2) 0%, rgba(239,68,68,.05) 40%, transparent 70%);
  animation: ce2-pulse 3s ease-in-out infinite;
}
.ce2-fx-divine::before {
  background: radial-gradient(ellipse at top, #fef3c7 0%, #fcd34d 20%, rgba(252,211,77,.3) 50%, transparent 80%);
}
.ce2-fx-nirvana::before {
  background: radial-gradient(circle at 50% 30%, #fde68a 0%, #fbbf24 20%, rgba(251,191,36,.2) 50%, transparent 80%);
  animation: ce2-pulse 4s ease-in-out infinite;
}

/* ========== 艺术类 ========== */
.ce2-fx-ink::before {
  background: linear-gradient(135deg, #f5f5f4, #d6d3d1, #78716c, #292524);
  background-size: 300% 300%;
  animation: ce2-bg-shift 20s ease infinite;
}
.ce2-fx-oil::before {
  background: linear-gradient(135deg, #7c2d12, #166534, #1e3a8a, #7c2d12);
  background-size: 300% 300%;
  animation: ce2-bg-shift 18s ease infinite;
}
.ce2-fx-watercolor::before {
  background: radial-gradient(circle at 20% 30%, rgba(251,113,133,.2) 0%, transparent 40%),
              radial-gradient(circle at 80% 20%, rgba(96,165,250,.2) 0%, transparent 40%),
              radial-gradient(circle at 60% 80%, rgba(251,191,36,.2) 0%, transparent 40%),
              #fafaf9;
}
.ce2-fx-sketch::before {
  background: linear-gradient(135deg, #fafaf9, #f5f5f4, #e7e5e4, #fafaf9);
  background-size: 200% 200%;
  animation: ce2-bg-shift 20s ease infinite;
}
.ce2-fx-phoenix::before {
  background: linear-gradient(135deg, #7f1d1d, #dc2626, #f97316, #fbbf24, #7f1d1d);
  background-size: 300% 300%;
  animation: ce2-bg-shift 12s ease infinite;
}
.ce2-fx-dragon::before {
  background: linear-gradient(135deg, #14532d, #16a34a, #facc15, #dc2626, #14532d);
  background-size: 300% 300%;
  animation: ce2-bg-shift 14s ease infinite;
}
.ce2-fx-tao::before {
  background: radial-gradient(circle at 40% 50%, #000 0%, #000 45%, #fff 45%, #fff 55%, #000 55%, #000 100%);
}

/* ========== 纹理类 ========== */
.ce2-fx-grain::before {
  background:
    repeating-conic-gradient(rgba(255,255,255,.03) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px,
    #0a0c18;
}
.ce2-fx-noise::before {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.02) 2px, rgba(255,255,255,.02) 4px),
    #0a0c18;
}
.ce2-fx-paper::before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(139,69,19,.03) 3px, rgba(139,69,19,.03) 4px),
    linear-gradient(135deg, #fefce8, #fef9c3);
}
.ce2-fx-fabric::before {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.03) 0px, rgba(0,0,0,.03) 1px, transparent 1px, transparent 4px),
    #1a1a2e;
}
.ce2-fx-clay::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.1) 0%, transparent 50%),
    linear-gradient(135deg, #d97706, #b45309, #92400e);
}
.ce2-fx-obsidian::before {
  background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #0a0a0a);
  background-size: 200% 200%;
  animation: ce2-bg-shift 20s ease infinite;
}
.ce2-fx-marble::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(124,156,255,.1) 0%, transparent 50%),
    linear-gradient(135deg, #f8fafc, #e2e8f0, #cbd5e1, #f8fafc);
  background-size: 250% 250%;
  animation: ce2-bg-shift 18s ease infinite;
}
.ce2-fx-wood::before {
  background:
    repeating-linear-gradient(90deg, rgba(139,69,19,.1) 0px, rgba(139,69,19,.1) 2px, transparent 2px, transparent 8px),
    linear-gradient(135deg, #92400e, #78350f, #451a03);
}
.ce2-fx-metal::before {
  background: linear-gradient(135deg, #64748b, #94a3b8, #cbd5e1, #64748b);
  background-size: 200% 200%;
  animation: ce2-bg-shift 15s ease infinite;
}
.ce2-fx-carbon::before {
  background:
    repeating-linear-gradient(45deg, #1a1a1a 0px, #1a1a1a 2px, #0a0a0a 2px, #0a0a0a 4px),
    #0a0a0a;
}
.ce2-fx-origin::before {
  background:
    radial-gradient(circle at 50% 50%, #1e1b4b 0%, #0f0c29 40%, #000 100%),
    repeating-conic-gradient(rgba(255,255,255,.02) 0% 25%, transparent 0% 50%) 0 0 / 20px 20px;
}
.ce2-fx-void::before {
  background: radial-gradient(circle at 50% 50%, #0a0a1a 0%, #000 70%);
}

/* ========== 动态类 ========== */
.ce2-fx-breathing::before {
  background: radial-gradient(circle at 50% 50%, rgba(124,156,255,.25) 0%, rgba(124,156,255,.08) 40%, transparent 70%);
  animation: ce2-pulse 4s ease-in-out infinite;
}
.ce2-fx-pulse::before {
  background: radial-gradient(circle at 50% 50%, rgba(168,85,247,.3) 0%, rgba(168,85,247,.1) 40%, transparent 70%);
  animation: ce2-pulse 2s ease-in-out infinite;
}
.ce2-fx-waveflow::before {
  background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 30%, #0ea5e9 60%, #38bdf8 100%);
  animation: ce2-wave 6s ease-in-out infinite;
}
.ce2-fx-particles::before {
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 90% 50%, rgba(255,255,255,.4), transparent),
    #0a0c18;
  animation: ce2-float 10s ease-in-out infinite;
}
.ce2-fx-hueshift::before {
  background: linear-gradient(135deg, hsl(var(--ce2-hue), 70%, 50%), hsl(calc(var(--ce2-hue) + 60deg), 70%, 50%), hsl(calc(var(--ce2-hue) + 120deg), 70%, 50%));
  background-size: 200% 200%;
  animation: ce2-hue-rotate 15s linear infinite, ce2-bg-shift 10s ease infinite;
}
.ce2-fx-warp::before {
  background: conic-gradient(from var(--ce2-hue), #0a0a1a, #1a0a3a, #3a0a1a, #0a0a1a);
  animation: ce2-rotate 8s linear infinite;
}
.ce2-fx-supernova::before {
  background: radial-gradient(circle at 50% 50%, #fbbf24 0%, #f97316 20%, #dc2626 40%, rgba(220,38,38,.3) 60%, transparent 80%);
  animation: ce2-pulse 2s ease-in-out infinite;
}
.ce2-fx-blackhole::before {
  background: radial-gradient(circle at 50% 50%, #000 0%, #000 20%, #1a0a3a 30%, rgba(26,10,58,.5) 50%, transparent 70%);
  animation: ce2-rotate 20s linear infinite;
}
.ce2-fx-dimension::before {
  background:
    linear-gradient(45deg, rgba(124,58,237,.2) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(236,72,153,.2) 25%, transparent 25%),
    #0a0a1a;
  background-size: 60px 60px;
  animation: ce2-bg-shift 8s ease infinite;
}
.ce2-fx-infinity::before {
  background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #10b981, #3b82f6);
  animation: ce2-rotate 12s linear infinite;
  opacity: 0.4;
}
.ce2-fx-apex::before {
  background: linear-gradient(0deg, #0a0a1a 0%, #1e1b4b 40%, #4f46e5 70%, #818cf8 100%);
  animation: ce2-pulse 5s ease-in-out infinite;
}

/* ========== 关键帧 ========== */
@keyframes ce2-bg-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ce2-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.05); }
}
@keyframes ce2-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ce2-wave {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 0% 20%; }
}
@keyframes ce2-float {
  0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
  50%      { background-position: 5% 10%, -5% -5%, 10% 5%, -10% 10%, 5% -5%; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  body[class*="ce2-fx-"]::before,
  .ce2-hue {
    animation: none !important;
  }
}