/* =========================================
       Glassmorphism Utilities
       ========================================= */
    /* mac-glass in tokens.css */

    /* =========================================
       Hero: 动态视觉中枢 (Vision Canvas)
       ========================================= */
    .hero-wrapper {
      position: relative; height: 100vh; min-height: 800px; display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      background: radial-gradient(circle at center, #18181b 0%, #000000 100%);
    }

    /* 空间透视网格 */
    .hero-grid {
      position: absolute; inset: -50%; width: 200%; height: 200%;
      background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      transform: perspective(800px) rotateX(60deg) translateY(-100px) translateZ(-200px);
      pointer-events: none;
      animation: grid-move 20s linear infinite;
    }
    @keyframes grid-move {
      0% { transform: perspective(800px) rotateX(60deg) translateY(0) translateZ(-200px); }
      100% { transform: perspective(800px) rotateX(60deg) translateY(60px) translateZ(-200px); }
    }

    .vision-stage {
      position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
      width: 900px; height: 600px; pointer-events: none; z-index: 1;
    }

    /* 智能对焦框 (Bounding Box) */
    .viewfinder {
      position: absolute; top: 50%; left: 50%; width: 200px; height: 200px;
      transform: translate(-50%, -50%);
      transition: all 0.8s cubic-bezier(0.32, 0.72, 0, 1);
      display: flex; align-items: center; justify-content: center;
    }

    .vf-corner {
      position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.2);
      transition: border-color 0.4s ease;
    }
    .vf-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
    .vf-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
    .vf-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
    .vf-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

    /* 扫描光栅 */
    .vf-scanline {
      position: absolute; top: 0; left: 0; width: 100%; height: 2px;
      background: linear-gradient(90deg, transparent, rgba(42, 156, 196,0.8), transparent);
      box-shadow: 0 0 10px rgba(42, 156, 196,0.5);
      opacity: 0; transform: translateY(0);
    }

    /* 内部目标 Icon */
    .vf-target {
      font-size: 64px; color: rgba(255,255,255,0);
      transition: all 0.4s ease;
      filter: drop-shadow(0 0 12px rgba(42, 156, 196,0));
      transform: scale(0.8);
    }

    /* 顶部标签 */
    .vf-label {
      position: absolute; top: -24px; left: 0; font-family: 'JetBrains Mono', Menlo, monospace;
      font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 1px;
      transition: color 0.4s ease;
    }

    /* --- 状态切换动画 --- */
    /* 1. 待机寻踪 (Idle) */
    .state-idle .viewfinder { width: 280px; height: 180px; transform: translate(-50%, -40%); }
    .state-idle .vf-corner { border-color: rgba(255,255,255,0.2); }
    
    /* 2. 捕捉眨眼 (Blink) */
    .state-blink .viewfinder { width: 140px; height: 100px; transform: translate(-50%, -60%); }
    .state-blink .vf-corner { border-color: var(--mac-accent); border-width: 3px; }
    .state-blink .vf-label { color: var(--mac-accent); }
    .state-blink .vf-target { color: var(--mac-accent); filter: drop-shadow(0 0 15px rgba(42, 156, 196,0.4)); transform: scale(1); }
    .state-blink .vf-scanline { animation: scan-anim 1.5s ease-in-out infinite; opacity: 1; }

    /* 3. 捕捉举手 (Hand) */
    .state-hand .viewfinder { width: 160px; height: 200px; transform: translate(30%, -20%); }
    .state-hand .vf-corner { border-color: var(--mac-accent); border-width: 3px; }
    .state-hand .vf-label { color: var(--mac-accent); }
    .state-hand .vf-target { color: var(--mac-accent); filter: drop-shadow(0 0 15px rgba(42, 156, 196,0.4)); transform: scale(1); }
    .state-hand .vf-scanline { animation: scan-anim 1.5s ease-in-out infinite; opacity: 1; }

    /* 4. 捕捉摇头 (Shake) */
    .state-shake .viewfinder { width: 180px; height: 180px; transform: translate(-50%, -50%); }
    .state-shake .vf-corner { border-color: var(--mac-accent); border-width: 3px; }
    .state-shake .vf-label { color: var(--mac-accent); }
    .state-shake .vf-target { color: var(--mac-accent); filter: drop-shadow(0 0 15px rgba(42, 156, 196,0.4)); transform: scale(1); animation: shake-anim 0.4s ease-in-out infinite alternate; }
    .state-shake .vf-scanline { animation: scan-anim 1.5s ease-in-out infinite; opacity: 1; }

    /* 5. 离席隐匿 (Away) */
    .state-away .viewfinder { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }

    @keyframes scan-anim { 0% { transform: translateY(0px); } 50% { transform: translateY(100%); } 100% { transform: translateY(0px); } }
    @keyframes shake-anim { 0% { transform: translateX(-8px) scale(1); } 100% { transform: translateX(8px) scale(1); } }

    /* 离席 (Away) 磨砂盾牌 */
    .vs-frost-shield {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8);
      width: 140px; height: 140px; border-radius: 50%;
      background: rgba(20, 20, 22, 0.6); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
      border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
      opacity: 0; transition: all 0.8s cubic-bezier(0.32, 0.72, 0, 1); z-index: 10;
    }
    .vs-frost-shield i { font-size: 42px; color: #fff; opacity: 0.9; }
    .vs-frost-shield span { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.6); letter-spacing: 2px; text-transform: uppercase; }
    
    .state-away .vs-frost-shield { opacity: 1; transform: translate(-50%, -50%) scale(1); }

    /* 状态指示器面板 (终端风) */
    .vs-status-panel {
      position: absolute; right: -120px; top: 50%; transform: translateY(-50%);
      width: 220px; padding: 16px; background: rgba(15,15,17,0.6); border: 1px solid rgba(255,255,255,0.05);
      border-radius: 12px; backdrop-filter: blur(20px); font-family: 'JetBrains Mono', Menlo, monospace;
      box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    }
    .vs-status-header { font-size: 10px; color: var(--mac-text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
    .vs-status-code { font-size: 13px; color: var(--mac-accent); font-weight: 500; margin-bottom: 6px; transition: color 0.3s; }
    .vs-status-desc { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.5; transition: opacity 0.3s; }
    
    .vs-status-dot {
      display: inline-block; width: 6px; height: 6px; background: var(--mac-accent);
      border-radius: 50%; margin-right: 6px; box-shadow: 0 0 8px var(--mac-accent);
      animation: pulse-dot 1.5s infinite alternate; transition: background 0.3s, box-shadow 0.3s;
    }
    .vs-status-dot.idle { background: #86868b; box-shadow: 0 0 8px transparent; }

    @keyframes pulse-dot { from { opacity: 0.4; } to { opacity: 1; } }

    /* --- 新增手势动画专用的 Keyframes --- */
    @keyframes icon-shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); color: var(--mac-accent); }
        75% { transform: translateX(5px); color: var(--mac-accent); }
    }
    .animate-pip-shake {
        animation: icon-shake 0.4s ease-in-out;
    }

    /* =========================================
       Feature Cards
       ========================================= */
    .feature-card {
      transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.4s ease;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 32px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
    }

    /* 手势按钮 (类似 macOS 控制中心) */
    .gesture-btn {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 12px;
      font-size: 14px; font-weight: 500; color: var(--mac-text);
      transition: all 0.2s ease; cursor: pointer;
    }
    .gesture-btn:hover { background: rgba(255,255,255,0.1); transform: scale(1.02); }
    .gesture-btn:active { transform: scale(0.96); background: rgba(255,255,255,0.08); }
    .gesture-btn i { font-size: 20px; color: var(--mac-accent); }