@charset "UTF-8"; /** * vis-effects.css — VISCSS 视觉效果系统 * 独立可选的效果层，不强制与 vis.css 捆绑加载。 * 命名空间：.vfx-* * * ┌─────────────────────────────────────────────────────┐ * │ 效果注册表 │ * ├────────────────────┬────────────┬────────────────────┤ * │ 类名 │ 性能等级 │ 说明 │ * ├────────────────────┼────────────┼────────────────────┤ * │ .vfx-crt │ 低 │ CRT 扫描线 + 闪烁 │ * │ .vfx-crt-boot │ 低 │ CRT 开机动画 │ * │ .vfx-chroma │ 低 │ 色散故障（hover） │ * │ .vfx-noise │ 中 │ SVG 信号噪点 │ * │ .vfx-grid │ 低 │ 网格/电路板纹理 │ * │ .vfx-glow │ 低 │ 霓虹发光文字 │ * │ .vfx-reveal-* │ 低 │ 元素入场动画 │ * │ .vfx-divider-* │ 低 │ 升级分割线 │ * │ .vfx-aura │ 低 │ 渐变光晕氛围 │ * │ .vfx-text-* │ 低 │ 文字特效 │ * └────────────────────┴────────────┴────────────────────┘ * * 预设组合： * .vfx-preset-deep-space — 星空 + 光晕 + 微入场 * .vfx-preset-retro-terminal — CRT + 噪点 + 磷光 * .vfx-preset-cyberpunk — 色散 + 霓虹 + 电路纹理 * .vfx-preset-minimal — 仅微交互，无全屏效果 * * 使用方式： 或逐个 * 强度控制：--vfx-intensity: 0~1（默认 0.4，克制路线） * * 层级：vis.css → vis-effects.css → 域层 CSS */ /* ================================================================ 全局效果变量 ================================================================ */ :root { --vfx-intensity: 0.4; /* CRT */ --vfx-crt-scanline-opacity: 0.35; --vfx-crt-flicker-opacity: 0.98; /* 色散 */ --vfx-chroma-red: rgba(255, 60, 80, 0.65); --vfx-chroma-cyan: rgba(0, 200, 255, 0.65); --vfx-chroma-offset: 3px; --vfx-chroma-offset-border: 2px; --vfx-chroma-duration: 0.12s; /* 噪点 */ --vfx-noise-opacity: 0.04; /* 网格 */ --vfx-grid-opacity: 0.05; --vfx-grid-size: 50px; --vfx-grid-color: rgba(255, 255, 255, var(--vfx-grid-opacity)); /* 光晕 */ --vfx-aura-opacity: 0.08; --vfx-aura-color-1: rgba(59, 130, 246, var(--vfx-aura-opacity)); --vfx-aura-color-2: rgba(126, 200, 227, var(--vfx-aura-opacity)); /* 发光文字 */ --vfx-glow-color: var(--accent-cyan, #7ec8e3); --vfx-glow-intensity: 10px; /* 入场动画 */ --vfx-reveal-duration: 0.6s; --vfx-reveal-distance: 20px; --vfx-reveal-delay: 0s; /* 分割线 */ --vfx-divider-color: var(--border-base, #333); --vfx-divider-glow-color: var(--accent-cyan, #7ec8e3); /* 开机动画 */ --vfx-boot-duration: 0.8s; } /* ================================================================ 无障碍：尊重用户减少动画偏好 ================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ================================================================ 1. CRT 扫描线效果 — .vfx-crt（挂在 html 或容器上） ================================================================ */ .vfx-crt::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 1px, rgba(0, 0, 0, var(--vfx-crt-scanline-opacity)) 1px, rgba(0, 0, 0, var(--vfx-crt-scanline-opacity)) 2px ); pointer-events: none; z-index: 9999; animation: vfx-scanline 8s linear infinite; } @keyframes vfx-scanline { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } } .vfx-crt { filter: saturate(0.7) brightness(1.05); } /* 微闪烁 */ .vfx-crt > body, .vfx-crt > .vfx-crt-body { animation: vfx-crt-flicker 0.15s infinite; } @keyframes vfx-crt-flicker { 0%, 100% { opacity: 1; } 98% { opacity: 1; } 99% { opacity: var(--vfx-crt-flicker-opacity); } } /* ================================================================ 2. CRT 开机动画 — .vfx-crt-boot（页面加载时） ================================================================ */ .vfx-crt-boot { animation: vfx-boot var(--vfx-boot-duration) ease-out forwards; } @keyframes vfx-boot { 0% { clip-path: inset(49.5% 0 49.5% 0); filter: brightness(3) saturate(0); } 30% { clip-path: inset(20% 0 20% 0); filter: brightness(2) saturate(0.3); } 60% { clip-path: inset(5% 0 5% 0); filter: brightness(1.3) saturate(0.7); } 100% { clip-path: inset(0 0 0 0); filter: brightness(1) saturate(1); } } /* 关机动画 — 添加 .vfx-crt-shutdown class 触发 */ .vfx-crt-shutdown { animation: vfx-shutdown 0.5s ease-in forwards; } @keyframes vfx-shutdown { 0% { clip-path: inset(0 0 0 0); filter: brightness(1); } 60% { clip-path: inset(40% 0 40% 0); filter: brightness(2); } 100% { clip-path: inset(50% 0 50% 0); filter: brightness(0); } } /* ================================================================ 3. 色散故障效果 — .vfx-chroma-* 迁移自 chroma-glitch.css，统一到 vfx 命名空间 ================================================================ */ /* 边框色散（hover） */ @keyframes vfx-chroma-border { 0%, 100% { box-shadow: none; } 50% { box-shadow: inset calc(var(--vfx-chroma-offset-border) * -1) 0 0 var(--vfx-chroma-red), inset var(--vfx-chroma-offset-border) 0 0 var(--vfx-chroma-cyan); } } /* 内容色散 */ @keyframes vfx-chroma-content { 0%, 100% { filter: none; } 50% { filter: drop-shadow(calc(var(--vfx-chroma-offset) * -1) 0 0 var(--vfx-chroma-red)) drop-shadow(var(--vfx-chroma-offset) 0 0 var(--vfx-chroma-cyan)); } } /* 联合色散（边框+内容） */ @keyframes vfx-chroma-inline { 0%, 100% { box-shadow: none; filter: none; } 50% { box-shadow: inset calc(var(--vfx-chroma-offset-border) * -1) 0 0 var(--vfx-chroma-red), inset var(--vfx-chroma-offset-border) 0 0 var(--vfx-chroma-cyan); filter: drop-shadow(calc(var(--vfx-chroma-offset) * -1) 0 0 var(--vfx-chroma-red)) drop-shadow(var(--vfx-chroma-offset) 0 0 var(--vfx-chroma-cyan)); } } .vfx-chroma-border:hover { animation: vfx-chroma-border var(--vfx-chroma-duration) ease-out; } .vfx-chroma-border:hover .vfx-chroma-content { animation: vfx-chroma-content var(--vfx-chroma-duration) ease-out; } .vfx-chroma-inline:hover { animation: vfx-chroma-inline var(--vfx-chroma-duration) ease-out; } /* 向后兼容旧 class 名 */ .hover-chroma-border:hover { animation: vfx-chroma-border var(--vfx-chroma-duration) ease-out; } .hover-chroma-border:hover .chroma-content { animation: vfx-chroma-content var(--vfx-chroma-duration) ease-out; } .hover-chroma-inline:hover { animation: vfx-chroma-inline var(--vfx-chroma-duration) ease-out; } /* ================================================================ 4. 信号噪点 — .vfx-noise（挂在 html 或容器上） 使用 SVG filter 实现，无外部依赖 ================================================================ */ .vfx-noise::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: var(--vfx-noise-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; animation: vfx-noise-shift 0.5s steps(5) infinite; } @keyframes vfx-noise-shift { 0% { transform: translate(0, 0); } 20% { transform: translate(-2%, -1%); } 40% { transform: translate(1%, 2%); } 60% { transform: translate(-1%, -2%); } 80% { transform: translate(2%, 1%); } 100% { transform: translate(0, 0); } } /* 噪点间歇闪烁（信号不稳定感） */ .vfx-noise-flicker::before { animation: vfx-noise-shift 0.5s steps(5) infinite, vfx-noise-flicker 4s ease-in-out infinite; } @keyframes vfx-noise-flicker { 0%, 85%, 100% { opacity: var(--vfx-noise-opacity); } 88% { opacity: calc(var(--vfx-noise-opacity) * 3); } 90% { opacity: var(--vfx-noise-opacity); } 92% { opacity: calc(var(--vfx-noise-opacity) * 2); } } /* ================================================================ 5. 网格/电路板纹理 — .vfx-grid（挂在容器上） ================================================================ */ .vfx-grid { background-image: linear-gradient(var(--vfx-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--vfx-grid-color) 1px, transparent 1px); background-size: var(--vfx-grid-size) var(--vfx-grid-size); } /* 电路板变体：网格 + 交叉点发光 */ .vfx-grid-circuit { background-image: linear-gradient(var(--vfx-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--vfx-grid-color) 1px, transparent 1px), radial-gradient(circle 1px, rgba(126, 200, 227, 0.15) 1px, transparent 1px); background-size: var(--vfx-grid-size) var(--vfx-grid-size), var(--vfx-grid-size) var(--vfx-grid-size), var(--vfx-grid-size) var(--vfx-grid-size); } /* 网格脉冲（交叉点微弱呼吸） */ .vfx-grid-pulse { position: relative; } .vfx-grid-pulse::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle 1.5px, rgba(126, 200, 227, 0.2) 1px, transparent 1px); background-size: var(--vfx-grid-size) var(--vfx-grid-size); pointer-events: none; animation: vfx-grid-breathe 6s ease-in-out infinite; } @keyframes vfx-grid-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } /* 点阵（dot matrix） — 极简打孔卡风格 */ .vfx-grid-dots { background-image: radial-gradient(circle 0.5px, rgba(255, 255, 255, var(--vfx-grid-opacity)) 0.5px, transparent 0.5px); background-size: var(--vfx-grid-size) var(--vfx-grid-size); } /* 斜纹交叉（crosshatch） — 建筑图纸质感 */ .vfx-grid-crosshatch { background-image: repeating-linear-gradient( 45deg, transparent, transparent 24px, rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.6)) 24px, rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.6)) 25px ), repeating-linear-gradient( -45deg, transparent, transparent 24px, rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.6)) 24px, rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.6)) 25px ); } /* 蓝图双层（blueprint） — 粗+细正方网格，工程蓝图质感 */ .vfx-grid-blueprint { background-image: linear-gradient(rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 1.8)) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 1.8)) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.4)) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.4)) 1px, transparent 1px); background-size: calc(var(--vfx-grid-size) * 4) calc(var(--vfx-grid-size) * 4), calc(var(--vfx-grid-size) * 4) calc(var(--vfx-grid-size) * 4), var(--vfx-grid-size) var(--vfx-grid-size), var(--vfx-grid-size) var(--vfx-grid-size); } /* 方块矩阵（matrix） — 像素级方块点阵，LED 面板风格 */ .vfx-grid-matrix { background-image: linear-gradient(rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.6)) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.6)) 2px, transparent 2px); background-size: var(--vfx-grid-size) var(--vfx-grid-size); background-position: -1px -1px; } .vfx-grid-matrix::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.15)) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.15)) 1px, transparent 1px); background-size: calc(var(--vfx-grid-size) / 5) calc(var(--vfx-grid-size) / 5); pointer-events: none; } /* 寄存器（ledger） — 等距横线+纵列标记，数据表/终端日志质感 */ .vfx-grid-ledger { background-image: linear-gradient(rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.7)) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, calc(var(--vfx-grid-opacity) * 0.25)) 1px, transparent 1px); background-size: var(--vfx-grid-size) calc(var(--vfx-grid-size) / 2); } /* 蜂巢六边形（hex） — 有机结构感，SVG 背景实现 */ .vfx-grid-hex { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 34L0 84V66l28 16 28-16v18L28 100z' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 56px 100px; } /* 同心雷达扫描（radar） — 科技感极强 */ .vfx-grid-radar { background-image: radial-gradient(circle at 50% 50%, transparent 59px, rgba(126, 200, 227, 0.04) 60px, transparent 61px, transparent 119px, rgba(126, 200, 227, 0.03) 120px, transparent 121px, transparent 179px, rgba(126, 200, 227, 0.02) 180px, transparent 181px ), linear-gradient(0deg, transparent 49.5%, rgba(126, 200, 227, 0.03) 50%, transparent 50.5%), linear-gradient(90deg, transparent 49.5%, rgba(126, 200, 227, 0.03) 50%, transparent 50.5%); background-size: 360px 360px, 360px 360px, 360px 360px; background-position: center; } /* ================================================================ 6. 霓虹发光文字 — .vfx-glow / .vfx-text-* ================================================================ */ /* 基础发光 */ .vfx-glow { text-shadow: 0 0 var(--vfx-glow-intensity) var(--vfx-glow-color), 0 0 calc(var(--vfx-glow-intensity) * 2) var(--vfx-glow-color); } /* 发光呼吸 */ .vfx-glow-pulse { animation: vfx-glow-breathe 3s ease-in-out infinite; } @keyframes vfx-glow-breathe { 0%, 100% { text-shadow: 0 0 var(--vfx-glow-intensity) var(--vfx-glow-color), 0 0 calc(var(--vfx-glow-intensity) * 2) var(--vfx-glow-color); } 50% { text-shadow: 0 0 calc(var(--vfx-glow-intensity) * 1.5) var(--vfx-glow-color), 0 0 calc(var(--vfx-glow-intensity) * 3) var(--vfx-glow-color), 0 0 calc(var(--vfx-glow-intensity) * 5) var(--vfx-glow-color); } } /* 灯管闪烁 */ .vfx-text-flicker { animation: vfx-text-flicker 4s linear infinite; } @keyframes vfx-text-flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.8; } 94% { opacity: 1; } 96% { opacity: 0.9; } 97% { opacity: 1; } } /* 渐变流动文字 */ .vfx-text-gradient { background: linear-gradient(90deg, var(--accent-cyan, #7ec8e3), var(--accent-yellow, #eab308), var(--accent-cyan, #7ec8e3) ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: vfx-gradient-flow 6s linear infinite; } @keyframes vfx-gradient-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* ================================================================ 7. 元素入场动画 — .vfx-reveal-* 需 JS（IntersectionObserver）添加 .vfx-revealed class 触发 ================================================================ */ /* 基础：隐藏态 */ .vfx-reveal-up, .vfx-reveal-down, .vfx-reveal-left, .vfx-reveal-right, .vfx-reveal-fade, .vfx-reveal-glitch { opacity: 0; transition: opacity var(--vfx-reveal-duration) ease, transform var(--vfx-reveal-duration) ease; transition-delay: var(--vfx-reveal-delay); } .vfx-reveal-up { transform: translateY(var(--vfx-reveal-distance)); } .vfx-reveal-down { transform: translateY(calc(var(--vfx-reveal-distance) * -1)); } .vfx-reveal-left { transform: translateX(var(--vfx-reveal-distance)); } .vfx-reveal-right { transform: translateX(calc(var(--vfx-reveal-distance) * -1)); } .vfx-reveal-fade { transform: none; } /* 入场故障 — 先抖再归位 */ .vfx-reveal-glitch { transform: translateX(-5px); filter: blur(2px); transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease; } /* 显示态 */ .vfx-revealed.vfx-reveal-up, .vfx-revealed.vfx-reveal-down, .vfx-revealed.vfx-reveal-left, .vfx-revealed.vfx-reveal-right, .vfx-revealed.vfx-reveal-fade { opacity: 1; transform: none; } .vfx-revealed.vfx-reveal-glitch { opacity: 1; transform: none; filter: none; } /* 级联延时辅助 class */ .vfx-delay-1 { --vfx-reveal-delay: 0.1s; } .vfx-delay-2 { --vfx-reveal-delay: 0.2s; } .vfx-delay-3 { --vfx-reveal-delay: 0.3s; } .vfx-delay-4 { --vfx-reveal-delay: 0.4s; } .vfx-delay-5 { --vfx-reveal-delay: 0.5s; } /* ================================================================ 8. 升级分割线 — .vfx-divider-* ================================================================ */ /* 基础渐隐线 */ .vfx-divider { border: none; height: 1px; background: linear-gradient( 90deg, transparent, var(--vfx-divider-color) 20%, var(--vfx-divider-color) 80%, transparent ); } /* 中央发光点 */ .vfx-divider-glow { border: none; height: 1px; background: linear-gradient( 90deg, transparent, var(--vfx-divider-color) 30%, var(--vfx-divider-glow-color) 50%, var(--vfx-divider-color) 70%, transparent ); box-shadow: 0 0 8px var(--vfx-divider-glow-color); } /* 能量脉冲 */ .vfx-divider-pulse { border: none; height: 1px; background: var(--vfx-divider-color); position: relative; overflow: hidden; } .vfx-divider-pulse::after { content: ''; position: absolute; top: -1px; left: -20%; width: 20%; height: 3px; background: linear-gradient( 90deg, transparent, var(--vfx-divider-glow-color), transparent ); animation: vfx-pulse-travel 4s linear infinite; } @keyframes vfx-pulse-travel { 0% { left: -20%; } 100% { left: 120%; } } /* 电路节点线 */ .vfx-divider-circuit { border: none; height: 1px; background: linear-gradient(90deg, var(--vfx-divider-color) 60%, transparent 60%) 0 0 / 8px 1px repeat-x; position: relative; } .vfx-divider-circuit::before, .vfx-divider-circuit::after { content: '◆'; position: absolute; top: 50%; transform: translateY(-50%); font-size: 6px; color: var(--vfx-divider-glow-color); text-shadow: 0 0 4px var(--vfx-divider-glow-color); } .vfx-divider-circuit::before { left: 25%; } .vfx-divider-circuit::after { right: 25%; } /* ================================================================ 9. 渐变光晕氛围 — .vfx-aura（挂在 html 或容器上） ================================================================ */ .vfx-aura::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 600px 400px at 10% 20%, var(--vfx-aura-color-1), transparent), radial-gradient(ellipse 500px 350px at 90% 80%, var(--vfx-aura-color-2), transparent); animation: vfx-aura-drift 20s ease-in-out infinite alternate; } @keyframes vfx-aura-drift { 0% { background: radial-gradient(ellipse 600px 400px at 10% 20%, var(--vfx-aura-color-1), transparent), radial-gradient(ellipse 500px 350px at 90% 80%, var(--vfx-aura-color-2), transparent); } 100% { background: radial-gradient(ellipse 600px 400px at 20% 40%, var(--vfx-aura-color-1), transparent), radial-gradient(ellipse 500px 350px at 80% 60%, var(--vfx-aura-color-2), transparent); } } /* ================================================================ 10. 预设组合 ================================================================ */ /* deep-space: 星空 + 光晕 + 微入场 */ .vfx-preset-deep-space { --vfx-intensity: 0.3; --vfx-aura-opacity: 0.06; --vfx-noise-opacity: 0.02; } /* 自动启用光晕 */ .vfx-preset-deep-space::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 600px 400px at 10% 20%, var(--vfx-aura-color-1), transparent), radial-gradient(ellipse 500px 350px at 90% 80%, var(--vfx-aura-color-2), transparent); animation: vfx-aura-drift 20s ease-in-out infinite alternate; } /* retro-terminal: CRT + 噪点 + 磷光绿 */ .vfx-preset-retro-terminal { --vfx-intensity: 0.5; --vfx-crt-scanline-opacity: 0.4; --vfx-noise-opacity: 0.05; --vfx-glow-color: #33ff33; --text-primary: #33ff33; --text-body: #22cc22; --accent-cyan: #33ff33; } /* CRT 扫描线自动启用 */ .vfx-preset-retro-terminal::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 1px, rgba(0, 0, 0, var(--vfx-crt-scanline-opacity)) 1px, rgba(0, 0, 0, var(--vfx-crt-scanline-opacity)) 2px ); pointer-events: none; z-index: 9999; animation: vfx-scanline 8s linear infinite; } .vfx-preset-retro-terminal { filter: saturate(0.7) brightness(1.05); } /* cyberpunk: 色散 + 霓虹 + 电路纹理 */ .vfx-preset-cyberpunk { --vfx-intensity: 0.6; --vfx-glow-color: #ff3c80; --vfx-grid-opacity: 0.08; --vfx-noise-opacity: 0.03; --vfx-divider-glow-color: #ff3c80; } /* minimal: 仅微交互，干净 */ .vfx-preset-minimal { --vfx-intensity: 0.2; --vfx-reveal-duration: 0.4s; --vfx-reveal-distance: 12px; } /* console: 终端 I/O 风，适合技术产品（SenseClaw 等） */ .vfx-preset-console { --vfx-intensity: 0.3; --vfx-noise-opacity: 0.015; --vfx-glow-color: var(--accent-cyan, #7ec8e3); } .vfx-preset-console::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.06) 3px, rgba(0, 0, 0, 0.06) 4px ); pointer-events: none; z-index: 9999; opacity: 0.5; } /* organic: 缓慢生长氛围，适合世界观/创意产品（Worldseed 等） */ .vfx-preset-organic { --vfx-intensity: 0.25; --vfx-aura-opacity: 0.04; --vfx-noise-opacity: 0.01; } .vfx-preset-organic::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 500px 400px at 20% 30%, rgba(126,200,227,0.04), transparent), radial-gradient(ellipse 400px 300px at 80% 70%, rgba(126,200,227,0.03), transparent); animation: vfx-organic-drift 30s ease-in-out infinite alternate; } @keyframes vfx-organic-drift { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } /* protocol: 仪式感渐入，适合方法论/协议品牌（VisProto 等） */ .vfx-preset-protocol { --vfx-intensity: 0.2; --vfx-reveal-duration: 0.8s; --vfx-reveal-distance: 20px; } .vfx-preset-protocol::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 600px 500px at 50% 40%, rgba(126,200,227,0.06), transparent); animation: vfx-protocol-pulse 12s ease-in-out infinite; } @keyframes vfx-protocol-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }