/*
 * Ground, reveal and the gold number — the Al Masa system, carried across.
 *
 * Extracted from the live almasaadv.com on 5 Oct 2026 and rebuilt here rather
 * than copied, because of one fact that would have broken everything:
 *
 *   ** Al Masa's root font-size is 16px. Ours is 10px. **
 *
 * Every rem in their CSS therefore had to be multiplied by 1.6 and written as
 * px. Pasted unchanged, `clamp(3rem, 8.4vw, 6.5rem)` would have rendered a
 * 104px number at 30px — the same 62.5% bug that once shrank this whole site.
 *
 * What came across:
 *   - the navy is never flat: it always carries the pattern, and the pattern
 *     drifts;
 *   - reveal is a transform/opacity pair on [data-sc-reveal], staggered by --i,
 *     gated behind .sc-js so a visitor without JavaScript sees everything;
 *   - the gold number is a gradient clipped to the glyphs, with a one-shot
 *     shine, and is isolated LTR so Arabic pages do not reorder it;
 *   - gold arrives as a rule that draws itself, never as a field.
 *
 * No animation library. Al Masa uses none, and neither does this.
 */

/* ---------------------------------------------------------------- ground --- */

/* A navy section. The pattern is what keeps the depth from reading as a flat,
   heavy slab — the single biggest difference between this and the palette it
   replaces. */
.sc-ground {
    background-color: var(--sc-ink);
    background-image: var(--sc-pattern);
    background-size: 480px auto;
    color: var(--sc-paper);
}

/* Three depths, so consecutive sections separate without a border. */
.sc-ground--deep { background-color: var(--sc-ink-deep); }
.sc-ground--mid { background-color: var(--sc-ink-mid); }

@media (prefers-reduced-motion: no-preference) {
    .sc-ground--drift { animation: sc-drift 90s linear infinite; }
}

@keyframes sc-drift { to { background-position: 480px 280px; } }

/* ---------------------------------------------------------------- reveal --- */

/* Gated on .sc-js, set by script on <html>. Without JavaScript the rules below
   never apply and every element is simply visible — content that hides itself
   waiting for a script fails in the wrong direction. */
.sc-js [data-sc-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .85s cubic-bezier(.2, .7, .2, 1),
        transform .85s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
}

.sc-js [data-sc-reveal].is-in { opacity: 1; transform: none; }

/* NEVER reuse the bare `data-reveal` attribute here. The theme already sets it
   on <body> as a feature flag for the catalogue's own reveal script, so a rule
   written against `[data-reveal]` hides the entire document — which it did,
   live, for the few minutes it took to notice. The attribute this system uses
   is `data-sc-reveal`, and the selector below also refuses <body> outright. */
.sc-js body[data-sc-reveal] { opacity: 1 !important; transform: none !important; }


/* ------------------------------------------------------------ gold rule --- */

/* Gold as a rule that draws itself — the sanctioned use, and the only motion
   gold is allowed. Fades out at both ends so it reads as drawn, not as a bar. */
.sc-rule {
    display: block;
    height: 2px;
    width: 0;
    margin-inline: auto;
    background: linear-gradient(90deg, transparent, var(--sc-accent-light), transparent);
    transition: width 1.1s cubic-bezier(.2, .7, .2, 1) .25s;
}

.is-in .sc-rule { width: min(240px, 60%); }

/* ----------------------------------------------------------- the number --- */

.sc-stats__head { text-align: center; margin-bottom: clamp(32px, 5vw, 64px); }

.sc-stat {
    position: relative;
    padding: clamp(32px, 4.5vw, 54px) 12px;
    text-align: center;
    /* A hairline of gold at 24% — the grid is drawn in gold rules, not filled
       with gold. Negative margins collapse neighbouring borders into one. */
    border: 1px solid color-mix(in srgb, var(--sc-accent) 24%, transparent);
    margin: 0 -1px -1px 0;
    transition: background-color .4s ease;
}

/* The one place gold touches a surface, and it is 7% and only on hover. */
.sc-stat:hover { background-color: color-mix(in srgb, var(--sc-accent-light) 7%, transparent); }
.sc-stat:hover .sc-stat__num { filter: drop-shadow(0 0 20px color-mix(in srgb, var(--sc-accent-light) 50%, transparent)); }

.sc-stat__num {
    /* Isolated and forced LTR: on the Arabic pages the surrounding RTL context
       would otherwise push a "+" or a comma to the wrong end of the figure. */
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    font-family: var(--sc-font-display), sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 8.4vw, 104px);   /* their 3rem/6.5rem at our root */
    line-height: 1.05;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;     /* digits keep their column while counting */
    background: linear-gradient(180deg,
        var(--sc-accent-pale) 0%,
        var(--sc-accent-light) 42%,
        var(--sc-accent) 70%,
        var(--sc-accent-deep) 100%);
    background-size: 100% 220%;             /* the extra height is what shines */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sc-stat__suffix { font-family: inherit !important; font-size: .6em; }

.sc-stat__label {
    margin-top: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: clamp(13px, 1.3vw, 15px);
    color: color-mix(in srgb, var(--sc-paper) 90%, transparent);
}

/* Arabic does not take Latin small-caps tracking: it separates joined letters. */
[dir="rtl"] .sc-stat__label { letter-spacing: normal; text-transform: none; }

.sc-stat.is-in .sc-stat__num {
    animation: sc-shine 2.6s cubic-bezier(.2, .7, .2, 1) .35s 1;
}

@keyframes sc-shine {
    from { background-position: 0 100%; }
    to { background-position: 0 0; }
}

/* --------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: reduce) {
    .sc-js [data-sc-reveal] { opacity: 1; transform: none; transition: none; }
    .sc-rule { width: min(240px, 60%); transition: none; }
    .sc-stat.is-in .sc-stat__num { animation: none; }
    .sc-ground--drift { animation: none; }
}

/* ------------------------------------------------- applying the ground --- */

/* The existing dark surfaces, brought onto the system. The pattern is the
   point: a flat navy slab is what reads as gloom, and the same navy carrying
   a 20%-strength gold line tile reads as depth. Al Masa never ships the one
   without the other, which is why its darkness feels rich rather than heavy. */
.hero,
.rbt-footer,
.footer-top {
    background-image: var(--sc-pattern);
    background-size: 480px auto;
}

/* The footer was a cold near-black (#0B1120) hardcoded by the theme, outside
   the palette entirely — so it never changed with the brand and sat a full
   step colder than everything above it. */
.rbt-footer,
.footer-top {
    background-color: var(--sc-ink-deep) !important;
}

@media (prefers-reduced-motion: no-preference) {
    .hero { animation: sc-drift 120s linear infinite; }
}

/* ------------------------------------------------- the figures section --- */

.sc-stats { padding-block: clamp(64px, 8vw, 112px); }

.sc-stats__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sc-accent);
}

[dir="rtl"] .sc-stats__eyebrow { letter-spacing: normal; text-transform: none; }

.sc-stats__title {
    margin: 0 0 20px;
    font-family: var(--sc-font-display);
    font-size: clamp(26px, 3.4vw, 42px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--sc-paper);
}

/* A hairline grid: the borders collapse into each other, so the gold appears
   as single rules between cells rather than a box around each one. */
.sc-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid color-mix(in srgb, var(--sc-accent) 24%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--sc-accent) 24%, transparent);
}

@media (min-width: 768px) {
    .sc-stats__grid { grid-template-columns: repeat(3, 1fr); }
}

[dir="rtl"] .sc-stats__grid {
    border-left: 0;
    border-right: 1px solid color-mix(in srgb, var(--sc-accent) 24%, transparent);
}