/* ═══════════════════════════════════════════════════
   home.css · 首页专属样式
   依赖 css/common.css（主题变量 / 卡片 / 标签等），
   必须在 common.css 之后引入。
   ═══════════════════════════════════════════════════ */

/* ═══════════ Hero 区 ═══════════ */
.hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 96px 24px 72px;
  text-align: center;
}

.hero__avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 28px;
}

.hero__avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--bg-card), var(--shadow);
  transition: box-shadow var(--theme-transition);
}

.hero__avatar svg,
.hero__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 头像光晕：外圈柔和渐变 + 呼吸动画 */
.hero__avatar-halo {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  animation: breathe 4s ease-in-out infinite;
  pointer-events: none;
}

.hero__name {
  font-size: 2rem;
  font-weight: 700;
}

.hero__intro {
  margin-top: 12px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-secondary);
  font-size: 1.02rem;
}

/* 一言样式：斜体 + 引号装饰，区别于普通简介 */
.hero__intro--hitokoto {
  font-style: italic;
  letter-spacing: 0.02em;
}

.hero__quote-mark {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}

/* 一言出处（来自 Hitokoto API 时显示） */
.hero__quote-src {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.85em;
  color: var(--text-secondary);
  font-style: normal;
}

/* 社交图标排布 */
.hero__social {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* ═══════════ 关于我 ═══════════ */
.about__card {
  margin-top: 28px;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  color: var(--text-primary);
  transition: background-color var(--theme-transition),
    border-color var(--theme-transition), box-shadow var(--theme-transition);
}

.about__card p + p {
  margin-top: 12px;
}

.about__card p:first-child {
  font-weight: 600;
}

/* ═══════════ 技能 / 标签云 ═══════════ */
/* 标签本身的样式（.tag）在 common.css，这里只管排布 */
.skills__cloud {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ═══════════ 作品 / 子页面卡片网格 ═══════════ */
.works__grid {
  margin-top: 28px;
  display: grid;
  /* 自动填充：小屏 1 列 → 大屏最多 3 列 */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* ═══════════ 联系方式 ═══════════ */
.contact__card {
  margin-top: 28px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  transition: background-color var(--theme-transition),
    border-color var(--theme-transition);
}

.contact__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  transition: background-color 0.25s var(--ease);
}

.contact__item:hover {
  background: var(--accent-soft);
}

.contact__icon {
  font-size: 1.3rem;
}

.contact__text {
  font-size: 0.95rem;
  color: var(--text-primary);
}

/* ═══════════ 首页载入动画 ═══════════ */
/* 复用 common.css 的 fadeUp 关键帧，错开延迟依次进场 */
.hero__name,
.hero__intro,
.hero__social {
  animation: fadeUp 0.8s var(--ease) backwards;
}
.hero__name  { animation-delay: 0.1s; }
.hero__intro { animation-delay: 0.25s; }
.hero__social{ animation-delay: 0.4s; }

/* ═══════════ 作品网格依次进场 ═══════════
   同一批次进入视口的卡片按列位置错开 80ms，形成轻微的节奏感 */
.works__grid .reveal.is-visible:nth-child(3n + 2) { animation-delay: 0.08s; }
.works__grid .reveal.is-visible:nth-child(3n + 3) { animation-delay: 0.16s; }

/* ═══════════ 移动端适配（≤768px，首页部分） ═══════════ */
@media (max-width: 768px) {
  .hero { padding-top: 72px; }
  .hero__name { font-size: 1.6rem; }
  .section { padding-top: 56px; }
}