/* ============================================================
   ADENES Group — interactive map — design system
   Fixed design canvas: 2000 x 1333 (scaled to fit, no mobile layout)
   ============================================================ */

@font-face{ font-family:"Avenir"; src:url("../fonts/Avenir-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Avenir"; src:url("../fonts/Avenir-Book.woff2")  format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Avenir"; src:url("../fonts/Avenir-Black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }

:root{
  --navy-deep:#0d1733; --navy-mid:#182a55;
  --country-inactive:#1F4078;   /* fond pays            */
  --country-active:#9DB8D9;      /* pays présents        */
  --country-active-h:#b7ccea;
  --border:#16234a;
  --red:#FE0041;                 /* sélection + survol   */
  --magenta:#FE0041; --magenta-h:#ff3568;
  --panel:#eef1f8; --ink:#16234a; --ink-muted:#7a86a4; --white:#fff;
  --font-display:"Avenir","Segoe UI",Arial,sans-serif;
  --font-body:"Avenir","Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:transparent;font-family:var(--font-body);-webkit-font-smoothing:antialiased}

/* The fixed 2000x1333 canvas, scaled by JS to fit the window.
   Background is transparent so the host page (e.g. a WordPress section) shows through. */
.stage{
  position:absolute; top:0; left:0;
  width:2000px; height:1333px;
  transform-origin:top left;
  overflow:hidden;
  background:transparent;
}
.bg-glow,.bg-band{display:none}

/* ---------- Map ---------- */
.map{position:absolute;inset:0;z-index:2;
  /* soften the left & right edges so the map fades into the host page instead of being hard-cut */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);}
.map svg{width:100%;height:100%;display:block}
.map path{
  fill:var(--country-inactive);
  stroke:var(--border);
  stroke-width:1;
  vector-effect:non-scaling-stroke;   /* constant 1px border at any zoom */
  transition:fill .22s var(--ease);
}

/* present countries highlighted everywhere */
.map path.present{fill:var(--country-active)}

/* world view */
.map.view-world path.zoomable{cursor:pointer}
.map.view-world path.continent-hover{fill:var(--country-active-h)}

/* region view: neighbouring continents stay visible as a dark landmass
   (no country borders, not interactive); only this continent shows its countries */
.map.view-region path{fill:var(--country-inactive);stroke:none;pointer-events:none}
.map.view-region path.in-region{stroke:var(--border);pointer-events:auto}
.map.view-region path.in-region.active{fill:var(--country-active);cursor:pointer}
.map.view-region path.in-region.active:hover{fill:var(--red)}

/* selection persists in red, overriding hover/active fills */
.map path.selected{fill:var(--red)!important}

/* region labels in SVG (world view) */
.region-label{cursor:pointer;fill:var(--white);font-family:var(--font-display);font-weight:900;letter-spacing:1.5px;
  pointer-events:all;transition:fill .2s var(--ease)}
.region-label:hover{fill:var(--red)}
.map.view-region .region-label{display:none}

/* animated continent rings — "water drop" ripple to invite clicking */
.region-ring{fill:none;stroke:var(--red);stroke-width:2.6;vector-effect:non-scaling-stroke;
  transform-box:fill-box;transform-origin:center;opacity:0;pointer-events:none;
  animation:ripple 3.4s ease-out infinite}
@keyframes ripple{
  0%{transform:scale(.18);opacity:0}
  12%{opacity:.55}
  100%{transform:scale(1.25);opacity:0}
}
.map.view-region .region-ring{display:none}

/* city-state selection marker (enlarged red dot so it stays visible) */
#city-marker{fill:var(--red);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}

/* Singapore magnifier loupe (Asia-Pacific view) — simple, centred on Singapore */
.sg-link{display:none}
.sg-loupe{position:absolute;z-index:6;width:118px;height:118px;border-radius:50%;overflow:hidden;cursor:pointer;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 8px 26px rgba(0,0,0,.5);background:var(--navy-deep)}
.sg-loupe svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- World heading ---------- */
.world-heading{position:absolute;top:90px;left:0;right:0;z-index:4;text-align:center;pointer-events:none}
.world-title{margin:0;display:inline-flex;flex-direction:column;line-height:.96;color:var(--white);text-transform:uppercase}
.world-title .t-bold{font-family:var(--font-display);font-weight:900;font-size:120px;letter-spacing:3px}
.world-title .t-thin{font-family:var(--font-display);font-weight:300;font-size:100px;letter-spacing:5px}

/* ---------- Region chrome ---------- */
.region-title{position:absolute;left:90px;top:300px;margin:0;z-index:4;color:var(--white);
  font-family:var(--font-display);font-weight:900;font-size:80px;letter-spacing:3px;text-transform:uppercase;pointer-events:none}

.back-btn{position:absolute;top:55px;left:210px;z-index:6;display:inline-flex;align-items:center;gap:16px;
  padding:22px 46px 22px 38px;border:0;border-radius:999px;background:var(--white);color:var(--magenta);
  font-family:var(--font-display);font-weight:400;font-size:28px;letter-spacing:.4px;cursor:pointer;
  box-shadow:0 10px 34px rgba(0,0,0,.28);transition:transform .2s var(--ease),color .2s var(--ease)}
.back-btn:hover{transform:translateX(-3px);color:var(--magenta-h)}
.back-arrow{font-size:38px;line-height:1}

.mini-map{position:absolute;top:50px;left:60px;z-index:6;width:104px;height:66px;cursor:pointer;opacity:.92}
.mini-map svg{width:100%;height:100%}
.mini-map svg path{fill:var(--white);stroke:none}
.mini-map:hover{opacity:1}

/* ---------- Country list ---------- */
.country-list{position:absolute;top:70px;right:80px;bottom:70px;z-index:5;
  display:flex;gap:38px;align-items:flex-start;justify-content:flex-end;
  pointer-events:none;}                                  /* clicks pass through gaps to the map */
.country-list .col{display:flex;flex-direction:column;width:268px}
.country-list button{pointer-events:auto;display:block;width:100%;
  text-align:left;border:0;background:transparent;color:#c7d2ea;font-family:var(--font-display);font-weight:900;
  font-size:22px;line-height:1.12;letter-spacing:1.5px;text-transform:uppercase;padding:2px 14px;margin:0 0 2px;
  border-radius:7px;cursor:pointer;transition:color .15s,background .15s}
.country-list button:hover,
.country-list button.hl,
.country-list button.selected{background:var(--magenta);color:var(--white)}

/* hover a list name -> highlight that country red on the map */
.map path.hover-hl{fill:var(--red)!important}

/* ---------- Popup ---------- */
.popup{position:absolute;left:90px;top:470px;z-index:7;width:500px;background:var(--panel);
  border-radius:24px;padding:40px 42px 44px;box-shadow:0 26px 70px rgba(0,0,0,.4);animation:popIn .28s var(--ease)}
@keyframes popIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.popup-close{position:absolute;top:22px;right:26px;border:0;background:none;color:var(--magenta);font-size:34px;line-height:1;cursor:pointer}
.popup-close:hover{color:var(--magenta-h)}
.popup-country{margin:0 0 8px;color:var(--ink);font-family:var(--font-display);font-weight:400;font-size:46px;line-height:1;letter-spacing:2px;text-transform:uppercase}
.popup-entity{margin:0 0 10px;color:var(--ink);font-weight:900;font-size:25px}
a.popup-entity-link{color:var(--ink);text-decoration:none}
a.popup-entity-link:hover{color:var(--magenta);text-decoration:underline}
.popup-entity-block + .popup-entity-block{margin-top:16px;padding-top:14px;border-top:1px solid #c2cbde}
.popup-rows{display:flex;flex-direction:column}
.popup-row{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:9px 0;border-top:1px solid #d7ddea;align-items:baseline}
.popup-row.no-label{grid-template-columns:1fr}
.popup-row:first-child{border-top:0}
.popup-cat{text-align:right;color:var(--ink-muted);font-size:21px}
.popup-brands{display:flex;flex-direction:column;gap:3px}
.popup-brand{color:var(--ink);font-weight:900;font-size:24px;text-decoration:none}
a.popup-brand:hover{color:var(--magenta);text-decoration:underline}

/* ---------- Language switch (hidden for now, kept for future) ---------- */
.lang-switch{display:none!important}

@media (prefers-reduced-motion:reduce){*,.popup{animation:none!important;transition:none!important}}