/**
 * @file animate.css
 * @description 滚动入场动画 + 页面丝滑效果
 * @author oncedrop
 */

/* ========================================================================
   1. 全局设置（平滑滚动由 Lenis 接管，不使用 CSS scroll-behavior 避免冲突）
   ======================================================================== */
html {
  scroll-behavior: auto;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================================
   2. 动画关键帧定义
   ======================================================================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeBounce {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px);
  }
  80% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fadeRotate {
  from {
    opacity: 0;
    transform: rotate(-5deg) translateY(20px);
  }
  to {
    opacity: 1;
    transform: rotate(0) translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(247, 130, 16, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(247, 130, 16, 0);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ========================================================================
   3. 动画类定义
   ======================================================================== */

.animate-element {
  opacity: 0;
  will-change: opacity, transform;
}

.animate-element.is-visible {
  opacity: 1;
}

.animate-fade-up {
  transform: translateY(30px);
}

.animate-fade-up.is-visible {
  animation: fadeUp 0.6s ease-out forwards;
}

.animate-fade-left {
  transform: translateX(30px);
}

.animate-fade-left.is-visible {
  animation: fadeLeft 0.6s ease-out forwards;
}

.animate-fade-right {
  transform: translateX(-30px);
}

.animate-fade-right.is-visible {
  animation: fadeRight 0.6s ease-out forwards;
}

.animate-fade-scale {
  transform: scale(0.95);
}

.animate-fade-scale.is-visible {
  animation: fadeScale 0.6s ease-out forwards;
}

.animate-fade-bounce {
  transform: translateY(40px);
}

.animate-fade-bounce.is-visible {
  animation: fadeBounce 0.8s ease-out forwards;
}

.animate-fade-rotate {
  transform: rotate(-5deg) translateY(20px);
}

.animate-fade-rotate.is-visible {
  animation: fadeRotate 0.7s ease-out forwards;
}

/* ========================================================================
   4. 延迟动画
   ======================================================================== */
.delay-100 { animation-delay: 0.1s !important; }
.delay-200 { animation-delay: 0.2s !important; }
.delay-300 { animation-delay: 0.3s !important; }
.delay-400 { animation-delay: 0.4s !important; }
.delay-500 { animation-delay: 0.5s !important; }
.delay-600 { animation-delay: 0.6s !important; }

/* ========================================================================
   5. 浮动效果
   ======================================================================== */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-float-slow {
  animation: float 4s ease-in-out infinite;
}

/* ========================================================================
   6. 脉冲发光效果
   ======================================================================== */
.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* ========================================================================
   7. 背景渐变动画
   ======================================================================== */
.animate-gradient {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

/* ========================================================================
   8. 数字滚动动画
   ======================================================================== */
.counter {
  display: inline-block;
}

/* ========================================================================
   9. Features 卡片动画
   ======================================================================== */
.feature-card {
  transform: translateY(20px);
  opacity: 0;
}

.feature-card.is-visible {
  animation: fadeUp 0.5s ease-out forwards;
}

/* ========================================================================
   10. Partners Logo 动画
   ======================================================================== */
.marquee-item {
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.marquee-item:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* ========================================================================
   11. Products 卡片动画
   ======================================================================== */
.product-card {
  opacity: 0;
  transform: translateY(24px);
}

.products-grid.is-visible .product-card {
  animation: fadeUp 0.55s ease-out forwards;
}

.products-grid.is-visible .product-card:nth-child(1) { animation-delay: 0s; }
.products-grid.is-visible .product-card:nth-child(2) { animation-delay: 0.12s; }
.products-grid.is-visible .product-card:nth-child(3) { animation-delay: 0.24s; }
.products-grid.is-visible .product-card:nth-child(4) { animation-delay: 0.36s; }
.products-grid.is-visible .product-card:nth-child(5) { animation-delay: 0.48s; }

/* ========================================================================
   12. How It Works 步骤动画
   ======================================================================== */
.work-step {
  transform: translateY(20px);
  opacity: 0;
}

.work-step.is-visible {
  animation: fadeUp 0.5s ease-out forwards;
}

.work-step-icon {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.work-step:hover .work-step-icon {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(247, 130, 16, 0.2);
}

/* ========================================================================
   13. 服务页动画
   ======================================================================== */
.service-feature-item {
  transform: translateX(20px);
  opacity: 0;
}

.service-feature-item.is-visible {
  animation: fadeLeft 0.5s ease-out forwards;
}

/* ========================================================================
   14. About 页面动画
   ======================================================================== */
.about-feature-item {
  transform: translateY(20px);
  opacity: 0;
}

.about-feature-item.is-visible {
  animation: fadeUp 0.5s ease-out forwards;
}

/* ========================================================================
   15. Brand 页面动画
   ======================================================================== */
.brand-service-card {
  transform: translateY(20px);
  opacity: 0;
}

.brand-service-card.is-visible {
  animation: fadeUp 0.5s ease-out forwards;
}

/* ========================================================================
   16. Affiliates 页面动画
   ======================================================================== */
.affiliates-step {
  transform: translateY(20px);
  opacity: 0;
}

.affiliates-step.is-visible {
  animation: fadeUp 0.5s ease-out forwards;
}

/* ========================================================================
   17. 按钮悬停增强动画
   ======================================================================== */
.btn-hero,
.btn-features,
.btn-how-start,
.btn-affiliates,
.btn-sourcing {
  position: relative;
  overflow: hidden;
}

.btn-hero::before,
.btn-features::before,
.btn-how-start::before,
.btn-affiliates::before,
.btn-sourcing::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-hero:hover::before,
.btn-features:hover::before,
.btn-how-start:hover::before,
.btn-affiliates:hover::before,
.btn-sourcing:hover::before {
  left: 100%;
}

/* ========================================================================
   18. 图片悬停放大效果增强
   ======================================================================== */
.product-media img,
.brand-service-media img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================================================
   19. 导航链接下划线动画
   ======================================================================== */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 30px;
}

/* ========================================================================
   20. Footer 动画
   ======================================================================== */
.footer-brand,
.footer-links,
.footer-contact {
  transform: translateY(20px);
  opacity: 0;
}

.footer-brand.is-visible,
.footer-links.is-visible,
.footer-contact.is-visible {
  animation: fadeUp 0.5s ease-out forwards;
}

/* ========================================================================
   21. Hero 模块左右入场动画
   ======================================================================== */
.hero-text {
  opacity: 0;
  transform: translateX(-30px);
}

.hero-media {
  opacity: 0;
  transform: translateX(30px);
}

.hero-text.is-visible {
  animation: fadeRight 0.8s ease-out forwards;
}

.hero-media.is-visible {
  animation: fadeLeft 0.8s ease-out forwards;
}

@media screen and (max-width: 768px) {
  .hero-text {
    transform: translateY(20px);
  }

  .hero-media {
    transform: translateY(20px);
  }

  .hero-text.is-visible {
    animation: fadeUp 0.8s ease-out forwards;
  }

  .hero-media.is-visible {
    animation: fadeUp 0.8s ease-out forwards;
  }
}

/* ========================================================================
   23. Partners 合作伙伴模块滚动入场动画
   ======================================================================== */
.partners-tabs {
  opacity: 0;
  transform: translateY(20px);
}
.partners-tabs.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.partners-content {
  opacity: 0;
  transform: translateY(30px);
}
.partners-content.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s ease 0.15s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* ========================================================================
   24. Products 热门产品模块滚动入场动画
   ======================================================================== */
.products-header {
  opacity: 0;
  transform: translateY(20px);
}
.products-header.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================================================
   25. How It Works 流程模块滚动入场动画（标题 + 步骤）
   ======================================================================== */
.how-it-works-header {
  opacity: 0;
  transform: translateY(24px);
}
.how-it-works-header.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.how-it-works-steps {
  opacity: 0;
  transform: translateY(20px);
}
.how-it-works-steps.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

/* ========================================================================
   22. 底部 CTA（Ready to Scale）滚动入场动画 —— 增强版
   ======================================================================== */
@keyframes ctaBounceIn {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.85) rotate(-3deg);
  }
  50% {
    transform: translateY(-12px) scale(1.05) rotate(2deg);
  }
  75% {
    transform: translateY(4px) scale(0.98) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

.home-cta-content {
  opacity: 0;
  transform: translateY(40px);
}
.home-cta-content.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 更调皮的大标题动画：弹跳入场 + 微旋转 + 轻微缩放 */
.home-cta-heading {
  opacity: 0;
  transform: translateY(60px) scale(0.85);
}
.home-cta-content.is-visible .home-cta-heading {
  animation: ctaBounceIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
}

.home-cta-subheading {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease-out 0.3s;
}
.home-cta-content.is-visible .home-cta-subheading {
  opacity: 1;
  transform: translateY(0);
}

.home-cta-btn {
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition: opacity 0.8s ease 0.5s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}
.home-cta-content.is-visible .home-cta-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.home-cta-note {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease 0.7s, transform 0.8s ease-out 0.7s;
}
.home-cta-content.is-visible .home-cta-note {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 768px) {
  .home-cta-content {
    transform: translateY(30px);
  }
  .home-cta-heading {
    transform: translateY(40px) scale(0.85);
  }
}