/* ═══════════════════════════════════════════════════════════════
   Iteration 4 - 创新突破实施
   基于 Iteration 2 洞察的创新扩展
   ═══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 前沿技术应用 - CSS Houdini风格
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* 动态渐变色 */
  --gradient-angle: 135deg;
  --gradient-primary: linear-gradient(
    var(--gradient-angle),
    rgba(154, 123, 230, 0.1),
    rgba(116, 214, 222, 0.1)
  );
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. 交互创新 - 磁吸效果
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.product-card {
  cursor: pointer;
}

/* 模拟磁吸效果 - 通过JavaScript动态设置transform */
.product-card[data-magnetic="true"] {
  transform:
    translateY(-4px)
    translateX(var(--mouse-x, 0px))
    translateY(var(--mouse-y, 0px));
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. 视觉突破 - 动态模糊与清晰
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hero-background {
  filter: blur(0.8px);
  transition: filter 800ms ease-out;
}

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

/* 内容聚焦效果 */
.product-card:focus-within {
  filter: brightness(1.05);
  transform: translateY(-6px) scale(1.02);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 3D变换预览
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.product-card {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.product-card:hover .product-card__image {
  transform:
    rotateX(var(--rotate-x, 0deg))
    rotateY(var(--rotate-y, 0deg))
    translateZ(20px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. 智能响应 - 根据设备性能调整
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

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

/* 高性能设备增强效果 */
@media (min-resolution: 2dppx) and (prefers-reduced-motion: no-preference) {
  .product-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-primary);
    border-radius: inherit;
    opacity: 0;
    filter: blur(20px);
    transition: opacity 600ms ease-out;
    z-index: -1;
  }

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. 动态内容加载优化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Skeleton Loading */
.loading-skeleton {
  background: linear-gradient(
    90deg,
    rgba(42, 35, 70, 0.05) 0%,
    rgba(42, 35, 70, 0.1) 50%,
    rgba(42, 35, 70, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. 创新交互模式 - 长按交互
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.button[data-long-press="true"] {
  position: relative;
  overflow: hidden;
}

.button[data-long-press="true"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms linear;
}

.button[data-pressing="true"]::before {
  transform: scaleX(1);
}