/* ============================================================
   九峰牧场 · 品牌层（brand.css）
   依赖 tokens.css（必须先引入 tokens.css 再引入本文件）。
   提供：① 品牌字体 @font-face ② 一组可直接复用的品牌构件 class（jf- 前缀）。
   工具按需取用；不想用的 class 不会有副作用。
   字体/头像路径默认 /jiufeng/...，由 apply 脚本拷贝到各工具 public/jiufeng/ 下。
   ============================================================ */

/* —— 品牌字体：阿里妈妈方圆体 VF（可变字重 100–900，阿里官方免费商用） —— */
@font-face{
  font-family:"Alimama FangYuanTi VF";
  src:url("/jiufeng/fonts/AlimamaFangYuanTiVF-Thin.woff2") format("woff2-variations"),
      url("/jiufeng/fonts/AlimamaFangYuanTiVF-Thin.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap;
}

/* —— 品牌字体 helper：给标题/按钮/徽章/大数字戴上方圆体 —— */
.jf-brandfont{font-family:var(--jf-font-brand)}

/* —— 大胆版页头（B 版定稿） —— */
.jf-header{background:var(--jf-blue);color:#fff;position:relative;overflow:hidden}
.jf-header .jf-header-inner{max-width:1080px;margin:0 auto;padding:34px 24px 28px;position:relative}
.jf-header .jf-hand{font-family:var(--jf-font-hand);font-size:14px;opacity:.92;margin-bottom:8px}
.jf-header h1{font-family:var(--jf-font-brand);font-size:34px;font-weight:800;letter-spacing:1.5px;line-height:1.18}
.jf-header .jf-en{font-size:13px;font-weight:800;letter-spacing:.2em;margin-top:6px;opacity:.95}
.jf-header .jf-green-strip{background:var(--jf-footer-green);color:#fff;font-size:13px;font-weight:600;padding:7px 0}
.jf-header .jf-green-strip-inner{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* —— 页脚绿条 —— */
.jf-footer{background:var(--jf-footer-green);color:#fff;padding:16px 24px}
.jf-footer .jf-footer-inner{max-width:1080px;margin:0 auto;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.jf-footer .jf-footer-big{font-family:var(--jf-font-brand);font-size:19px;font-weight:800;letter-spacing:2px}
.jf-footer .jf-footer-small{font-size:12.5px;opacity:.95}

/* —— 今日金句条 —— */
.jf-saohua{background:var(--jf-tag-cream-bg);border-bottom:1px solid #F0E3B8;font-size:13.5px;color:var(--jf-yellow-deep);padding:9px 24px}
.jf-saohua b{color:var(--jf-ink);font-weight:700;font-family:var(--jf-font-brand)}

/* —— 老夏头像（黄描边贴纸） —— */
.jf-avatar{border-radius:50%;object-fit:cover;background:#fff}
.jf-avatar-ring{box-shadow:0 0 0 2.5px var(--jf-yellow)}

/* —— 黄贴纸徽章（自带歪头，一页最多一枚） —— */
.jf-badge-sticker{display:inline-block;font-family:var(--jf-font-brand);background:var(--jf-yellow);color:var(--jf-ink);font-size:13px;font-weight:800;padding:5px 14px;border-radius:var(--jf-r-sm);transform:rotate(-2deg);box-shadow:0 0 0 2.5px #fff,0 3px 8px rgba(33,50,63,.18);letter-spacing:.5px}

/* —— 老夏说话气泡 —— */
.jf-bubble-tip{position:relative;display:inline-block;font-family:var(--jf-font-brand);background:#fff;border-radius:18px;padding:8px 15px;font-size:14px;font-weight:700;color:var(--jf-blue-deep);box-shadow:0 2px 10px rgba(33,50,63,.16)}
.jf-bubble-tip::after{content:"";position:absolute;left:24px;bottom:-7px;width:13px;height:13px;background:#fff;transform:rotate(45deg);border-radius:2px;box-shadow:4px 4px 8px rgba(33,50,63,.06)}
.jf-bubble-tip.green{color:var(--jf-green-text)}

/* —— 粉彩分类标签 —— */
.jf-tag{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 12px;border-radius:var(--jf-r-pill)}
.jf-tag.blue{background:var(--jf-tag-blue-bg);color:var(--jf-tag-blue-tx)}
.jf-tag.pink{background:var(--jf-tag-pink-bg);color:var(--jf-tag-pink-tx)}
.jf-tag.taro{background:var(--jf-tag-taro-bg);color:var(--jf-tag-taro-tx)}
.jf-tag.matcha{background:var(--jf-tag-matcha-bg);color:var(--jf-tag-matcha-tx)}
.jf-tag.cream{background:var(--jf-tag-cream-bg);color:var(--jf-tag-cream-tx)}

/* —— 挤奶进度条 —— */
.jf-milk-track{height:18px;background:#EAF3FB;border-radius:var(--jf-r-pill);overflow:hidden;border:1px solid var(--jf-line)}
.jf-milk-fill{height:100%;border-radius:var(--jf-r-pill);background:repeating-linear-gradient(45deg,var(--jf-blue) 0 14px,#6CBEFF 14px 28px);background-size:40px 40px;animation:jf-flow 1.1s linear infinite}
@keyframes jf-flow{to{background-position:40px 0}}

/* —— 三滴奶加载 —— */
.jf-drops{display:inline-flex;gap:8px;align-items:center}
.jf-drops i{width:11px;height:11px;border-radius:50% 50% 52% 48%/40% 42% 60% 58%;background:var(--jf-blue);animation:jf-hop .9s ease-in-out infinite}
.jf-drops i:nth-child(2){animation-delay:.15s}
.jf-drops i:nth-child(3){animation-delay:.3s}
@keyframes jf-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px)}}