/**
 * Babymoon Animations — Keyframe Animations CSS
 * Version: 1.3 | 2026-04-18
 * Author: 龙虾宝宝 🦜 | PP Claw
 * 
 * Design System: 温暖极简编辑风 (Warm Editorial Minimalism)
 * Inspiration: Kinfolk + Apple Design + Japanese Elder-Friendly
 */

/* =========================================
   1. 樱花绽放动画 (Sakura Bloom)
   ========================================= */

/**
 * 樱花绽放动画
 * 应用：Checklist 勾选、任务完成反馈
 * 
 * 动画逻辑：
 * - 0%: 正常大小，完整不透明
 * - 50%: 放大到 1.5 倍，旋转 180 度，稍微透明
 * - 100%: 缩放到 0，完成 360 度旋转，完全透明
 * 
 * 用于勾选 Checklist 时的视觉反馈
 */
@keyframes sakura-bloom {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/**
 * 樱花绽放动画使用类
 */
.sakura-bloom {
  animation: sakura-bloom 0.6s ease-out forwards;
  display: inline-block;
}

/* =========================================
   2. 爱心上浮动画 (Love Float)
   ========================================= */

/**
 * 爱心上浮动画
 * 应用：日记保存成功、温馨反馈
 * 
 * 动画逻辑：
 * - 0%: 正常位置，完全不透明
 * - 100%: 向上移动 20px，放大 1.2 倍，完全透明
 * 
 * 用于日记保存成功时的温馨反馈
 */
@keyframes love-float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) scale(1.2);
    opacity: 0;
  }
}

/**
 * 爱心上浮动画使用类
 */
.love-float {
  animation: love-float 0.8s ease-out forwards;
  display: inline-block;
}

/* =========================================
   3. 时间轴翻页动画 (Page Flip)
   ========================================= */

/**
 * 时间轴翻页动画
 * 应用：日记时间轴翻页、历史记录切换
 * 
 * 动画逻辑：
 * - 0%: 正常位置，无旋转
 * - 50%: 向右移动 50px，Y 轴旋转 -15 度
 * - 100%: 回到原始位置和角度
 * 
 * 模拟物理翻页效果
 */
@keyframes page-flip {
  0% {
    transform: translateX(0) rotateY(0);
  }
  50% {
    transform: translateX(50px) rotateY(-15deg);
  }
  100% {
    transform: translateX(0) rotateY(0);
  }
}

/**
 * 时间轴翻页动画使用类
 */
.page-flip {
  animation: page-flip 0.5s ease-out forwards;
}

/* =========================================
   4. 樱花飘落动画 (Sakura Rain) 🌸
   ========================================= */

/**
 * 樱花飘落动画
 * 应用：登录成功、页面进入（杀手级建议）
 * 
 * 动画逻辑：
 * - 0%: 从屏幕顶部 (-100vh) 开始，不旋转，完全不透明
 * - 100%: 飘落到屏幕底部 (100vh)，旋转 360 度，完全透明
 * 
 * 这是 Babymoon 的杀手级特性：登录成功时的樱花雨效果
 */
@keyframes sakura-rain {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/**
 * 樱花粒子基础样式
 * 用于生成樱花雨效果
 */
.sakura-particle {
  position: absolute;
  top: -20px; /* 从屏幕顶部上方开始 */
  width: 12px;
  height: 12px;
  background: var(--accent-sakura); /* #E8A5A5 樱花粉 */
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
  animation: sakura-rain linear forwards;
  pointer-events: none; /* 确保不阻挡用户交互 */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/**
 * 樱花粒子容器
 */
.sakura-rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

/* =========================================
   5. 迷你樱花爆发动画 (Mini Sakura Burst)
   ========================================= */

/**
 * 迷你樱花爆发动画
 * 应用：Checklist 勾选时的粒子爆发效果
 * 使用 CSS 变量 --tx 和 --ty 控制爆发方向
 */
@keyframes mini-sakura-burst {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx, 50px), var(--ty, -50px)) rotate(180deg) scale(0);
    opacity: 0;
  }
}

.mini-sakura {
  position: fixed;
  width: 12px;
  height: 12px;
  background: var(--accent-sakura);
  border-radius: 50% 0 50% 0;
  pointer-events: none;
  z-index: 9999;
  animation: mini-sakura-burst 0.8s ease-out forwards;
}

/* =========================================
   6. 孕妇友好：减少动效 (Reduced Motion)
   ========================================= */

/**
 * 减少动效媒体查询
 * 遵循 WCAG 2.1 2.3.3 禁止 3 次闪烁
 * 
 * 如果用户偏好减少动效（如孕晚期、癫痫风险、前庭障碍）
 * 则禁用所有动画和过渡效果
 * 
 * 应用：所有动画、过渡、关键帧
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sakura-rain-container {
    display: none !important;
  }
}

/* =========================================
   6. 辅助类 (Utility Classes)
   ========================================= */

/**
 * 动画延迟类
 * 用于多个元素依次动画
 */
.animation-delay-xs {
  animation-delay: 0.05s;
}

.animation-delay-sm {
  animation-delay: 0.1s;
}

.animation-delay-md {
  animation-delay: 0.2s;
}

.animation-delay-lg {
  animation-delay: 0.3s;
}

/**
 * 动画循环控制
 */
.animation-repeat {
  animation-iteration-count: infinite;
}

.animation-once {
  animation-iteration-count: 1;
}

/**
 * 动画方向控制
 */
.animation-alternate {
  animation-direction: alternate;
}

.animation-reverse {
  animation-direction: reverse;
}

/* =========================================
   7. 登录成功动画组合
   ========================================= */

/**
 * 登录成功：樱花雨 + 弹窗动画
 * 应用：登录成功后的欢迎界面
 */
.login-success-anim {
  animation: love-float 1s ease-out 0.5s forwards,
             sakura-bloom 1.2s ease-out 1s forwards;
}

/**
 * 登录成功：延迟 500ms 后显示欢迎消息
 */
.login-success-message {
  animation: love-float 1s ease-out 0.5s forwards;
}

/**
 * 登录成功：延迟 1s 后显示欢迎图标
 */
.login-success-icon {
  animation: sakura-bloom 1.2s ease-out 1s forwards;
}

/* =========================================
   8. 兼容性修复 (Compatibility Fixes)
   ========================================= */

/**
 * Safari 移动端动画修复
 * 使用 will-change 提前优化
 */
@media (max-width: 768px) {
  .sakura-particle {
    will-change: transform, opacity;
    animation-timing-function: ease-out;
  }
}

/**
 * Firefox 滚动动画平滑化
 */
html {
  scroll-behavior: smooth;
}

/**
 * 移动端触摸优化
 * 防止动画过程中意外触发点击
 */
.sakura-particle,
.love-float,
.sakura-bloom {
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}