/* ==========================================================================
   UBM: animated infographics in News articles.

   private/infographics.php inlines each SVG from assets/news/<slug>/ into a
   <div class="ig" data-world="deep" data-reveal>, so the drawing sits on the
   site's deep navy panel, uses the site's fonts and colour tokens, and its
   labels stay real text. Drawings use only the classes below; colour never
   lives in the SVG file, so one drawing works in every theme.

   Authoring contract (for the SVG files)
     viewBox 560 units wide; text 17 units or larger; no <style>, no scripts.
     Text   .t .t-strong .t-muted .t-gold .t-accent .ig-display
     Stroke .s (+ .s-gold .s-accent .s-faint .s-thin .s-bold)
     Fill   .f-surface .f-sunken .f-gold .f-accent .f-gold-soft .f-accent-soft .f-none
     Motion .a-flow .a-flow-slow .a-flow-rev   dashes travelling along a line
            .a-pulse .a-blink                   a live node
            .a-spin                             a slow orbit ring
            .a-draw (style="--len:420")         a line drawing itself in
            .a-rise                             an element easing into place
            style="--d:.6s" on any of them      start delay, for sequencing
   Everything is still for visitors who reduce motion, and the drawing is
   complete without JavaScript.
   ========================================================================== */

.prose .ig,
.ig {
  margin-block: 2em 0;
  padding: clamp(.9rem, 2.5vw, 1.6rem);
  background: var(--surface);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
  scrollbar-width: thin;
}
.prose figure:has(> .ig) { margin-block: 2em; }
.prose figure > .ig + figcaption { margin-block-start: .8em; }

.ig svg {
  display: block;
  inline-size: 100%;
  min-inline-size: 28rem;          /* below this a phone scrolls the panel rather than shrinking the text */
  block-size: auto;
  overflow: visible;
  font-family: var(--font-sans);
}
:lang(ar) .ig svg { font-family: var(--font-arabic); }

/* ---- text ------------------------------------------------------------- */
.ig text            { fill: var(--text); }
.ig .t-strong       { fill: var(--text-strong); font-weight: 600; }
.ig .t-muted        { fill: var(--text-muted); }
.ig .t-gold         { fill: var(--gold); }
.ig .t-accent       { fill: var(--accent-text, var(--accent)); }
.ig .ig-display     { font-family: var(--font-display); font-weight: 700; }
:lang(ar) .ig .ig-display { font-family: var(--font-arabic); }

/* ---- strokes and fills -------------------------------------------------- */
.ig .s              { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ig .s-gold         { stroke: var(--gold); }
.ig .s-accent       { stroke: var(--accent); }
.ig .s-faint        { stroke: var(--line); }
.ig .s-thin         { stroke-width: 1; }
.ig .s-bold         { stroke-width: 2.5; }
.ig .f-surface      { fill: var(--surface-raised); }
.ig .f-sunken       { fill: var(--surface-sunken); }
.ig .f-gold         { fill: var(--gold); }
.ig .f-accent       { fill: var(--accent); }
.ig .f-gold-soft    { fill: color-mix(in srgb, var(--gold) 18%, transparent); }
.ig .f-accent-soft  { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.ig .f-none         { fill: none; }

/* ---- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ig .a-flow       { stroke-dasharray: 4 9; animation: ig-flow 1.6s linear infinite; animation-delay: var(--d, 0s); }
  .ig .a-flow-slow  { stroke-dasharray: 4 9; animation: ig-flow 3.2s linear infinite; animation-delay: var(--d, 0s); }
  .ig .a-flow-rev   { animation-direction: reverse; }
  .ig .a-pulse      { transform-box: fill-box; transform-origin: center; animation: ig-pulse 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .ig .a-blink      { animation: ig-blink 2s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .ig .a-spin       { transform-box: fill-box; transform-origin: center; animation: ig-spin 24s linear infinite; }

  /* One-time entrances, played when the panel scrolls into view. */
  .js .ig.is-in .a-draw { stroke-dasharray: var(--len, 400); animation: ig-draw 1.4s cubic-bezier(.3, .7, .2, 1) both; animation-delay: var(--d, 0s); }
  .js .ig.is-in .a-rise { transform-box: fill-box; animation: ig-rise .8s cubic-bezier(.3, .7, .2, 1) both; animation-delay: var(--d, 0s); }
}

@keyframes ig-flow  { to { stroke-dashoffset: -26; } }
@keyframes ig-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: .55; } }
@keyframes ig-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes ig-spin  { to { transform: rotate(360deg); } }
@keyframes ig-draw  { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }
@keyframes ig-rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }