/**
 * 苏小聚 - 动画定义CSS
 * 包含入场动画、淡入动画、滑入动画和数字递增动画
 */

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

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 从下方淡入 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 从左侧滑入 */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 从右侧滑入 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 缩放淡入 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 弹跳效果 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* 脉冲效果 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 滚动提示箭头动画 */
@keyframes scrollBounce {
  0%, 100% {
    transform: rotate(45deg) translate(0, 0);
  }
  50% {
    transform: rotate(45deg) translate(3px, 3px);
  }
}

/* 浮动效果 */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 旋转效果 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 闪烁效果 */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 时间轴节点依次出现 */
@keyframes timelineNodeAppear {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 时间轴内容滑入 */
@keyframes timelineContentSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   动画工具类
   ======================================== */

/* 基础动画类 */
.animate-fadeIn {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-slideInLeft {
  animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slideInRight {
  animation: slideInRight 0.6s ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.5s ease-out forwards;
}

.animate-bounce {
  animation: bounce 1s ease infinite;
}

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

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

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ========================================
   入场动画 - 首屏元素
   ======================================== */

/* 首屏入场动画容器 */
.hero-content {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.hero-logo {
  opacity: 0;
  animation: scaleIn 0.8s ease-out 0.3s forwards;
}

.hero-title {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.5s forwards;
}

.hero-subtitle {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.7s forwards;
}

.hero-tagline {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.9s forwards;
}

.hero-tags {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 1.1s forwards;
}

.hero-tag {
  opacity: 0;
  animation: scaleIn 0.4s ease-out forwards;
}

.hero-tag:nth-child(1) { animation-delay: 1.2s; }
.hero-tag:nth-child(2) { animation-delay: 1.35s; }
.hero-tag:nth-child(3) { animation-delay: 1.5s; }

/* 滚动提示动画 */
.scroll-hint {
  opacity: 0;
  animation: fadeIn 0.6s ease-out 1.8s forwards;
}

.scroll-arrow {
  animation: scrollBounce 1.5s ease-in-out infinite;
}

.scroll-arrow-delay {
  animation: scrollBounce 1.5s ease-in-out 0.3s infinite;
}

/* 背景装饰动画 - 桃花 */
.hero-background .peach-1 {
  opacity: 0;
  animation: floatIn 1.2s ease-out 0.3s forwards;
}

.hero-background .peach-2 {
  opacity: 0;
  animation: floatIn 1.2s ease-out 0.5s forwards;
}

.hero-background .peach-3 {
  opacity: 0;
  animation: floatIn 1.2s ease-out 0.7s forwards;
}

/* 背景装饰动画 - 窗格 */
.hero-background .window-1 {
  opacity: 0;
  animation: fadeIn 1.5s ease-out 0.4s forwards;
}

.hero-background .window-2 {
  opacity: 0;
  animation: fadeIn 1.5s ease-out 0.6s forwards;
}

/* 背景装饰动画 - 竹叶 */
.hero-background .bamboo-1 {
  opacity: 0;
  animation: slideInLeft 1s ease-out 0.8s forwards;
}

.hero-background .bamboo-2 {
  opacity: 0;
  animation: slideInRight 1s ease-out 1s forwards;
}

/* 浮入动画 - 用于桃花 */
@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
  to {
    opacity: 0.25;
    transform: translateY(0) scale(1);
  }
}

/* Logo桃花装饰动画 */
.logo-peach {
  animation: pulse 3s ease-in-out infinite;
}

/* ========================================
   滚动触发动画 - 视口进入时触发
   ======================================== */

/* 初始隐藏状态 */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 进入视口后的状态 */
.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 从左侧滑入变体 */
.scroll-animate-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 从右侧滑入变体 */
.scroll-animate-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 缩放变体 */
.scroll-animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* ========================================
   数字递增动画基础样式
   ======================================== */

/* 数字容器 */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* 数字递增时的过渡效果 */
.count-up.counting {
  transition: color 0.1s ease;
}

/* 数字完成时的强调效果 */
.count-up.completed {
  animation: pulse 0.3s ease-out;
}

/* ========================================
   卡片动画 - 交错出现
   ======================================== */

/* 数据卡片交错动画 */
.data-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.data-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 交错延迟 */
.data-card:nth-child(1) { transition-delay: 0.1s; }
.data-card:nth-child(2) { transition-delay: 0.2s; }
.data-card:nth-child(3) { transition-delay: 0.3s; }
.data-card:nth-child(4) { transition-delay: 0.4s; }

/* 优势卡片交错动画 */
.advantage-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.advantage-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.advantage-card:nth-child(1) { transition-delay: 0.1s; }
.advantage-card:nth-child(2) { transition-delay: 0.2s; }
.advantage-card:nth-child(3) { transition-delay: 0.3s; }

/* 风险卡片交错动画 */
.risk-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.risk-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.risk-card:nth-child(1) { transition-delay: 0.1s; }
.risk-card:nth-child(2) { transition-delay: 0.2s; }
.risk-card:nth-child(3) { transition-delay: 0.3s; }

/* 选址卡片交错动画 */
.location-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.location-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.location-card:nth-child(1) { transition-delay: 0.1s; }
.location-card:nth-child(2) { transition-delay: 0.25s; }

/* ========================================
   时间轴动画
   ======================================== */

/* 时间轴节点动画 */
.timeline-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.timeline-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 时间轴节点交错延迟 */
.timeline-item:nth-child(1) { transition-delay: 0.1s; }
.timeline-item:nth-child(2) { transition-delay: 0.3s; }
.timeline-item:nth-child(3) { transition-delay: 0.5s; }

/* 时间轴节点脉冲效果 */
.timeline-node {
  transition: transform 0.3s ease, background 0.3s ease;
}

.timeline-item.expanded .timeline-node {
  background: var(--color-accent);
  transform: scale(1.2);
}

/* ========================================
   标签页切换动画
   ======================================== */

/* 标签内容切换动画 */
.tab-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.tab-content.active {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   图表动画
   ======================================== */

/* 图表容器动画 */
.chart-wrapper {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.chart-wrapper.visible {
  opacity: 1;
  transform: translateY(0);
}

.chart-wrapper:nth-child(1) { transition-delay: 0.1s; }
.chart-wrapper:nth-child(2) { transition-delay: 0.3s; }

/* ========================================
   弹窗动画
   ======================================== */

/* 弹窗背景淡入 */
.modal-overlay {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.modal:not([hidden]) .modal-overlay {
  opacity: 1;
}

/* 弹窗内容缩放淡入 */
.modal-content {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.modal:not([hidden]) .modal-content {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ========================================
   悬停效果增强
   ======================================== */

/* 卡片悬停提升效果 */
.data-card,
.advantage-card,
.location-card,
.risk-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease-out;
}

/* 按钮悬停效果 */
.cta-button,
.submit-btn,
.tab-btn {
  transition: all 0.3s ease;
}

/* 导航链接悬停效果 */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
  left: 0;
}

@media (min-width: 768px) {
  .nav-link::after {
    display: none;
  }
}

/* ========================================
   加载状态动画
   ======================================== */

/* 加载旋转动画 */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* 骨架屏闪烁效果 */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-background) 25%,
    var(--color-background-alt) 50%,
    var(--color-background) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ========================================
   prefers-reduced-motion 媒体查询降级
   用户偏好减少动画时禁用所有动画
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* 确保内容立即可见 */
  .hero-content,
  .hero-logo,
  .hero-title,
  .hero-subtitle,
  .hero-tagline,
  .hero-tags,
  .hero-tag,
  .scroll-hint,
  .hero-background .peach-blossom,
  .hero-background .peach-1,
  .hero-background .peach-2,
  .hero-background .peach-3,
  .hero-background .garden-window,
  .hero-background .window-1,
  .hero-background .window-2,
  .hero-background .bamboo-leaf,
  .hero-background .bamboo-1,
  .hero-background .bamboo-2,
  .scroll-animate,
  .scroll-animate-left,
  .scroll-animate-right,
  .scroll-animate-scale,
  .data-card,
  .advantage-card,
  .risk-card,
  .timeline-item,
  .chart-wrapper,
  .tab-content {
    opacity: 1 !important;
    transform: none !important;
  }

  /* 恢复桃花装饰的正确透明度 */
  .hero-background .peach-1 { opacity: 0.25 !important; }
  .hero-background .peach-2 { opacity: 0.2 !important; }
  .hero-background .peach-3 { opacity: 0.15 !important; }
  .hero-background .window-1 { opacity: 0.08 !important; }
  .hero-background .window-2 { opacity: 0.05 !important; }

  /* 禁用滚动提示动画 */
  .scroll-arrow,
  .scroll-arrow-delay {
    animation: none !important;
  }

  /* 禁用悬停动画 */
  .data-card:hover,
  .advantage-card:hover,
  .location-card:hover,
  .risk-card:hover,
  .hero-tag:hover {
    transform: none !important;
  }
}

/* ========================================
   打印样式 - 禁用动画
   ======================================== */

@media print {
  * {
    animation: none !important;
    transition: none !important;
  }

  .scroll-hint,
  .floating-contact,
  .navbar {
    display: none !important;
  }
}