/* ═══════════════════════════════════════════════════════════════
   Iteration 5 - 艺术品级完成实施
   基于所有前置迭代的最终打磨
   ═══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 像素级完美 - 亚像素渲染
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 确保像素对齐 */
.product-card,
.button,
.hero-content {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. 整体协调性 - 统一的呼吸节奏
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* 黄金比例时间系统 */
  --time-base: 300ms;
  --time-golden-1: calc(var(--time-base) * 1.618);  /* ~486ms */
  --time-golden-2: calc(var(--time-base) * 2.618);  /* ~785ms */
  --time-golden-3: calc(var(--time-base) * 4.236);  /* ~1271ms */
}

.hero-content {
  animation-duration: var(--time-golden-3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. 灵魂注入 - 生命感
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Never animate the entire application shell. Scaling the shell continuously
   moves every descendant hit target, so links, forms and the mobile menu can
   fail real pointer stability checks. Life stays in decorative elements only. */
.atlas-shell {
  animation: none;
  transform: none;
}

/* 装饰球体微脉动 */
@keyframes orb-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.orb-decoration {
  animation: orb-pulse 6s ease-in-out infinite;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 文明感 - 时空连续性
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 页面进入仪式 */
@keyframes civilization-awaken {
  0% {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.hero-content {
  animation: civilization-awaken 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. 完美的色彩过渡
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 所有颜色变化使用贝塞尔曲线插值 */
* {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 渐变色动画 */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.product-card {
  --gradient-angle: 135deg;
  background: linear-gradient(
    var(--gradient-angle),
    rgba(255, 255, 255, 0),
    rgba(154, 123, 230, 0.03)
  );
  transition: --gradient-angle 2s ease-in-out;
}

.product-card:hover {
  --gradient-angle: 225deg;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. 极致的细节打磨
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 按钮微妙的高光扫描 */
.button::after,
.primary-action::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 70%
  );
  transform: translateX(-100%) skewX(-10deg);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* 产品卡片边缘微光 */
.product-card {
  position: relative;
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(154, 123, 230, 0.3),
    transparent 30%,
    rgba(116, 214, 222, 0.3)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 600ms ease-out;
}

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. 性能与美学的完美平衡
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* GPU加速但节制使用 */
@supports (transform: translateZ(0)) {
  .product-card,
  .button,
  .hero-content {
    transform: translateZ(0);
    will-change: auto; /* 只在hover时启用 */
  }

  .product-card:hover,
  .button:hover {
    will-change: transform, box-shadow;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. 最终的无障碍优化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 高对比度模式 */
@media (prefers-contrast: high) {
  * {
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
  }

  .product-card:hover {
    border: 2px solid currentColor;
  }
}

/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  body {
    background: linear-gradient(
      135deg,
      rgba(12, 10, 25, 1) 0%,
      rgba(20, 18, 35, 1) 100%
    );
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   结束 - Iteration 5 艺术品级完成
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */