/* ============================================
   animations.css
   果赖蛋糕坊 - 关键帧动画库
   GPU加速 · 弹性曲线 · 可爱风格
   ============================================ */

/* ---------- float 浮动 ---------- */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float {
  animation: float 2.5s var(--ease-smooth) infinite;
}

/* ---------- sparkle 闪烁 ---------- */
@keyframes sparkle {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.animate-sparkle {
  animation: sparkle 1.5s var(--ease-smooth) infinite;
}

/* ---------- slideUp 上滑入场 ---------- */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideUp {
  animation: slideUp var(--t-slow) var(--ease-out) both;
}

/* ---------- slideInRight 从右滑入 ---------- */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slideInRight {
  animation: slideInRight var(--t-slow) var(--ease-out) both;
}

/* ---------- slideInLeft 从左滑入 ---------- */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slideInLeft {
  animation: slideInLeft var(--t-slow) var(--ease-out) both;
}

/* ---------- popIn 弹出 ---------- */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-popIn {
  animation: popIn var(--t-bounce) var(--ease-bounce) both;
}

/* ---------- bounceIn 弹跳入场 ---------- */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.animate-bounceIn {
  animation: bounceIn 0.6s var(--ease-bounce) both;
}

/* ---------- fadeIn 淡入 ---------- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fadeIn {
  animation: fadeIn var(--t) var(--ease-out) both;
}

/* ---------- fadeOut 淡出 ---------- */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.animate-fadeOut {
  animation: fadeOut var(--t) var(--ease-out) both;
}

/* ---------- candleFlicker 蜡烛闪烁 ---------- */
@keyframes candleFlicker {
  0%,
  100% {
    transform: scale(1) rotate(-1deg);
    opacity: 1;
    filter: brightness(1);
  }
  25% {
    transform: scale(1.05) rotate(1deg);
    opacity: 0.92;
    filter: brightness(1.1);
  }
  50% {
    transform: scale(0.95) rotate(-1deg);
    opacity: 1;
    filter: brightness(0.95);
  }
  75% {
    transform: scale(1.03) rotate(1deg);
    opacity: 0.95;
    filter: brightness(1.05);
  }
}

.animate-candleFlicker {
  animation: candleFlicker 0.4s var(--ease-smooth) infinite;
  transform-origin: bottom center;
}

/* ---------- shake 摇晃（搅拌用） ---------- */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  10% {
    transform: translateX(-3px) rotate(-2deg);
  }
  20% {
    transform: translateX(3px) rotate(2deg);
  }
  30% {
    transform: translateX(-3px) rotate(-2deg);
  }
  40% {
    transform: translateX(3px) rotate(2deg);
  }
  50% {
    transform: translateX(-2px) rotate(-1deg);
  }
  60% {
    transform: translateX(2px) rotate(1deg);
  }
  70% {
    transform: translateX(-2px) rotate(-1deg);
  }
  80% {
    transform: translateX(2px) rotate(1deg);
  }
  90% {
    transform: translateX(-1px) rotate(0deg);
  }
}

.animate-shake {
  animation: shake 0.6s var(--ease-smooth) infinite;
  transform-origin: center;
}

/* ---------- shakeFast 快速摇晃 ---------- */
@keyframes shakeFast {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-2px, 1px) rotate(-3deg);
  }
  50% {
    transform: translate(2px, -1px) rotate(3deg);
  }
  75% {
    transform: translate(-1px, 2px) rotate(-2deg);
  }
}

.animate-shakeFast {
  animation: shakeFast 0.3s linear infinite;
}

/* ---------- pulse 脉冲 ---------- */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.85;
  }
}

.animate-pulse {
  animation: pulse 1.2s var(--ease-smooth) infinite;
}

/* ---------- pulseRing 脉冲环 ---------- */
@keyframes pulseRing {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-pulseRing {
  animation: pulseRing 1.5s var(--ease-out) infinite;
}

/* ---------- confetti 五彩纸屑 ---------- */
@keyframes confetti {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg) scale(0.5);
  }
}

.confetti-piece {
  position: fixed;
  top: -10px;
  width: 10px;
  height: 10px;
  z-index: var(--z-toast);
  pointer-events: none;
  animation: confetti 2.5s var(--ease-in) forwards;
}

/* ---------- scaleIn 缩放入场 ---------- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scaleIn {
  animation: scaleIn var(--t) var(--ease-bounce) both;
}

/* ---------- progressGrow 进度条增长 ---------- */
@keyframes progressGrow {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.animate-progressGrow {
  animation: progressGrow 2s var(--ease-smooth) forwards;
}

/* ---------- spin 旋转 ---------- */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ---------- spinSlow 慢速旋转 ---------- */
@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spinSlow {
  animation: spinSlow 3s linear infinite;
}

/* ---------- wiggle 扭动 ---------- */
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(8deg);
  }
}

.animate-wiggle {
  animation: wiggle 0.5s var(--ease-smooth) infinite;
}

/* ---------- heartBeat 心跳 ---------- */
@keyframes heartBeat {
  0%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.2);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.15);
  }
  60% {
    transform: scale(1);
  }
}

.animate-heartBeat {
  animation: heartBeat 1.3s var(--ease-smooth) infinite;
}

/* ---------- drop 下落 ---------- */
@keyframes drop {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(5px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-drop {
  animation: drop 0.6s var(--ease-bounce) both;
}

/* ---------- ripple 涟漪 ---------- */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.animate-ripple {
  animation: ripple 0.6s var(--ease-out) forwards;
}

/* ---------- glow 发光 ---------- */
@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(255, 182, 193, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 182, 193, 0.8),
      0 0 32px rgba(255, 182, 193, 0.4);
  }
}

.animate-glow {
  animation: glow 2s var(--ease-smooth) infinite;
}

/* ---------- steam 蒸汽上升 ---------- */
@keyframes steam {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  20% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(1.5);
  }
}

.animate-steam {
  animation: steam 2s var(--ease-out) infinite;
}

/* ---------- tada 惊喜 ---------- */
@keyframes tada {
  0% {
    transform: scale(1);
  }
  10%,
  20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.animate-tada {
  animation: tada 1s var(--ease-bounce);
}

/* ---------- rainbow 彩虹色循环 ---------- */
@keyframes rainbow {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.animate-rainbow {
  animation: rainbow 3s linear infinite;
}

/* ---------- fillUp 装满 ---------- */
@keyframes fillUp {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.animate-fillUp {
  animation: fillUp 1s var(--ease-out) forwards;
  transform-origin: bottom;
}

/* ---------- bubble 气泡 ---------- */
@keyframes bubble {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(1.2);
  }
}

.animate-bubble {
  animation: bubble 2s var(--ease-out) infinite;
}

/* ---------- candyFall 糖果下落 ---------- */
@keyframes candyFall {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(var(--fall-distance, 100px)) rotate(360deg);
  }
}

.animate-candyFall {
  animation: candyFall 0.8s var(--ease-in) forwards;
}

/* ---------- typing 打字 ---------- */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* ---------- blink 闪烁光标 ---------- */
@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* ---------- zoomOut 缩小消失 ---------- */
@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

.animate-zoomOut {
  animation: zoomOut var(--t) var(--ease-in) both;
}

/* ---------- swing 摇摆 ---------- */
@keyframes swing {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
}

.animate-swing {
  animation: swing 1s var(--ease-bounce);
  transform-origin: top center;
}

/* ---------- 工具类：动画延迟 ---------- */
.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.2s;
}
.delay-3 {
  animation-delay: 0.3s;
}
.delay-4 {
  animation-delay: 0.4s;
}
.delay-5 {
  animation-delay: 0.5s;
}

/* ---------- GPU 加速优化 ---------- */
.animate-float,
.animate-sparkle,
.animate-pulse,
.animate-spin,
.animate-spinSlow,
.animate-shake,
.animate-shakeFast,
.animate-candleFlicker,
.animate-glow,
.animate-wiggle,
.animate-heartBeat,
.animate-steam,
.animate-bubble,
.confetti-piece {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ---------- 暂停动画 ---------- */
.paused {
  animation-play-state: paused !important;
}

/* ---------- 入场动画组合 ---------- */
.stagger > *:nth-child(1) {
  animation-delay: 0.05s;
}
.stagger > *:nth-child(2) {
  animation-delay: 0.1s;
}
.stagger > *:nth-child(3) {
  animation-delay: 0.15s;
}
.stagger > *:nth-child(4) {
  animation-delay: 0.2s;
}
.stagger > *:nth-child(5) {
  animation-delay: 0.25s;
}
.stagger > *:nth-child(6) {
  animation-delay: 0.3s;
}
.stagger > *:nth-child(7) {
  animation-delay: 0.35s;
}
.stagger > *:nth-child(8) {
  animation-delay: 0.4s;
}