/* ============ LOGISTICS STAGE ============ */
#logistics { position: relative; background: linear-gradient(180deg, #020b18 0%, #0a1e3d 35%, #0D2540 60%, #091428 100%); color: #fff; overflow: hidden; }
.lm-stage { position: relative; display: flex; flex-direction: column; gap: 3rem; padding-block: var(--section-pad); }
#lm-bg-layer { position: absolute; inset: 0; pointer-events: none; }
#lm-canvas-mount { position: absolute; inset: 0; }
#lm-canvas-mount canvas { width: 100%; height: 100%; display: block; }
.lm-glow { position: absolute; border-radius: 999px; filter: blur(110px); }
.lm-glow-a { top: 20%; left: 20%; width: 480px; height: 480px; background: rgba(55, 131, 197, 0.15); }
.lm-glow-b { bottom: 20%; right: 20%; width: 380px; height: 380px; background: rgba(111, 179, 232, 0.10); }
#lm-banner {
    display: block;
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    padding-inline: var(--gutter);
}
#lm-banner h2 {
    font-size: clamp(2.5rem, 12vw, 5rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}
#lm-delivery { display: none; }
#lm-countdown, #lm-map-stage { position: relative; z-index: 1; padding-inline: var(--gutter); }
.lm-map-title { text-align: center; font-size: clamp(1.75rem, 4.5vw, 5rem); margin-bottom: clamp(2rem, 5vw, 4rem); white-space: nowrap; }
#typing-area-wrapper { color: var(--primary-soft); }
/* Countdown card (.cd-*) — bright bordered card per design system */
.cd-card { position: relative; width: 100%; max-width: 1100px; margin-inline: auto; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3rem); background: rgba(255,255,255,0.04); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cd-label { font: 600 0.8rem/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75); padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.3); margin-bottom: 1.5rem; }
#dispatch-countdown-display { display: flex; align-items: baseline; gap: clamp(0.5rem, 2.5vw, 2rem); }
.cd-unit { display: flex; align-items: baseline; gap: 0.35rem; }
.cd-num { font: 700 clamp(2.5rem, 8.5vw, 8.5rem)/1 var(--font-head); letter-spacing: -0.04em; }
.cd-suffix { font: 700 clamp(1.1rem, 2.8vw, 2.8rem)/1 var(--font-head); opacity: 0.5; }
/* Desktop cinematic layout */
@media (min-width: 1024px) {
    .lm-stage { display: block; height: 100vh; padding-block: 0; }
    #lm-banner, #lm-delivery, #lm-countdown, #lm-map-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    #lm-banner { display: flex; padding-inline: 0; margin-bottom: 0; }
    #lm-banner h2 { font-size: 10vw; letter-spacing: 0.28em; text-transform: uppercase; white-space: nowrap; }
    .lm-letter { display: inline-block; }
    #lm-delivery { gap: 2rem; text-align: center; }
    #lm-delivery img { width: 7rem; filter: invert(1); opacity: 0.9; }
    #lm-delivery p { max-width: 32rem; font-size: 1.35rem; color: rgba(255,255,255,0.9); }
    #lm-delivery strong { color: var(--primary-soft); }
    /* Cap the distribution map so it isn't oversized on wide screens, and
       tighten the title + zone-card spacing so the whole beat (title + map +
       zones) fits comfortably within one viewport instead of the title being
       pushed off-screen by an overly tall stack. */
    #lm-map-stage .panel-dist-new { width: 100%; max-width: 900px; margin-inline: auto; }
    #lm-map-stage .lm-map-title { margin-bottom: clamp(1rem, 2.5vw, 1.75rem); font-size: clamp(1.5rem, 3.2vw, 3rem); }
    #lm-map-stage .dist-zone { padding: 18px 22px; }
    #lm-map-stage .dist-zones { gap: 12px; }
    #lm-map-stage .zone-header-row { margin-bottom: 10px; }
    #lm-map-stage .dist-zone-badge, #lm-map-stage .zone-icon { transform: scale(0.9); }
    .js #lm-banner, .js #lm-delivery, .js #lm-countdown, .js #lm-map-stage { opacity: 0; }
    /* Banner/delivery/countdown are transient cinematic layers — never interactive.
       Map stage is the only layer that must accept clicks (zone cards, map focus). GSAP's
       autoAlpha toggles visibility once the timeline runs, but this covers the gap before
       the first tween fires and guards against stacked absolutely-positioned layers
       intercepting clicks meant for #lm-map-stage. */
    .js #lm-banner, .js #lm-delivery, .js #lm-countdown { pointer-events: none; }
    .js #lm-map-stage { pointer-events: auto; }
}

@media (min-width: 1440px) {
    #lm-map-stage .panel-dist-new {
        max-width: 1100px;
    }
    #lm-map-stage .lm-map-title {
        font-size: clamp(3rem, 4vw, 4.5rem);
    }
}

@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
    .js #lm-countdown, .js #lm-map-stage { opacity: 1; }
}

/* ============ DISTRIBUTION MAP + ZONES (ported verbatim from legacy) ============ */
        .panel-dist-new {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 8fr 4fr;
            gap: 20px;
            align-items: stretch;
        }

        .dist-map-panel {
            background: #0F3360;
            border-radius: 12px;
            padding: 20px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .dist-map-container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
        }

        .australia-map {
            width: 100%;
            max-width: 100%;
            height: auto;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
        }

        /* Map Interaction States */
        #map-zoom-group {
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            /* Pin the box the px transform-origin resolves against — Safari's
               default for transform-box on SVG children has historically
               differed from Chrome/Firefox, which throws this origin off
               and scrambles the pan/zoom in Safari without this. */
            transform-box: view-box;
            transform-origin: 217px 206px;
        }
        
        .australia-map.view-local #map-zoom-group {
            /* Centers on Victoria's actual bounding box (not the HQ dot,
               which sits near VIC's southern edge) so the state outline
               is evenly framed instead of crammed into the top half. */
            transform: translate(-100px, -49px) scale(3.5);
        }
        
        .australia-map.view-local .interstate-routes {
            opacity: 0;
            pointer-events: none;
        }
        
        .australia-map.view-local .local-waves {
            opacity: 1 !important;
        }
        
        .interstate-routes {
            transition: opacity 0.5s ease;
        }

        .australia-map.view-global #map-zoom-group {
            /* Centers on the combined bounding box of the export routes +
               HQ dot (Asia/Pacific destinations + Australia), not just the
               dot, so destinations and labels don't get pushed to the panel edge. */
            transform: translate(-47px, 21px) scale(0.32);
        }

        .australia-map.view-global .interstate-routes {
            opacity: 0;
            pointer-events: none;
        }

        .global-routes, .global-country {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .australia-map.view-global .global-routes,
        .australia-map.view-global .global-country {
            opacity: 1;
            pointer-events: auto;
        }

        .map-state {
            fill: rgba(255, 255, 255, 0.08);
            stroke: rgba(255, 255, 255, 0.25);
            stroke-width: 0.5;
            transition: fill 0.3s;
            vector-effect: non-scaling-stroke;
        }

        .australia-map.view-local .map-state.vic {
            fill: rgba(255, 255, 255, 0.03);
            stroke: var(--accent);
            stroke-width: 1.5px;
            transition: fill 0.3s ease;
        }

        .base-location {
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            transform-box: view-box;
            transform-origin: 217px 206px;
        }

        .australia-map.view-local .base-location {
            transform: scale(0.6);
        }

        .australia-map.view-global .base-location {
            transform: scale(2.2);
        }

        /* Base city & state tooltips styling */
        .base-tooltip {
            font-family: var(--font-display);
            font-size: 5px; /* scale matches SVG coordinate space perfectly */
            font-weight: var(--weight-heading);
            fill: white;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(4px);
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        /* Focus Tooltip styling */
        .australia-map.view-local .base-location.focused-location .local-tooltip {
            opacity: 1;
            transform: translateY(0);
        }

        .australia-map.view-national .base-location.focused-location .national-tooltip {
            opacity: 1;
            transform: translateY(0);
        }

        .australia-map.view-global .base-location.focused-location .global-tooltip {
            opacity: 1;
            transform: translateY(0);
        }

        /* State Tooltip styling (e.g. VIC) */
        .state-tooltip {
            font-family: var(--font-display);
            font-size: 8px;
            font-weight: var(--weight-heading);
            fill: var(--accent);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(4px);
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        /* Victoria click highlight and state tooltip reveal in local view */
        .australia-map.view-local .map-state.vic.focused-state {
            fill: rgba(111, 179, 232, 0.18) !important;
        }

        .australia-map.view-local .map-state.vic.focused-state ~ .state-tooltip.vic-tooltip {
            opacity: 1;
            transform: translateY(0);
        }

        .animated-line {
            fill: none;
            stroke: var(--light-tint);
            stroke-width: 1.5;
            stroke-dasharray: 6 6;
            animation: dash-move 3s linear infinite;
            opacity: 0.8;
            vector-effect: non-scaling-stroke;
        }

        @keyframes dash-move {
            to { stroke-dashoffset: -24; }
        }

        .pulse-dot {
            fill: var(--primary);
        }

        .pulse-ring {
            fill: none;
            stroke: var(--primary);
            stroke-width: 1.5;
            vector-effect: non-scaling-stroke;
        }

        .route-group text {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translate(var(--tx, 0px), var(--ty, 10px));
            fill: white;
            font-family: var(--font-display);
        }

        .route-group text.focused-label {
            opacity: 1;
            transform: translate(0px, 0px);
        }

        /* Reduce overall size of country and city tooltips as requested */
        .global-routes .route-group text {
            font-size: 25px !important;
            letter-spacing: 0.5px;
            font-weight: var(--weight-bold);
        }

        .interstate-routes .route-group text {
            font-size: 7px !important;
            letter-spacing: 0.5px;
            font-weight: var(--weight-bold);
        }

        @media (max-width: 992px) {
            .interstate-routes .route-group text {
                font-size: 14px !important;
            }
            .global-routes .route-group text {
                font-size: 40px !important;
            }
        }

        @keyframes twinkleLabel {
            0% { opacity: 0; transform: translate(var(--tx, 0px), calc(var(--ty, 10px) + 5px)); }
            20% { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 10px)); }
            80% { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 10px)); }
            100% { opacity: 0; transform: translate(var(--tx, 0px), calc(var(--ty, 10px) - 5px)); }
        }

        .starlight-label {
            opacity: 0; /* Default invisible */
            pointer-events: auto; /* Allow hovering if needed */
        }

        .twinkle-active {
            animation: twinkleLabel var(--duration, 4s) ease-in-out forwards;
        }

        /* Paused state override */
        .labels-paused .starlight-label {
            animation: none !important;
            opacity: 1 !important;
            transform: translate(var(--tx, 0px), var(--ty, 10px)) !important;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        /* Focus state override (clicked dot) */
        .map-has-focus .starlight-label {
            opacity: 0 !important;
            animation: none !important;
            transition: opacity 0.3s ease;
        }
        
        .map-has-focus .starlight-label.focused-label {
            opacity: 1 !important;
            transform: translate(var(--tx, 0px), var(--ty, 10px)) !important;
        }

        .local-waves circle, .global-routes circle {
            vector-effect: non-scaling-stroke;
        }

        .dist-zones {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .dist-zone {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 30px;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .dist-zone:hover {
            border-color: var(--primary);
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-4px);
        }
        
        .dist-zone.active {
            border-color: var(--primary);
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
            transform: translateY(-4px);
        }

        .zone-header-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .zone-icon {
            width: 48px;
            height: 48px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-h3);
            transition: transform 0.2s ease, background 0.2s ease;
        }

        .dist-zone-badge {
            display: inline-block;
            text-align: center;
            white-space: nowrap;
            padding: 6px 16px;
            border-radius: 999px;
            font-size: var(--text-tiny);
            font-weight: var(--weight-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            background: rgba(255, 255, 255, 0.05);
            transition: all 0.2s ease;
        }

        .dist-zone h4 {
            font-family: var(--font-display);
            font-size: var(--text-h3);
            font-weight: var(--weight-heading);
            color: white;
            margin-bottom: 8px;
            transition: color 0.2s ease;
        }

        .dist-zone p {
            font-size: var(--text-body);
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.5;
            margin-bottom: 16px;
            transition: color 0.2s ease;
        }

        @media (max-width: 992px) {
            .panel-dist-new {
                display: flex !important;
                flex-direction: column-reverse;
                gap: 16px;
            }
            .dist-map-panel {
                min-height: 350px;
                border-radius: 20px;
            }
            .dist-zones {
                flex-direction: row;
                gap: 8px;
            }
            .dist-zone {
                padding: 12px 6px;
                border-radius: 16px;
                flex: 1;
                align-items: center;
                text-align: center;
            }
            .zone-header-row {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-bottom: 6px;
                gap: 8px;
                width: 100%;
            }
            .dist-zone h4 {
                font-size: 11px;
                margin-bottom: 0;
                line-height: 1.2;
            }
            .dist-zone p {
                display: none;
            }
            .zone-icon {
                width: 32px;
                height: 32px;
            }
            .dist-zone-badge {
                font-size: 9px;
                padding: 4px 6px;
                letter-spacing: 0;
            }
        }


        .dist-map-panel {
            background: transparent;
            padding: 0;
            border: none;
            box-shadow: none;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

    /* Typing animation styles */
    .typing-cursor {
        display: inline-block;
        font-weight: 300;
        color: var(--primary);
        animation: cursorBlink 0.7s step-end infinite;
        margin-left: 2px;
    }
    @keyframes cursorBlink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
    #typing-area {
        border-right: none;
    }

/* ============ STAR LAYERS + CURSOR GLOW (ported verbatim from legacy) ============ */
    /* Starry night star layers */
    .lm-stars {
        position: absolute;
        inset: 0;
        border-radius: inherit;
    }
    .lm-stars-sm {
        background-image:
            radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.8) 50%, transparent 100%),
            radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.6) 50%, transparent 100%),
            radial-gradient(1px 1px at 40% 8%, rgba(255,255,255,0.7) 50%, transparent 100%),
            radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.5) 50%, transparent 100%),
            radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.8) 50%, transparent 100%),
            radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.6) 50%, transparent 100%),
            radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,0.5) 50%, transparent 100%),
            radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,0.7) 50%, transparent 100%),
            radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.6) 50%, transparent 100%),
            radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,0.5) 50%, transparent 100%),
            radial-gradient(1px 1px at 5% 90%, rgba(255,255,255,0.7) 50%, transparent 100%),
            radial-gradient(1px 1px at 48% 28%, rgba(255,255,255,0.6) 50%, transparent 100%),
            radial-gradient(1px 1px at 78% 62%, rgba(255,255,255,0.5) 50%, transparent 100%),
            radial-gradient(1px 1px at 22% 48%, rgba(255,255,255,0.7) 50%, transparent 100%),
            radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,0.6) 50%, transparent 100%),
            radial-gradient(1px 1px at 65% 92%, rgba(255,255,255,0.5) 50%, transparent 100%);
        animation: twinkle 4s ease-in-out infinite alternate;
    }
    .lm-stars-md {
        background-image:
            radial-gradient(1.5px 1.5px at 18% 42%, rgba(255,255,255,0.9) 50%, transparent 100%),
            radial-gradient(1.5px 1.5px at 52% 18%, rgba(255,255,255,0.7) 50%, transparent 100%),
            radial-gradient(1.5px 1.5px at 75% 38%, rgba(255,255,255,0.8) 50%, transparent 100%),
            radial-gradient(1.5px 1.5px at 33% 72%, rgba(255,255,255,0.6) 50%, transparent 100%),
            radial-gradient(1.5px 1.5px at 88% 28%, rgba(255,255,255,0.7) 50%, transparent 100%),
            radial-gradient(1.5px 1.5px at 8% 78%, rgba(255,255,255,0.8) 50%, transparent 100%),
            radial-gradient(1.5px 1.5px at 62% 55%, rgba(255,255,255,0.6) 50%, transparent 100%),
            radial-gradient(1.5px 1.5px at 42% 88%, rgba(255,255,255,0.7) 50%, transparent 100%);
        animation: twinkle 5s ease-in-out 1s infinite alternate;
    }
    .lm-stars-lg {
        background-image:
            radial-gradient(2px 2px at 30% 25%, rgba(255,255,255,1) 50%, transparent 100%),
            radial-gradient(2px 2px at 68% 48%, rgba(255,255,255,0.9) 50%, transparent 100%),
            radial-gradient(2px 2px at 45% 75%, rgba(255,255,255,0.8) 50%, transparent 100%),
            radial-gradient(2px 2px at 82% 15%, rgba(255,255,255,0.9) 50%, transparent 100%),
            radial-gradient(2px 2px at 12% 55%, rgba(255,255,255,1) 50%, transparent 100%);
        animation: twinkle 6s ease-in-out 2s infinite alternate;
    }
    @keyframes twinkle {
        0% { opacity: 0.6; }
        100% { opacity: 1; }
    }
    .lm-cursor-glow {
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(55,131,197,0.15) 0%, rgba(55,131,197,0.05) 35%, transparent 70%);
        transition: opacity 0.5s ease;
        opacity: 0;
        will-change: left, top;
    }

/* Three.js replaces the CSS stars on desktop — but only once it has actually confirmed
   it's running (see js/logistics-scene.js). If WebGL init fails for any reason (Safari's
   WebGL context limits are the known culprit), .lm-scene-active never gets added and the
   CSS stars stay visible as a fallback, instead of the section going blank. */
@media (min-width: 1024px) { .lm-scene-active .lm-stars { display: none; } }
@media (prefers-reduced-motion: reduce) { .lm-stars { display: block; } } /* reduced-motion users keep CSS stars since Three.js is disabled */