/* ═══════════════════════════════════════════════════════════════
   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. 灵魂注入 - 生命感
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 页面整体微呼吸 */
@keyframes page-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.002);
  }
}

/* On .atlas-shell, not body: a transform on body would re-anchor every
   position:fixed element (skip-link, rail toggles) and make them drift. */
.atlas-shell {
  animation: page-breathe 8s ease-in-out infinite;
}

/* 装饰球体微脉动 */
@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 艺术品级完成
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */