/* =========================================================================
   animations.css —— 动画系统
   樱花飘落 · 水之呼吸流光 · 呼吸光晕 · 解锁特效
   ========================================================================= */

/* ===== 樱花摇曳（Hero logo） ===== */
@keyframes sakura-sway {
  0%, 100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
}

/* ===== 樱花飘落（用于 hero 区飘落的花瓣） ===== */
@keyframes sakura-fall {
  0% {
    transform: translateY(-20px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(105vh) translateX(var(--drift, 100px)) rotate(720deg);
    opacity: 0;
  }
}

.sakura-petal {
  animation: sakura-fall var(--duration, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
}

/* ===== 水之呼吸流光（进度条） ===== */
@keyframes water-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* ===== 柔和呼吸光晕（用于标题装饰） ===== */
@keyframes glow-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(255, 183, 197, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 24px rgba(255, 183, 197, 0.8));
  }
}

/* ===== 滚动提示弹动 ===== */
@keyframes bounce-soft {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(8px);
  }
}

/* ===== 记忆翻牌配对成功弹出 ===== */
@keyframes matched-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* ===== 奖励卡片揭晓 ===== */
@keyframes reward-reveal {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  60% {
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== 金光闪现（解锁瞬间） ===== */
@keyframes gold-flash {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* ===== 樱花点击爆炸特效 ===== */
@keyframes sakura-burst {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(2.5) rotate(180deg);
    opacity: 0;
  }
}

.sakura-burst {
  animation: sakura-burst 0.5s ease-out forwards;
}

/* ===== 进入视口动画（滚动触发） ===== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
}
.reveal.is-visible {
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reveal-delay-1.is-visible {
  animation-delay: 0.1s;
}
.reveal-delay-2.is-visible {
  animation-delay: 0.2s;
}
.reveal-delay-3.is-visible {
  animation-delay: 0.3s;
}

/* ===== 旋转光环（最终邀约卡装饰） ===== */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-slow {
  animation: spin-slow 20s linear infinite;
}

/* ===== 金粒子上升（解锁时刻） ===== */
@keyframes particle-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-120px) scale(0);
    opacity: 0;
  }
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 8px var(--color-gold);
  animation: particle-rise 1s ease-out forwards;
}

/* ===== 呼吸光圈（装饰用） ===== */
@keyframes ring-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.ring-pulse {
  position: absolute;
  border: 2px solid var(--color-sakura);
  border-radius: 50%;
  pointer-events: none;
  animation: ring-pulse 1.5s ease-out infinite;
}