/* ============================================================
   动画与过渡 (Animations & Transitions)
   ============================================================ */

/* ── 淡入上移 ── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 淡入缩放 ── */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

/* ── 脉冲呼吸 ── */
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── 微光闪烁 ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── 入场动画应用 ── */
.hero-card {
  animation: fadeInUp 0.6s var(--ease-spring) both;
}

.editor-panel {
  animation: fadeInUp 0.6s var(--ease-spring) 0.1s both;
}

.preview-panel {
  animation: fadeInUp 0.6s var(--ease-spring) 0.2s both;
}

.editor-section {
  animation: fadeInScale 0.4s var(--ease-spring) both;
}

/* ── 骨架屏加载 ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 25%,
    var(--color-gray-200) 50%,
    var(--color-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius-xs);
}

/* ── 暗色模式过渡 ── */
body,
.hero-card,
.editor-panel,
.preview-panel,
.editor-section,
.micro-item {
  transition: 
    background var(--duration-normal) var(--ease-default),
    color var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}

/* ── 减弱动画偏好 ── */
@media (prefers-reduced-motion: reduce) {
  .hero-card,
  .editor-panel,
  .preview-panel,
  .editor-section {
    animation: none !important;
  }
}