@charset "utf-8";
/* CSS Document */



        .visual-container {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            max-width: 800px;
            margin: 0 auto;
        }

        #mainSVG {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
        }

        /* 確保保留原始 SVG 樣式 */
        #mainSVG .st1 {
            mix-blend-mode: color-dodge !important;
        }

        /* 線條光暈效果 */
        #mainSVG #line1 {
            filter: url(#glow-gray);
        }

        #mainSVG #line2 {
            filter: url(#glow-cyan);
        }
        
        #mainSVG #line3 {
            filter: url(#glow-blue);
        }
        
        #mainSVG #line4 {
            filter: url(#glow-teal);
        }

        /* ========== 人臉動畫 (face) ========== */
        #mainSVG #face {
            opacity: 0;
            animation: fadeInFace 0.8s ease-out forwards;
        }

        @keyframes fadeInFace {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        #mainSVG #face polygon,
        #mainSVG #face path {
            stroke: #00d4ff;
            stroke-width: 0.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            animation: drawFaceStroke 2.5s ease-in-out 0.8s forwards;
        }

        #mainSVG #face *:nth-child(1) { animation-delay: 0.8s; }
        #mainSVG #face *:nth-child(2) { animation-delay: 0.85s; }
        #mainSVG #face *:nth-child(3) { animation-delay: 0.9s; }
        #mainSVG #face *:nth-child(4) { animation-delay: 0.95s; }
        #mainSVG #face *:nth-child(5) { animation-delay: 1s; }
        #mainSVG #face *:nth-child(6) { animation-delay: 1.05s; }
        #mainSVG #face *:nth-child(7) { animation-delay: 1.1s; }
        #mainSVG #face *:nth-child(8) { animation-delay: 1.15s; }
        #mainSVG #face *:nth-child(9) { animation-delay: 1.2s; }
        #mainSVG #face *:nth-child(10) { animation-delay: 1.25s; }
        #mainSVG #face *:nth-child(n+11) { animation-delay: 1.3s; }

        @keyframes drawFaceStroke {
            0% {
                stroke-dasharray: 1000;
                stroke-dashoffset: 1000;
                stroke: #00d4ff;
            }
            50% {
                stroke-dasharray: 1000;
                stroke-dashoffset: 0;
                stroke: #00d4ff;
            }
            80% {
                stroke-dasharray: 1000;
                stroke-dashoffset: 0;
                stroke: #ffffff;
            }
            100% {
                stroke-dasharray: 1000;
                stroke-dashoffset: 0;
                stroke: #ffffff;
            }
        }

        /* ========== 大腦動畫 (brain) ========== */
        #mainSVG #brain {
            opacity: 0;
        }

        #mainSVG #brain.show {
            animation: fadeInBrain 0.8s ease-in-out 1s forwards;
        }

        @keyframes fadeInBrain {
            from { opacity: 0; }
            to { opacity: 0.3; }
        }

        #mainSVG #brain polygon,
        #mainSVG #brain path {
            fill: none !important;
            stroke: #38bdf8;
            stroke-width: 0.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            animation: drawBrainLines 3s ease-in-out 1.5s forwards;
        }

        @keyframes drawBrainLines {
            0% {
                stroke-dasharray: 1000;
                stroke-dashoffset: 1000;
            }
            70% {
                stroke-dasharray: 1000;
                stroke-dashoffset: 0;
            }
            100% {
                stroke-dasharray: 1000;
                stroke-dashoffset: 0;
                fill: #38bdf8;
                stroke: #38bdf8;
            }
        }

        /* ========== 4段線條動畫 ========== */
        #mainSVG #line1,
        #mainSVG #line2,
        #mainSVG #line3,
        #mainSVG #line4 {
            opacity: 0;
        }

        #mainSVG #line1.show {
            animation: fadeInLine 0.3s ease-out 2.5s forwards;
        }

        #mainSVG #line4.show {
            animation: fadeInLine 0.3s ease-out 2.8s forwards;
        }

        #mainSVG #line2.show {
            animation: fadeInLine 0.3s ease-out 3.1s forwards;
        }

        #mainSVG #line3.show {
            animation: fadeInLine 0.3s ease-out 3.4s forwards;
        }

        @keyframes fadeInLine {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 線條路徑繪製動畫 */
        #mainSVG #line1.show polygon,
        #mainSVG #line1.show path,
        #mainSVG #line1.show rect {
            stroke: #ccc;
            stroke-width: 1;
            animation: drawLine 1s ease-out 2.5s forwards;
        }

        #mainSVG #line4.show polygon {
            stroke: #00d4ff;  /* 青藍色 - 較亮 */
            stroke-width: 1;
            animation: drawLine 1s ease-out 2.8s forwards;
        }

        #mainSVG #line2.show polygon {
            stroke: #29abe2;  /* 天藍色 - 中等 */
            stroke-width: 1;
            animation: drawLine 1s ease-out 3.1s forwards;
        }

        #mainSVG #line3.show path,
        #mainSVG #line3.show rect {
            stroke: #1e90ff;  /* 道奇藍 - 偏紫 */
            stroke-width: 1;
            animation: drawLine 1s ease-out 3.4s forwards;
        }

        @keyframes drawLine {
            0% {
                stroke-dasharray: 2000;
                stroke-dashoffset: 2000;
            }
            100% {
                stroke-dasharray: 2000;
                stroke-dashoffset: 0;
            }
        }

        /* ========== Title 文字動畫 ========== */
        #mainSVG #title {
            opacity: 1;
        }

        #mainSVG #title #char-11,
        #mainSVG #title #char-21,
        #mainSVG #title #char-31,
        #mainSVG #title #char-41,
        #mainSVG #title #char-51 {
            opacity: 0;
        }

        #mainSVG #title #char-11.show {
            animation: fadeInChar 0.3s ease-out 3s forwards;
        }

        #mainSVG #title #char-21.show {
            animation: fadeInChar 0.3s ease-out 3.2s forwards;
        }

        #mainSVG #title #char-31.show {
            animation: fadeInChar 0.3s ease-out 3.4s forwards;
        }

        #mainSVG #title #char-41.show {
            animation: fadeInChar 0.3s ease-out 3.6s forwards;
        }

        #mainSVG #title #char-51.show {
            animation: fadeInChar 0.3s ease-out 3.8s forwards;
        }

        @keyframes fadeInChar {
            from { 
                opacity: 0;
                transform: translateY(10px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ========== Subtitle 文字動畫 ========== */
        #mainSVG #subtitle {
            opacity: 0;
        }

        #mainSVG #subtitle.show {
            animation: fadeInSubtitle 0.6s ease-out 4.2s forwards;
        }

        @keyframes fadeInSubtitle {
            from { 
                opacity: 0;
                transform: translateY(15px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }

        .info {
            color: #e0e0e0;
            margin-top: 30px;
            font-size: 1rem;
            line-height: 1.8;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .loading {
            color: #00d4ff;
            font-size: 1.2rem;
            padding: 100px 0;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
                letter-spacing: 1px;
            }
            
            .main-visual {
                padding: 40px 20px;
            }

            .visual-container {
                aspect-ratio: 1;
                width: 80%;
            }
        }