/* ============================================================================
 * Soil Depot, home hero Texas "dispatch map" (right of the hero stage).
 *
 * A real cartographic road map (cream Texas, RED highways, county/road detail,
 * city names) with serious depth (raised relief + layered float shadow) so it
 * pops off the hero video, a slow sheen sweep for life, and a premium Soil Depot
 * layer on top: jewel green Plano hub, gold metro markers, and thick green haul
 * routes each carrying a sweeping gold light pulse. Front page only.
 * ========================================================================== */
.sdh-txmap{
  position:absolute;z-index:6;
  right:clamp(6px,1.6vw,38px);
  /* Anchor the overlay to the stage BOTTOM with a fixed gap so the dispatch foot
     ("Opens...") keeps consistent spacing above the carousel at every height. The
     svh width term scales the whole map down on short viewports (the svg is
     width:100%/height:auto) so it always fits the stage without overflowing. */
  top:auto;bottom:clamp(28px,4vh,56px);transform:none;
  width:min(474px,41vw,calc(56svh - 40px));
  display:flex;flex-direction:column;gap:9px;
  padding:0 4px;
  opacity:0;transition:opacity .6s cubic-bezier(.16,.84,.44,1);
}
.sdh-txmap.is-in{opacity:1}
/* darker radial backdrop to lift the map off the busy video */
.sdh-txmap::before{content:"";position:absolute;inset:-16% -10% -8%;z-index:-1;
  background:radial-gradient(56% 52% at 56% 50%,rgba(6,4,2,.52),rgba(6,4,2,.22) 56%,transparent 76%)}

/* heading (over the dark video, above the map; clears the PLANO chip) */
.sdh-txmap-head{display:flex;flex-direction:column;gap:3px;text-align:right;padding:0 6px}
.sdh-txmap-eyebrow{font:800 12px/1 'DM Sans',system-ui,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#f0d6a0}
.sdh-txmap-sub{font:500 12.5px/1.3 'DM Sans',system-ui,sans-serif;color:rgba(247,243,232,.86)}

/* cream Texas with strong layered float shadow (pops off the video) */
.sdh-txmap-svg{width:100%;height:auto;display:block;overflow:visible}
.tx-outline{fill:#efe7cf;fill-opacity:.98;stroke:#8a7440;stroke-width:1.4;stroke-linejoin:round;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.42)) drop-shadow(0 14px 24px rgba(0,0,0,.5)) drop-shadow(0 42px 66px rgba(0,0,0,.55))}
/* raised-relief lighting over the map face (top highlight -> bottom shade) */
.tx-relief{fill:url(#reliefGrad);pointer-events:none}

/* atlas layers (crisp at any scale) */
.tx-counties{fill:none;stroke:rgba(92,78,56,.14);stroke-width:.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.tx-rsec{fill:none;stroke:rgba(108,90,64,.55);stroke-width:.7;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.tx-rmaj{fill:none;stroke:#c0392b;stroke-width:1.7;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}

/* slow premium sheen sweep across the map for life */
.tx-sheen{mix-blend-mode:screen;opacity:.5;animation:txSheen 7s ease-in-out infinite}
@keyframes txSheen{0%{transform:translateX(0)}52%{transform:translateX(1320px)}100%{transform:translateX(1320px)}}

/* context city dots + names */
.tx-ctx .txc-dot{fill:#3c2f1c;stroke:#efe7cf;stroke-width:.6}
.txc-label{fill:rgba(48,38,24,.85);font:600 18px/1 'DM Sans',system-ui,sans-serif;
  paint-order:stroke;stroke:rgba(239,231,207,.9);stroke-width:3px;stroke-linejoin:round}

/* Soil Depot haul routes: thick deep-green + a sweeping GOLD light pulse */
.txc{fill:none;stroke:rgba(47,125,50,.4);stroke-width:2.1}
.txr-base{fill:none;stroke:#1f7d38;stroke-width:4.7;stroke-linecap:round;opacity:.94}
.txr{fill:none;stroke:#f3cb5e;stroke-width:4.7;stroke-linecap:round;stroke-dasharray:42 400;
  filter:drop-shadow(0 0 2.5px rgba(243,203,94,.6));animation:txFlow 2.4s linear infinite;animation-delay:var(--d,0s)}
@keyframes txFlow{from{stroke-dashoffset:442}to{stroke-dashoffset:0}}

/* served metros: jewel gold dot + thin green ring; jewel green beacon hub */
.txn-halo{fill:none;stroke:rgba(47,125,50,.6);stroke-width:1.8}
.txn-halo-sm{stroke:rgba(47,125,50,.5);stroke-width:1.4}
.txn{fill:url(#goldJewel);stroke:#6b4a1e;stroke-width:1.8;filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.4))}
.txn-sm{fill:url(#goldJewel);stroke:#6b4a1e;stroke-width:1.6;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.txn-hub-ring{fill:none;stroke:#c4971f;stroke-width:2.3}
.txn-hub{fill:url(#greenJewel);stroke:#11401d;stroke-width:2.3;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.txn-hub-core{fill:#eafaef;opacity:.85}
.txring{fill:none;stroke:rgba(47,125,50,.5);stroke-width:2.3;transform-box:fill-box;transform-origin:center;animation:txPulse 3s ease-out infinite}
.txring2{animation-delay:1.5s}
@keyframes txPulse{0%{transform:scale(.5);opacity:.6}100%{transform:scale(2.3);opacity:0}}

/* served-metro labels: ink with cream halo */
.txlabel{fill:#241b0f;font:800 28px/1 'DM Sans',system-ui,sans-serif;
  paint-order:stroke;stroke:rgba(239,231,207,.95);stroke-width:5px;stroke-linejoin:round}
.txlabel-hub{fill:#11431f}
.txlabel-dim{fill:rgba(40,30,18,.8);font-size:25px;font-weight:700}
.txnode{cursor:default}
.txnode .txlabel{transition:fill .2s ease}
.txnode .txn,.txnode .txn-hub{transition:filter .2s ease}
.tx-nodes:hover .txnode:not(:hover){opacity:.55}
.txnode:hover .txn{filter:brightness(1.12) drop-shadow(0 1.5px 2px rgba(0,0,0,.4))}
.txnode:hover .txlabel{fill:#1f7a3a}

/* dispatch footer: light frosted bar */
.sdh-txmap-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding:11px 15px;
  background:rgba(243,237,222,.94);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(90,70,40,.22);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.42)}
.sdh-txmap-status{display:flex;align-items:center;gap:8px;font:500 12.5px/1 'DM Sans',system-ui,sans-serif;color:rgba(40,30,18,.7)}
.sdh-txmap-status b{color:#1c1408;font-weight:700}
.sdh-dispatch-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.sdh-dispatch-dot[data-state="open"]{background:#1f9c4a;animation:sdhDispatchPulse 2.4s infinite}
.sdh-dispatch-dot[data-state="closed"]{background:#c8881f}
@keyframes sdhDispatchPulse{0%{box-shadow:0 0 0 0 rgba(31,156,74,.5)}70%{box-shadow:0 0 0 6px rgba(31,156,74,0)}100%{box-shadow:0 0 0 0 rgba(31,156,74,0)}}
.sdh-txmap-call{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font:800 16px/1 'DM Sans',system-ui,sans-serif;color:#1c5a2e;letter-spacing:.2px;transition:color .2s ease}
.sdh-txmap-call svg{width:15px;height:15px;flex:0 0 auto}
.sdh-txmap-call:hover{color:#11431f}

@media (max-width:1100px){ .sdh-txmap{display:none} }
@media (prefers-reduced-motion:reduce){
  .sdh-txmap{transition:none;opacity:1}
  .txr,.txring,.tx-sheen,.sdh-dispatch-dot{animation:none}
  .txr{stroke-dasharray:42 400;stroke-dashoffset:0}
}