/* ===== 全站高级动效 ===== */

/* 1. 金色光晕hover效果 */
.gold-glow-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gold-glow-hover:hover {
  box-shadow: 0 0 20px rgba(218, 165, 32, 0.3), 0 10px 40px rgba(26, 74, 46, 0.15);
}

/* 2. 按钮涟漪效果 */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-ripple:hover::after {
  width: 300px;
  height: 300px;
}

/* 3. 数字滚动动画 */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.num-animate {
  animation: countUp 1s ease forwards;
}

/* 4. 导航栏hover下划线动画 */
.nav-hover-line {
  position: relative;
}

.nav-hover-line::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #daa520, #ffd700);
  transition: width 0.3s ease;
}

.nav-hover-line:hover::after {
  width: 100%;
}

/* 5. 卡片悬停金色边框 */
.card-gold-border {
  position: relative;
}

.card-gold-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.5), rgba(255, 215, 0, 0.3)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.card-gold-border:hover::before {
  opacity: 1;
}

/* 6. 视差滚动效果 */
.parallax-element {
  transition: transform 0.1s linear;
}

/* 7. 呼吸感动画（用于logo和重要元素） */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.breathe-animation {
  animation: breathe 4s ease-in-out infinite;
}

/* 8. 渐入动画 */
@keyframes fadeInUpSmooth {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUpSmooth 0.8s ease forwards;
}

.fade-in-up.delay-1 { animation-delay: 0.2s; }
.fade-in-up.delay-2 { animation-delay: 0.4s; }
.fade-in-up.delay-3 { animation-delay: 0.6s; }
.fade-in-up.delay-4 { animation-delay: 0.8s; }

/* 9. 产品卡片hover产品图放大 */
.product-img-zoom {
  transition: transform 0.4s ease;
}

.product-card:hover .product-img-zoom {
  transform: scale(1.1);
}

/* 10. 骨架屏加载效果 */
@keyframes skeletonLoading {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 8%, #f8f8f8 18%, #f0f0f0 33%);
  background-size: 200px 100%;
  animation: skeletonLoading 1.5s ease infinite;
}

/* 竹枝动画 - 确保最后生效 */




/* 竹枝摇摆动画 */
@keyframes bambooSway {
  0%, 100% { transform: translate(-50%, -50%) rotate(-15deg) translateX(0); }
  25% { transform: translate(-50%, -50%) rotate(-12deg) translateX(5px); }
  50% { transform: translate(-50%, -50%) rotate(-18deg) translateX(-3px); }
  75% { transform: translate(-50%, -50%) rotate(-14deg) translateX(4px); }
}

/* 方框呼吸感 - 未点击项 */
.nav-links li a:not(.active) {
  animation: boxBreath 4s ease-in-out infinite !important;
  box-shadow: 0 0 0 rgba(45, 106, 79, 0) !important;
}

@keyframes boxBreath {
  0%, 100% { box-shadow: 0 0 0 rgba(45, 106, 79, 0), inset 0 0 0 rgba(45, 106, 79, 0); }
  50% { box-shadow: 0 0 15px rgba(45, 106, 79, 0.1), inset 0 0 10px rgba(45, 106, 79, 0.04); }
}

.nav-links li a:not(.active):hover {
  animation: none !important;
  box-shadow: 0 0 25px rgba(45, 106, 79, 0.2), inset 0 0 12px rgba(45, 106, 79, 0.05) !important;
}



@keyframes bambooBranchSway {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
  50% { transform: translate(-50%, -50%) rotate(2deg); }
}



  50% { 
    transform: rotate(-1deg) translateX(-1px); 
    opacity: 0.85;
  }
  75% { 
    transform: rotate(2deg) translateX(1px); 
    opacity: 0.95;
  }
}



  50% { transform: rotate(-1deg) translateX(-1px); opacity: 0.85; }
  75% { transform: rotate(2deg) translateX(1px); opacity: 0.95; }
}



  50% { transform: rotate(-1deg); opacity: 0.85; }
  75% { transform: rotate(2deg); opacity: 0.95; }
}



  50% { transform: rotate(-1deg); opacity: 0.85; }
  75% { transform: rotate(2deg); opacity: 0.95; }
}



  50% { transform: rotate(-1deg); opacity: 0.85; }
  75% { transform: rotate(2deg); opacity: 0.95; }
}



  50% { transform: rotate(-1deg); opacity: 0.6; }
  75% { transform: rotate(2deg); opacity: 0.75; }
}



  50% { transform: rotate(-1deg); opacity: 0.6; }
  75% { transform: rotate(2deg); opacity: 0.75; }
}



  50% { transform: rotate(-1deg); opacity: 0.6; }
  75% { transform: rotate(2deg); opacity: 0.75; }
}



  50% { opacity: 0.5; }
  75% { opacity: 0.7; }
}



}



}