/* ============================================================
effects.css — 改版视觉特效（从 stellvoy-zibo-premium 抽取）
仅承载 @property / @keyframes / 特效辅助类，不含任何文案。
由 index.html 通过 引入，与 Tailwind 工具类共存。
============================================================ */
:root {
/* 改版真实亮色配色（还原改版质感，非草稿早期误抄的暗色值） */
--bg-deep: #F8FAFC;
--bg-mid: #E0ECFA;
--accent: #2563EB;
--accent-rgb: 37, 99, 235;
--cyan: #0891B2;
--cyan-rgb: 8, 145, 178;
--purple: #5B5FEF;
--purple-rgb: 91, 95, 239;
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-border: rgba(37, 99, 235, 0.15);
--glass-border-hover: rgba(37, 99, 235, 0.35);
--text-primary: #0F172A;
--text-secondary: #334155;
--text-muted: #475569;
--border-angle: 0deg;
}
/* ---------- 注册动画属性 ---------- */
@property --border-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
/* 初始值与 :root 亮色配色保持一致，避免回退到旧草稿暗色 */
@property --accent {
syntax: '';
initial-value: #2563EB;
inherits: true;
}
@property --cyan {
syntax: '';
initial-value: #0891B2;
inherits: true;
}
@property --purple {
syntax: '';
initial-value: #5B5FEF;
inherits: true;
}
/* ---------- 关键帧 ---------- */
@keyframes border-rotate {
to { --border-angle: 360deg; }
}
@keyframes flow-gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes ripple {
0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.45); }
100% { box-shadow: 0 0 0 22px rgba(0, 212, 255, 0); }
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
@keyframes btn-pulse {
0% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.5); }
70% { box-shadow: 0 0 0 14px rgba(22, 93, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0); }
}
@keyframes float-card {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes rotate-ring {
to { transform: rotate(360deg); }
}
@keyframes typing-dot {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-5px); opacity: 1; }
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ---------- 玻璃拟态基础 ---------- */
.glass {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* ---------- 渐变流光边框卡片 ---------- */
.biz-card,
.case-card {
position: relative;
border-radius: 16px;
background: #fff;
border: 1px solid rgba(22, 93, 255, 0.12);
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.biz-card {
display: flex;
flex-direction: column;
}
.biz-card > div:nth-child(3) {
flex: 1;
display: flex;
flex-direction: column;
}
.biz-card > div:nth-child(3) > p {
flex: 1;
}
.biz-card::before,
.case-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 16px;
padding: 1.5px;
background: conic-gradient(from var(--border-angle),
transparent 0%, var(--accent) 20%, var(--cyan) 40%, var(--purple) 60%, transparent 80%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: border-rotate 6s linear infinite;
pointer-events: none;
}
.biz-card:hover,
.case-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 50px rgba(22, 93, 255, 0.18);
}
/* 鼠标光扫 */
.card-shine {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
/* 合并 skew 与位移，用 transform 替代 left 过渡，避免重排 */
transform: skewX(-20deg) translateX(-120%);
transition: transform 0.6s ease;
pointer-events: none;
}
.biz-card:hover .card-shine,
.case-card:hover .card-shine {
transform: skewX(-20deg) translateX(240%);
}
/* ---------- 业务/案例网格 ---------- */
.biz-grid,
.case-grid {
display: grid;
gap: 1.75rem;
}
.biz-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.case-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.biz-card h3,
.case-card h3 { font-size: 1.25rem; font-weight: 700; margin: 0.75rem 1rem 0.5rem; color: #0F172A; }
.biz-card p,
.case-card p { color: var(--text-secondary); line-height: 1.75; margin: 0 1rem 0.75rem; }
.biz-card .tags,
.case-card .case-features { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 1rem 1rem; }
.tag,
.biz-feature,
.case-feature {
font-size: 0.85rem;
padding: 0.65rem 1.1rem;
border-radius: 999px;
background: linear-gradient(90deg, rgba(22, 93, 255, 0.1), rgba(54, 203, 203, 0.12));
color: #165DFF;
border: 1px solid rgba(22, 93, 255, 0.18);
}
.biz-features { display: flex; flex-direction: column; gap: 0.75rem; margin: 0 1rem 1.25rem; }
.biz-feature::before { content: '✓ '; color: var(--cyan); font-weight: 700; }
/* ---------- 客户案例（玻璃） ---------- */
.case-card {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
padding: 1.5rem 1.25rem;
border-top: 3px solid var(--accent);
display: flex;
flex-direction: column;
}
.case-card h3 {
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 0.5rem;
color: #0F172A;
}
.case-card p {
color: var(--text-secondary);
line-height: 1.75;
margin: 0 0 1rem;
flex: 1;
}
.case-card .case-features { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.case-card .case-features .case-feature::before { content: '◆ '; color: var(--accent); }
/* ---------- 环形进度条 ---------- */
.ring-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.ring-item { text-align: center; }
.ring-wrap { position: relative; width: 120px; height: 120px; }
.ring-wrap svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(22, 93, 255, 0.1); stroke-width: 8; }
.ring-fg {
fill: none;
stroke-width: 8;
stroke-linecap: round;
transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ring-val {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 800;
color: #165DFF;
}
.ring-lbl { margin-top: 0.75rem; color: var(--text-secondary); font-weight: 600; }
/* ---------- 3D 翻转卡片 ---------- */
.flip-card { perspective: 1400px; cursor: pointer; }
.flip-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
}
.flip-card:hover .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 18px;
background: linear-gradient(135deg, rgba(22, 93, 255, 0.08), rgba(54, 203, 203, 0.1));
border: 1px solid rgba(22, 93, 255, 0.18);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-shadow: 0 14px 40px rgba(22, 93, 255, 0.12);
}
.flip-front h3 { font-size: 1.5rem; color: #0F172A; margin-bottom: 0.5rem; }
.flip-front p { color: var(--text-secondary); }
.flip-back { transform: rotateY(180deg); }
.flip-back p { color: var(--text-secondary); line-height: 1.8; }
/* ---------- 时间轴 ---------- */
.timeline { position: relative; padding: 1rem 0; }
.timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; transform: translateX(-50%); }
.timeline-line-base { position: absolute; inset: 0; background: rgba(22, 93, 255, 0.12); border-radius: 4px; }
.timeline-line-progress {
position: absolute; top: 0; left: 0; width: 100%; height: 0;
background: linear-gradient(180deg, var(--accent), var(--cyan));
border-radius: 4px;
}
.timeline-item { position: relative; width: 50%; padding: 1.5rem 2.5rem; box-sizing: border-box; }
.timeline-item:nth-child(odd of .timeline-item) { left: 0; text-align: right; }
.timeline-item:nth-child(even of .timeline-item) { left: 50%; text-align: left; }
.timeline-dot {
position: absolute; top: 2rem; width: 18px; height: 18px; border-radius: 50%;
background: #fff; border: 4px solid var(--accent);
box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.2);
animation: ripple 2.4s infinite;
}
.timeline-item:nth-child(odd of .timeline-item) .timeline-dot { right: -9px; }
.timeline-item:nth-child(even of .timeline-item) .timeline-dot { left: -9px; }
.timeline-content {
background: #fff; border: 1px solid rgba(22, 93, 255, 0.12);
border-radius: 14px; padding: 1.25rem 1.5rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.timeline-content h3 { color: #165DFF; font-size: 1.15rem; margin-bottom: 0.5rem; }
.timeline-content p { color: var(--text-secondary); line-height: 1.7; }
.t-tags, .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.t-tag {
font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 999px;
background: rgba(54, 203, 203, 0.14); color: #0E2C8C; border: 1px solid rgba(54, 203, 203, 0.3);
}
.timeline-item:nth-child(odd of .timeline-item) .t-tags { justify-content: flex-end; }
/* ---------- 核心数据带 ---------- */
.metrics {
position: relative;
background: linear-gradient(135deg, #0E2C8C, #165DFF 55%, #36CBCB);
padding: 3rem 1rem;
overflow: hidden;
}
.metrics-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; pointer-events: none; }
.metrics-grid-row {
position: relative; z-index: 1;
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem;
max-width: 1100px; margin: 0 auto;
}
.metric-card { text-align: center; color: #fff; }
.metric-number {
font-size: clamp(2rem, 5vw, 3rem); font-weight: 800;
background: linear-gradient(90deg, #fff, #cffafe);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.metric-label { margin-top: 0.5rem; font-size: 0.95rem; opacity: 0.9; }
/* ---------- 跑马灯 ---------- */
.marquee-wrap { overflow: hidden; width: 100%; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; will-change: transform; }
.partner-logo {
flex: 0 0 auto; padding: 1rem 2rem; margin-right: 1.5rem; border-radius: 14px; white-space: nowrap;
background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(22, 93, 255, 0.12);
font-weight: 600; color: #0E2C8C; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
/* 客户信赖之选：稍微放大 */
#endorse .partner-logo { padding: 1.35rem 2.75rem; margin-right: 1.75rem; font-size: 1.15rem; }
#endorse .marquee-track { animation-duration: 32s; }
/* ---------- 章节背景图 / 画布层 ---------- */
.section-bg-img {
position: absolute; top: 0; max-width: 50%; height: 70%;
object-fit: cover; opacity: 0.05; pointer-events: none; z-index: 0;
}
#about-canvas, #tech-canvas, #timeline-canvas {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 0; opacity: 0.6;
}
/* ---------- Hero 扫描 / 视频特效 ---------- */
.video-overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(14, 44, 140, 0.35), rgba(54, 203, 203, 0.18));
pointer-events: none;
}
.scanlines {
position: absolute; inset: 0; pointer-events: none; opacity: 0.25;
background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.06) 3px 4px);
}
.eyebrow {
display: inline-block; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--cyan); font-weight: 700; margin-bottom: 0.75rem;
}
.flow-text {
background: linear-gradient(90deg, #165DFF, #36CBCB, #7c3aed, #165DFF);
background-size: 300% 100%;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
animation: flow-gradient 6s linear infinite; font-weight: 700;
}
.counter { font-variant-numeric: tabular-nums; }
/* ---------- 滚动入场 ---------- */
.reveal, .reveal-left, .reveal-right {
opacity: 0; transform: translateY(40px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal.in-view, .reveal-left.in-view, .reveal-right.in-view {
opacity: 1; transform: none;
}
/* ---------- 团队头像流光边框 ---------- */
.ring-avatar {
position: relative;
display: inline-block;
line-height: 0;
padding: 4px;
border-radius: 50%;
overflow: hidden;
background: conic-gradient(from var(--border-angle), var(--accent), var(--cyan), var(--purple), var(--accent));
animation: border-rotate 6s linear infinite;
}
.ring-avatar > img { border-radius: 50%; }
/* ---------- 鼠标光晕（改版原版：整屏跟随光斑，由 JS transform 驱动） ---------- */
#mouse-glow {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 0;
background: radial-gradient(600px circle at 50% 50%, rgba(37,99,235,0.08), transparent 40%),
radial-gradient(800px circle at 50% 50%, rgba(8,145,178,0.05), transparent 60%);
transition: opacity 0.3s;
will-change: opacity;
}
/* ============ 鼠标粒子拖尾画布 ============ */
#trail-canvas {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 9999;
transform: translateZ(0);
will-change: transform;
}
/* ============ 全局环境浮动粒子画布 ============ */
#ambient-canvas {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 1;
opacity: 1;
transform: translateZ(0);
will-change: transform;
}
/* ============ Hero 微光扫描光束 ============ */
#hero-sweep {
position: fixed;
top: 0; left: 0;
width: 50%;
height: 100vh;
pointer-events: none; z-index: 2;
background: linear-gradient(105deg,
transparent 0%,
transparent 35%,
rgba(37,99,235,0.03) 45%,
rgba(91,95,239,0.08) 48%,
rgba(37,99,235,0.12) 50%,
rgba(91,95,239,0.08) 52%,
rgba(37,99,235,0.03) 55%,
transparent 65%,
transparent 100%);
/* 用 transform 替代 left，避免每帧重排/重绘（宽 50vw，故 -120%~220% 对应原 -60%~110%） */
animation: hero-sweep-move 6s ease-in-out infinite;
}
@keyframes hero-sweep-move {
0% { transform: translateX(-120%); opacity: 0; }
8% { opacity: 1; }
20% { transform: translateX(220%); opacity: 1; }
28% { opacity: 0; transform: translateX(220%); }
100% { opacity: 0; transform: translateX(-120%); }
}
/* ============ 呼吸背景 ============ */
@keyframes breathe {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
/* ============ Hero 网格背景 ============ */
.hero-grid {
background-image:
linear-gradient(rgba(37,99,235,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(37,99,235,0.06) 1px, transparent 1px);
background-size: 40px 40px;
}
/* ============ 段落首行缩进 ============ */
.text-indent p,
p.text-indent,
.text-indent li {
text-indent: 2em;
}
/* ============ 网格背景纹理 ============ */
body::before {
content: '';
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 0;
background-image:
linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px);
background-size: 60px 60px;
animation: breathe 8s ease-in-out infinite;
will-change: opacity;
}
/* ---------- 导航栏滚动变色：白底时恢复深色nav-pill ---------- */
#navbar:not(.bg-transparent) .nav-pill {
color: #374151;
border-color: #e5e7eb;
}
#navbar:not(.bg-transparent) .nav-pill:hover {
color: #165DFF;
border-color: #165DFF;
}
/* ---------- 响应式降级 ---------- */
@media (max-width: 768px) {
.timeline-line { left: 18px; }
.timeline-item { width: 100%; left: 0 !important; text-align: left !important; padding-left: 3rem; padding-right: 0; }
.timeline-item:nth-child(odd of .timeline-item) .timeline-dot,
.timeline-item:nth-child(even of .timeline-item) .timeline-dot { left: 9px; right: auto; }
.biz-card::before, .case-card::before { animation: none; }
.card-shine { display: none; }
.marquee-track { animation-duration: 36s; }
#ambient-canvas { opacity: 0.25; }
#hero-sweep { display: none; }
/* 手机版全局防溢出 */
html, body { overflow-x: hidden; max-width: 100vw; }
.container { padding-left: 1rem; padding-right: 1rem; }
/* 导航公司名允许换行 */
header .flex-shrink-0 { flex-shrink: 1 !important; }
header img.h-12 { height: 2.5rem !important; }
header span[data-i18n="company_name"] { font-size: 0.9rem !important; white-space: normal !important; }
/* Hero标题允许换行 */
h1.whitespace-nowrap { white-space: normal !important; }
/* 二维码缩小 */
img.w-48.h-48 { width: 120px !important; height: 120px !important; }
/* 客服聊天框缩小 */
.chat-bubble { max-width: 85vw !important; }
/* 团队头像手机端修复 */
.w-40.h-40.rounded-full { width: 80px !important; height: 80px !important; }
.-ml-20 { margin-left: -20px !important; }
.-mr-20 { margin-right: -20px !important; }
}
/* ---------- 党建团建板块：荣誉牌匾图 ---------- */
.party-badge-img {
display: block;
width: 100%;
height: 180px;
object-fit: contain; /* 牌匾是横向证书，必须 contain 避免文字被裁 */
object-position: center;
background: linear-gradient(180deg, #fffbe6, #fdf2cc); /* 浅金衬底衬托荣誉感 */
padding: 14px 18px;
box-sizing: border-box;
border-top: 1px solid rgba(22, 93, 255, 0.1);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.party-badge-img:hover {
transform: scale(1.03); /* 与卡片 hover-scale 独立的微缩放 */
}
@media (max-width: 768px) {
.party-badge-img { height: 150px; }
}
/* ---------- AI 客服浮窗动效（高端动态特效） ---------- */
/* 悬浮按钮浮动呼吸 */
.chat-float {
animation: chatFloat 3s ease-in-out infinite;
}
@keyframes chatFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* 雷达波脉冲光环（双层，错峰扩散） */
.chat-pulse-ring {
position: absolute;
inset: 0;
border-radius: 9999px;
border: 2px solid rgba(22, 93, 255, 0.55);
animation: chatPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
pointer-events: none;
}
.chat-pulse-ring::after {
content: "";
position: absolute;
inset: 0;
border-radius: 9999px;
border: 2px solid rgba(54, 203, 203, 0.45);
animation: chatPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
animation-delay: 1.2s;
}
@keyframes chatPulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.85); opacity: 0; }
}
/* 右上角在线红点（脉冲） */
.chat-online-dot {
position: absolute;
top: 2px;
right: 2px;
width: 13px;
height: 13px;
background: #ef4444;
border: 2px solid #fff;
border-radius: 9999px;
animation: chatBlink 1.6s ease-in-out infinite;
}
@keyframes chatBlink {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
/* 聊天窗口弹性进场（覆盖 Tailwind 的 transition-all） */
#ai-chat-container {
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
}
/* AI 打字指示器（跳动三点，复用既有 typing-dot 关键帧） */
.typing-dot {
width: 6px;
height: 6px;
border-radius: 9999px;
background: #94a3b8;
display: inline-block;
animation: typing-dot 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
/* ---------- 顶部滚动进度条（阅读进度，科技感） ---------- */
#scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
z-index: 60;
background: linear-gradient(90deg, #165DFF, #36CBCB 55%, #818cf8);
box-shadow: 0 0 10px rgba(22, 93, 255, 0.6);
transition: width 0.08s linear;
pointer-events: none;
}
/* ---------- 区块标题科技化 ---------- */
/* 标题上方小字 eyebrow（流光蓝青） */
.title-eyebrow {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 0.22em;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0.85rem;
background: linear-gradient(90deg, #165DFF, #36CBCB);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
padding-left: 1.6rem;
}
.title-eyebrow::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1.1rem;
height: 2px;
transform: translateY(-50%);
background: linear-gradient(90deg, #165DFF, #36CBCB);
border-radius: 2px;
}
/* 标题文字流光渐变（旗舰感） */
.title-glow {
background: linear-gradient(100deg, #0F172A 0%, #165DFF 45%, #36CBCB 70%, #0F172A 100%);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleShine 6s linear infinite;
}
@keyframes titleShine {
0% { background-position: 0% center; }
100% { background-position: 220% center; }
}
/* 流光分隔线（替代原纯蓝 1px 线） */
.title-rule {
width: 5rem;
height: 3px;
margin: 0 auto 1.5rem;
border-radius: 9999px;
background: linear-gradient(90deg, #165DFF, #36CBCB, #818cf8);
background-size: 200% auto;
position: relative;
animation: ruleFlow 4s linear infinite;
box-shadow: 0 0 12px rgba(22, 93, 255, 0.35);
}
.title-rule::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
border-radius: 9999px;
background: #fff;
box-shadow: 0 0 8px 1px rgba(54, 203, 203, 0.9);
}
@keyframes ruleFlow {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
/* ---------- 区块过渡质感（极淡网格 + 光晕，强化连贯科技氛围） ---------- */
.section-soft {
position: relative;
background-image:
radial-gradient(900px 380px at 50% -10%, rgba(22, 93, 255, 0.06), transparent 70%),
linear-gradient(rgba(22, 93, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(22, 93, 255, 0.04) 1px, transparent 1px);
background-size: 100% 100%, 34px 34px, 34px 34px;
}
/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
.biz-card::before, .card-shine, .marquee-track, .flow-text, .timeline-dot, .btn-pulse, .ring-avatar,
.chat-float, .chat-pulse-ring, .chat-online-dot, .typing-dot,
.title-glow, .title-rule {
animation: none !important;
}
#scroll-progress { display: none !important; }
.section-soft { background-image: none; }
#trail-canvas, #ambient-canvas, #hero-sweep { display: none !important; }
#mouse-glow { opacity: 0 !important; }
body::before { animation: none !important; }
.reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; }
.flip-card:hover .flip-inner { transform: none; }
}