/* 芽起一名 · LOGO 动效
 *
 * ── 登场：三段式生长 ─────────────────────────────
 *   ① 芽瓣   从底部往上长出来（芽破土）
 *   ② 短竖线 顺着芽尖向上浮现
 *   ③ 四角星芒 绽放
 *   三段首尾交叠，是一口气的连续动作，不是三个独立动画。
 *
 * ── 循环：各管一件事，互不打架 ────────────────────
 *   .logo__sprout   → 呼吸（整体，锚点在底部）
 *   .logo__star-float → 浮动
 *     .logo__star-spin → 自转
 *
 * ⚠️ 坐标陷阱（改这个文件前务必先读）
 *   LOGO 的外层 transform 是 scale(.067741, -.067741)，**y 轴被翻转**。
 *   所以在元素的局部坐标系里：
 *     · 「屏幕下方」= 局部 y 较小的一端 → transform-origin 用 <b>0%</b>
 *     · 「屏幕上方」= 局部 y 较大的一端 → transform-origin 用 100%
 *     · translateY(负值) 会让元素往屏幕【下】走，translateY(正值) 往【上】走
 *   这两条是用 Chrome 截图实测出来的（见 2026-09-24 工作笔记），不是推导。
 *   另：百分比 transform-origin 作用在 SVG 上必须配 transform-box: fill-box。
 *
 * 时序可通过 --yq-t-* 调整；整体延时可改 --logo-intro-delay。
 */

.logo {
  --logo-intro-delay: .2s;   /* 登场整体延后，让底部光晕先亮起来 */

  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--logo-size, 28px);
  height: var(--logo-size, 28px);
  vertical-align: middle;
}

.logo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.logo__sprout,
.logo__leaf,
.logo__stem,
.logo__star,
.logo__star-float,
.logo__star-spin {
  transform-box: fill-box;
}

/* 呼吸：以芽的根部为锚点，整体轻微起伏 */
.logo__sprout {
  transform-origin: 50% 0%;
  animation: yq-sprout-breathe 3.4s ease-in-out infinite;
  animation-delay: var(--logo-delay, 0s);
}

.logo__leaf { fill: var(--logo-leaf, #8fbd3b); }
.logo__stem { fill: var(--logo-leaf, #8fbd3b); }

.logo__star-float {
  fill: var(--logo-star, #f7c34a);
  transform-origin: center;
  animation: yq-star-float 3.4s ease-in-out infinite;
  animation-delay: var(--logo-delay, 0s);
}

.logo__star-spin {
  transform-origin: center;
  animation: yq-star-spin 7s linear infinite;
  animation-delay: var(--logo-delay, 0s);
}

/* ── 登场时间轴 ─────────────────────────────────────
 *  ① 芽瓣   0.00 → 0.85s
 *  ② 短竖线 0.52 → 1.12s   （与①交叠 0.33s，接得上前一段的余势）
 *  ③ 星芒   0.98 → 1.80s   （与②交叠 0.14s）
 *  ④ 顶一下 1.42 → 2.10s   （星芒落位，芽被压一下再回弹）
 */
.logo--intro {
  --yq-t-leaf:  0s;
  --yq-t-stem:  .52s;
  --yq-t-star:  .98s;
  --yq-t-nudge: 1.42s;
  --yq-ease-grow: cubic-bezier(.24, .7, .26, 1);
}

.logo--intro .logo__leaf {
  transform-origin: 50% 0%;          /* 锚在根部 → 往上长 */
  animation: yq-leaf-grow .85s var(--yq-ease-grow) both;
  animation-delay: calc(var(--logo-intro-delay) + var(--yq-t-leaf));
}

.logo--intro .logo__stem {
  transform-origin: 50% 0%;
  animation: yq-stem-rise .6s var(--yq-ease-grow) both;
  animation-delay: calc(var(--logo-intro-delay) + var(--yq-t-stem));
}

.logo--intro .logo__star {
  transform-origin: center;
  animation: yq-star-bloom .82s cubic-bezier(.3, .72, .34, 1) both;
  animation-delay: calc(var(--logo-intro-delay) + var(--yq-t-star));
}

/* 星芒落位时，芽整体被顶一下 —— 让两段动作有因果感 */
.logo--intro .logo__sprout {
  animation-name: yq-sprout-breathe, yq-sprout-nudge;
  animation-duration: 3.4s, .68s;
  animation-timing-function: ease-in-out, cubic-bezier(.3, .7, .3, 1);
  animation-iteration-count: infinite, 1;
  animation-delay: var(--logo-delay, 0s), calc(var(--logo-intro-delay) + var(--yq-t-nudge));
}

/* ── 关键帧 ─────────────────────────────────────── */

/* 芽瓣：从根部扁平成一条线，向上抽出，末尾轻微过冲 */
@keyframes yq-leaf-grow {
  0%   { transform: scaleY(.025); opacity: 0; }
  20%  { opacity: 1; }
  68%  { transform: scaleY(1.028); }
  100% { transform: scaleY(1); opacity: 1; }
}

/* 短竖线：从芽尖处升起并舒展开 */
@keyframes yq-stem-rise {
  0%   { transform: translateY(-46%) scaleY(.28); opacity: 0; }
  38%  { opacity: 1; }
  100% { transform: translateY(0) scaleY(1); opacity: 1; }
}

/* 星芒：由一点撑开，回弹落位 */
@keyframes yq-star-bloom {
  0%   { transform: scale(.12) rotate(-52deg); opacity: 0; }
  45%  { opacity: 1; }
  74%  { transform: scale(1.13) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes yq-sprout-breathe {
  0%, 100% { transform: scale(1, .992); }
  50%      { transform: scale(1.012, 1.008); }
}

/* 被顶一下：轻微压扁再回弹 */
@keyframes yq-sprout-nudge {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.022, .978); }
  65%  { transform: scale(.996, 1.012); }
  100% { transform: scale(1, 1); }
}

@keyframes yq-star-float {
  0%, 100% { transform: translateY(-4%) scale(.93); opacity: .9; }
  50%      { transform: translateY(5%) scale(1.17); opacity: 1; }
}

@keyframes yq-star-spin {
  to { transform: rotate(360deg); }
}

/* 纯星芒版本（导航、页脚）用脉冲代替浮动，小尺寸下更干净 */
.logo--star .logo__star-float {
  animation-name: yq-star-pulse;
  animation-duration: 2.8s;
}

.logo--star .logo__star-spin {
  animation-duration: 5s;
}

@keyframes yq-star-pulse {
  0%, 100% { transform: scale(.84); opacity: .85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* ── 尊重系统「减弱动态效果」设置 ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .logo__sprout,
  .logo__leaf,
  .logo__stem,
  .logo__star,
  .logo__star-float,
  .logo__star-spin {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}