/* ============================================================
   分层微动效 — 每段注释标注对应 PSD 图层名称
   ============================================================ */

/* 【第1页 · PSD: 图层 3 卡通小厨师】轻微上下悬浮 */
.anim-chef-float {
  animation: chef-float 3.2s ease-in-out infinite;
}

@keyframes chef-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* 【第1页 · PSD: 图层 4 糖珠装饰】缓慢下落 */
.anim-sugar-fall {
  animation: sugar-fall 5.5s linear infinite;
}

@keyframes sugar-fall {
  0% {
    transform: translateY(-8px);
    opacity: 0.85;
  }
  100% {
    transform: translateY(18px);
    opacity: 1;
  }
}

/* 【第1页 · PSD: 图层 2 / 副标题】标题淡入弹出 */
.anim-title-pop {
  animation: title-pop 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.anim-title-pop-delay {
  animation: title-pop 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
}

@keyframes title-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  70% {
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 【第1页 · PSD: 图层 5/6/7 云朵】轻柔漂移 */
.anim-cloud-drift {
  animation: cloud-drift 7s ease-in-out infinite;
}

.anim-cloud-drift-slow {
  animation: cloud-drift 9s ease-in-out infinite reverse;
}

.anim-cloud-drift-reverse {
  animation: cloud-drift 8s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes cloud-drift {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(6px) translateY(-4px);
  }
}

/* 【第2页 · 窗边光影补充层】缓慢明暗闪烁 */
.anim-window-light {
  animation: window-light 4s ease-in-out infinite;
}

@keyframes window-light {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.75;
  }
}

/* 【第2页 · PSD: 图层 3/4/6/7 食材】依次弹性渐入 */
.anim-ingredient-in {
  animation: ingredient-in 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes ingredient-in {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-8deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* 【第3页 · PSD: 图层 1 面糊区域】缓慢流动感 */
.anim-batter-flow {
  animation: batter-flow 4s ease-in-out infinite;
}

@keyframes batter-flow {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.008) translateY(-3px);
  }
}

/* 【第3页 · PSD: 图层 3 打蛋器】循环小幅旋转 */
.anim-whisk-rotate {
  animation: whisk-rotate 1.6s ease-in-out infinite;
  transform-origin: 70% 25%;
}

@keyframes whisk-rotate {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(14deg);
  }
}

/* 【第3页 · PSD: 图层 2 刮刀/裱花袋】轻微摆动 */
.anim-spatula-sway {
  animation: spatula-sway 2.2s ease-in-out infinite;
  transform-origin: 30% 80%;
}

@keyframes spatula-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}

/* 【第4页 · PSD: 背景（含蛋糕+小厨师）】蛋糕放大 + 厨师轻晃 */
.anim-page4-scene {
  animation: page4-scene 5s ease-in-out infinite;
}

@keyframes page4-scene {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  35% {
    transform: scale(1.035) rotate(0.4deg);
  }
  65% {
    transform: scale(1.02) rotate(-0.35deg);
  }
}

/* 【第4页 · 爱心装饰补充层】轻柔跳动 */
.anim-heart-beat {
  animation: heart-beat 1.4s ease-in-out infinite;
}

@keyframes heart-beat {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.18);
  }
  60% {
    transform: scale(0.95);
  }
}