/* ============================================================
   Amri theme — Africa map and homepage motion (batch 3)
   Tokens come from style.css; nothing here hard-codes a brand colour
   except as a fallback for when the map is dropped into a page builder
   that has not loaded the theme stylesheet.
   ============================================================ */

/* ---------------------------------------------------------- reveal ---- */
/*
   The guard matters: these rules only apply once the script has added
   .amri-anim to <html>. If JavaScript never runs, the page renders at full
   opacity instead of staying invisible forever.
*/
.amri-anim [data-reveal]{
  opacity:.001;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform;
}
.amri-anim [data-reveal].is-in{opacity:1;transform:none}
.amri-anim [data-reveal] [data-reveal-child]{
  opacity:.001;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1);
}
.amri-anim [data-reveal].is-in [data-reveal-child]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .amri-anim [data-reveal],
  .amri-anim [data-reveal] [data-reveal-child]{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* ------------------------------------------------------------- map ---- */
.amri-map-section{
  position:relative;
  padding-block:var(--sec,clamp(56px,9vw,120px));
  padding-inline:var(--pad,clamp(18px,5vw,72px));
}
.amri-map-wrap{
  width:min(1180px,100%);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
@media (max-width:900px){
  .amri-map-wrap{grid-template-columns:1fr;gap:28px}
}

.amri-map-copy h2{
  font-size:clamp(27px,4.4vw,44px);letter-spacing:-.032em;line-height:1.1;margin:0;
}
.amri-map-copy .lede{
  margin-top:16px;color:var(--muted,#6B807A);max-width:34rem;
}
.amri-map-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;font-size:12.5px;color:var(--muted,#6B807A)}
.amri-map-legend span{display:inline-flex;align-items:center;gap:8px}
.amri-map-legend i{width:9px;height:9px;border-radius:50%;flex:none}
.amri-map-legend i.live{background:var(--amri-primary,#0F7A4A)}
.amri-map-legend i.soon{background:var(--amri-line,#DCE9E3);border:1.5px solid var(--amri-primary,#0F7A4A)}

.amri-map-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.amri-map-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper,#fff);border:1.5px solid var(--line,#DCE9E3);
  border-radius:100px;padding:9px 15px;font:inherit;font-size:13px;
  cursor:pointer;transition:border-color .16s,transform .16s;min-height:40px;
}
.amri-map-chip b{font-weight:600}
.amri-map-chip span{color:var(--muted,#6B807A);font-size:11.5px}
.amri-map-chip:hover,.amri-map-chip.on{border-color:var(--amri-primary,#0F7A4A);transform:translateY(-1px)}
.amri-map-chip.soon b{color:var(--muted,#6B807A)}
.amri-map-chip:focus-visible{outline:2.5px solid var(--amri-primary,#0F7A4A);outline-offset:2px}

.amri-map-figure{position:relative}
.amri-map-figure svg{width:100%;height:auto;display:block;overflow:visible}
.amri-map-land{
  stroke-linejoin:round;
  filter:drop-shadow(0 24px 40px rgba(16,50,38,.14));
}

/* Pins. The halo is the only looping animation on the page, it runs on
   transform/opacity only, and it stops entirely under reduced motion. */
.amri-pin{cursor:pointer}
.amri-pin .dot{
  fill:var(--amri-primary,#0F7A4A);stroke:#fff;stroke-width:4;
  transition:r .18s ease,fill .18s ease;
}
.amri-pin.soon .dot{fill:#fff;stroke:var(--amri-primary,#0F7A4A);stroke-width:5}
.amri-pin .halo{
  fill:var(--amri-primary,#0F7A4A);opacity:0;transform-box:fill-box;transform-origin:center;
}
.amri-pin.live .halo{animation:amri-ping 2.6s ease-out infinite}
.amri-pin:nth-of-type(2) .halo{animation-delay:.5s}
.amri-pin:nth-of-type(3) .halo{animation-delay:1s}
.amri-pin:nth-of-type(4) .halo{animation-delay:1.5s}
.amri-pin:hover .dot,.amri-pin.on .dot,.amri-pin:focus-visible .dot{r:18}
.amri-pin:focus-visible{outline:none}
.amri-pin:focus-visible .dot{stroke:var(--amri-ink,#10231C);stroke-width:5}

@keyframes amri-ping{
  0%{opacity:.30;transform:scale(.35)}
  70%{opacity:0;transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .amri-pin.live .halo{animation:none;opacity:.14;transform:scale(.7)}
  .amri-pin .dot{transition:none}
}

/* The detail card sits over the map, anchored to the pin by the script. */
.amri-map-card{
  position:absolute;z-index:3;transform:translate(14px,-50%);
  background:var(--paper,#fff);border:1px solid var(--line,#DCE9E3);
  border-radius:16px;padding:13px 17px;min-width:150px;
  box-shadow:0 22px 44px -22px rgba(16,50,38,.45);
  pointer-events:none;
}
.amri-map-card.flip{transform:translate(calc(-100% - 14px),-50%)}
.amri-map-card b{display:block;font-size:15px;letter-spacing:-.01em}
.amri-map-card span{display:block;font-size:12px;color:var(--muted,#6B807A)}
.amri-map-card .cur{margin-top:2px;font-variant-numeric:tabular-nums}
.amri-map-card .state{
  display:inline-block;margin-top:8px;border-radius:100px;
  padding:3px 10px;font-size:10.5px;font-weight:600;
}
.amri-map-card .state.live{background:rgba(15,122,74,.12);color:var(--amri-primary,#0F7A4A)}
.amri-map-card .state.soon{background:rgba(107,128,122,.14);color:var(--muted,#6B807A)}

/* --------------------------------------------------------- counters --- */
.amri-stats{
  width:min(1180px,100%);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(14px,2.4vw,26px);
}
.amri-stat{
  background:var(--paper,#fff);border:1px solid var(--line,#DCE9E3);
  border-radius:var(--r,20px);padding:clamp(20px,2.6vw,28px);text-align:center;
}
.amri-stat .n{
  display:block;font-family:"Zilla Slab",Georgia,serif;font-weight:700;
  font-size:clamp(30px,4.4vw,44px);line-height:1;letter-spacing:-.02em;
  color:var(--amri-primary,#0F7A4A);font-variant-numeric:tabular-nums;
}
.amri-stat .l{display:block;margin-top:8px;font-size:13px;color:var(--muted,#6B807A)}

/* ------------------------------------------------------ hero motion --- */
/*
   The hero moves once on load rather than on scroll — it is already in view,
   so an observer would fire immediately anyway, and a CSS animation avoids a
   frame of flash before the script boots.
*/
@media (prefers-reduced-motion:no-preference){
  .amri-hero-in{animation:amri-rise .7s cubic-bezier(.2,.7,.3,1) both}
  .amri-hero-in.d1{animation-delay:.08s}
  .amri-hero-in.d2{animation-delay:.16s}
  .amri-hero-in.d3{animation-delay:.24s}
}
@keyframes amri-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ------------------------------------------------- elementor wrapper -- */
.elementor-widget-amri-map .amri-map-section,
.elementor-widget-amri-stats .amri-stats{padding-block:0}