/* 文字特效样式 - 使用原始备份文件的完整定义 */

/* CSS变量定义 */
:root { --glow: #00e5ff; }

/* 为使用背景裁剪的特效添加额外空间 */
.fx-chrome, .fx-rainbow, .fx-gold, .fx-laser, .fx-retro, .fx-hologram, .fx-plasma, .fx-cyber, .fx-electric, .fx-atomic, .fx-vapor, .fx-synthwave {
    padding-bottom: 0.1em;
    display: inline-block;
}

/* --- 特效样式 (使用原始文件定义) --- */
.fx-none { text-shadow: none; }
.fx-neon { color: #fff; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--glow), 0 0 40px var(--glow), 0 0 80px var(--glow); }
.fx-glitch { position: relative; color: #fff; }
.fx-glitch::before, .fx-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; }
.fx-glitch::before { color: #f0f; z-index: -1; animation: glitch1 0.3s infinite; clip-path: inset(0 0 60% 0); }
.fx-glitch::after { color: #0ff; z-index: -2; animation: glitch2 0.3s infinite; clip-path: inset(40% 0 0 0); }
.fx-fire { color: #fff; text-shadow: 0 0 4px #fff, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; }
.fx-chrome { background: linear-gradient(to bottom, #b4e3ff, #4facfe 50%, #00f2fe 51%, #4facfe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5)); -webkit-text-stroke: 1px rgba(255,255,255,0.4); }
.fx-3d { color: var(--glow); text-shadow: 1px 1px #fff, 2px 2px #fff, 3px 3px #fff, 4px 4px #000, 5px 5px #000; }
.fx-rainbow { background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); background-size: 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbow 10s linear infinite; }
.fx-gold { background: linear-gradient(to bottom, #cfc09f 22%, #634f2c 24%, #cfc09f 26%, #cfc09f 27%, #ffecb3 40%, #3a2c0f 78%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 1px 0px rgba(255,255,255,0.2); }
.fx-ice { color: #e0f7fa; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00ffff, 0 0 20px #00ffff, 0 0 35px #00ffff; font-weight: bold; }
.fx-matrix { color: #0f0; text-shadow: 2px 2px 0px #000; font-family: 'VT323', monospace !important; letter-spacing: 2px; }
.fx-laser { background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #ff8800, #ff8800, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: blur(0.5px) brightness(1.5); }
.fx-retro { background: linear-gradient(to bottom, #ff00cc 0%, #333399 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #fff; }
.fx-glow { color: #fff; text-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow), 0 0 30px var(--glow); }
.fx-hologram { background: linear-gradient(45deg, #00ffff, #ff00ff, #00ffff); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: hologram 2s ease-in-out infinite; opacity: 0.8; }
.fx-plasma { background: linear-gradient(45deg, #ff0080, #00ff80, #80ff00, #ff8000); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: plasma 3s ease-in-out infinite; }
.fx-cyber { background: linear-gradient(90deg, #00ffff, #ff00ff, #00ffff); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: cyber 1s linear infinite; }
.fx-neon-pulse { color: #fff; text-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow), 0 0 30px var(--glow); animation: pulse 1.5s ease-in-out infinite; }
.fx-electric { background: linear-gradient(45deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; }
.fx-electric::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(4px 4px at 20% 30%, white, transparent), radial-gradient(3px 3px at 60% 70%, white, transparent), radial-gradient(2px 2px at 50% 50%, white, transparent); background-size: 200px 200px; animation: stars 10s linear infinite; opacity: 0.8; }
.fx-atomic { background: radial-gradient(circle, #ffffff 0%, #00ffff 30%, #ff00ff 60%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: atomic 2s ease-in-out infinite; transform: translate(-50%, -50%) scale(1) !important; }
.fx-vapor { background: linear-gradient(135deg, #ff6ec7, #c77dff, #72ffff, #ffb4a2); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: vapor 4s ease-in-out infinite; }
.fx-synthwave { 
    background: linear-gradient(to bottom, var(--glow, #ff1493) 0%, var(--glow, #ff1493) 50%, #ffd700 50%, #ffd700 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    filter: contrast(1.1) brightness(1.1) saturate(1.2) drop-shadow(0 0 3px #00e5ff) drop-shadow(0 0 6px #00e5ff) drop-shadow(0 0 9px #00e5ff);
    animation: synthwave 3s ease-in-out infinite; 
}

/* 动画定义 */
@keyframes rainbow { 0% {background-position: 0 50%;} 100% {background-position: 400% 50%;} }
@keyframes glitch1 { 0%{transform:translate(0)} 20%{transform:translate(-2px,2px)} 40%{transform:translate(-2px,-2px)} 60%{transform:translate(2px,2px)} 80%{transform:translate(2px,-2px)} 100%{transform:translate(0)} }
@keyframes glitch2 { 0%{transform:translate(0)} 20%{transform:translate(2px,-2px)} 40%{transform:translate(2px,2px)} 60%{transform:translate(-2px,-2px)} 80%{transform:translate(-2px,2px)} 100%{transform:translate(0)} }
@keyframes hologram { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes plasma { 0%, 100% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } }
@keyframes cyber { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes electric { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
@keyframes atomic { 0%, 100% { transform: translate(-50%, -50%) scale(1) !important; } 50% { transform: translate(-50%, -50%) scale(1.05) !important; } }
@keyframes vapor { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes synthwave { 
    0%, 100% { 
        filter: contrast(1.1) brightness(1.1) saturate(1.2) hue-rotate(0deg);
    } 
    50% { 
        filter: contrast(1.2) brightness(1.15) saturate(1.3) hue-rotate(10deg);
    } 
}
@keyframes stars { 0% { background-position: 0% 0%; } 100% { background-position: 200px 200px; } }
@keyframes snowfall { 0% { transform: translateY(0) translateX(0); } 25% { transform: translateY(5px) translateX(3px); } 50% { transform: translateY(10px) translateX(-3px); } 75% { transform: translateY(15px) translateX(2px); } 100% { transform: translateY(20px) translateX(0); } }