/* ============================================================
   ROADMAP — DUAL-TRACK TIMELINE
   ============================================================ */
.roadmap-section { background: var(--bg-secondary); padding: 140px 0 100px; overflow: hidden; }
.roadmap-section .section-header { text-align: center; max-width: 800px; margin: 0 auto 60px; padding: 0 48px; }

/* Scroll hint */
.roadmap-scroll-hint { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:500; color:var(--text-light); margin-bottom:20px; transition:opacity 0.5s ease; }
.roadmap-scroll-hint svg { animation: roadmapHintSlide 1.5s ease-in-out infinite; }
@keyframes roadmapHintSlide { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }

/* Scroll container */
.roadmap-scroll-container { position:relative; overflow-x:auto; overflow-y:hidden; cursor:grab; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
.roadmap-scroll-container::-webkit-scrollbar { display:none; }
.roadmap-scroll-container:active { cursor:grabbing; }

/* Track */
.roadmap-track { position: relative; }

/* Canvas */
.roadmap-canvas-wrapper { position: relative; }
#roadmapCanvas { position:absolute; top:0; left:0; pointer-events:none; z-index:3; }

/* SVG layer */
.roadmap-path-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; }

/* ── Structural ── */
.roadmap-spine { position:absolute; left:0; right:0; height:1.5px; background:var(--accent); z-index:1; pointer-events:none; }
.roadmap-quarter-divider { position:absolute; top:0; bottom:0; width:1px; background:var(--accent); z-index:0; pointer-events:none; }
.roadmap-quarter-label { position:absolute; font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600; letter-spacing:2px; color:var(--text-light); text-transform:uppercase; transform:translateX(-50%); z-index:1; pointer-events:none; white-space:nowrap; }
.roadmap-spine-notch { position:absolute; width:1px; height:8px; background:var(--accent); opacity:0.15; transform:translate(-50%,-50%); pointer-events:none; z-index:2; }
.roadmap-track-label { position:absolute; font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:600; letter-spacing:2.5px; color:var(--text-light); text-transform:uppercase; opacity:0.35; z-index:4; pointer-events:none; white-space:nowrap; writing-mode:vertical-lr; transform:rotate(180deg) translateY(50%); }

/* ── Islands ── */
.roadmap-island {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* visibility:hidden set by JS, then made visible after measurement */
}
.roadmap-island:hover { transform: scale(1.06); }
.roadmap-island.is-key:hover { transform: scale(1.08); }

/* GFX — fixed-height slot, content centres inside */
.roadmap-gfx { display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:visible; }
.roadmap-gfx svg { display:block; }
.roadmap-island.has-3d .roadmap-gfx svg { visibility:hidden; }

/* Dot */
.roadmap-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.roadmap-island:hover .roadmap-dot { transform:scale(1.4); box-shadow:0 0 12px rgba(139,26,26,0.3); }
.roadmap-island.is-key .roadmap-dot { width:14px; height:14px; }
.roadmap-island.is-key .roadmap-dot::after { content:''; position:absolute; top:-4px; left:-4px; right:-4px; bottom:-4px; border-radius:50%; border:1px solid var(--accent); opacity:0.2; }

/* Labels */
.roadmap-label { text-align:center; white-space:normal; width:100%; }
.roadmap-badges { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:6px; }
.roadmap-trl { font-size:10px; font-weight:600; letter-spacing:0.5px; color:var(--accent); background:rgba(139,26,26,0.06); padding:2px 7px; border-radius:3px; }
.roadmap-title { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; color:var(--text-primary); margin-bottom:3px; letter-spacing:-0.3px; }
.roadmap-island.is-key .roadmap-title { color:var(--accent); font-size:20px; }
.roadmap-subtitle { font-size:13px; color:var(--text-light); font-weight:400; }

/* Hover detail */
.roadmap-hover-detail {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    text-align: center;
    pointer-events: none;
    width: 100%;
    /* max-width set inline from config */
}
.roadmap-island:hover .roadmap-hover-detail,
.roadmap-island.is-active .roadmap-hover-detail { opacity:1; transform:translateY(0); pointer-events:auto; }
.roadmap-hover-detail p { font-size:13px; color:var(--text-secondary); line-height:1.65; margin-bottom:10px; }
.roadmap-metrics { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; }
.roadmap-metric { font-size:11px; font-weight:600; letter-spacing:0.3px; color:var(--accent); background:rgba(139,26,26,0.06); padding:3px 9px; border-radius:3px; }

/* SVG animations */
.roadmap-island .drone-prop { transform-origin:center; }
.roadmap-island:hover .drone-prop, .roadmap-island.is-active .drone-prop { animation:rmPropSpin 0.3s linear infinite; }
@keyframes rmPropSpin { to{transform:rotate(360deg)} }
.roadmap-island:hover .quad-leg, .roadmap-island.is-active .quad-leg { animation:rmLegWalk 0.6s ease-in-out infinite alternate; }
@keyframes rmLegWalk { from{transform:rotate(-8deg)} to{transform:rotate(8deg)} }
.roadmap-island:hover .mesh-line, .roadmap-island.is-active .mesh-line { animation:rmMeshPulse 2s ease-in-out infinite; }
@keyframes rmMeshPulse { 0%,100%{opacity:0.08} 50%{opacity:0.25} }
.roadmap-island:hover .uav-body, .roadmap-island.is-active .uav-body { animation:rmUavBob 2.5s ease-in-out infinite; }
@keyframes rmUavBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }

/* ── Track badge (mobile only, hidden on desktop) ── */
.roadmap-track-badge { display:none; }

/* ── MOBILE ── */
@media (max-width: 768px) {
    .roadmap-section { padding:60px 0 40px; }
    .roadmap-section .section-header { padding:0 20px; margin-bottom:32px; }
    .roadmap-scroll-hint { display:none; }

    /* Canvas wrapper — on mobile, canvas lives inside active island gfx */
    .roadmap-canvas-wrapper { position:relative; }
    #roadmapCanvas {
        display:block;
        width:100%!important;
        height:100%!important;
        position:absolute;
        top:0; left:0;
    }

    /* Scroll container — normal document flow on mobile */
    .roadmap-scroll-container { overflow:visible; cursor:default; }

    /* Track — vertical card stack */
    .roadmap-track {
        position:relative;
        width:100%!important;
        height:auto!important;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:0;
        padding:0 16px;
    }

    /* Hide desktop-only structural elements */
    .roadmap-quarter-divider,
    .roadmap-quarter-label,
    .roadmap-spine,
    .roadmap-spine-notch,
    .roadmap-track-label,
    .roadmap-path-svg { display:none; }

    /* NO vertical center line on mobile */

    /* ── Island cards — HUD wireframe style ── */
    .roadmap-island {
        position:relative!important;
        left:auto!important;
        top:auto!important;
        bottom:auto!important;
        width:100%!important;
        max-width:420px;
        transform:none!important;
        padding:0 0 14px 0;
        margin-bottom:32px;
        visibility:visible!important;
        border-radius:0;
        background:transparent;
        border:none;
        border-left:2px solid var(--accent);
        overflow:visible;
        transition:border-color 0.4s ease;
        z-index:2;
        align-items:stretch!important;
    }
    .roadmap-island:hover { transform:none!important; }

    /* ── HUD frame — top/bottom tick marks + right bracket ── */
    .roadmap-island::before {
        content:'';
        position:absolute;
        inset:-1px;
        pointer-events:none;
        z-index:3;
        background:
            /* Top edge — left tick + right bracket arm */
            linear-gradient(to right,
                var(--accent) 0px,
                var(--accent) 20px,
                transparent 20px,
                transparent calc(100% - 16px),
                rgba(139,26,26,0.4) calc(100% - 16px))
                left top / 100% 1px no-repeat,
            /* Bottom edge — left tick + right bracket arm */
            linear-gradient(to right,
                var(--accent) 0px,
                var(--accent) 20px,
                transparent 20px,
                transparent calc(100% - 16px),
                rgba(139,26,26,0.4) calc(100% - 16px))
                left bottom / 100% 1px no-repeat,
            /* Right edge — top & bottom bracket vertical arms */
            linear-gradient(to bottom,
                rgba(139,26,26,0.4) 0px,
                rgba(139,26,26,0.4) 12px,
                transparent 12px,
                transparent calc(100% - 12px),
                rgba(139,26,26,0.4) calc(100% - 12px))
                right top / 1px 100% no-repeat;
    }

    /* ── Node dots at left corners ── */
    .roadmap-island::after {
        content:'';
        position:absolute;
        left:-3px;
        top:-3px;
        bottom:-3px;
        width:6px;
        pointer-events:none;
        z-index:4;
        background:
            radial-gradient(circle 3px, rgba(139,26,26,0.75) 55%, transparent 56%)
                center top / 6px 6px no-repeat,
            radial-gradient(circle 3px, rgba(139,26,26,0.75) 55%, transparent 56%)
                center bottom / 6px 6px no-repeat;
    }

    /* Active island — brighten frame */
    .roadmap-island.is-mobile-active {
        border-left-color:var(--accent-light);
    }
    .roadmap-island.is-mobile-active::before {
        background:
            linear-gradient(to right,
                var(--accent-light) 0px,
                var(--accent-light) 20px,
                transparent 20px,
                transparent calc(100% - 16px),
                rgba(139,26,26,0.55) calc(100% - 16px))
                left top / 100% 1px no-repeat,
            linear-gradient(to right,
                var(--accent-light) 0px,
                var(--accent-light) 20px,
                transparent 20px,
                transparent calc(100% - 16px),
                rgba(139,26,26,0.55) calc(100% - 16px))
                left bottom / 100% 1px no-repeat,
            linear-gradient(to bottom,
                rgba(139,26,26,0.55) 0px,
                rgba(139,26,26,0.55) 12px,
                transparent 12px,
                transparent calc(100% - 12px),
                rgba(139,26,26,0.55) calc(100% - 12px))
                right top / 1px 100% no-repeat;
    }
    .roadmap-island.is-mobile-active::after {
        background:
            radial-gradient(circle 3px, rgba(139,26,26,0.95) 55%, transparent 56%)
                center top / 6px 6px no-repeat,
            radial-gradient(circle 3px, rgba(139,26,26,0.95) 55%, transparent 56%)
                center bottom / 6px 6px no-repeat;
    }

    /* ── Track badge — section-eyebrow style ── */
    .roadmap-track-badge {
        display:flex;
        align-items:center;
        gap:10px;
        padding:10px 14px 6px;
        font-family:'Space Grotesk',sans-serif;
        font-size:10px;
        font-weight:600;
        letter-spacing:3px;
        text-transform:uppercase;
        color:var(--accent);
    }
    .roadmap-track-badge .badge-line {
        width:24px;
        height:1px;
        background:var(--accent);
        flex-shrink:0;
    }

    /* ── Quarter label (on each card) ── */
    .roadmap-mobile-quarter {
        font-family:'Space Grotesk',sans-serif;
        font-size:11px;
        font-weight:600;
        letter-spacing:1.5px;
        color:var(--text-light);
        text-transform:uppercase;
        text-align:left;
        padding:4px 14px 2px;
        opacity:0.5;
    }

    /* ── Labels inside card ── */
    .roadmap-label {
        padding:0 14px;
        margin-bottom:6px!important;
        text-align:left!important;
    }
    .roadmap-title {
        font-size:20px!important;
    }
    .roadmap-island.is-key .roadmap-title {
        font-size:22px!important;
    }

    /* ── GFX area — 3D canvas lives here ── */
    .roadmap-gfx {
        position:relative;
        height:280px!important;
        margin:8px 0 0 0!important;
        border-radius:0;
        overflow:hidden;
        background:rgba(0,0,0,0.015);
        border-top:1px solid rgba(139,26,26,0.06);
        border-bottom:1px solid rgba(139,26,26,0.06);
    }
    .roadmap-island.is-key .roadmap-gfx {
        height:320px!important;
    }
    /* Hide SVG fallbacks only when 3D is active */
    .roadmap-island.has-3d .roadmap-gfx svg { display:none!important; }
    /* Phases without 3D: collapse the gfx area */
    .roadmap-island:not(.has-3d) .roadmap-gfx {
        height:auto!important;
        min-height:0;
        border:none;
        background:none;
        margin:0!important;
    }
    .roadmap-island:not(.has-3d) .roadmap-gfx::before { display:none; }

    /* ── Dot — hidden on mobile ── */
    .roadmap-dot { display:none; }

    /* ── Hover detail — always visible on mobile ── */
    .roadmap-hover-detail {
        opacity:1!important;
        transform:translateY(0)!important;
        pointer-events:auto!important;
        padding:10px 14px 4px;
        max-width:none!important;
        margin:0!important;
    }
    .roadmap-hover-detail p {
        font-size:13px;
        line-height:1.6;
        text-align:left;
    }

    /* Metrics */
    .roadmap-metrics {
        justify-content:flex-start;
        padding:0;
    }
    .roadmap-metric {
        border-radius:0;
    }

    /* ── Badges ── */
    .roadmap-badges {
        justify-content:flex-start;
        margin-bottom:4px;
    }
    .roadmap-trl {
        border-radius:0;
    }

    /* ── Key milestones ── */
    .roadmap-island.is-key {
        border-left-width:3px;
    }

    /* ── Loading state for gfx ── */
    .roadmap-gfx::before {
        content:'';
        position:absolute;
        top:50%; left:50%;
        width:20px; height:20px;
        margin:-10px 0 0 -10px;
        border:2px solid rgba(139,26,26,0.1);
        border-top-color:var(--accent);
        border-radius:50%;
        animation:rmMobileLoading 0.8s linear infinite;
        z-index:0;
        opacity:0.4;
    }
    .roadmap-island.is-mobile-active .roadmap-gfx::before {
        opacity:0;
        transition:opacity 0.3s ease 0.5s;
    }
    @keyframes rmMobileLoading {
        to { transform:rotate(360deg); }
    }
}