/* ============================================================
   animations.css —— 动画特效集中管理
   原则：能用 CSS transform/opacity 就不用 JS 逐帧计算（需求 11.3）
   ============================================================ */

/* ---------- 环境：海浪 / 云 / 太阳 / 海鸥 ---------- */
@keyframes waveMove {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(200px, 0, 0); }
}

@keyframes cloudDrift {
  from { transform: translate3d(-20vw, 0, 0); }
  to   { transform: translate3d(120vw, 0, 0); }
}

@keyframes sunPulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.06); opacity: 1; }
}

@keyframes gullFly {
  0%   { transform: translate3d(0, 0, 0) rotate(-4deg); }
  25%  { transform: translate3d(30vw, -4vh, 0) rotate(3deg); }
  50%  { transform: translate3d(60vw, 2vh, 0) rotate(-3deg); }
  75%  { transform: translate3d(30vw, -3vh, 0) rotate(4deg); }
  100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
}

@keyframes logoBob {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50%      { transform: translateY(-5px) rotate(0.6deg); }
}

/* ---------- 漂浮物 ---------- */
@keyframes floatBob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-2deg); }
  50%      { transform: translate(-50%, -50%) translateY(-7px) rotate(2deg); }
}

@keyframes ripple {
  0%   { transform: scale(0.7); opacity: 0.75; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes rareGlow {
  0%, 100% { box-shadow: 3px 3px 0 var(--ink), 0 0 12px rgba(242,193,78,0.6); }
  50%      { box-shadow: 3px 3px 0 var(--ink), 0 0 30px rgba(242,193,78,1); }
}

/* ---------- 建筑 ---------- */
@keyframes buildPop {
  0%   { transform: scale(0.4) rotate(-8deg); }
  60%  { transform: scale(1.18) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes hammerHit {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(18deg); }
}

@keyframes liquidRise {
  0%, 100% { height: 30%; opacity: 0.85; }
  50%      { height: 42%; opacity: 1; }
}

@keyframes steam {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.55; }
  50%      { transform: translateY(-8px) scale(1.12); opacity: 0.85; }
}

@keyframes flowPulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.35) saturate(1.4); }
}

@keyframes sparkFlicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.85); }
}

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

/* ---------- 对话框 / 剧情画面 / 面板 ---------- */
@keyframes dialogueIn {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes dialogueOut {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(110%); opacity: 0; }
}

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

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

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

@keyframes panelPop {
  0%   { transform: scale(0.86) translateY(16px); opacity: 0; }
  70%  { transform: scale(1.03) translateY(-3px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ---------- 打捞反馈 ---------- */
@keyframes hitPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes missShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-9px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(4px); }
}

@keyframes floatTextUp {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.85); }
  25%  { opacity: 1; transform: translate(-50%, -6px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -58px) scale(1); }
}

@keyframes flashOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- 战斗警报 ---------- */
@keyframes alarmPulse {
  0%, 100% { box-shadow: inset 0 0 0 rgba(192,57,43,0); }
  50%      { box-shadow: inset 0 0 90px rgba(192,57,43,0.85); }
}

/* ---------- 横幅 ---------- */
@keyframes bannerDrop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes bannerUp {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}

/* ---------- 引导 ---------- */
@keyframes fingerTap {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-6px, -10px) scale(0.92); }
}

/* ---------- 角色与交互（Raft 风格世界） ---------- */
@keyframes limbSwing {
  0%   { transform: rotate(-18deg); }
  50%  { transform: rotate(18deg); }
  100% { transform: rotate(-18deg); }
}

@keyframes charBob {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -3px; }
}

@keyframes charCast {
  0%   { transform: rotate(0) translateY(0); }
  35%  { transform: rotate(-9deg) translateY(-3px); }
  70%  { transform: rotate(7deg) translateY(1px); }
  100% { transform: rotate(0) translateY(0); }
}

@keyframes popIn {
  0%   { transform: translateX(-50%) scale(0.7); opacity: 0; }
  70%  { transform: translateX(-50%) scale(1.06); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes waterShimmer {
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  50%      { opacity: 0.6; transform: translateX(14px); }
}

/* ---------- 像素角色步伐 ---------- */
@keyframes pixelStep {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-2px); }
}

/* ---------- 夜晚 ---------- */
@keyframes nightFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 海盗建模 ---------- */
@keyframes pirateBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes pirateSink {
  from { opacity: 1; transform: translateY(0) rotate(0deg); }
  to   { opacity: 0; transform: translateY(44px) rotate(24deg); }
}
@keyframes pirateRetreat {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-34px) scale(0.7); }
}

/* ---------- 无障碍：尊重系统的“减少动态效果” ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .wave { animation: none; }
}