/* =========================================
   铭赞网络® | SEO优化 - 动画样式
   ========================================= */

/* ============= 滚动渐入 ============= */
[data-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s ease,transform .8s ease;
}
[data-reveal].revealed{opacity:1;transform:translateY(0)}

/* ============= Logo 微光 ============= */
.logo-brand{position:relative;display:inline-block;overflow:visible}
.logo-brand::after{
  content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:logoShine 4s ease-in-out infinite;
}
@keyframes logoShine{
  0%{left:-100%}
  60%,100%{left:120%}
}

/* ============= Hero 入场 ============= */
.hero-tag{animation:fadeDown .8s ease both .2s}
.hero-title{animation:fadeUp .9s ease both .4s}
.hero-desc{animation:fadeUp .9s ease both .6s}
.hero-cta{animation:fadeUp .9s ease both .8s}
.hero-stats{animation:fadeUp .9s ease both 1s}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}

/* ============= 数据滚动 ============= */
.hero-stats .num{transition:color .3s ease}

/* ============= 按钮悬停特效 ============= */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transition:left .6s ease;
}
.btn-primary:hover::before{left:100%}

/* ============= 卡片悬浮增强 ============= */
.service-card,.baidu-feature,.gs-item,.case-card,.process-step,.adv-card,.service-mini{
  transform:translateY(0);transition:all .35s ease;
}

/* ============= FAQ 平滑展开 ============= */
.faq-body{
  animation:faqFade .35s ease;
}
@keyframes faqFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ============= Section 标题装饰 ============= */
.section-title{position:relative;display:inline-block}
.section-head .section-title{position:relative;padding-bottom:18px}
.section-head .section-title::after{
  content:"";position:absolute;left:50%;bottom:0;width:60px;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:translateX(-50%);border-radius:2px;
}

/* ============= Hero 网格闪烁 ============= */
.hero-grid{animation:gridFade 6s ease-in-out infinite alternate}
@keyframes gridFade{0%{opacity:.04}100%{opacity:.10}}

/* ============= Timeline 流动线 ============= */
.timeline::before{
  background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent);
  background-size:200% 100%;
  animation:flowLine 3s linear infinite;
}
@keyframes flowLine{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ============= 案例卡片悬浮涟漪 ============= */
.case-card{position:relative;overflow:hidden}
.case-card::before{
  content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle,rgba(200,155,60,.08) 0%,transparent 50%);
  opacity:0;transition:opacity .4s ease;
}
.case-card:hover::before{opacity:1}

/* ============= 联系卡片悬浮 ============= */
.contact-card{position:relative;overflow:hidden}
.contact-card::before{
  content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,214,107,.1),transparent);
  transition:left .6s ease;
}
.contact-card:hover::before{left:100%}

/* ============= 二维码悬浮脉冲 ============= */
.qr-frame{transition:transform .3s ease}
.qr-frame:hover{transform:scale(1.03)}

/* ============= 链接 hover 动效 ============= */
a{position:relative}

/* ============= 减少动效 ============= */
@media (prefers-reduced-motion:reduce){
  *,.hero-mesh,.hero-grid,.timeline::before,.logo-brand::after,.btn-primary::before{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
}