/* =============================================================================
   motif.css — the "building-blocks" brand motif
   .motif-bg (tiled pattern, very subtle) · .motif-bg--faint (masked fade)
   .motif-bullet (logo-block bullet) · .blocks-divider (row of 5 mark colors)
   Cheap: background layering only, no heavy filters.
   ========================================================================== */

/* ---------- TILED PATTERN BACKGROUND ----------
   Used as a decorative layer (e.g. .section--values > .motif-bg, hero portal).
   Absolutely positioned to cover its host; host should be position:relative. */
.motif-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/img/pattern/brand-pattern.png");
  background-repeat: repeat;
  background-size: 280px auto;
  background-position: center;
  opacity: 0.08;
  /* dissolve the edges so the tiling never looks like a hard rectangle */
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 35%, transparent 78%);
  mask-image: radial-gradient(120% 120% at 50% 40%, #000 35%, transparent 78%);
}

[data-theme="dark"] .motif-bg {
  opacity: 0.05;
  /* lighten the dark pattern so it reads on charcoal without a filter cost */
  mix-blend-mode: screen;
}

/* even fainter variant */
.motif-bg--faint {
  opacity: 0.06;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

[data-theme="dark"] .motif-bg--faint { opacity: 0.045; }

/* ---------- LOGO-BLOCK BULLET ----------
   A small rounded square — the brand's atomic "block". */
.motif-bullet {
  display: inline-block;
  inline-size: 12px;
  block-size: 12px;
  flex: 0 0 auto;
  border-radius: var(--radius-block);
  background: var(--brand-primary);
  box-shadow: none;   /* client: no glow under the small squares */
}
/* The brand Arabic face sits low in its line box (tall ascent reserved for
   diacritics), so a centre-aligned square looks too HIGH beside the text. Nudge
   the square down a hair in Arabic to optically centre it. English uses Inter
   (symmetric), so it is left untouched. */
:where(html[lang="ar"], .lang-ar) .motif-bullet { transform: translateY(0.24em); }

/* Excellence-axes bullets: each square is ONE identity colour — purple · pink ·
   yellow (client 2026-08-10: a colour per square, NOT the logo mark). */
.axes-grid li:nth-child(1) .motif-bullet { background: var(--c-purple); }
.axes-grid li:nth-child(2) .motif-bullet { background: var(--c-pink); }
.axes-grid li:nth-child(3) .motif-bullet { background: var(--c-yellow); }

/* ---------- BLOCKS DIVIDER ----------
   A tiny row of 5 rounded squares in the 5 mark colors — a section accent. */
.blocks-divider {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  inline-size: max-content;
}

.blocks-divider::before,
.blocks-divider::after {
  content: none; /* explicit: divider uses ::squares via spans-less technique below */
}

/* Render the 5 blocks with no markup using layered radial dots is brittle,
   so we draw 5 fixed boxes via box-shadow on a single seed element. */
.blocks-divider {
  position: relative;
  inline-size: 92px;
  block-size: 12px;
}

.blocks-divider::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 12px;
  block-size: 12px;
  border-radius: var(--radius-block);
  background: var(--mark-tl);
  box-shadow:
    20px 0 0 var(--mark-tr),
    40px 0 0 var(--mark-c),
    60px 0 0 var(--mark-bl),
    80px 0 0 var(--mark-br);
}

/* In RTL the box-shadow offsets stay LTR (visual), which is fine for a
   symmetric color row; the element itself is positioned with logical props. */