/* ============================================================
   DLG fx-map3d: tilted 3D coverage map with animated routes
   Drop-in for .cov__map on the home page. All rules scoped.
   ============================================================ */
.fx-map3d{
  --fx-rx:50deg;            /* table tilt */
  --fx-rz:-8deg;            /* table turn */
  --fx-persp:1500px;
  --fx-h:34px;              /* market beam height, the same for all seven */
  --fx-green:#7ED957;
  --fx-green-2:#4E9B34;
  --fx-blue:#3D8BF2;
  --fx-blue-2:#1E6FD9;
  --fx-tx:0deg;             /* mouse tilt, set by JS */
  --fx-ty:0deg;
  position:relative;
  margin:0;
}
.fx-map3d .fx-map3d-stage{
  position:relative;
  aspect-ratio:775/560;
  perspective:var(--fx-persp);
  perspective-origin:50% 26%;
}
.fx-map3d .fx-map3d-tilt{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--fx-ty)) rotateY(var(--fx-tx));
  transform-origin:50% 55%;
}
.fx-map3d .fx-map3d-plane{
  position:absolute;left:50%;top:52%;
  width:88%;
  padding:4.2% 4.6% 4.6%;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(var(--fx-rx)) rotateZ(var(--fx-rz));
  border-radius:22px;
  background:
    radial-gradient(ellipse 70% 60% at 62% 44%,rgba(61,139,242,.24),rgba(61,139,242,0) 70%),
    linear-gradient(160deg,rgba(18,50,92,.94),rgba(9,26,50,.96) 70%);
  border:1px solid rgba(61,139,242,.38);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 70px rgba(30,111,217,.22),
    0 0 90px rgba(30,111,217,.30),
    0 0 26px rgba(61,139,242,.22);
}
/* fine grid etched into the table */
.fx-map3d .fx-map3d-plane::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(159,180,212,.075) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,rgba(159,180,212,.075) 0 1px,transparent 1px 30px);
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 100%);
}
/* bright rim on the far edge */
.fx-map3d .fx-map3d-plane::after{
  content:"";position:absolute;left:8%;right:8%;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(126,190,255,.85),transparent);
}
/* soft depth shadow under the floating table */
.fx-map3d .fx-map3d-shadow{
  position:absolute;inset:6% 4% -2%;border-radius:40px;pointer-events:none;
  background:rgba(2,8,20,.75);
  transform:translateZ(-70px);
  filter:blur(34px);
}
/* slab thickness: front edge folding down from the table */
.fx-map3d .fx-map3d-edge{
  position:absolute;left:14px;right:14px;top:100%;height:12px;pointer-events:none;
  transform-origin:50% 0;
  transform:rotateX(-90deg);
  background:linear-gradient(180deg,rgba(61,139,242,.55),rgba(10,49,97,.9) 45%,rgba(6,18,36,.95));
  border-radius:0 0 8px 8px;
}
/* holographic light sweep */
.fx-map3d .fx-map3d-sweep{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
}
.fx-map3d .fx-map3d-sweep::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:38%;
  background:linear-gradient(100deg,transparent,rgba(126,190,255,.09) 45%,rgba(160,210,255,.14) 50%,rgba(126,190,255,.09) 55%,transparent);
  transform:translateX(-110%);
  animation:fx-map3d-sweep 9s cubic-bezier(.45,0,.25,1) infinite 1.5s;
}
@keyframes fx-map3d-sweep{0%{transform:translateX(-110%)}55%,100%{transform:translateX(290%)}}

.fx-map3d .fx-map3d-canvas{
  position:relative;
  transform-style:preserve-3d;
}
.fx-map3d .fx-map3d-canvas img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 5px rgba(61,139,242,.55)) brightness(1.18);
}
.fx-map3d .fx-map3d-routes{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
}

/* ---------- Routes (built by fx-map3d.js) ---------- */
.fx-map3d .fx-map3d-route{transition:opacity .35s ease}
.fx-map3d .fx-map3d-track{fill:none;stroke:rgba(126,190,255,.22);stroke-width:1.2;stroke-dasharray:2 6;stroke-linecap:round;transition:stroke .3s ease,stroke-width .3s ease}
.fx-map3d .fx-map3d-glow{fill:none;stroke-width:9;stroke-linecap:round;opacity:.5}
.fx-map3d .fx-map3d-line{fill:none;stroke-width:2.8;stroke-linecap:round}
.fx-map3d .fx-map3d-tail{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.95}
.fx-map3d .fx-map3d-dot{fill:#fff}
.fx-map3d .fx-map3d-halo{opacity:.9}

/* ---------- Pins ---------- */
.fx-map3d .fx-map3d-pin{
  position:absolute;left:var(--x);top:var(--y);width:0;height:0;
  transform-style:preserve-3d;
}
.fx-map3d .fx-map3d-base{
  position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle,rgba(126,217,87,.55),rgba(126,217,87,.12) 55%,rgba(126,217,87,0) 72%);
  border:1.5px solid rgba(126,217,87,.55);
  transition:opacity .3s ease;
}
.fx-map3d .fx-map3d-base::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid rgba(126,217,87,.75);opacity:0;
  animation:fx-map3d-ring 3.2s ease-out infinite;animation-delay:var(--d,0s);
}
@keyframes fx-map3d-ring{0%{transform:scale(.8);opacity:.9}70%,100%{transform:scale(2.6);opacity:0}}

/* ---------- Installation and facility markers: smaller, dimmer, unlabeled ---------- */
.fx-map3d .fx-map3d-site{
  position:absolute;left:var(--x);top:var(--y);width:0;height:0;
  pointer-events:none;transition:opacity .3s ease;
}
.fx-map3d .fx-map3d-site::before{
  content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle,rgba(222,246,210,.95) 0 1.6px,rgba(126,217,87,.5) 2.6px,rgba(126,217,87,.12) 56%,rgba(126,217,87,0) 72%);
  border:1px solid rgba(126,217,87,.38);
  box-shadow:0 0 6px rgba(126,217,87,.28);
}
.fx-map3d .fx-map3d-site::after{
  content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  border:1.5px solid rgba(126,217,87,.55);opacity:0;
  animation:fx-map3d-site-ring 4.6s ease-out infinite;animation-delay:var(--d,0s);
}
@keyframes fx-map3d-site-ring{0%{transform:scale(.9);opacity:.6}60%,100%{transform:scale(2.3);opacity:0}}
.fx-map3d .fx-map3d-site.is-hit::before{animation:fx-map3d-site-hit .9s ease-out}
@keyframes fx-map3d-site-hit{0%{transform:scale(1);box-shadow:0 0 6px rgba(126,217,87,.28)}30%{transform:scale(1.9);box-shadow:0 0 16px rgba(126,217,87,.9)}100%{transform:scale(1);box-shadow:0 0 6px rgba(126,217,87,.28)}}

/* billboard: undo the table tilt so the post faces the viewer */
.fx-map3d .fx-map3d-post{
  position:absolute;left:-70px;bottom:0;width:140px;height:120px;
  transform-origin:50% 100%;
  pointer-events:none;
  transform:translateZ(8px) rotateZ(calc(var(--fx-rz) * -1)) rotateX(calc(var(--fx-rx) * -1));
  transition:opacity .3s ease;
  --h:var(--fx-h);
}
.fx-map3d .fx-map3d-beam{
  position:absolute;left:calc(50% - 1.5px);bottom:0;width:3px;height:var(--h);border-radius:2px;
  background:linear-gradient(0deg,rgba(126,217,87,.05),rgba(126,217,87,.95));
  box-shadow:0 0 10px rgba(126,217,87,.55);
  transform-origin:50% 100%;
  transition:height .35s cubic-bezier(.2,.8,.2,1);
}
.fx-map3d .fx-map3d-head{
  position:absolute;left:calc(50% - 7px);bottom:calc(var(--h) - 7px);width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#fff 0 18%,#c9f5b4 30%,#7ED957 58%,#3f8f2a 100%);
  box-shadow:0 0 0 3px rgba(126,217,87,.22),0 0 18px rgba(126,217,87,.85),0 0 40px rgba(126,217,87,.35);
  transition:bottom .35s cubic-bezier(.2,.8,.2,1),transform .3s ease;
}
.fx-map3d .fx-map3d-label{
  position:absolute;left:50%;bottom:calc(var(--h) + 13px);
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--font-head,"Archivo",sans-serif);font-weight:700;font-size:.72rem;letter-spacing:.02em;line-height:1.3;
  color:#fff;
  background:linear-gradient(180deg,rgba(18,46,84,.94),rgba(11,31,58,.94));
  border:1px solid rgba(126,190,255,.3);
  border-radius:7px;padding:3px 9px;
  box-shadow:0 6px 18px rgba(2,8,20,.45);
  transition:bottom .35s cubic-bezier(.2,.8,.2,1),border-color .25s ease,background-color .25s ease,color .25s ease;
}
/* side label for pins sitting under a neighbour's routes */
.fx-map3d .fx-map3d-pin--r .fx-map3d-label{left:calc(50% + 13px);bottom:calc(var(--h) - 11px);transform:none}

/* With JS the posts move to a flat overlay above the table, positioned on the
   projected pin points. Robust against 3D sorting quirks in every engine. */
.fx-map3d .fx-map3d-flags{position:absolute;inset:0;pointer-events:none;z-index:2}
.fx-map3d .fx-map3d-flag{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.fx-map3d .fx-map3d-flag .fx-map3d-post{transform:none}

/* arrival flash, toggled by JS */
.fx-map3d .is-hit .fx-map3d-head{animation:fx-map3d-hit .9s ease-out}
@keyframes fx-map3d-hit{0%{transform:scale(1)}30%{transform:scale(1.65)}100%{transform:scale(1)}}

/* ---------- Focus (chip or pin hover) ----------
   .is-on marks the hovered market; .is-link marks the far end of each of its routes */
.fx-map3d.is-focus .fx-map3d-route{opacity:.1}
.fx-map3d.is-focus .fx-map3d-route.is-on{opacity:1}
.fx-map3d .fx-map3d-route.is-on .fx-map3d-track{stroke:rgba(126,217,87,.95);stroke-width:2.6;stroke-dasharray:none}
.fx-map3d.is-focus :is(.fx-map3d-pin,.fx-map3d-flag):not(.is-on):not(.is-link) .fx-map3d-post{opacity:.32}
.fx-map3d.is-focus .fx-map3d-pin:not(.is-on):not(.is-link) .fx-map3d-base{opacity:.35}
.fx-map3d.is-focus .fx-map3d-site:not(.is-link){opacity:.3}
.fx-map3d:not(.is-pinfocus) .is-on .fx-map3d-post{--h:calc(var(--fx-h) + 16px)}
.fx-map3d .is-on .fx-map3d-label{border-color:rgba(126,217,87,.9);background-color:rgba(78,155,52,.35);color:#fff}
.fx-map3d .is-on .fx-map3d-head{transform:scale(1.2)}
.fx-map3d .fx-map3d-head,.fx-map3d .fx-map3d-label,.fx-map3d .fx-map3d-beam{pointer-events:auto}
.fx-map3d .fx-map3d-pin{cursor:default}
/* chip mirror, only ever set by fx-map3d.js on the chip matching a hovered pin */
.cov .chip.fx-map3d-chip-on{border-color:rgba(126,217,87,.6);background:rgba(126,217,87,.08)}

/* legend keys for the route line and the installation markers */
.fx-map3d .fx-map3d-key--route{
  width:18px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--fx-blue),var(--fx-green));
  box-shadow:0 0 8px rgba(61,139,242,.6);
}
.fx-map3d .fx-map3d-key--site{
  width:7px;height:7px;
  background:rgba(126,217,87,.45);
  border:1px solid rgba(126,217,87,.6);
  box-shadow:0 0 0 2px rgba(126,217,87,.14);
}
/* four keys: two balanced rows above phone width */
@media(min-width:641px){
  .fx-map3d .cov__legend{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;column-gap:28px;row-gap:8px}
}

/* paused off screen */
.fx-map3d.is-paused *,.fx-map3d.is-paused *::before,.fx-map3d.is-paused *::after{animation-play-state:paused !important}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .fx-map3d .fx-map3d-stage{aspect-ratio:775/540}
}
@media(max-width:640px){
  .fx-map3d{--fx-rx:34deg;--fx-rz:-5deg;--fx-persp:1000px;--fx-h:18px}
  .fx-map3d .fx-map3d-stage{aspect-ratio:775/480;perspective-origin:50% 30%}
  .fx-map3d .fx-map3d-plane{width:90%;top:53%;border-radius:16px;padding:4% 4% 4.4%}
  .fx-map3d .fx-map3d-label{display:none}
  .fx-map3d .fx-map3d-base{left:-8px;top:-8px;width:16px;height:16px}
  .fx-map3d .fx-map3d-site::before,.fx-map3d .fx-map3d-site::after{left:-4.5px;top:-4.5px;width:9px;height:9px}
  .fx-map3d .fx-map3d-head{left:calc(50% - 5px);width:10px;height:10px;bottom:calc(var(--h) - 5px)}
  .fx-map3d .fx-map3d-beam{left:calc(50% - 1px);width:2px}
  .fx-map3d:not(.is-pinfocus) .is-on .fx-map3d-post{--h:calc(var(--fx-h) + 8px)}
  .fx-map3d .fx-map3d-edge{height:8px}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .fx-map3d .fx-map3d-sweep,
  .fx-map3d .fx-map3d-base::after,
  .fx-map3d .fx-map3d-site::after{display:none}
  .fx-map3d .fx-map3d-tilt{transform:none}
  .fx-map3d *{transition:none !important}
  .fx-map3d .is-hit .fx-map3d-head,
  .fx-map3d .fx-map3d-site.is-hit::before{animation:none}
}

/* Tablets: pull the tilted map up under the market chips */
@media(max-width:980px) and (min-width:561px){.cov .fx-map3d{margin-top:-80px}}