/* ═══════════════════════════════════════════════════════════════
   Iteration 3 - 体验升级实施
   基于 Iteration 2 洞察的体验增强
   ═══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 用户旅程优化 - 滚动体验增强
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --scroll-behavior: smooth;
}

html {
  scroll-behavior: var(--scroll-behavior);
}

/* 渐进式内容显示 */
.section {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. 情感连接深化 - Hover状态讲故事
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.product-card {
  position: relative;
  overflow: hidden;
}

/* 产品卡片情感光晕 */
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(154, 123, 230, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 600ms ease-out;
  pointer-events: none;
}

.product-card:hover::after {
  opacity: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. 惊喜时刻设计 - 发现奖励
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 首次交互奖励动画 */
.product-card[data-first-hover="true"] {
  animation: discovery-reward 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes discovery-reward {
  0%, 100% {
    transform: translateY(-4px);
  }
  25% {
    transform: translateY(-8px) scale(1.02);
  }
  75% {
    transform: translateY(-6px) scale(1.01);
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 导航引导增强
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.site-nav a {
  position: relative;
}

/* 导航下划线动画增强 */
.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(154, 123, 230, 0.8),
    rgba(116, 214, 222, 0.8)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. 情感反馈系统
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 按钮点击反馈增强 */
.button:active,
.primary-action:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

/* 成功状态反馈 */
.button[data-state="success"]::before {
  content: '✓';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: success-appear 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes success-appear {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
    opacity: 1;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. 页面过渡连续性
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body {
  transition: opacity 300ms ease-out;
}

body[data-transitioning="true"] {
  opacity: 0.95;
}