/* ========================================
   animation.css — 暗区突围保险箱搜索界面
   仅负责：所有动画
   ======================================== */

/* ---------- 放大镜出现 ---------- */
.magnifying-glass.visible {
  animation: magGlassAppear 0.3s ease-out forwards;
}

@keyframes magGlassAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ---------- 放大镜搜索中：圆形轨道位移 ---------- */
.magnifying-glass.searching {
  animation: magGlassOrbit 0.8s linear infinite;
}

@keyframes magGlassOrbit {
  0% {
    transform: translate(-50%, -50%) translate(0, -10px);
  }
  25% {
    transform: translate(-50%, -50%) translate(10px, 0);
  }
  50% {
    transform: translate(-50%, -50%) translate(0, 10px);
  }
  75% {
    transform: translate(-50%, -50%) translate(-10px, 0);
  }
  100% {
    transform: translate(-50%, -50%) translate(0, -10px);
  }
}

/* ---------- 放大镜移动（已改为瞬移：无位移过渡） ---------- */

/* ---------- 物品出现动画已移除（不需要动画） ---------- */

/* ---------- 遮罩消失 ---------- */
.item-mask.fade-out {
  animation: maskFadeOut 0.25s ease-out forwards;
}

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

/* ---------- 物品搜索后闪光效果（明显） ---------- */
.item.just-searched {
  animation: itemFlash 0.6s ease-out;
}

@keyframes itemFlash {
  0% {
    filter: brightness(1);
    box-shadow: none;
  }
  10% {
    filter: brightness(4);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.9), 0 0 60px rgba(255, 220, 150, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.4);
  }
  35% {
    filter: brightness(2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  }
  60% {
    filter: brightness(1.4);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
  }
}

/* ---------- 搜索中央计时器脉冲 ---------- */
.search-indicator .searching-timer {
  animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- 搜索中央指示器消失 ---------- */
.search-indicator.fade-out {
  animation: indicatorFadeOut 0.4s ease-out forwards;
}

@keyframes indicatorFadeOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/* ---------- 按钮hover ---------- */
.tab-btn.inactive:hover {
  animation: btnHover 0.15s ease-out;
}

@keyframes btnHover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1px);
  }
}

/* ---------- 暂停按钮激活状态 ---------- */
.tab-btn.pause-btn.paused {
  animation: pauseBtnGlow 2s ease-in-out infinite;
}

@keyframes pauseBtnGlow {
  0%, 100% {
    box-shadow: 0 0 4px rgba(196, 130, 58, 0.2);
  }
  50% {
    box-shadow: 0 0 8px rgba(196, 130, 58, 0.5);
  }
}

/* ---------- 搜索容器计时器数字变化 ---------- */
.search-container-tab .timer-value {
  transition: color 0.2s ease;
}

/* ---------- 详情面板出现 ---------- */
.detail-overlay.visible .detail-panel {
  animation: detailAppear 0.25s ease-out forwards;
}

@keyframes detailAppear {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}