/* ═══════════════════════════════════════════════════════════════
   Iteration 2 - 艺术性与细节打磨实施
   基于 Evolution Team 和 Improve Team 的完整方案
   ═══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 完整设计系统变量（来自Improve Team）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* 时间层叠系统（来自Evolution Team） */
  --timing-whisper: 300ms;   /* 微妙反馈 */
  --timing-speech: 600ms;    /* 标准交互 */
  --timing-ceremony: 1200ms; /* 仪式性事件 */

  /* 动画时长统一 */
  --duration-instant: 100ms;
  --duration-quick: 200ms;
  --duration-normal: 400ms;
  --duration-relaxed: 600ms;
  --duration-slow: 800ms;
  --duration-epic: 1200ms;

  /* 缓动函数统一 */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* 间距系统 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;

  /* 阴影系统（5层） */
  --shadow-soft: 0 2px 8px rgba(42, 35, 70, 0.08);
  --shadow-float: 0 8px 24px rgba(42, 35, 70, 0.12);
  --shadow-hover: 0 16px 40px rgba(42, 35, 70, 0.16);
  --shadow-raised: 0 24px 56px rgba(42, 35, 70, 0.20);
  --shadow-deep: 0 32px 72px rgba(42, 35, 70, 0.24);

  /* 圆角系统 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. 动画编排交响化（Evolution Team方案）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 空间涟漪效应 */
.primary-action:active ~ .hall-hero {
  animation: hero-ripple 1600ms var(--ease-smooth);
}

@keyframes hero-ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.95;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 产品卡片与Atlas呼吸共振 */
.product-card:hover ~ .atlas-orb {
  animation: atlas-respond 800ms var(--ease-smooth);
}

@keyframes atlas-respond {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. 空间深度建筑化（5层Z轴系统）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Layer 5: 最远景 - 装饰球体 */
.orb-decoration {
  filter: blur(0.5px);
  transform: translateZ(-100px);
  transition: filter 800ms var(--ease-smooth);
}

.orb-decoration:hover {
  filter: blur(0);
}

/* Layer 4: 背景纹理 */
.hero-world {
  filter: blur(0.3px);
  transform: translateZ(-50px);
  transition: filter 800ms var(--ease-smooth);
}

.hero-world:hover {
  filter: blur(0);
}

/* Layer 3: 内容层 - 基准 */
.product-card {
  transform: translateZ(0);
}

/* Layer 2: 悬浮界面 - 反向视差 */
.site-nav {
  transform: translateZ(50px);
}

/* Layer 1: 最近景 - 光标反馈 */
.cursor-feedback {
  transform: translateZ(100px);
  pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 色彩-动画同步（协调性优化）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.button,
.primary-action {
  transition:
    transform var(--timing-whisper) var(--ease-bounce),
    background var(--timing-whisper) var(--ease-smooth),
    box-shadow var(--timing-whisper) var(--ease-smooth),
    color var(--timing-whisper) var(--ease-smooth);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. 情感连接叙事化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 欢迎仪式强化 */
.page-loader {
  animation: loader-to-atlas var(--timing-ceremony) var(--ease-smooth) forwards;
}

@keyframes loader-to-atlas {
  0% {
    transform: scale(1) translateX(0);
    opacity: 1;
  }
  60% {
    transform: scale(0.3) translateX(80vw) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    transform: scale(0) translateX(80vw) translateY(-50vh);
    opacity: 0;
  }
}

/* 内容从中心向外展开 */
.hero-content {
  animation: content-awaken var(--timing-ceremony) var(--ease-smooth) 400ms both;
}

@keyframes content-awaken {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 离别仪式 */
.navigation-link[data-transitioning="true"] {
  position: relative;
  overflow: hidden;
}

.navigation-link[data-transitioning="true"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--click-x) var(--click-y),
    rgba(235, 203, 121, 0.3) 0%,
    transparent 70%
  );
  animation: light-shrink 600ms var(--ease-smooth) forwards;
}

@keyframes light-shrink {
  0% {
    transform: scale(3);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. 微交互精细化（32个细节点部分实施）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Focus状态增强 */
*:focus-visible {
  outline: 2px solid rgba(154, 123, 230, 0.6);
  outline-offset: 4px;
  transition: outline-offset var(--timing-whisper) var(--ease-smooth);
}

*:focus-visible:hover {
  outline-offset: 6px;
}

/* 按钮内发光扫描增强 */
.button::before,
.primary-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: translateX(-100%) skewX(-12deg);
  transition: transform var(--timing-speech) var(--ease-smooth);
  pointer-events: none;
}

.button:hover::before,
.primary-action:hover::before {
  transform: translateX(100%) skewX(-12deg);
}

/* 产品卡片内部光晕增强 */
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(154, 123, 230, 0.08) 0%,
    transparent 35%,
    rgba(116, 214, 222, 0.06) 100%
  );
  opacity: 0;
  transition: opacity var(--timing-speech) var(--ease-smooth);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. 性能优化（GPU加速）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.product-card,
.button,
.atlas-orb,
.hero-world {
  will-change: transform;
}

/* 动画完成后移除will-change */
.product-card:not(:hover),
.button:not(:hover),
.atlas-orb:not(:hover) {
  will-change: auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. 减少动效（移除过度动画）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 移除普通段落的scroll-reveal */
p:not(.hero-description):not(.feature-description) {
  animation: none !important;
}

/* 保留关键元素的动画 */
.product-card,
.hero h1,
.primary-action,
.section-title {
  /* 保持原有动画 */
}

/* Reduced Motion: 统一由 civilization-tokens.css 处理 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   结束 - Iteration 2 艺术性与细节打磨
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */