/* ===== Microsoft Windows Hover START ===== */


        /* 當滑鼠懸停時也要調整位置 */
        .timeline-bar:hover + .microsoft-animation-popup {
            transform: translateY(0%) translateX(0) scale(1) !important;
        }

        /* Company specific styles */
        .microsoft-icon { background: linear-gradient(135deg, #00bcf2 0%, #0078d4 100%); }
        /* 公司時間軸條形圖樣式 - 使用 CSS 變數進行位置計算 */
        .microsoft-bar { 
            background: linear-gradient(135deg, #00bcf2 0%, #0078d4 100%); 
            left: var(--microsoft-position); 
            width: var(--microsoft-duration); 
        }
             
        .microsoft-animation-popup { 
            width: 400px; 
            height: 300px; 
            background: linear-gradient(135deg, #0078d4 0%, #106ebe 50%, #005a9e 100%); 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            /* 提高 z-index 確保動畫顯示在年代列上方 */
            z-index: 100 !important;
            /* 保持動畫在最上方，不被年代列遮蓋 */
            top: -50% !important;
            transform: translateY(0%) translateX(10px) scale(0.9) !important;
        }
        


        .microsoft-animation-popup .windows-logo {
            width: 80px;
            height: 80px;
            margin-bottom: 2rem;
            position: relative;
            opacity: 0;
            animation: ms-logoFlyIn 2s ease-out forwards;
        }
        .microsoft-animation-popup .logo-flag {
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 4px;
            transform: rotate(-45deg);
            animation: ms-logoRotate 3s ease-in-out 2s infinite;
        }
        .microsoft-animation-popup .flag-segment {
            border-radius: 2px;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
        }
        .microsoft-animation-popup .segment-1 {
            background: #f25022;
            animation: ms-segmentGlow 4s ease-in-out infinite;
        }
        .microsoft-animation-popup .segment-2 {
            background: #7fba00;
            animation: ms-segmentGlow 4s ease-in-out 1s infinite;
        }
        .microsoft-animation-popup .segment-3 {
            background: #00a4ef;
            animation: ms-segmentGlow 4s ease-in-out 2s infinite;
        }
        .microsoft-animation-popup .segment-4 {
            background: #ffb900;
            animation: ms-segmentGlow 4s ease-in-out 3s infinite;
        }
        @keyframes ms-logoFlyIn {
            0% { opacity: 0; transform: translateX(-100px) scale(0.5); }
            100% { opacity: 1; transform: translateX(0) scale(1); }
        }
        @keyframes ms-logoRotate {
            0%, 100% { transform: rotate(-45deg) scale(1); }
            50% { transform: rotate(-45deg) scale(1.1); }
        }
        @keyframes ms-segmentGlow {
            0%, 100% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); }
            50% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.8); }
        }
        .microsoft-animation-popup .windows-text {
            font-size: 2rem;
            font-weight: 300;
            color: #ffffff;
            margin-bottom: 1rem;
            opacity: 0;
            animation: ms-textTypewriter 3s ease-out 2.5s forwards;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        }
        @keyframes ms-textTypewriter {
            0% { opacity: 1; }
            100% { opacity: 1; }
        }
        .microsoft-animation-popup .loading-container {
            opacity: 0;
            animation: ms-loadingAppear 1s ease-out 5s forwards;
        }
        .microsoft-animation-popup .loading-text {
            font-size: 1rem;
            color: #ffffff;
            margin-bottom: 1rem;
            opacity: 0;
            animation: ms-loadingTextFade 2s ease-out 5.5s forwards;
        }
        @keyframes ms-loadingAppear {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes ms-loadingTextFade {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        .microsoft-animation-popup .progress-bar {
            width: 200px;
            height: 6px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            overflow: hidden;
        }
        .microsoft-animation-popup .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ffffff 0%, #e3f2fd 50%, #ffffff 100%);
            border-radius: 3px;
            animation: ms-progressLoad 8s ease-in-out 6s infinite;
            transform: translateX(-100%);
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
        }
        @keyframes ms-progressLoad {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(0%); }
        }
        /* ===== Microsoft Windows Hover END ===== */