/*
 * theme-polish.css — 「薄荷 × 蜜桃」主题微调优化
 *
 * 用法: 在 theme-refresh.css 之后引入
 *   <link rel="stylesheet" href="/styles.css" />
 *   <link rel="stylesheet" href="/theme-refresh.css" />
 *   <link rel="stylesheet" href="/theme-polish.css" />
 *
 * 优化内容:
 *   1. 按钮过渡更流畅 (160ms→280ms + 更好的缓动)
 *   2. 首页照片旋转更自然 (-1.1deg→-1.8deg)
 *   3. 天数徽章心形心跳动画
 *   4. Hub卡片箭头弹性效果
 *   5. 卡片悬停缩放比例优化
 */

/* ============ 1. 按钮过渡优化 ============ */

button {
  transition:
    background-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

button:active {
  transition-duration: 120ms;
}

/* ============ 2. 首页照片旋转优化 ============ */

.home-photo {
  transform: rotate(-1.8deg);
}

.home-photo:hover {
  transform: rotate(-0.3deg) scale(1.025);
  box-shadow:
    0 36px 72px -26px rgba(31, 105, 88, 0.48),
    0 12px 28px -12px rgba(31, 105, 88, 0.32);
}

/* ============ 3. 天数徽章心跳动画 ============ */

.home-days::before {
  animation: heartbeat 2.4s ease-in-out infinite;
  font-size: 2rem !important; /* 测试：让心形变大 */
  color: red !important; /* 测试：变成红色 */
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.18);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.12);
  }
  56% {
    transform: scale(1);
  }
}

/* 尊重用户的动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .home-days::before {
    animation: none;
  }
}

/* ============ 4. Hub卡片箭头弹性效果 ============ */

.hub-card::after {
  transform: translateX(-4px);
  transition:
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性缓动 */
}

.hub-card:hover::after {
  transform: translateX(2px); /* 微微超出 */
}

/* ============ 5. 卡片悬停缩放优化 ============ */

/* Hub卡片 - 中等元素 */
.hub-card:hover {
  transform: translateY(-4px) scale(1.015);
}

/* 数据卡片 - 中等元素 */
.metric:hover {
  transform: translateY(-3px) scale(1.015);
}

/* 记忆卡片 - 中等元素 */
.today-memory-item:hover {
  transform: translateY(-3px) scale(1.015);
}

/* 照片卡片 - 大元素 */
.photo-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 36px -16px rgba(31, 105, 88, 0.42);
}

/* 时间线记录卡 - 保持原有的hover效果 */
.moment-card:hover {
  transform: translateY(-2px) scale(1.012);
}

/* 书籍卡片 */
.book-card:hover {
  transform: translateY(-3px) scale(1.015);
}

/* ============ 额外优化: 输入框焦点光晕 ============ */

input:focus,
select:focus,
textarea:focus {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
    0 8px 16px -8px rgba(31, 105, 88, 0.24);
}

/* ============ 额外优化: 数字字重统一 ============ */

.home-days strong,
.metric strong,
.plan-stat-card strong {
  letter-spacing: -0.02em; /* 数字更紧凑 */
}