/* ============================================================

   brand.css · Our Smart Baby

   品牌体验系统

   加载顺序：7/34

   ============================================================ */



/* ============================================================

   1. 品牌记忆点 · 每位作者专属渐变色头像

   ============================================================ */

.brand-avatar {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-display);

  font-size: 28px;

  font-weight: var(--font-bold);

  color: white;

  flex-shrink: 0;

  transition: transform var(--brand-signature-transition);

}



.brand-avatar:hover { transform: scale(1.05); }



.brand-avatar.rachel { background: linear-gradient(135deg, #E8874A, #C96A3D); }

.brand-avatar.priya { background: linear-gradient(135deg, #D4568A, #A03F6C); }

.brand-avatar.jenna { background: linear-gradient(135deg, #6B9BB8, #4A7896); }



/* ============================================================

   2. 品牌记忆点 · 探索钩子渐变边框

   ============================================================ */

.brand-exploration {

  position: relative;

  border: 1px solid transparent;

  border-radius: var(--brand-signature-radius);

  background:

    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,

    linear-gradient(135deg, var(--color-primary-400), var(--color-accent-400)) border-box;

  transition: all var(--duration-normal) var(--ease-out);

}



.brand-exploration:hover {

  box-shadow: var(--shadow-md);

}



/* ============================================================

   3. 品牌记忆点 · 判断框架卡片

   ============================================================ */

.brand-framework {

  border-left: 4px solid var(--color-primary-500);

  background-color: var(--color-primary-50);

  padding: var(--space-5) var(--space-6);

  border-radius: 0 var(--brand-signature-radius) var(--brand-signature-radius) 0;

}



/* ============================================================

   4. 品牌记忆点 · 评分可视化

   ============================================================ */

.brand-score {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-2) var(--space-4);

  background-color: var(--color-primary-50);

  border: 1px solid var(--color-primary-200);

  border-radius: var(--radius-full);

  font-weight: var(--font-semibold);

  color: var(--color-primary-700);

  font-size: var(--text-sm);

}



.brand-score-bar {

  display: inline-block;

  width: 60px;

  height: 6px;

  background-color: var(--color-neutral-200);

  border-radius: var(--radius-full);

  overflow: hidden;

  position: relative;

}



.brand-score-bar::after {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  background: linear-gradient(90deg, var(--color-primary-500), var(--color-accent-500));

  border-radius: var(--radius-full);

  width: var(--score-percent, 0%);

}



/* ============================================================

   5. 品牌记忆点 · CTA按钮微动效

   ============================================================ */

.brand-cta {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-4) var(--space-6);

  background: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500));

  color: white;

  font-weight: var(--font-semibold);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-md);

  transition: all var(--brand-signature-transition);

  min-height: 48px;

  text-decoration: none;

}



.brand-cta:hover {

  color: white;

  transform: translateY(-2px);

  box-shadow: var(--shadow-lg);

}



.brand-cta:active { transform: scale(0.97); }



/* ============================================================

   6. 品牌声音 · 空状态文案

   ============================================================ */

.brand-empty {

  text-align: center;

  padding: var(--rhythm-breath) var(--space-6);

  color: var(--color-text-tertiary);

  font-size: var(--text-sm);

}



.brand-empty::before {

  content: '🌱';

  display: block;

  font-size: var(--text-3xl);

  margin-bottom: var(--space-3);

  opacity: 0.5;

}



/* ============================================================

   7. 品牌声音 · 错误提示

   ============================================================ */

.brand-error {

  padding: var(--space-4);

  background-color: hsl(0, 70%, 97%);

  border-left: 4px solid var(--color-error);

  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

  color: var(--color-error);

  font-size: var(--text-sm);

}



.brand-error::before {

  content: '💡 ';

  font-weight: var(--font-semibold);

}



/* ============================================================

   8. 品牌声音 · 加载提示

   ============================================================ */

.brand-loading {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  padding: var(--space-4);

  color: var(--color-text-secondary);

  font-size: var(--text-sm);

}



/* ============================================================

   9. 品牌声音 · 404页面

   ============================================================ */

.brand-404 {

  text-align: center;

  padding: var(--rhythm-silence) var(--space-6);

  max-width: 600px;

  margin: 0 auto;

}



.brand-404 h1 {

  font-size: var(--text-4xl);

  margin-bottom: var(--space-5);

  color: var(--color-primary-600);

}



.brand-404 p {

  font-size: var(--text-lg);

  color: var(--color-text-secondary);

  margin-bottom: var(--rhythm-loose);

}



.brand-404-links {

  display: flex;

  flex-direction: column;

  gap: var(--space-3);

  max-width: 400px;

  margin: 0 auto;

}



.brand-404-links a {

  display: block;

  padding: var(--space-4);

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  color: var(--color-text-primary);

  font-weight: var(--font-medium);

  transition: all var(--duration-normal) var(--ease-out);

  min-height: 48px;

}



.brand-404-links a:hover {

  border-color: var(--color-primary-400);

  background-color: var(--color-primary-50);

}



/* ============================================================

   10. 品牌价值观标语

   ============================================================ */

.brand-tagline {

  font-family: var(--font-display);

  font-size: var(--text-lg);

  font-weight: var(--font-medium);

  color: var(--color-primary-600);

  letter-spacing: var(--tracking-wide);

  text-align: center;

  padding: var(--space-4) 0;

  border-top: 1px solid var(--color-border);

  border-bottom: 1px solid var(--color-border);

  margin: var(--rhythm-loose) 0;

}



/* ============================================================

   11. 移动端品牌记忆点适配

   ============================================================ */

@media (max-width: 768px) {

  .brand-avatar {

    width: 48px;

    height: 48px;

    font-size: 22px;

  }



  .brand-cta {

    width: 80%;

    min-height: 48px;

  }



  .brand-404 {

    padding: var(--rhythm-breath) var(--space-4);

  }



  .brand-404 h1 { font-size: var(--text-3xl); }

}