/**
 * 建築物 SVG 線條動畫樣式
 */

/* ==========================================
   初始狀態：所有元素隱藏
   ========================================== */

   #buildingSvg path,
   #buildingSvg rect,
   #buildingSvg polygon {
       opacity: 0;
   }
   
   /* ==========================================
      描邊元素：使用 stroke-dasharray 技巧
      ========================================== */
   
   #buildingSvg .stroke-element {
       /* 不設定固定值，由 JS 動態計算 */
       transition: none; /* 防止意外的過渡效果 */
   }
   
   /* ==========================================
      動畫定義
      ========================================== */
   
   /* 描邊動畫：線條從無到有被「畫」出來 */
   @keyframes drawStroke {
       to {
           opacity: 1;
           stroke-dashoffset: 0;
       }
   }
   
   /* 備用：如果不需要淡入效果 */
   @keyframes drawStrokeOnly {
       from {
           stroke-dashoffset: var(--path-length);
       }
       to {
           opacity: 1;
           stroke-dashoffset: 0;
       }
   }
   
   /* 填充動畫：填充元素淡入 */
   @keyframes fadeIn {
       from {
           opacity: 0;
       }
       to {
           opacity: 1;
       }
   }
   
   /* ==========================================
      動畫狀態：添加 .animate 類別時觸發
      ========================================== */
   
   /* 描邊元素動畫 */
   #buildingSvg .stroke-element.animate {
       animation: drawStroke 1.2s ease-out forwards;
   }
   
   /* 填充元素動畫 */
   #buildingSvg .fill-element.animate {
       animation: fadeIn 0.8s ease-out forwards;
   }
   
   /* ==========================================
      可選：為不同元素添加不同動畫速度
      ========================================== */
   
   /* 快速動畫變體 */
   #buildingSvg .stroke-element.animate.fast {
       animation-duration: 0.8s;
   }
   
   /* 慢速動畫變體 */
   #buildingSvg .stroke-element.animate.slow {
       animation-duration: 1.6s;
   }
   
   /* ==========================================
      響應式調整
      ========================================== */
   
   /* 在小螢幕上加快動畫速度 */
   @media screen and (max-width: 768px) {
       #buildingSvg .stroke-element.animate {
           animation-duration: 0.9s;
       }
       
       #buildingSvg .fill-element.animate {
           animation-duration: 0.6s;
       }
   }
   
   /* ==========================================
      效能優化
      ========================================== */
   
   /* 使用 GPU 加速 */
   #buildingSvg {
       transform: translateZ(0);
       will-change: transform;
   }
   
   /* 動畫時使用 GPU 加速 */
   #buildingSvg .stroke-element.animate,
   #buildingSvg .fill-element.animate {
       will-change: opacity, stroke-dashoffset;
   }
   
   /* 動畫完成後移除 will-change */
   #buildingSvg .stroke-element.animate-complete,
   #buildingSvg .fill-element.animate-complete {
       will-change: auto;
   }
   
   /* ==========================================
      可選：添加描邊寬度動畫
      ========================================== */
   
   /* 讓線條在出現時有輕微的寬度變化 */
   @keyframes drawStrokeWithWidth {
       0% {
           opacity: 0;
           stroke-dashoffset: 2000;
           stroke-width: 0;
       }
       50% {
           stroke-width: 3;
       }
       100% {
           opacity: 1;
           stroke-dashoffset: 0;
           stroke-width: 1;
       }
   }
   
   /* 使用此類別啟用寬度動畫 */
   #buildingSvg .stroke-element.animate.with-width {
       animation-name: drawStrokeWithWidth;
   }
   
   /* ==========================================
      調試模式
      ========================================== */
   
   /* 添加此類別到 body 以查看所有元素（用於調試） */
   body.debug-animation #buildingSvg path,
   body.debug-animation #buildingSvg rect,
   body.debug-animation #buildingSvg polygon {
       opacity: 0.3;
       stroke: red;
       stroke-width: 1;
   }
   
   body.debug-animation #buildingSvg .stroke-element {
       stroke-dasharray: none;
       stroke-dashoffset: 0;
   }