update logistices

src/components/sections/IndustryStack.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
-import IndustryStackMap from "./IndustryStackMap";
+import IndustryWorldMap from "./IndustryWorldMap";
 
 type Tab = "ch" | "so";
 
@@ -85,8 +85,7 @@ function Card({ sec }: { sec: Section }) {
   return (
     <section className="istk" aria-label={`${sec.title} solutions`}>
       <div className="istk__card">
-        <span className="istk__map" aria-hidden="true" />
-        <IndustryStackMap />
+        <IndustryWorldMap />
 
         <div className="istk__row">
           {/* Image panel */}
@@ -186,25 +185,16 @@ const CSS = `
   padding: 44px;
 }
 
-/* Static dotted world map (image) — inverted to light dots on the dark card */
-#ind-stack .istk__map {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  background: url('/images/bg-map.png') center / 100% 100% no-repeat;
-  filter: invert(1) brightness(1.4);
-  opacity: 0.16;
-  pointer-events: none;
-  animation: istkMapBreathe 7s ease-in-out infinite;
-}
-
-/* Animated logistics overlay (hub pulses + travelling packets) sits over the map */
-#ind-stack .istk__canvas {
+/* Procedurally-drawn dotted world map (continent dots + hub pulses + routes).
+   Vector canvas, so it never distorts on the card's aspect ratio the way a
+   stretched bitmap did. Faint gray dots read as a subtle backdrop on the dark card. */
+#ind-stack .ind__map {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
-  z-index: 1;
+  z-index: 0;
+  opacity: 0.7;
   pointer-events: none;
 }
 
@@ -307,10 +297,6 @@ const CSS = `
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
 }
-@keyframes istkMapBreathe {
-  0%, 100% { opacity: 0.12; }
-  50% { opacity: 0.2; }
-}
 
 /* ---- Responsive ---- */
 @media (max-width: 1024px) {
@@ -321,6 +307,5 @@ const CSS = `
 }
 @media (prefers-reduced-motion: reduce) {
   #ind-stack .istk__list li { animation: none !important; opacity: 1; transform: none; }
-  #ind-stack .istk__map { animation: none !important; }
 }
 `;