/* ============================================
   MOBILE CHAIN SOLUTION - IMPROVED UI
   For screens < 993px
   ============================================ */

@media (max-width: 992px) {
    :root {
        --chain-gap: 0.5rem;
        --mobile-chain-width: 3px;
        --dot-size: 12px;
        --dot-active-size: 20px;
    }
    
    /* Create a subtle vertical timeline */
    .chainwrapper-overview {
        display: block !important;
        position: fixed !important;
        right: 40px !important;
        top: 10vh !important;
        left: auto !important;
        width: var(--mobile-chain-width) !important;
        height: 80vh !important;
        z-index: 100 !important;
        pointer-events: none !important;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(24, 94, 188, 0.15) 5%,
            rgba(24, 94, 188, 0.15) 95%,
            transparent 100%
        ) !important;
        border-radius: 2px !important;
    }
    
    /* Add a glow effect to the timeline */
    .chainwrapper-overview::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: -10px !important;
        right: -10px !important;
        height: 100% !important;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(24, 94, 188, 0.05) 20%,
            rgba(24, 94, 188, 0.05) 80%,
            transparent 100%
        ) !important;
        filter: blur(8px) !important;
        z-index: -1 !important;
    }
    
    /* Hide other chainwrappers */
    .chainwrapper-start-heading,
    .chainwrapper-start,
    .chainwrapper-2016,
    .chainwrapper-2017,
    .chainwrapper-2019,
    .chainwrapper-2020,
    .chainwrapper-2022,
    .chainwrapper-2024,
    .chainwrapper-2025 {
        display: none !important;
    }
    
    /* Hide all path segments by default */
    .path-segment {
        display: none !important;
    }
    
    /* Create timeline dots for each year - using 8 dots for all sections */
    .path1-4,  /* Start */
    .path2-7,  /* 2016 */
    .path3-3,  /* 2017 */
    .path4-3,  /* 2019 */
    .path5-8,  /* 2020 */
    .path6-5,  /* 2022 */
    .path7-3,  /* 2024 */
    .path8-5   /* 2025 */ {
        display: block !important;
        position: fixed !important;
        width: var(--dot-size) !important;
        height: var(--dot-size) !important;
        border-radius: 50% !important;
        right: 36px !important;
        transform: translateX(50%) !important;
        z-index: 102 !important;
        background: white !important;
        border: 2px solid #185ebc !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    /* Initial positions - will be updated by JS */
    .path1-4 { top: 15vh !important; }
    .path2-7 { top: 25vh !important; }
    .path3-3 { top: 35vh !important; }
    .path4-3 { top: 45vh !important; }
    .path5-8 { top: 55vh !important; }
    .path6-5 { top: 65vh !important; }
    .path7-3 { top: 75vh !important; }
    .path8-5 { top: 85vh !important; }
    
    /* Active dot state */
    .path-segment.active-dot {
        width: var(--dot-active-size) !important;
        height: var(--dot-active-size) !important;
        background: #185ebc !important;
        border: 3px solid white !important;
        box-shadow: 0 0 0 4px rgba(24, 94, 188, 0.2),
                    0 4px 12px rgba(24, 94, 188, 0.3) !important;
        animation: pulse 2s ease-in-out infinite !important;
    }
    
    @keyframes pulse {
        0%, 100% {
            transform: translateX(50%) scale(1);
        }
        50% {
            transform: translateX(50%) scale(1.1);
        }
    }
    
    /* Mini floating cubes - more subtle */
    .cube-3d {
        display: none !important; /* Hide cubes on mobile for cleaner look */
    }
    
    /* Year markers with better design */
    .mobile-year-marker {
        position: fixed !important;
        right: 60px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        padding: 4px 10px !important;
        border-radius: 16px !important;
        color: #2e2e2e !important;
        z-index: 103 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        opacity: 0.7 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        border: 1px solid rgba(24, 94, 188, 0.1) !important;
        white-space: nowrap !important;
    }
    
    /* Hover state for year markers */
    .mobile-year-marker:hover {
        opacity: 1 !important;
        transform: translateX(-5px) scale(1.05) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
    
    /* Active year marker */
    .mobile-year-marker.active {
        opacity: 1 !important;
        background: linear-gradient(135deg, #185ebc, #609ae9) !important;
        color: white !important;
        transform: translateX(-8px) scale(1.1) !important;
        box-shadow: 0 4px 16px rgba(24, 94, 188, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    /* Progress indicator on timeline */
    .chainwrapper-overview::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: var(--scroll-progress, 0%) !important;
        background: linear-gradient(
            to bottom,
            #185ebc,
            #609ae9
        ) !important;
        border-radius: 2px !important;
        transition: height 0.1s linear !important;
    }
    
    /* Connecting lines from dots to content */
    .mobile-connection-line {
        position: fixed !important;
        height: 1px !important;
        background: linear-gradient(
            to left,
            transparent,
            rgba(24, 94, 188, 0.15) 30%,
            rgba(24, 94, 188, 0.15) 100%
        ) !important;
        right: 45px !important;
        width: 30px !important;
        z-index: 101 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        pointer-events: none !important;
    }
    
    .mobile-connection-line.active {
        opacity: 1 !important;
    }
    
    /* Add subtle animation to the timeline */
    @keyframes timelineGlow {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }
    
    .chainwrapper-overview {
        animation: timelineGlow 3s ease-in-out infinite !important;
    }
    
    /* Scroll indicator at bottom */
    .scroll-indicator {
        position: fixed !important;
        bottom: 30px !important;
        right: 35px !important;
        width: 30px !important;
        height: 30px !important;
        opacity: 0.6 !important;
        animation: bounce 2s infinite !important;
        z-index: 104 !important;
    }
    
    .scroll-indicator::after {
        content: '↓' !important;
        font-size: 20px !important;
        color: #185ebc !important;
        display: block !important;
        text-align: center !important;
    }
    
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }
}

/* Smaller mobile adjustments */
@media (max-width: 576px) {
    :root {
        --mobile-chain-width: 2px;
        --dot-size: 10px;
        --dot-active-size: 16px;
    }
    
    .chainwrapper-overview {
        right: 30px !important;
    }
    
    .path1-4, .path2-7, .path3-3, .path4-3,
    .path5-8, .path6-5, .path7-3, .path8-5 {
        right: 27px !important;
    }
    
    .mobile-year-marker {
        right: 45px !important;
        font-size: 10px !important;
        padding: 3px 8px !important;
    }
    
    .mobile-connection-line {
        right: 35px !important;
        width: 20px !important;
    }
    
    .scroll-indicator {
        right: 25px !important;
    }
}

/* Ultra small mobile */
@media (max-width: 380px) {
    .chainwrapper-overview {
        right: 20px !important;
    }
    
    .path1-4, .path2-7, .path3-3, .path4-3,
    .path5-8, .path6-5, .path7-3, .path8-5 {
        right: 17px !important;
    }
    
    .mobile-year-marker {
        right: 35px !important;
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
}