/* ============================================
   ZhongSai Steel Structure - Animation System
   全站动画效果系统
   ============================================ */

/* ===== 滚动入场动画基础 ===== */
.animate-on-scroll{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}

.animate-on-scroll.animate-in{
  opacity:1;
  transform:translateY(0);
}

/* 从左侧滑入 */
.animate-from-left{
  opacity:0;
  transform:translateX(-60px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}

.animate-from-left.animate-in{
  opacity:1;
  transform:translateX(0);
}

/* 从右侧滑入 */
.animate-from-right{
  opacity:0;
  transform:translateX(60px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}

.animate-from-right.animate-in{
  opacity:1;
  transform:translateX(0);
}

/* 缩放淡入 */
.animate-scale{
  opacity:0;
  transform:scale(.92);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}

.animate-scale.animate-in{
  opacity:1;
  transform:scale(1);
}

/* 交错动画延迟 */
.animate-delay-1{transition-delay:.1s}
.animate-delay-2{transition-delay:.2s}
.animate-delay-3{transition-delay:.3s}
.animate-delay-4{transition-delay:.4s}
.animate-delay-5{transition-delay:.5s}
.animate-delay-6{transition-delay:.6s}

/* ===== 页面加载动画 ===== */
@keyframes pageFadeIn{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}

.page-loaded .page-hero-inner{
  animation:pageFadeIn 1s cubic-bezier(.16,1,.3,1) .2s both;
}

.page-loaded .page-hero h1{
  animation:pageFadeIn 1s cubic-bezier(.16,1,.3,1) .4s both;
}

.page-loaded .page-hero .lead{
  animation:pageFadeIn 1s cubic-bezier(.16,1,.3,1) .6s both;
}

.page-loaded .page-hero-actions{
  animation:pageFadeIn 1s cubic-bezier(.16,1,.3,1) .8s both;
}

/* ===== 卡片悬停增强 ===== */
.product-card,
.component-card,
.solution-card,
.project-card,
.capability-card,
.stat-card{
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}

.product-card:hover,
.component-card:hover,
.solution-card:hover,
.project-card:hover,
.capability-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(7,16,24,.15);
}

/* 卡片图片悬停缩放 */
.product-card-img img,
.component-card-img img,
.project-card-img img{
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}

.product-card:hover .product-card-img img,
.component-card:hover .component-card-img img,
.project-card:hover .project-card-img img{
  transform:scale(1.08);
}

/* ===== 按钮动画增强 ===== */
.btn-primary,
.btn-secondary,
.btn-light{
  position:relative;
  overflow:hidden;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}

.btn-primary::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .6s ease;
}

.btn-primary:hover::before{
  left:100%;
}

.btn-primary:active,
.btn-secondary:active,
.btn-light:active{
  transform:translateY(0) scale(.98);
}

/* ===== 导航栏滚动动画 ===== */
.header{
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}

.header.scrolled{
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(7,16,24,.08);
}

/* ===== 图片淡入 ===== */
img{
  transition:opacity .5s ease;
}

img.lazy{
  opacity:0;
}

img.lazy.loaded{
  opacity:1;
}

/* ===== 数字计数动画 ===== */
.stat-number{
  font-variant-numeric:tabular-nums;
}

/* ===== 进度条动画 ===== */
@keyframes progressFill{
  from{width:0}
}

.progress-bar-fill{
  animation:progressFill 1.5s cubic-bezier(.16,1,.3,1) both;
}

/* ===== FAQ动画 ===== */
.faq-item{
  transition:border-color .3s ease, box-shadow .3s ease;
}

.faq-item.faq-active{
  border-color:var(--orange);
  box-shadow:0 8px 30px rgba(7,16,24,.08);
}

.faq-icon{
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .3s ease;
}

/* ===== 表单焦点动画 ===== */
input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(232,77,15,.15);
  transition:border-color .3s ease, box-shadow .3s ease;
}

/* ===== 标签/徽章动画 ===== */
.tag,
.badge{
  transition:transform .2s ease, background .2s ease;
}

.tag:hover,
.badge:hover{
  transform:scale(1.05);
}

/* ===== 链接下划线动画 ===== */
a.text-link{
  position:relative;
  text-decoration:none;
}

a.text-link::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background:var(--orange);
  transition:width .3s ease;
}

a.text-link:hover::after{
  width:100%;
}

/* ===== 图标跳动 ===== */
@keyframes iconBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

.icon-bounce:hover{
  animation:iconBounce .6s ease;
}

/* ===== 脉冲效果 ===== */
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.6}
}

.pulse{
  animation:pulse 2s ease-in-out infinite;
}

/* ===== 减少动画偏好 ===== */
@media (prefers-reduced-motion:reduce){
  .animate-on-scroll,
  .animate-from-left,
  .animate-from-right,
  .animate-scale,
  .page-loaded .page-hero-inner,
  .page-loaded .page-hero h1,
  .page-loaded .page-hero .lead,
  .page-loaded .page-hero-actions{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
  
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ===== 移动端优化 ===== */
@media (max-width:768px){
  .animate-on-scroll{
    transform:translateY(24px);
  }
  
  .animate-from-left{
    transform:translateX(-30px);
  }
  
  .animate-from-right{
    transform:translateX(30px);
  }
}