/* About · mission (patterns/gioi-thieu-mission.php): a centred band. assets/js/sections/ab-mission.js splits the
   statement into letters that float up as the band scrolls in (Scroll Float idea): one --ab-mission-p (0 → 1) on the
   statement drives every letter, each with its own --ab-mission-k. The bold words keep the brand colour.
   The four goals are a core List; the plus signs between them are drawn here. */
.ab-mission{
  --ab-mission-p:1;
  --ab-mission-track:-0.02em;
  --ab-mission-rise:0.7em;
  --ab-mission-stretch:1.2;
  --ab-mission-from:0.2;
  --ab-mission-lag:0.55;
  --ab-mission-op-gap:calc(var(--s-3) * 3); /* space between two goals; the plus sits centred in it */
  --ab-mission-hair:1px;
  padding:var(--gap-section) var(--s-4);
  background:var(--paper-2);
  text-align:center;
  overflow:hidden;
}
.ab-mission .page > *{margin:0}
.ab-mission__in{display:grid;justify-items:center;gap:var(--s-5)}

.ab-float{max-width:20ch;font:700 var(--t-hero)/1.12 var(--font-display);letter-spacing:var(--ab-mission-track);color:var(--ink)}
.ab-float strong{font-weight:inherit;color:var(--accent)}
.ab-float__sr{position:absolute;width:var(--ab-mission-hair);height:var(--ab-mission-hair);margin:calc(var(--ab-mission-hair) * -1);padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ab-float__w{display:inline-block;white-space:nowrap}
.ab-float__c{display:inline-block;--ab-mission-q:clamp(0, calc((var(--ab-mission-p) - var(--ab-mission-k) * var(--ab-mission-lag)) / (1 - var(--ab-mission-lag))), 1);opacity:calc(var(--ab-mission-from) + (1 - var(--ab-mission-from)) * var(--ab-mission-q));transform:translateY(calc((1 - var(--ab-mission-q)) * var(--ab-mission-rise))) scaleY(calc(1 + (1 - var(--ab-mission-q)) * var(--ab-mission-stretch)));transform-origin:50% 100%}

.ab-role{max-width:var(--measure);font-size:var(--t-l);color:var(--ink-2)}

/* goals joined by plus signs */
.ab-eq{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-2) 0}
.ab-eq li{position:relative;margin:0;padding:var(--s-2) var(--s-4);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);font:600 var(--t-m)/1.2 var(--font-body);white-space:nowrap}
/* the plus belongs to the goal before it (its end margin holds the space), so on a wrap it ends the line as in the design
   instead of starting the next one; the plain "+" is the fallback for browsers without alt text in content */
.ab-eq li:not(:last-child){margin-inline-end:var(--ab-mission-op-gap)}
.ab-eq li:not(:last-child)::after{content:"+";content:"+" / "";position:absolute;top:50%;left:100%;width:var(--ab-mission-op-gap);transform:translateY(-50%);color:var(--accent);font:700 var(--t-l)/1 var(--font-mono);text-align:center}