/* ==========================================================================
   scenes_extras.css — 額外視覺特效升級（v5.1+）
   為各 Hall 加專屬視覺風格 + 更多動畫
   ========================================================================== */

/* ===== Hall-specific 主題背景動畫 ===== */
.hall-brain::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(155,126,220,.3), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(255,107,157,.2), transparent 30%);
  animation: brainPulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brainPulse {
  0%,100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ===== 神經網路節點動畫 (Hall 2 大腦館) ===== */
.neural-network {
  position: absolute; inset: 10% 5%;
  pointer-events: none;
}
.neural-network .node {
  position: absolute; width: 14px; height: 14px;
  border-radius: 50%; background: radial-gradient(circle, #FFD166, #FF6B9D);
  box-shadow: 0 0 12px rgba(255,209,102,.8);
  animation: nodeBlink 1.5s ease-in-out infinite;
}
.neural-network .node:nth-child(odd) { animation-delay: 0.5s; }
.neural-network .node:nth-child(3n) { animation-delay: 1s; }
@keyframes nodeBlink {
  0%,100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}
.neural-network .edge {
  position: absolute; height: 1px; background: rgba(255,255,255,.3);
  transform-origin: left center;
  animation: edgeFlow 3s linear infinite;
}
@keyframes edgeFlow {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== 旋風動畫 (Hall 3 吸力館) ===== */
.cyclone-spiral {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 300px; height: 300px;
  pointer-events: none;
}
.cyclone-spiral .ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 2px solid rgba(80, 200, 255, 0.6);
  border-radius: 50%;
  animation: cycloneSpin 2s linear infinite;
}
.cyclone-spiral .ring:nth-child(1) { width: 60px; height: 60px; animation-duration: 1s; }
.cyclone-spiral .ring:nth-child(2) { width: 120px; height: 120px; animation-duration: 1.5s; border-color: rgba(255,209,102,.5); }
.cyclone-spiral .ring:nth-child(3) { width: 180px; height: 180px; animation-duration: 2s; border-color: rgba(255,107,157,.4); }
.cyclone-spiral .ring:nth-child(4) { width: 240px; height: 240px; animation-duration: 2.5s; border-color: rgba(199,125,255,.3); }
@keyframes cycloneSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.8); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.2); opacity: 0; }
}

/* ===== 水滴拖布動畫 (Hall 4 拖地館) ===== */
.water-drops {
  position: absolute; inset: 0;
  pointer-events: none;
}
.water-drops .drop {
  position: absolute; width: 20px; height: 28px;
  background: radial-gradient(ellipse at 50% 30%, rgba(135,206,250,.9), rgba(70,130,180,.7));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: waterDrop 2.5s ease-in infinite;
}
@keyframes waterDrop {
  0% { transform: translateY(-50px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(400px); opacity: 0; }
}

/* ===== 充電基站光環 (Hall 5 基站館) ===== */
.dock-aura {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,150,.4), transparent 60%);
  animation: auraPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes auraPulse {
  0%,100% { opacity: 0.3; transform: translate(-50%,-50%) scale(0.9); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.2); }
}

/* ===== 感測器掃描波紋 (Hall 6 感測器館) ===== */
.scan-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,255,200,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,200,.15) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridScan 6s linear infinite;
  pointer-events: none;
}
@keyframes gridScan {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* ===== 品牌標誌旋轉 (Hall 7 品牌館) ===== */
.brand-medal {
  position: absolute; right: 5%; top: 15%;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFD166, #FF6B9D);
  box-shadow: 0 8px 30px rgba(255,107,157,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 60px;
  animation: medalRotate 8s linear infinite;
}
@keyframes medalRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ===== 拆機放大鏡 (Hall 8 拆機館) ===== */
.magnify {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 8px solid #444;
  background: radial-gradient(circle, rgba(255,255,255,.3), transparent 70%);
  box-shadow: 0 0 0 6px rgba(255,255,255,.1), 0 8px 30px rgba(0,0,0,.4);
  animation: magnifyHover 3s ease-in-out infinite;
}
@keyframes magnifyHover {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50% { transform: translate(-50%,-50%) scale(1.1); }
}

/* ===== 擂台聚光燈 (Hall 9 擂台館) ===== */
.arena-spotlight {
  position: absolute; left: 50%; top: -50px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 600px solid rgba(255,209,102,.2);
  pointer-events: none;
  animation: spotlightSweep 4s ease-in-out infinite;
}
@keyframes spotlightSweep {
  0%,100% { transform: translateX(-50%) rotate(-5deg); }
  50% { transform: translateX(-50%) rotate(5deg); }
}

/* ===== 開箱閃光 (Hall 10 開箱秀) ===== */
.unbox-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.4), transparent 60%);
  animation: unboxFlash 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes unboxFlash {
  0%,100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}

/* ===== 找碴對比 (Hall 11) ===== */
.spot-circle {
  position: absolute;
  border: 4px dashed red;
  border-radius: 50%;
  width: 80px; height: 80px;
  animation: spotPulse 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes spotPulse {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* ===== 未來星空 (Hall 12 未來館) ===== */
.starfield {
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 20%, white, transparent),
    radial-gradient(2px 2px at 40% 60%, white, transparent),
    radial-gradient(3px 3px at 70% 80%, #FFD166, transparent),
    radial-gradient(2px 2px at 90% 40%, white, transparent),
    radial-gradient(2px 2px at 10% 80%, #FF6B9D, transparent);
  background-size: 200px 200px;
  animation: starTwinkle 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes starTwinkle {
  0%,100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ===== 機器人脈衝光環 (通用強化) ===== */
.robot-aura {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,209,102,.4), transparent 70%);
  animation: robotAuraPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes robotAuraPulse {
  0%,100% { opacity: 0.4; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: 0.9; transform: translate(-50%,-50%) scale(1.15); }
}

/* ===== 滾動的灰塵變乾淨 (通用) ===== */
.cleanup-trail {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg,
    rgba(100,255,200,.0) 0%,
    rgba(100,255,200,.15) 50%,
    rgba(100,255,200,.3) 100%);
  animation: cleanupSweep 5s linear infinite;
  pointer-events: none;
}
@keyframes cleanupSweep {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* ===== 雷射光線特效 (Hall 6/9 強化) ===== */
.laser-line {
  position: absolute; left: 50%; top: 50%;
  width: 400px; height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(0,255,200,1), rgba(0,255,200,0));
  animation: laserSweep 1.2s linear infinite;
  pointer-events: none;
}
@keyframes laserSweep {
  0% { transform: translate(-50%,-50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(360deg); opacity: 0.3; }
}

/* ===== 紙箱開箱動畫 (Hall 10 強化) ===== */
.unbox-box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  perspective: 800px;
}
.unbox-box .flap {
  position: absolute; width: 200px; height: 100px;
  background: linear-gradient(180deg, #B8896F, #8B6F4E);
  transform-origin: bottom center;
  animation: flapOpen 3s ease-in-out infinite alternate;
}
.unbox-box .flap.left { left: 0; transform: rotate(-90deg); }
.unbox-box .flap.right { right: 0; transform: rotate(90deg); }
@keyframes flapOpen {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-90deg); }
}

/* ===== 視差場景深度感 ===== */
.parallax-layer {
  position: absolute; inset: 0;
  pointer-events: none;
}
.parallax-layer.back { animation: parallaxSlow 30s linear infinite; }
.parallax-layer.mid { animation: parallaxMid 20s linear infinite; }
.parallax-layer.front { animation: parallaxFast 10s linear infinite; }
@keyframes parallaxSlow {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50px); }
}
@keyframes parallaxMid {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100px); }
}
@keyframes parallaxFast {
  0% { transform: translateX(0); }
  100% { transform: translateX(-200px); }
}