/* ==========================================================================
   sonar_ultra.css — 極限超音波 / 雷達動畫系統 (v6)
   - 8 層擴散波紋
   - 3D 透視效果
   - 多色相位偏移
   - 頻譜波形顯示
   - 數據 HUD 顯示
   - 同步音效視覺
   - 旋轉雷達掃描線
   - 心電圖波形
   - 粒子噪訊層
   ========================================================================== */

/* ===== 8 層極限同心圓擴散 ===== */
.sonar-ultra {
  position: absolute; inset: 0;
  pointer-events: none;
  perspective: 800px;
}
.sonar-ultra .ring-ultra {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border-style: solid;
  animation: sonarUltra 2.4s ease-out infinite;
  border-width: 3px;
}
.sonar-ultra .ring-ultra:nth-child(1) { border-color: rgba(80, 200, 255, 0.95); animation-delay: 0s; }
.sonar-ultra .ring-ultra:nth-child(2) { border-color: rgba(120, 220, 255, 0.85); animation-delay: 0.3s; }
.sonar-ultra .ring-ultra:nth-child(3) { border-color: rgba(160, 230, 255, 0.75); animation-delay: 0.6s; }
.sonar-ultra .ring-ultra:nth-child(4) { border-color: rgba(200, 250, 255, 0.65); animation-delay: 0.9s; }
.sonar-ultra .ring-ultra:nth-child(5) { border-color: rgba(255, 209, 102, 0.7); animation-delay: 1.2s; border-width: 2px; }
.sonar-ultra .ring-ultra:nth-child(6) { border-color: rgba(255, 107, 157, 0.6); animation-delay: 1.5s; border-width: 2px; }
.sonar-ultra .ring-ultra:nth-child(7) { border-color: rgba(199, 125, 255, 0.5); animation-delay: 1.8s; border-width: 1px; }
.sonar-ultra .ring-ultra:nth-child(8) { border-color: rgba(255, 255, 255, 0.4); animation-delay: 2.1s; border-width: 1px; }
@keyframes sonarUltra {
  0% { width: 60px; height: 60px; opacity: 1; border-width: 5px;
       filter: blur(0); box-shadow: 0 0 30px currentColor; }
  50% { opacity: 0.7; filter: blur(0.5px); }
  100% { width: 900px; height: 900px; opacity: 0; border-width: 0;
         filter: blur(2px); }
}

/* ===== 3D 透視雷達 ===== */
.sonar-3d {
  position: absolute; inset: 0;
  pointer-events: none;
  perspective: 1200px;
  perspective-origin: 50% 80%;
}
.sonar-3d .disc {
  position: absolute; left: 50%; top: 50%;
  width: 800px; height: 800px;
  transform: translate(-50%, -50%) rotateX(75deg);
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at center,
      rgba(0, 255, 200, 0.15) 0px,
      rgba(0, 255, 200, 0.15) 2px,
      transparent 2px,
      transparent 60px
    );
  animation: discRotate 8s linear infinite;
}
.sonar-3d .disc::before {
  content: ""; position: absolute; inset: 0;
  background:
    conic-gradient(
      from 0deg,
      rgba(0, 255, 200, 0.6) 0deg,
      rgba(0, 255, 200, 0.2) 30deg,
      transparent 60deg,
      transparent 360deg
    );
  border-radius: 50%;
}
@keyframes discRotate {
  0% { transform: translate(-50%, -50%) rotateX(75deg) rotateZ(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(75deg) rotateZ(360deg); }
}

/* ===== 雷達掃描線（旋轉） ===== */
.radar-sweep {
  position: absolute; left: 50%; top: 50%;
  width: 400px; height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg,
    rgba(0, 255, 200, 0.9) 0%,
    rgba(0, 255, 200, 0.5) 30%,
    rgba(0, 255, 200, 0.1) 70%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(0, 255, 200, 0.7);
  animation: radarSweep 2s linear infinite;
  pointer-events: none;
}
@keyframes radarSweep {
  0% { transform: translate(0, -50%) rotate(0deg); }
  100% { transform: translate(0, -50%) rotate(360deg); }
}

/* ===== 頻譜波形顯示 ===== */
.spectrum-bars {
  position: absolute; bottom: 8%; left: 8%; right: 8%;
  height: 80px;
  display: flex; align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
.spectrum-bars .bar {
  flex: 1;
  background: linear-gradient(180deg,
    rgba(255, 107, 157, 0.9),
    rgba(255, 209, 102, 0.9),
    rgba(80, 200, 255, 0.9));
  border-radius: 2px 2px 0 0;
  animation: spectrumDance 1.2s ease-in-out infinite;
  box-shadow: 0 0 8px currentColor;
}
.spectrum-bars .bar:nth-child(1) { animation-delay: 0s; height: 30%; }
.spectrum-bars .bar:nth-child(2) { animation-delay: 0.05s; height: 60%; }
.spectrum-bars .bar:nth-child(3) { animation-delay: 0.1s; height: 80%; }
.spectrum-bars .bar:nth-child(4) { animation-delay: 0.15s; height: 95%; }
.spectrum-bars .bar:nth-child(5) { animation-delay: 0.2s; height: 75%; }
.spectrum-bars .bar:nth-child(6) { animation-delay: 0.25s; height: 50%; }
.spectrum-bars .bar:nth-child(7) { animation-delay: 0.3s; height: 70%; }
.spectrum-bars .bar:nth-child(8) { animation-delay: 0.35s; height: 90%; }
.spectrum-bars .bar:nth-child(9) { animation-delay: 0.4s; height: 65%; }
.spectrum-bars .bar:nth-child(10) { animation-delay: 0.45s; height: 45%; }
.spectrum-bars .bar:nth-child(11) { animation-delay: 0.5s; height: 75%; }
.spectrum-bars .bar:nth-child(12) { animation-delay: 0.55s; height: 85%; }
.spectrum-bars .bar:nth-child(13) { animation-delay: 0.6s; height: 60%; }
.spectrum-bars .bar:nth-child(14) { animation-delay: 0.65s; height: 40%; }
.spectrum-bars .bar:nth-child(15) { animation-delay: 0.7s; height: 80%; }
.spectrum-bars .bar:nth-child(16) { animation-delay: 0.75s; height: 95%; }
@keyframes spectrumDance {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.2); }
}

/* ===== 數據 HUD 顯示 ===== */
.sonar-hud {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 255, 200, 0.6);
  border-radius: 8px;
  padding: 8px 14px;
  color: rgba(0, 255, 200, 0.9);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(0, 255, 200, 0.3);
  backdrop-filter: blur(8px);
  animation: hudFlicker 3s ease-in-out infinite;
}
.sonar-hud.tl { top: 10%; left: 5%; }
.sonar-hud.tr { top: 10%; right: 5%; }
.sonar-hud.bl { bottom: 25%; left: 5%; }
.sonar-hud.br { bottom: 25%; right: 5%; }
.sonar-hud .hud-num {
  font-size: 22px;
  color: #FFD166;
  text-shadow: 0 0 8px currentColor;
  display: block;
}
.sonar-hud .hud-label {
  font-size: 10px;
  opacity: 0.7;
}
@keyframes hudFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
  53% { opacity: 1; }
  95% { opacity: 0.9; }
}

/* ===== 心電圖波形 ===== */
.ecg-line {
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  pointer-events: none;
  overflow: hidden;
}
.ecg-line.top { top: 30%; }
.ecg-line.bottom { bottom: 30%; }
.ecg-line svg {
  width: 200%; height: 100%;
  animation: ecgScroll 4s linear infinite;
}
.ecg-line polyline {
  fill: none;
  stroke: #00ff88;
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px #00ff88);
}
@keyframes ecgScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== 粒子噪訊層（給雷達顆粒感） ===== */
.sonar-noise {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(0,255,200,0.3), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(0,255,200,0.4), transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(0,255,200,0.3), transparent),
    radial-gradient(1px 1px at 80% 80%, rgba(0,255,200,0.4), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(255,209,102,0.3), transparent),
    radial-gradient(1px 1px at 90% 40%, rgba(255,107,157,0.3), transparent);
  background-size: 150px 150px;
  animation: noiseDrift 6s linear infinite;
  opacity: 0.6;
}
@keyframes noiseDrift {
  0% { background-position: 0 0; }
  100% { background-position: 150px 150px; }
}

/* ===== 中央目標鎖定框 ===== */
.target-lock {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  pointer-events: none;
  animation: targetLock 1.5s ease-in-out infinite;
}
.target-lock::before, .target-lock::after {
  content: ""; position: absolute;
  width: 30px; height: 30px;
  border: 3px solid #FF6B9D;
  filter: drop-shadow(0 0 8px #FF6B9D);
}
.target-lock::before {
  top: 0; left: 0;
  border-right: 0; border-bottom: 0;
}
.target-lock::after {
  bottom: 0; right: 0;
  border-left: 0; border-top: 0;
}
@keyframes targetLock {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.6; }
}

/* ===== 旋轉同步光環（機器人主體用） ===== */
.robot-orbit {
  position: absolute; left: 50%; top: 50%;
  width: 400px; height: 400px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.robot-orbit .orbit {
  position: absolute; inset: 0;
  border: 2px solid rgba(0, 255, 200, 0.4);
  border-radius: 50%;
  animation: orbitSpin 4s linear infinite;
}
.robot-orbit .orbit:nth-child(1) { animation-duration: 4s; }
.robot-orbit .orbit:nth-child(2) {
  inset: 40px;
  border-color: rgba(255, 209, 102, 0.4);
  animation-duration: 6s; animation-direction: reverse;
}
.robot-orbit .orbit:nth-child(3) {
  inset: 80px;
  border-color: rgba(255, 107, 157, 0.4);
  animation-duration: 8s;
}
.robot-orbit .orbit::before {
  content: ""; position: absolute; top: -6px; left: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
  box-shadow: 0 0 16px currentColor;
}
@keyframes orbitSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== 雷射網格（地板掃描） ===== */
.scan-floor-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  perspective: 800px;
  perspective-origin: 50% 100%;
}
.scan-floor-grid::before {
  content: ""; position: absolute;
  left: -20%; right: -20%; top: 50%; bottom: -20%;
  background:
    linear-gradient(rgba(0,255,200,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,200,.2) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: rotateX(70deg);
  animation: floorScroll 4s linear infinite;
}
@keyframes floorScroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 50px; }
}

/* ===== 全息投影邊框 ===== */
.holo-frame {
  position: absolute;
  border: 2px solid rgba(0, 255, 200, 0.6);
  box-shadow:
    0 0 20px rgba(0, 255, 200, 0.4),
    inset 0 0 20px rgba(0, 255, 200, 0.2);
  border-radius: 4px;
  animation: holoPulse 2s ease-in-out infinite;
}
.holo-frame::before, .holo-frame::after {
  content: ""; position: absolute;
  width: 20px; height: 20px;
  border: 3px solid #00ff88;
}
.holo-frame::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.holo-frame::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
@keyframes holoPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== 信號連線（兩點動畫連線） ===== */
.signal-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 255, 200, 0.9) 50%,
    transparent 100%);
  filter: drop-shadow(0 0 4px #00ff88);
  animation: signalFlow 1.5s linear infinite;
  pointer-events: none;
}
@keyframes signalFlow {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* ===== 機器人主體脈衝光環（最強版） ===== */
.robot-mega-aura {
  position: absolute; left: 50%; top: 50%;
  width: 500px; height: 500px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.robot-mega-aura::before,
.robot-mega-aura::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 209, 102, 0.3) 0%,
    rgba(255, 107, 157, 0.15) 40%,
    transparent 70%);
  animation: megaAuraPulse 3s ease-in-out infinite;
}
.robot-mega-aura::after {
  animation-delay: 1.5s;
}
@keyframes megaAuraPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.9; }
}