/* RTL layout for the Arabic blog ("بقلم عربي"). Loaded unconditionally; every
   rule is scoped under [dir="rtl"] so it never touches the English site. */

[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] #ArabicBlog {
    min-width: fit-content;
    max-width: 90vw;
    display: flow-root;
    position: relative;
    margin-right: 5vw;
    margin-left: 5vw;
    margin-bottom: 10%;
    z-index: 0;
}

[dir="rtl"] .BlogEntry {
    direction: rtl;
    text-align: right;
}

/* Same script face as the "بقلم عربي" nav button, reserved for headings -
   gorgeous at display size, hard to read at length, so body paragraphs stay
   in the Naskh stack set inline per article. */
[dir="rtl"] .BlogEntry h1 {
    font-family: arabicstylefont, 'Diwani Letter', 'Mishafi', 'Arabic Typesetting', 'Aref Ruqaa', 'Traditional Arabic', serif;
    font-weight: normal;
    font-size: 1.6em !important;
}

[dir="rtl"] .BlogEntry h2 {
    font-family: arabicstylefont, 'Diwani Letter', 'Mishafi', 'Arabic Typesetting', 'Aref Ruqaa', 'Traditional Arabic', serif !important;
    font-weight: normal;
    font-size: 1.6em !important;
}

[dir="rtl"] .FeedFilterBanner span {
    font-family: arabicstylefont, 'Diwani Letter', 'Mishafi', 'Arabic Typesetting', 'Aref Ruqaa', 'Traditional Arabic', serif;
}

[dir="rtl"] .ProjectTimeline,
[dir="rtl"] .FeedFilterBanner {
    direction: rtl;
    text-align: right;
    border-left: none;
}

[dir="rtl"] .ProjectTimeline ol {
    border-left: none;
    border-right: 2px solid #66666630;
}

[dir="rtl"] .ProjectTimeline li {
    padding: 0 22px 18px 0;
}

[dir="rtl"] .ProjectTimeline li:before {
    left: auto;
    right: -6px;
}

@media (prefers-color-scheme: dark) {
    [dir="rtl"] .ProjectTimeline ol {
        border-right-color: #FFFFFF30;
    }
}

/* Hero replacement for Arabic mode: the monogram images give way to the
   name itself, set in the same script face as the nav button, echoing an
   earlier (uncommitted) idea found in .idea/shelf/with_arabic_pen. */
.arabic-monogram {
    font-family: arabicstylefont, 'Diwani Letter', 'Mishafi', 'Arabic Typesetting', 'Aref Ruqaa', 'Traditional Arabic', serif;
    text-align: center;
    line-height: 1;
    color: #454444;
    width: 35vw;
    padding: 5%;
    box-sizing: border-box;
}

.arabic-monogram p {
    margin: 0;
    font-size: 12vw;
    position: relative;
    display: inline-block; /* box hugs the glyphs, not the 35vw container, so the reveal tracks the actual strokes */
}

/* Real per-letter motion without breaking Arabic letter-joining: splitting
   the word into one <span> per character would risk each letter rendering
   in its isolated form instead of properly connected cursive, since
   contextual shaping isn't guaranteed to hold across span boundaries. So
   instead every .ar-letter is a full, complete, correctly-shaped copy of
   the whole word stacked exactly on top of the others; each copy's own
   clip-path is fixed to a horizontal slice - one letter's worth - and only
   that slice's own mask animates when its turn comes. Letters that are
   naturally vertical strokes (Alef, Lam) unmask top-to-bottom, vertical
   motion alone, like that single stroke being drawn downward; every other
   letter - built from a horizontally-extended curve or body rather than a
   straight vertical line - unmasks right-to-left within its own slice
   instead, matching the direction the pen actually travels for that shape.
   The slices fire in reading/writing order, right to left, so it reads as
   consecutive letters being penned. Restarts on its own whenever the
   emblem goes from display:none back to visible, no JS trigger needed. */
.ar-letter {
    display: block;
    animation-duration: 0.12s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-name: ar-letter-write-horizontal;
}

.ar-letter.ar-letter--vertical {
    animation-name: ar-letter-write-vertical;
}

.ar-name-first .ar-letter:not(:first-child),
.ar-name-last .ar-letter:not(:first-child) {
    position: absolute;
    inset: 0;
}

@keyframes ar-letter-write-vertical {
    from {
        clip-path: inset(0 var(--ar-r, 0%) 100% var(--ar-l, 0%));
    }
    to {
        clip-path: inset(0 var(--ar-r, 0%) 0% var(--ar-l, 0%));
    }
}

@keyframes ar-letter-write-horizontal {
    from {
        clip-path: inset(0 var(--ar-r, 0%) var(--ar-b, 0%) calc(100% - var(--ar-r, 0%)));
    }
    to {
        clip-path: inset(0 var(--ar-r, 0%) var(--ar-b, 0%) var(--ar-l, 0%));
    }
}

/* معتز - م ع ت ز: none are vertical strokes, all four sweep right-to-left.
   Each delay = the previous letter's delay + its full duration (0.12s), so
   a letter never begins until the one before it has completely finished.
   The outermost edges (first letter's right, last letter's left) get a
   small negative allowance rather than a flush 0% - "Diwani Letter" is a
   calligraphic style whose flourishes can extend past a glyph's nominal
   width, and a hard clip right at the word boundary was cutting into that.
   The word's left edge (where ز lands, the last letter written) gets extra
   room beyond the other three edges, and ز's own descending tail gets a
   bit of extra room below the baseline too. Every *internal* boundary
   (between two letters) is pulled in 2 points on each side so the slices
   overlap slightly instead of meeting edge-to-edge - two independently
   clipped, independently anti-aliased elements sharing an exact boundary
   can render a hairline gap at the seam; overlapping removes it. */
.ar-name-first .ar-letter:nth-child(1) { --ar-r: -10%;   --ar-l: 73%;    animation-delay: 0s; }
.ar-name-first .ar-letter:nth-child(2) { --ar-r: 23%;    --ar-l: 48%;    animation-delay: 0.12s; }
.ar-name-first .ar-letter:nth-child(3) { --ar-r: 48%;    --ar-l: 23%;    animation-delay: 0.24s; }
.ar-name-first .ar-letter:nth-child(4) { --ar-r: 73%;    --ar-l: -25%;   --ar-b: -12%;   animation-delay: 0.36s; }

/* الصقار - ا ل ص ق ا ر: Alef, Lam and the second Alef (positions 1, 2, 5 -
   marked .ar-letter--vertical in the HTML) are vertical strokes and drop
   straight down; Sad, Qaf and Reh sweep right-to-left like معتز's letters.
   Starts at 0.48s, exactly when معتز's fourth letter (delay 0.36s + 0.12s
   duration) finishes, then likewise one letter at a time. Same 2-point
   overlap at every internal boundary as معتز above. */
.ar-name-last .ar-letter:nth-child(1) { --ar-r: -10%;    --ar-l: 81.33%; animation-delay: 0.48s; }
.ar-name-last .ar-letter:nth-child(2) { --ar-r: 14.67%;  --ar-l: 64.67%; animation-delay: 0.60s; }
.ar-name-last .ar-letter:nth-child(3) { --ar-r: 31.33%;  --ar-l: 48%;    animation-delay: 0.72s; }
.ar-name-last .ar-letter:nth-child(4) { --ar-r: 48%;     --ar-l: 31.33%; animation-delay: 0.84s; }
.ar-name-last .ar-letter:nth-child(5) { --ar-r: 64.67%;  --ar-l: 14.67%; animation-delay: 0.96s; }
.ar-name-last .ar-letter:nth-child(6) { --ar-r: 81.33%;  --ar-l: -10%;   animation-delay: 1.08s; }

@media (prefers-color-scheme: dark) {
    .arabic-monogram {
        color: #D5D5D5;
    }
}

/* Site-swap transition shared by both directions (English <-> Arabic). Kept
   theme-neutral (transform/opacity only) and reuses the site's existing
   0.3s ease-in-out curve (see .floatingHeader in main.css) so it reads as
   native rather than a bolted-on effect. */
.site-slide-out-left,
.site-slide-out-right {
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.site-slide-out-left {
    transform: translateX(-3vw);
}

.site-slide-out-right {
    transform: translateX(3vw);
}

.site-slide-in-right {
    opacity: 0;
    transform: translateX(3vw);
}

.site-slide-in-left {
    opacity: 0;
    transform: translateX(-3vw);
}

.site-slide-in-active {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}