/* ========================================
 * [about_hero] — 个人简介卡片
 * 配对短代码: shortcodes/about_hero.php
 * ======================================== */

/* Hero 卡片特殊样式 */
.about-card--hero {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-secondary)) 0%,
    color-mix(in srgb, var(--color-primary) 2%, var(--color-bg-secondary)) 40%,
    var(--color-card-bg) 100%
  );
  padding: var(--space-10) var(--space-8);
  display: flex;
  align-items: center;
}

.about-hero-inner {
  width: 100%;
}

/* Hero 文字区 */
.about-hero-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.about-hero-greeting {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  color: var(--color-text-secondary);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  text-align: center;
}

.about-hero-wave {
  display: inline-block;
  animation: about-wave 2s ease-in-out infinite;
  transform-origin: 70% 70%;
  margin-left: 2px;
}

@keyframes about-wave {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(14deg); }
  40%      { transform: rotate(-8deg); }
  60%      { transform: rotate(14deg); }
  80%      { transform: rotate(-4deg); }
}

/* SVG 签名 */
.about-hero-signature {
  --sig-main: var(--color-primary);
  --sig-sketch: color-mix(in srgb, var(--color-primary) 70%, transparent);
  --sig-thin: var(--color-primary-light);
  width: 100%;
  max-width: 620px;
  line-height: 0;
  margin: 0 auto;
}

.about-hero-signature svg {
  width: 100%;
  height: auto;
  display: block;
}

[data-theme="dark"] .about-hero-signature {
  --sig-main: var(--color-primary);
  --sig-sketch: color-mix(in srgb, var(--color-primary) 60%, transparent);
  --sig-thin: color-mix(in srgb, var(--color-primary) 50%, #fff);
}


.about-hero-name strong {
  font-weight: var(--font-bold);
}

/* Bio */
.about-hero-bio {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 560px;
  text-align: center;
}

/* 响应式 — Tablet */
@media (max-width: 767px) {
  .about-card--hero {
    padding: var(--space-4) var(--space-8);
  }
  .about-hero-signature {
    max-width: 100%;
  }
  .about-hero-greeting {
    font-size: var(--text-base);
  }
  .about-hero-bio {
    font-size: var(--text-sm);
  }
  .about-hero-name {
    font-size: var(--text-2xl);
  }
}

/* 响应式 — Mobile */
@media (max-width: 480px) {
  .about-card--hero {
    padding: var(--space-4) var(--space-8);
  }
  .about-hero-body {
    align-items: center;
  }
  .about-hero-bio {
    max-width: 100%;
  }
  .about-hero-name {
    font-size: var(--text-xl);
  }
}