/* ===== 乐宠宠物用品 - 动效样式 ===== */

/* 入场动画 */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-left {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes pulse-soft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 动画延迟工具类 */
.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }
.delay-6 { animation-delay: 600ms; }

/* 滚动触发动画 */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
}

[data-animate].animated {
  animation: slide-up 330ms var(--ease-out) forwards;
}

[data-animate="slide-left"] {
  transform: translateX(24px);
}

[data-animate="slide-left"].animated {
  animation: slide-left 330ms var(--ease-out) forwards;
}

[data-animate="scale-in"] {
  transform: scale(0.92);
}

[data-animate="scale-in"].animated {
  animation: scale-in 280ms var(--ease-out) forwards;
}

/* 鼠标悬浮微动效 */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.hover-float {
  animation: float-gentle 3s ease-in-out infinite;
}

.hover-pulse {
  animation: pulse-soft 2s ease-in-out infinite;
}

/* 图片淡入 */
.img-fade {
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}

.img-fade.loaded {
  opacity: 1;
}

/* 导航栏滚动动效 */
.navbar-scroll {
  transition: box-shadow var(--duration-normal) var(--ease-out),
              background-color var(--duration-normal) var(--ease-out);
}

/* 客服栏展开动效 */
.float-expand {
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.float-expand.expanded {
  transform: scale(1.05);
  opacity: 1;
}