/**
 * animations.css — R51 集中动效管理
 *
 * ≥24组@keyframes + 动画类 + prefers-reduced-motion 无障碍
 * ★R66标准
 */

/* ===================== 全局动画 ===================== */
@keyframes pawBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes loadingSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

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

@keyframes navPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 164, 96, 0.4); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(244, 164, 96, 0); }
}

/* ===================== Hero倒计时 ===================== */
@keyframes heroBgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes heroPhotoScale {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes countdownFlipIn {
  0%   { transform: rotateX(90deg); opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

@keyframes btnBounceIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes countdownPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb, 244, 164, 96), 0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(var(--color-primary-rgb, 244, 164, 96), 0); }
}

/* ===================== 翻页相册 ===================== */
@keyframes pagePhotoStagger {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes stickerFloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-6px); }
}

@keyframes pageFoldShadow {
  from { box-shadow: inset 0 0 40px rgba(0,0,0,0); }
  to   { box-shadow: inset 0 0 40px rgba(0,0,0,0.08); }
}

/* ===================== 蜡烛 ===================== */
@keyframes flameFlicker {
  0%, 100% { opacity: 0.85; transform: scaleY(1) scaleX(1); }
  25%      { opacity: 1; transform: scaleY(1.06) scaleX(0.95); }
  50%      { opacity: 0.78; transform: scaleY(0.94) scaleX(1.04); }
  75%      { opacity: 1; transform: scaleY(1.04) scaleX(0.97); }
}

@keyframes flameExtinguish {
  0%   { transform: scale(1); opacity: 1; filter: brightness(1); }
  40%  { transform: scale(0.6); opacity: 0.6; filter: brightness(0.5); }
  100% { transform: scale(0); opacity: 0; filter: brightness(0); }
}

@keyframes candleSmoke {
  0%   { opacity: 0.7; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(2.5); }
}

@keyframes celebrationTextBounce {
  0%   { transform: scale(0) rotate(-5deg); opacity: 0; }
  50%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
  70%  { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ===================== 庆祝特效 ===================== */
@keyframes balloonRise {
  0%   { transform: translateY(100vh) rotate(0deg); opacity: 1; }
  20%  { transform: translateY(70vh) rotate(5deg); }
  40%  { transform: translateY(40vh) rotate(-4deg); }
  60%  { transform: translateY(20vh) rotate(3deg); }
  80%  { transform: translateY(5vh) rotate(-2deg); opacity: 0.8; }
  100% { transform: translateY(-20vh) rotate(0deg); opacity: 0; }
}

@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes fireworkBurst {
  0%   { transform: scale(0); opacity: 1; }
  50%  { opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ===================== 留言墙 ===================== */
@keyframes cardFlyIn {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes likeHeartPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes danmakuScroll {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

/* ===================== 照片上传 ===================== */
@keyframes photoGridAppear {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes dropzonePulse {
  0%, 100% { border-color: var(--color-border); }
  50%      { border-color: var(--color-primary); }
}

@keyframes queueProgressBar {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ===================== 贺卡/海报 ===================== */
@keyframes posterPreviewFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes templateSelected {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1.05); }
}

/* ===================== Toast ===================== */
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

/* ===================== Modal ===================== */
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes modalFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ===================== 骨架屏 ===================== */
@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg,
    var(--color-secondary) 25%,
    var(--color-card) 50%,
    var(--color-secondary) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 2s ease infinite;
  border-radius: var(--radius-sm);
}

/* ===================== 动画类绑定 ===================== */
/* Hero级联延迟 */
.hero-pet-name        { animation: heroNameSlideUp 0.6s ease-out 0.4s both; }
.hero-subtitle        { animation: heroNameSlideUp 0.6s ease-out 0.5s both; }
.countdown-item:nth-child(1) .countdown-num { animation: countdownFlipIn 0.5s ease-in-out 0.6s both; }
.countdown-item:nth-child(2) .countdown-num { animation: countdownFlipIn 0.5s ease-in-out 0.8s both; }
.countdown-item:nth-child(3) .countdown-num { animation: countdownFlipIn 0.5s ease-in-out 1.0s both; }
.countdown-item:nth-child(4) .countdown-num { animation: countdownFlipIn 0.5s ease-in-out 1.2s both; }

/* 页面照片级联 */
.page-photo { animation: pagePhotoStagger 0.4s ease-out both; }
.page-photo:nth-child(1) { animation-delay: calc(var(--photo-index, 0) * 0.08s); }
.page-photo:nth-child(2) { animation-delay: calc(var(--photo-index, 0) * 0.08s + 0.08s); }
.page-photo:nth-child(3) { animation-delay: calc(var(--photo-index, 0) * 0.08s + 0.16s); }
.page-photo:nth-child(4) { animation-delay: calc(var(--photo-index, 0) * 0.08s + 0.24s); }

/* 留言卡片级联 */
.wish-card:nth-child(1) { animation-delay: 0s; }
.wish-card:nth-child(2) { animation-delay: 0.08s; }
.wish-card:nth-child(3) { animation-delay: 0.16s; }
.wish-card:nth-child(4) { animation-delay: 0.24s; }
.wish-card:nth-child(5) { animation-delay: 0.32s; }
.wish-card:nth-child(6) { animation-delay: 0.40s; }

/* 蜡烛 */
.flame-lit { animation: flameFlicker 0.4s ease infinite; }
.flame-lit:nth-child(odd) { animation-delay: 0s; }
.flame-lit:nth-child(even) { animation-delay: 0.2s; }

/* 蛋糕层 */
.cake-layer-top    { animation: heroNameSlideUp 0.8s ease-out 0.3s both; }
.cake-layer-mid    { animation: heroNameSlideUp 0.8s ease-out 0.5s both; }
.cake-layer-bottom { animation: heroNameSlideUp 0.8s ease-out 0.7s both; }
.cake-plate        { animation: heroNameSlideUp 0.8s ease-out 0.9s both; }

/* Canvas 画布全屏 */
.fireworks-canvas {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
}
.balloons-layer {
  position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden;
}
.confetti-layer {
  position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden;
}

.balloon {
  position: absolute; bottom: -10%; font-size: 40px;
  animation: balloonRise 4s linear forwards;
}

.confetti-piece {
  position: absolute; top: -20px; border-radius: 2px;
  animation: confettiFall 3s ease-in forwards;
}

/* Modal */
.modal-box { animation: modalSlideUp 0.3s ease; }

/* Toast */
.toast-show { animation: toastSlideIn 0.3s ease forwards; }
.toast:not(.toast-show) { animation: toastSlideOut 0.3s ease forwards; }

/* Poster预览 */
.poster-preview canvas { animation: posterPreviewFadeIn 0.5s ease; }

/* 上传预览网格 */
.upload-preview-item { animation: photoGridAppear 0.3s ease-out both; }
.upload-preview-item:nth-child(1)  { animation-delay: 0s; }
.upload-preview-item:nth-child(2)  { animation-delay: 0.05s; }
.upload-preview-item:nth-child(3)  { animation-delay: 0.10s; }
.upload-preview-item:nth-child(4)  { animation-delay: 0.15s; }
.upload-preview-item:nth-child(5)  { animation-delay: 0.20s; }
.upload-preview-item:nth-child(6)  { animation-delay: 0.25s; }
.upload-preview-item:nth-child(7)  { animation-delay: 0.30s; }
.upload-preview-item:nth-child(8)  { animation-delay: 0.35s; }

/* Dropzone拖拽脉冲 */
.upload-dropzone.drag-over { animation: dropzonePulse 0.8s ease infinite; }

/* 倒计时脉冲 */
.countdown-num { animation: countdownPulse 2s ease-in-out infinite; }

/* ===================== prefers-reduced-motion ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}