/* ============================================================

   animations.css · Our Smart Baby

   动效系统

   加载顺序：4/34

   ============================================================ */



/* 1. 页面加载淡入 */

@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



/* 2. 滚动触发 */

.scroll-reveal {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity var(--duration-slower) var(--ease-out),

              transform var(--duration-slower) var(--ease-out);

}



.scroll-reveal.revealed {

  opacity: 1;

  transform: translateY(0);

}



/* 3. 悬停动效 */

.hover-lift {

  transition: transform var(--duration-normal) var(--ease-out),

              box-shadow var(--duration-normal) var(--ease-out);

}



.hover-lift:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}



/* 4. 骨架屏闪动 */

@keyframes skeleton-shimmer {

  0% { background-position: 200% 0; }

  100% { background-position: -200% 0; }

}



.skeleton {

  background: linear-gradient(

    90deg,

    var(--skeleton-bg) 0%,

    var(--skeleton-shimmer) 50%,

    var(--skeleton-bg) 100%

  );

  background-size: 200% 100%;

  animation: skeleton-shimmer var(--loading-shimmer) ease-in-out infinite;

  border-radius: var(--radius-sm);

}



/* 5. 光点闪烁（封面图） */

@keyframes light-pulse {

  0%, 100% { opacity: 0.3; }

  50% { opacity: 1; }

}



.light-dot {

  animation: light-pulse 3s ease-in-out infinite;

}



.light-dot:nth-child(2n) { animation-duration: 2.5s; animation-delay: 0.5s; }

.light-dot:nth-child(3n) { animation-duration: 3.5s; animation-delay: 1s; }

.light-dot:nth-child(5n) { animation-duration: 2.8s; animation-delay: 0.3s; }



/* 6. 加载旋转 */

@keyframes spin {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}



.spinner {

  animation: spin 1s linear infinite;

  display: inline-block;

  width: 20px;

  height: 20px;

  border: 2px solid var(--color-border);

  border-top-color: var(--color-primary-500);

  border-radius: 50%;

}



/* 7. 脉冲提示 */

@keyframes pulse {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.05); }

}



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



/* 8. 减少动效偏好 */

@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }



  .light-dot {

    animation: none;

    opacity: 0.6;

  }

}



/* 9. 移动端动效简化 */

@media (max-width: 768px) {

  .scroll-reveal {

    opacity: 1;

    transform: none;

  }



  .light-dot { animation-duration: 2.5s; }

}