/* ============================================
   动画效果 - 热工WP
   ============================================ */

/* --- 页面切换 --- */
.page-enter {
  animation: pageEnter 0.35s ease forwards;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.page-leave {
  animation: pageLeave 0.3s ease forwards;
}

@keyframes pageLeave {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* --- 按钮点击 --- */
.btn-click {
  animation: btnClick 0.2s ease;
}

@keyframes btnClick {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* --- 弹窗 --- */
.modal-enter {
  animation: modalEnter 0.3s ease forwards;
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-leave {
  animation: modalLeave 0.25s ease forwards;
}

@keyframes modalLeave {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* --- 列表项 --- */
.item-enter {
  animation: itemEnter 0.3s ease forwards;
}

@keyframes itemEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.item-leave {
  animation: itemLeave 0.25s ease forwards;
}

@keyframes itemLeave {
  from {
    opacity: 1;
    transform: scaleY(1);
    max-height: 100px;
  }
  to {
    opacity: 0;
    transform: scaleY(0);
    max-height: 0;
    padding: 0;
    margin: 0;
  }
}

/* --- 通知 --- */
.notification-enter {
  animation: notificationEnter 0.4s ease forwards;
}

@keyframes notificationEnter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.notification-leave {
  animation: notificationLeave 0.3s ease forwards;
}

@keyframes notificationLeave {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%);
  }
}

/* --- 加载动画 --- */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #EEEEEE;
  border-top-color: #165DFF;
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}

@keyframes spinnerRotate {
  to {
    transform: rotate(360deg);
  }
}

.skeleton {
  background: linear-gradient(90deg, #F2F3F5 25%, #E5E6EB 50%, #F2F3F5 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* --- 点赞动画 --- */
.like-animation {
  animation: likeAnimation 0.5s ease;
}

@keyframes likeAnimation {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.4);
  }
  50% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* --- 收藏动画 --- */
.collect-animation {
  animation: collectAnimation 0.5s ease;
}

@keyframes collectAnimation {
  0% {
    transform: scale(1) rotate(0deg);
  }
  30% {
    transform: scale(1.3) rotate(15deg);
  }
  60% {
    transform: scale(0.9) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* --- 签到动画 --- */
.checkin-animation {
  animation: checkinAnimation 0.5s ease;
}

@keyframes checkinAnimation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- 已解决戳章 --- */
.resolved-stamp {
  animation: resolvedStamp 0.4s ease forwards;
}

@keyframes resolvedStamp {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- 悬停效果 --- */
.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-shadow {
  transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* --- 过渡基础类 --- */
.transition-all {
  transition: all 0.3s ease;
}

.transition-fast {
  transition: all 0.15s ease;
}