/* ==========================================================================
   Doge 主题 · 第 4 层:动画
   全部只用 CSS 关键帧与 transform。

   这里没有一帧 JS:需要「跟随指针」的那一处,JS 也只负责把偏移量写成两个
   自定义属性,位移与缓动仍然由本文件声明(见 .doge-dog__gaze)。

   六层动画,按「什么时候该动」排序:
     1. 进场 —— 整枚狗头弹进来(约 0.6 秒),五官稍后淡入,只放一次
     2. 常驻 —— 呼吸、眨眼、斜视、耳朵抽动。频率刻意压低,不跟正文抢注意力
     3. 梗词 —— 缓慢上下浮,各自错时
     4. 交互 —— 悬停抖动、按下时一圈 wow 炸开
     5. 遮罩 —— 首屏那一下:狗追着骨头横穿,收场时整块上滑淡出
     6. 跟随 —— 狗头朝指针倾一点,缓动交给 transition,不做逐帧

   第 1 层刻意挂在 .doge-hero--on 之下,而不是无条件播放:那个类由 theme.js
   在首屏遮罩收掉之后才加上。无 JS 时它永远不出现,Hero 就是静止的(可见、
   可读,只是不弹)。这是有意的降级,不是漏写。

   狗头各部件的位置与配色在 components.css,这里只管「怎么动」。
   注意:狗头的描边很浅(金黄 #dda546),而且描边本身不动,所以这里只有一处
   stroke 声明(嘴线),没有描边动画。
   ========================================================================== */

/* --- 关键帧 -------------------------------------------------------------- */

/* 1. 进场:整枚弹一下,带一点过冲,像贴纸被拍到墙上 */
@keyframes doge-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  62%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* 五官稍后淡入,免得一进场就挂好一脸五官 */
@keyframes doge-face-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2. 常驻循环 */
@keyframes doge-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-1.2deg); }
}

@keyframes doge-ear-twitch-left {
  0%, 86%, 100% { transform: rotate(0deg); }
  89%           { transform: rotate(-7deg); }
  93%           { transform: rotate(2deg); }
}

@keyframes doge-ear-twitch-right {
  0%, 84%, 100% { transform: rotate(0deg); }
  87%           { transform: rotate(6deg); }
  91%           { transform: rotate(-3deg); }
}

/* 偶尔来一次「双眨」:一个周期里连眨两下,其余时间睁着。 */
@keyframes doge-blink {
  0%, 82%, 100% { transform: scaleY(1); }
  84%, 86%      { transform: scaleY(0.08); }
  88%           { transform: scaleY(1); }
  90%, 92%      { transform: scaleY(0.08); }
  94%           { transform: scaleY(1); }
}

/* 狗头的招牌:两只眼珠一起往左瞟一下,再回到原位。
   起点是 0(原样),因为参照图里眼珠**本来就钉在胶囊右端** —— 斜眼是静态画出来的,
   动画只是让它偶尔再瞟一下。所以这里是纯位移,不需要 fill-box。 */
@keyframes doge-side-eye {
  0%, 34%, 66%, 100% { transform: translateX(0); }
  44%, 56%           { transform: translateX(-26px); }
}

/* 3. 梗词漂浮 */
@keyframes doge-float {
  0%, 100% { transform: translateY(0) rotate(var(--doge-tilt, -3deg)); }
  50%      { transform: translateY(-12px) rotate(var(--doge-tilt, -3deg)); }
}

@keyframes doge-jiggle {
  0%, 100% { transform: rotate(-4deg) scale(1.04); }
  50%      { transform: rotate(4deg) scale(1.04); }
}

/* 4. 交互:按下去时梗词向外炸开一圈 */
@keyframes doge-burst {
  0%   { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(2.1) translateY(-20px); opacity: 0; }
}

/* 5. 遮罩:狗追着骨头跑出画面,再从左边重来 */
@keyframes doge-loader-run {
  0%   { transform: translateX(-170px); }
  100% { transform: translateX(400px); }
}

/* 5. 遮罩:那行字轻轻一起一伏 */
@keyframes doge-loader-word {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* --- 1. 进场 -------------------------------------------------------------
   进场放在 .doge-hero__stage 上,而不是 .doge-hero__svg 上:
   因为 SVG 自己要用 transform 做悬停抬起,而 fill-mode 为 both 的 animation
   会盖掉普通声明里的 transform。分成两层就没有这个冲突。

   又挂到 .doge-hero--on 之下:那个类由 theme.js 在首屏遮罩收掉之后才加,
   于是「狗头登场」这一下不会被遮罩白白吃掉。无 JS 时类不出现,动画不播,
   整颗头直接静止在位 —— 没有 fill-mode: both,所以也不会停在起始态上。
   -------------------------------------------------------------------------- */

.doge-hero--on .doge-hero__stage {
  animation: doge-pop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.doge-hero--on .doge-dog__face {
  animation: doge-face-in 0.45s ease-out 0.28s both;
}

/* --- 2. 常驻循环 --------------------------------------------------------- */

.doge-dog__body {
  transform-box: view-box;
  transform-origin: 50% 100%;
  animation: doge-breathe 5.4s ease-in-out infinite;
}

.doge-dog__ear {
  /* fill-box 让「耳朵根部」= 自身包围盒的底边中点,旋转才像从根上抽动 */
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.doge-dog__ear--left  { animation: doge-ear-twitch-left  3.6s ease-in-out infinite; }
.doge-dog__ear--right { animation: doge-ear-twitch-right 4.2s ease-in-out infinite; }

.doge-dog__eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: doge-blink 6s ease-in-out infinite;
}

/* 两只眼错开一点点,否则像机械同步。两边都显式声明,不留「一边靠默认值」的
   隐式写法——那样左眼的修饰类就是死类名,类名写错也就没人发现。 */
.doge-dog__eye--left  { animation-delay: 0s; }
.doge-dog__eye--right { animation-delay: 0.07s; }

/* 眼珠自己再挂一层位移(斜视)。它嵌在 .doge-dog__eye 里,两层的 transform
   会叠起来:眨眼照旧从上往下压,斜视照旧左右跑,互不抢属性。
   笔直地在两个 <g> 上各挂一半动画,比把两个关键帧合成一个要清楚得多。 */
.doge-dog__pupil {
  animation: doge-side-eye 7s ease-in-out infinite;
}

/* 嘴是纯描边的,显式关掉填充 —— SVG 的 fill 默认是**黑色**,
   忘了写的后果是那条线变成一团黑块,而不是「没有填充」。 */
.doge-dog__mouth {
  fill: none;
  stroke: var(--fur-block);   /* 与鼻子同色。定义在根节点的 .doge-dog 上,自定义属性会继承 */
  stroke-width: 11;
  stroke-linecap: round;
}

/* --- 3. 梗词漂浮 --------------------------------------------------------- */

.doge-hero__meme {
  animation: doge-float 4.5s ease-in-out infinite;
  animation-delay: var(--doge-delay, 0s);
}

/* --- 4. 交互 ------------------------------------------------------------- */

/* 悬停:整枚狗头抬起来一点并歪头。缓动带一点回弹,像真的被戳了一下。 */
.doge-hero__stage:hover .doge-hero__svg {
  transform: translateY(-6px) rotate(-2deg) scale(1.03);
}

/* 悬停某条梗词:抖起来 */
.doge-hero__meme:hover {
  animation: doge-jiggle 0.4s ease-in-out infinite;
}

/* 按下:一圈梗词向外炸开 */
.doge-hero__stage:active .doge-hero__meme {
  animation: doge-burst 0.5s ease-out;
}

/* --- 5. 首屏遮罩 ---------------------------------------------------------
   盒子、配色与「显示 / 淡出」两个状态都在 components.css(默认 display: none,
   只有 <html> 带 doge-intro-on 才显示)。这里只管「怎么动」。
   -------------------------------------------------------------------------- */

.doge-loader__pair {
  animation: doge-loader-run 2.4s linear infinite;
}

.doge-loader__word {
  animation: doge-loader-word 1.2s ease-in-out infinite;
}

/* --- 6. 跟随指针 ---------------------------------------------------------
   theme.js 把指针的偏移量写成两个自定义属性,这里只负责把它翻译成位移,缓动
   交给 CSS 自己跑 —— JS 一帧都不算。

   var() 里的 0px 就是**无 JS 时的中性默认值**:禁用 JS(或被减弱动效拦下)时
   这两个属性根本不存在,这一层等于不存在,狗头端端正正,不会歪着。
   -------------------------------------------------------------------------- */

.doge-dog__gaze {
  transform: translate(var(--doge-gaze-x, 0px), var(--doge-gaze-y, 0px));
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- 减弱动效偏好 --------------------------------------------------------
   base.css 里已有一条全局的 !important 降级,这里再显式写一遍,
   把每一个动过的元素都固定到「已经到位」的终态。
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .doge-hero__stage,
  .doge-hero__svg,
  .doge-dog__body,
  .doge-dog__face,
  .doge-dog__ear,
  .doge-dog__eye,
  .doge-dog__pupil,
  .doge-dog__gaze,
  .doge-hero__meme,
  .doge-loader,
  .doge-loader__pair,
  .doge-loader__word {
    animation: none !important;
    transition: none !important;
  }

  /* 关掉动画后必须显式保证不会停留在「还没进来」的起始态上 */
  .doge-dog__face {
    opacity: 1 !important;
  }

  .doge-hero__stage:hover .doge-hero__svg {
    transform: none;
  }
}