/* ==========================================================================
   TARAQI — the motion stylesheet. Loaded by all four pages after tokens.css.
   It holds only the CLIP BOXES the shared presets in js/motion.js need: the
   CSS state of every animated element is the revealed page, and the script
   writes the hidden state only when it will animate it. Nothing here is a
   transition — those stay with the components they belong to.
   Spec: design-system/taraqi-developments/MASTER.md.
   ========================================================================== */
/* Mask reveal — outer clips, inner translates. The padding/negative-margin
   pair widens the clip box so Aref Ruqaa's ascenders, harakat and descenders
   are never cut, without changing the line's layout height. */
.mask {
  display: block;
  overflow: hidden;
  padding-block: 0.18em;
  margin-block: -0.18em;
}
.mask-inner {
  display: block;
  will-change: transform;
}

/* Word masks — js/motion.js's text() wraps each word of a headline in one. Padding
   out, margin back in: the mask is the line's own height plus room for
   ascenders, descenders and an italic's overhang, so nothing is cropped at
   rest. Aref Ruqaa's marks sit higher and lower, hence the Arabic room. */
.rv-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 0.06em 0.2em;
  margin: -0.1em -0.06em -0.2em;
}
html[lang="ar"] .rv-word {
  padding-block: 0.3em 0.4em;
  margin-block: -0.3em -0.4em;
}
.rv-word-inner { display: inline-block; }
/* A run of Latin words inside a right-to-left headline (js/motion.js split())
   — kept left to right, so "Villa 13" is not laid out "13 Villa". */
.rv-ltr { direction: ltr; unicode-bidi: isolate; }