/* NUTRI.N°1 — Holographic Africa map (vector, 4K-crisp) ------------------------------------ */
.trustGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.trustGrid .head{margin-bottom:0;max-width:640px}
.holoMap{position:relative;min-width:0}
.hm-stage{position:relative;aspect-ratio:750/760;width:100%;max-width:720px;margin:0 auto;perspective:1400px}
.hm-svg{position:relative;z-index:2;width:100%;height:100%;display:block;overflow:visible;
  transform:rotateX(9deg);transform-origin:50% 100%;
  filter:drop-shadow(0 0 14px rgba(77,255,166,.35)) drop-shadow(0 0 40px rgba(20,200,110,.18));
  animation:hmFloat 9s ease-in-out infinite}
.hm-base{position:absolute;left:8%;right:8%;bottom:-2%;height:20%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(77,255,166,.32),rgba(77,255,166,.08) 45%,transparent 72%);
  filter:blur(6px)}
.hm-base:after{content:"";position:absolute;inset:auto 0 22% 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(160,255,205,.75),transparent);
  box-shadow:0 0 18px rgba(77,255,166,.6)}
@keyframes hmFloat{0%,100%{transform:rotateX(9deg) translateY(0)}50%{transform:rotateX(9deg) translateY(-8px)}}

/* Scanline sweep over the continent */
.hm-sweep{animation:hmSweep 6s linear infinite}
@keyframes hmSweep{0%{transform:translateY(0)}100%{transform:translateY(920px)}}
.hm-ghost{animation:hmGhost 5s ease-in-out infinite}
@keyframes hmGhost{0%,100%{transform:translate(0,0);opacity:.35}50%{transform:translate(1.5px,-1.5px);opacity:.15}}

/* ------------------------------------------------------------------------------------------
   Flows. The JS sequencer emits one arrow every 2 s and drives these states on each .hm-flow:
     (idle)        → nothing visible (line fully hidden behind its dash offset)
     .is-drawing   → the solid line grows from the hub to the destination (stroke-dashoffset → 0)
     .is-on        → arrowhead + impact ring appear at the destination
     .is-fading    → whole flow fades out (opacity), then classes are cleared
   --len (path length, px) and --dur (draw duration) are set per flow by the JS.
   No SVG filters on anything that animates continuously → smooth on 4K displays.
   ------------------------------------------------------------------------------------------ */

/* Faint permanent track (brightens while its flow is active) */
.hm-track{fill:none;stroke:#4dffa6;stroke-opacity:.07;stroke-width:4;stroke-linecap:round;transition:stroke-opacity 1.4s ease}
.hm-track.is-active{stroke-opacity:.2;transition:stroke-opacity .8s cubic-bezier(.4,0,.2,1)}

/* Flow group: opacity handles the soft fade-out; idle state has no transition so the reset is invisible */
.hm-flow{opacity:1;transition:none;will-change:opacity}
.hm-flow.is-fading{opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}

/* Solid line + neon halo, revealed with stroke-dashoffset */
.hm-line,.hm-halo{fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:none}
.hm-line{stroke:#c9ffe4;stroke-width:1.7}
.hm-halo{stroke:#4dffa6;stroke-width:6;stroke-opacity:.26}
.hm-flow.is-drawing .hm-line,.hm-flow.is-drawing .hm-halo{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur,2s) cubic-bezier(.4,0,.2,1)}

/* Arrowhead (appears at arrival, grows from its tip) */
.hm-head,.hm-headHalo{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:100% 50%;transition:none}
.hm-head{fill:#eafff4}
.hm-headHalo{fill:#4dffa6;fill-opacity:.42}
.hm-flow.is-on .hm-head,.hm-flow.is-on .hm-headHalo{opacity:1;transform:scale(1);transition:opacity .32s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.2,.9,.3,1.2)}

/* Impact ring at arrival */
.hm-impact{stroke:#b8ffd9;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.hm-flow.is-on .hm-impact{animation:hmImpact 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes hmImpact{0%{opacity:.95;transform:scale(.6)}100%{opacity:0;transform:scale(4.6)}}

/* Destination nodes: always present (dim), lit up while their flow is on */
.hm-nodeGlow{opacity:0;transition:opacity 1.2s ease}
.hm-node.is-active .hm-nodeGlow{opacity:.34;transition:opacity .4s cubic-bezier(.4,0,.2,1)}
.hm-dot{opacity:.55;transition:opacity 1.2s ease}
.hm-node.is-active .hm-dot{opacity:1;transition:opacity .3s ease}
.hm-ring{fill:none;stroke:#7dffbd;stroke-width:1.1;opacity:0;transform-box:fill-box;transform-origin:center}
.hm-node.is-active .hm-ring{animation:hmRing 1.9s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes hmRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(3.4);opacity:0}}

/* Hub (Togo) */
.hm-hubGlow{transform-box:fill-box;transform-origin:center;transform:scale(1);transition:transform .9s cubic-bezier(.4,0,.2,1)}
.hm-hub.is-beat .hm-hubGlow{transform:scale(1.32);transition:transform .32s cubic-bezier(.2,.8,.3,1)}
.hm-pulse{fill:none;stroke:#b8ffd9;stroke-width:1.2;opacity:.7;transform-box:fill-box;transform-origin:center;animation:hmPulse 4s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes hmPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(5);opacity:0}}
/* Burst ring: fired by the sequencer in sync with each departing arrow */
.hm-burst{fill:none;stroke:#ffffff;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.hm-burst.is-on{animation:hmBurst 1.5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes hmBurst{0%{transform:scale(.7);opacity:1}100%{transform:scale(5.2);opacity:0}}
.hm-reticle{transform-box:fill-box;transform-origin:center;animation:hmSpin 14s linear infinite}
@keyframes hmSpin{to{transform:rotate(360deg)}}

/* Typography inside SVG */
.hm-label,.hm-hubLabel,.hm-status{font-family:inherit;font-weight:900;letter-spacing:.14em;fill:#d9ffe9;paint-order:stroke;stroke:#03140b;stroke-width:3px;stroke-linejoin:round}
.hm-label{font-size:8.6px;opacity:.5;transition:opacity 1.2s ease,fill 1.2s ease}
.hm-label.is-active{opacity:1;fill:#ffffff;transition:opacity .35s ease,fill .35s ease}
.hm-hubLabel{font-size:10.5px;fill:#fff}
.hm-status{font-size:9px;fill:#7dffbd;letter-spacing:.2em;animation:hmBlink 2.2s steps(2) infinite}
@keyframes hmBlink{50%{opacity:.55}}
.hm-hud{opacity:.8}

/* Legend under the map */
.hm-legend{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:14px;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#9eb5aa}
.hm-legend span{display:inline-flex;align-items:center;gap:8px}
.hm-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid #7dffbd;box-shadow:0 0 10px rgba(125,255,189,.7)}
.hm-legend i.hm-lg-line{width:26px;height:2px;border-radius:2px;border:0;background:#c9ffe4;box-shadow:0 0 8px rgba(77,255,166,.9);position:relative}
.hm-legend i.hm-lg-line:after{content:"";position:absolute;right:-2px;top:-3px;border:4px solid transparent;border-left:6px solid #c9ffe4;border-right:0}

/* Responsive */
@media(max-width:1000px){.trustGrid{grid-template-columns:1fr;gap:34px}.hm-stage{max-width:560px}}
@media(max-width:600px){.hm-svg{transform:none;animation:none}.hm-base{display:none}}

/* Accessibility: static, fully drawn map (JS adds .is-static; the media query covers no-JS / old browsers) */
.holoMap.is-static .hm-line,.holoMap.is-static .hm-halo{stroke-dashoffset:0;transition:none}
.holoMap.is-static .hm-flow{opacity:.6}
.holoMap.is-static .hm-head,.holoMap.is-static .hm-headHalo{opacity:1;transform:none;transition:none}
.holoMap.is-static .hm-dot,.holoMap.is-static .hm-label{opacity:1}
.holoMap.is-static .hm-track{stroke-opacity:.12}
@media(prefers-reduced-motion:reduce){
  .hm-svg,.hm-sweep,.hm-ghost,.hm-pulse,.hm-burst,.hm-reticle,.hm-status,.hm-ring,.hm-impact{animation:none!important}
  .hm-line,.hm-halo{stroke-dashoffset:0!important;transition:none!important}
  .hm-flow{opacity:.6!important;transition:none!important}
  .hm-head,.hm-headHalo{opacity:1!important;transform:none!important;transition:none!important}
  .hm-dot,.hm-label{opacity:1!important}
  .hm-hubGlow{transform:none!important;transition:none!important}
}