/* =================================================================
   Abdul Osama — Design Tokens
   Colors + Typography + Radii + Shadows + Spacing
   -----------------------------------------------------------------
   Identity "DUSK": the deep indigo → violet → royal-blue →
   luminescent-cyan gradient (off the YouTube cover), in its calmer,
   jewel-toned Dusk shading. SALMON gradient is the action accent;
   MINT EMERALD is the distinctive 5th brand color (taxonomy/success).
   Surfaces: Warm Paper (light) + the gradient itself (dark/brand).
   Arabic-first (RTL by default); Thmanyah is the primary typeface
   everywhere, with the SWASH (الحروف المرسلة) as the approved default
   for all display headings. Cover palettes + block/rail utilities ship
   here too. Single source of truth — never hard-code hex downstream.

   Sourced from the design-system handoff bundle
   (Abdul Osama Design System-handoff.zip → colors_and_type.css).
   The ONLY local adaptation is the @font-face URL prefix:
   "assets/fonts/" → "/fonts/" so Laravel serves the .woff2 files from
   /public/fonts/.
   ================================================================= */

/* ---------- FONTS ----------
   PRIMARY: Thmanyah (licensed — /public/fonts/). Serif Display for
   headings/wordmark, Sans for body/UI — used EVERYWHERE.
   Latin fallbacks: DM Sans (display) / Manrope (body). Mono: Geist Mono.
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('/fonts/thmanyahserifdisplay-Black.woff2') format('woff2');font-weight:900;font-display:swap}

/* Form controls don't inherit font-family by default — <button>, <input>,
   <textarea>, <select> fall back to the UA/system font. Force inheritance
   GLOBALLY (tokens.css loads on every surface) so brand type reaches every
   control, including Souq's <button class="sq-btn"> CTAs — the Souq layout
   never loads design.css, which is where this reset previously lived. */
button, input, textarea, select { font-family: inherit; }

:root {
  /* ==============================================================
     BRAND CORE — the signature gradient lineage, "Dusk" shading
     (jewel-toned, calmer than the electric variant)
     ============================================================== */

  /* --- INDIGO / VIOLET (the deep crown of the gradient) --- */
  --abdul-indigo-950: #160640;
  --abdul-indigo-900: #1f0a52;   /* SIGNATURE deep indigo */
  --abdul-indigo-800: #2e108f;
  --abdul-violet-700: #3d18bf;   /* PRIMARY brand violet */
  --abdul-violet-600: #5526e0;

  /* --- BLUE / CYAN (the luminescent base of the gradient) --- */
  --abdul-blue-500: #3f74f0;     /* royal blue */
  --abdul-blue-400: #4aa3f5;     /* azure */
  --abdul-cyan-400: #34e0e8;     /* luminescent cyan — the glow */
  --abdul-cyan-300: #7fecf0;

  /* ==============================================================
     SALMON — the single action accent (replaces flat ember).
     Has DEPTH: a peach→pink-red gradient, plus solid stops.
     ============================================================== */
  --abdul-salmon-300: #ffb38c;
  --abdul-salmon-400: #ff9466;   /* peach end of the gradient */
  --abdul-salmon-500: #fc7164;   /* mid */
  --abdul-salmon-600: #f5536a;   /* PRIMARY — pink-red end */
  --abdul-salmon-700: #d83a52;

  /* --- legacy "ember" names → salmon, so nothing breaks --- */
  --abdul-ember-300: var(--abdul-salmon-300);
  --abdul-ember-400: var(--abdul-salmon-400);
  --abdul-ember-500: var(--abdul-salmon-600);
  --abdul-ember-600: var(--abdul-salmon-700);
  --abdul-ember-700: var(--abdul-salmon-700);

  /* ==============================================================
     MINT EMERALD — the distinctive 5th brand color.
     Role: taxonomy / categorization / success / data. Extends the
     cyan family toward green; complements the warm salmon.
     ============================================================== */
  --abdul-mint-300: #7fe8c4;
  --abdul-mint-400: #3ce0a6;
  --abdul-mint-500: #1fd896;     /* PRIMARY mint */
  --abdul-mint-600: #0f9b6c;     /* readable on light */
  --abdul-mint-700: #0a6e4d;

  /* ==============================================================
     WARM PAPER — the light canvas (replaces beige AND cool mist).
     Near-white with the faintest warmth; comfortable, not yellow,
     not cold. Darker steps stay neutral to avoid beige creep.
     ============================================================== */
  --abdul-paper-50:  #fffefb;    /* raised paper */
  --abdul-paper-100: #fcfbf8;    /* PRIMARY canvas */
  --abdul-paper-200: #f3f1ea;    /* sunken */
  --abdul-paper-300: #e6e3d9;    /* divider */
  --abdul-paper-400: #a8a496;    /* secondary text on paper */
  --abdul-paper-500: #7c7868;    /* metadata */

  /* --- legacy "sand"/"mist" names → paper, so nothing breaks --- */
  --abdul-sand-50:  var(--abdul-paper-50);
  --abdul-sand-100: var(--abdul-paper-100);
  --abdul-sand-200: var(--abdul-paper-200);
  --abdul-sand-300: var(--abdul-paper-300);
  --abdul-sand-400: var(--abdul-paper-400);
  --abdul-sand-500: var(--abdul-paper-500);
  --abdul-mist-50:  var(--abdul-paper-50);
  --abdul-mist-100: var(--abdul-paper-100);
  --abdul-mist-200: var(--abdul-paper-200);
  --abdul-mist-300: var(--abdul-paper-300);
  --abdul-mist-400: var(--abdul-paper-400);
  --abdul-mist-500: var(--abdul-paper-500);

  /* ==============================================================
     NEUTRALS — deep indigo-ink (pairs with the gradient)
     ============================================================== */
  --abdul-ink-950: #07051c;
  --abdul-ink-900: #100c2c;
  --abdul-ink-800: #1a1540;
  --abdul-ink-700: #282153;
  --abdul-ink-600: #3f3873;
  --abdul-ink-500: #645e96;
  --abdul-ink-400: #8d88b4;
  --abdul-ink-300: #b6b2d2;
  --abdul-ink-200: #d7d5e8;
  --abdul-ink-100: #ebeaf5;
  --abdul-ink-50:  #f5f5fb;
  --abdul-white:   #ffffff;

  /* ==============================================================
     GRADIENTS — the single most recognizable asset (Dusk shading).
     Bottom-anchored: cyan glows low, indigo crowns the top.
     Never tilt, never mirror.
     ============================================================== */
  --abdul-gradient-core: linear-gradient(180deg,
      #1f0a52 0%, #3d18bf 40%, #3f74f0 74%, #34e0e8 100%);
  --abdul-gradient-horizon: linear-gradient(160deg,
      #1f0a52 0%, #3d18bf 52%, #34e0e8 100%);
  --abdul-gradient-radial-glow: radial-gradient(
      ellipse 82% 72% at 50% 112%,
      #34e0e8 0%, #4aa3f5 16%, #3f74f0 33%, #3d18bf 55%, #2e108f 78%, #1f0a52 100%);
  /* The action accent as a gradient (use on CTAs, key underlines) */
  --abdul-gradient-salmon: linear-gradient(135deg, #ff9466 0%, #f5536a 100%);

  /* Legacy aliases — design.css references these names; without them the
     browser silently drops the declarations (transparent bg / no border). */
  --bg-base: var(--bg-canvas);
  --border-default: var(--abdul-ink-200);

  /* ---- LIVELY GRADIENTS — the brand is never flat ----
     Subtle by default: a gentle shift, not a harsh rainbow. Use these
     on buttons, chips, surfaces, icon tiles — anywhere a solid fill
     would feel dead. Body copy stays solid (see element defaults). */
  --abdul-gradient-violet: linear-gradient(135deg, #5526e0 0%, #3d18bf 55%, #3f74f0 100%);  /* primary buttons */
  --abdul-gradient-ink:    linear-gradient(135deg, #282153 0%, #100c2c 100%);                /* secondary / dark */
  --abdul-gradient-mint:   linear-gradient(135deg, #3ce0a6 0%, #0f9b6c 100%);                /* 5th-color fills */
  --abdul-gradient-cyan:   linear-gradient(135deg, #7fecf0 0%, #34e0e8 50%, #3f74f0 100%);
  /* Whisper-subtle surface gradients — barely there, just not flat */
  --abdul-gradient-paper:  linear-gradient(165deg, #fffefb 0%, #f6f3ec 100%);                 /* light cards/canvas */
  --abdul-gradient-raised: linear-gradient(165deg, #ffffff 0%, #f7f4ee 100%);

  /* Heading text gradient — switches per surface (see [data-theme]) */
  --grad-heading: linear-gradient(115deg, #1f0a52 0%, #3d18bf 55%, #3f74f0 100%);

  /* ==============================================================
     SEMANTIC — light mode (Warm Paper canvas)
     ============================================================== */
  --bg-canvas:     var(--abdul-paper-100);
  --bg-surface:    var(--abdul-paper-50);
  --bg-raised:     var(--abdul-white);
  --bg-sunken:     var(--abdul-paper-200);
  --bg-inverse:    var(--abdul-indigo-900);

  --fg-primary:    var(--abdul-ink-900);
  --fg-secondary:  var(--abdul-ink-700);
  --fg-tertiary:   var(--abdul-paper-500);
  --fg-muted:      var(--abdul-paper-400);
  --fg-inverse:    var(--abdul-paper-50);
  --fg-brand:      var(--abdul-violet-700);
  --fg-accent:     var(--abdul-salmon-600);

  --border-subtle: var(--abdul-paper-300);
  --border-strong: var(--abdul-ink-900);
  --border-brand:  var(--abdul-violet-700);

  --link:          var(--abdul-violet-700);
  --link-hover:    var(--abdul-salmon-600);

  /* Semantic state — success now keys off the brand mint */
  --success:       var(--abdul-mint-600);
  --warning:       #e0982a;
  --danger:        var(--abdul-salmon-700);
  --info:          var(--abdul-blue-500);

  /* ==============================================================
     TYPOGRAPHY — Thmanyah-primary, Arabic-first
     ============================================================== */
  --font-arabic:         'Thmanyah Sans', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --font-arabic-display: 'Thmanyah Serif Display', 'Thmanyah Sans', serif;

  --font-display: 'Thmanyah Serif Display', 'Thmanyah Sans', 'DM Sans', sans-serif;
  --font-body:    'Thmanyah Sans', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* الحروف المرسلة (SWASH) — APPROVED as the DEFAULT style for every
     display heading (h1–h3) and the Arabic display face. Swash forms
     only appear on letters with an extended tail (final ن/ي/س/…), so
     they elevate headlines & subheaders without ever touching body. */
  --ff-swash:  "swsh" 1;
  --ff-normal: normal;

  /* Fluid type scale (1.250 major third) */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  1.875rem;   /* 30 */
  --fs-3xl:  2.375rem;   /* 38 */
  --fs-4xl:  3rem;       /* 48 */
  --fs-5xl:  3.75rem;    /* 60 */
  --fs-6xl:  4.75rem;    /* 76 */

  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.1em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ==============================================================
     SPACING — 4px base
     ============================================================== */
  --s-0:  0;
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* ==============================================================
     RADII — soft, echoing the curved "A" monogram
     ============================================================== */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ==============================================================
     SHADOWS — cool indigo tint
     ============================================================== */
  --shadow-xs: 0 1px 2px rgba(31, 10, 82, 0.08);
  --shadow-sm: 0 2px 6px rgba(31, 10, 82, 0.10);
  --shadow-md: 0 6px 18px rgba(31, 10, 82, 0.12), 0 2px 4px rgba(31, 10, 82, 0.08);
  --shadow-lg: 0 16px 36px rgba(31, 10, 82, 0.16), 0 4px 8px rgba(31, 10, 82, 0.08);
  --shadow-xl: 0 28px 60px rgba(31, 10, 82, 0.22);

  /* Glows — brand light spill */
  --glow-violet: 0 10px 32px rgba(61, 24, 191, 0.34);
  --glow-cyan:   0 10px 32px rgba(52, 224, 232, 0.36);
  --glow-salmon: 0 10px 30px rgba(245, 83, 106, 0.34);
  --glow-mint:   0 10px 30px rgba(31, 216, 150, 0.32);
  /* legacy alias */
  --glow-ember:  var(--glow-salmon);

  --ring-focus: 0 0 0 3px rgba(61, 24, 191, 0.42);

  /* ==============================================================
     MOTION
     ============================================================== */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   380ms;
  --dur-slower: 640ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* ==============================================================
     LAYOUT
     ============================================================== */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1440px;
}

/* ------------------------------------------------------------------
   DARK / BRAND SURFACE — the GRADIENT itself as the dark canvas.
   Swap into a section with [data-theme="brand"] or .theme-brand.
   ------------------------------------------------------------------ */
[data-theme="brand"],
.theme-brand {
  --bg-canvas:    var(--abdul-gradient-core);
  --bg-surface:   rgba(255,255,255,0.07);
  --bg-raised:    var(--abdul-indigo-800);
  --bg-sunken:    var(--abdul-indigo-950);

  --fg-primary:   var(--abdul-paper-50);
  --fg-secondary: var(--abdul-ink-200);
  --fg-tertiary:  var(--abdul-ink-300);
  --fg-muted:     var(--abdul-ink-400);
  --fg-brand:     var(--abdul-cyan-400);
  --fg-accent:    var(--abdul-salmon-400);

  --border-subtle: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.32);
  --border-brand:  var(--abdul-cyan-400);
  --link:          var(--abdul-cyan-400);
  --link-hover:    var(--abdul-salmon-300);
  /* On the dark gradient surface, headings glow light→cyan */
  --grad-heading:  linear-gradient(115deg, #ffffff 0%, #cdeffb 55%, #7fecf0 100%);
}

/* ------------------------------------------------------------------
   ELEMENT DEFAULTS — apply to body.abdul-brand for out-of-the-box look.
   Arabic-first: RTL by default. Add dir="ltr" / .ltr for Latin blocks.
   ------------------------------------------------------------------ */
body.abdul-brand {
  /* Keep our existing body styling in design.css — these element defaults
     are intentionally NOT mass-applied because design.css already owns
     fine-grained typography per layout. The token vars above are the
     contract; everything in design.css inherits the new values. */
  font-family: var(--font-body);
}

/* Heading gradient (text fill) — opt-in via .grad-text or applied to
   .hero-title / .section-title in design.css for the splashy treatment. */
.grad-text {
  background: var(--grad-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Swash on/off toggles — for Arabic display flourishes. */
.mursal   { font-feature-settings: var(--ff-swash); }
.no-swash { font-feature-settings: var(--ff-normal); }

/* Gradient fill helpers (non-text): backgrounds. */
.grad-fill        { background: var(--abdul-gradient-violet); color: #fff; }
.grad-fill-salmon { background: var(--abdul-gradient-salmon); color: #fff; }
.grad-fill-mint   { background: var(--abdul-gradient-mint);   color: #06241a; }

/* ==================================================================
   COVER PALETTES — the Instagram-cover rotation as reusable tokens.
   Eight named recipes. Set data-cover="petrol|ember|mint|cyan|cream|
   violet|synth|sunset" on a cover root, then use the .cover-* utilities
   (surface / block / tag / serif / rail). Each palette carries its own
   background, text, accent, highlight-BLOCK pair, and RAIL color.
   ================================================================== */
[data-cover]{ /* default = petrol */
  --cover-bg:linear-gradient(165deg,#08231b,#0c2c22 55%,#1f0a52);
  --cover-text:#f4efe2; --cover-sub:#87b4a1;
  --cover-accent:#34e0e8; --cover-on-accent:#06241a;
  --cover-block-bg:#1fd896; --cover-block-fg:#06241a; --cover-rail:#34e0e8;
}
[data-cover="petrol"]{ --cover-bg:linear-gradient(165deg,#08231b,#0c2c22 55%,#1f0a52); --cover-text:#f4efe2; --cover-sub:#87b4a1; --cover-accent:#34e0e8; --cover-on-accent:#06241a; --cover-block-bg:#1fd896; --cover-block-fg:#06241a; --cover-rail:#34e0e8; }
[data-cover="ember"]{ --cover-bg:linear-gradient(150deg,#ff9466,#f5536a 68%,#ed3a12); --cover-text:#ffffff; --cover-sub:rgba(255,255,255,.88); --cover-accent:#1f0a52; --cover-on-accent:#ffffff; --cover-block-bg:#1f0a52; --cover-block-fg:#34e0e8; --cover-rail:#ffffff; }
[data-cover="mint"]{ --cover-bg:radial-gradient(120% 90% at 50% 0,#5cf0bd,#1fd896 55%,#0f9b6c); --cover-text:#06241a; --cover-sub:#0c7d57; --cover-accent:#3d18bf; --cover-on-accent:#ffffff; --cover-block-bg:#06241a; --cover-block-fg:#1fd896; --cover-rail:#0f7d5a; }
[data-cover="cyan"]{ --cover-bg:radial-gradient(120% 90% at 50% 0,#7fecf0,#34e0e8 55%,#15a8c4); --cover-text:#0a2540; --cover-sub:#0c5b6b; --cover-accent:#f5536a; --cover-on-accent:#ffffff; --cover-block-bg:#1f0a52; --cover-block-fg:#34e0e8; --cover-rail:#0a7d92; }
[data-cover="cream"]{ --cover-bg:linear-gradient(165deg,#fffefb,#f4efe2); --cover-text:#1f0a52; --cover-sub:#645e96; --cover-accent:#f5536a; --cover-on-accent:#ffffff; --cover-block-bg:#f5536a; --cover-block-fg:#ffffff; --cover-rail:#c9b8d6; }
[data-cover="violet"]{ --cover-bg:radial-gradient(92% 80% at 50% 112%,#2f6bff,#5a16e6 45%,#1f0a52 90%); --cover-text:#ffffff; --cover-sub:#cdbff5; --cover-accent:#34e0e8; --cover-on-accent:#06241a; --cover-block-bg:#1fd896; --cover-block-fg:#06241a; --cover-rail:#34e0e8; }
[data-cover="synth"]{ --cover-bg:linear-gradient(180deg,#0a0820,#1f0a52 60%,#3d18bf); --cover-text:#f4efe2; --cover-sub:#b6a8e8; --cover-accent:#ff7a2e; --cover-on-accent:#0a0820; --cover-block-bg:#34e0e8; --cover-block-fg:#0a0820; --cover-rail:#ff7a2e; }
[data-cover="sunset"]{ --cover-bg:linear-gradient(180deg,#ff9466,#f5536a 45%,#5a16e6); --cover-text:#ffffff; --cover-sub:rgba(255,255,255,.88); --cover-accent:#34e0e8; --cover-on-accent:#06241a; --cover-block-bg:#fffefb; --cover-block-fg:#1f0a52; --cover-rail:#34e0e8; }

.cover-surface{ background:var(--cover-bg); color:var(--cover-text); }
/* BLOCKS — stacked highlight-block headline. Wrap each line in its own
   .cover-block; the clone keeps padding intact across line breaks. */
.cover-block{
  display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  font-family:var(--font-arabic); font-weight:var(--fw-black);
  background:var(--cover-block-bg); color:var(--cover-block-fg);
  padding:2px 16px; border-radius:11px; line-height:1.5;
}
.cover-tag{
  display:inline-block; font-family:var(--font-arabic); font-weight:800;
  background:var(--cover-accent); color:var(--cover-on-accent);
  padding:7px 18px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.cover-serif{ font-family:var(--font-arabic-display); color:var(--cover-text); font-feature-settings:var(--ff-swash); line-height:1.14; }
/* RAILS — accent bars: a vertical spine or a horizontal rule. */
.cover-rail   { background:var(--cover-rail); border-radius:4px; }
.cover-rail-v { width:4px; align-self:stretch; background:var(--cover-rail); border-radius:4px; }
.cover-rail-h { height:3px; width:100%; background:var(--cover-accent); border-radius:4px; }

/* City skyline band — global so it renders on EVERY page's sky header
   (marketing, Souq, hub, learn), not only the home/learn heroes whose
   design.css also defines it. Injected by sky.js on [data-skyline]. */
.sky-skyline {
  /* `position` + `bottom` are !important on purpose. Several page stylesheets
     carry a `[data-sky] > * { position: relative }` (site.css) — and hub.css a
     `.hub-hero[data-sky] > *` — that lifts hero CONTENT above the star canvas.
     Those rules match this injected band too, have equal/higher specificity,
     and load after tokens.css, so without !important they'd drop the skyline
     into normal flow and float it mid-hero (this happened on the blog/stack/
     partners/speaking/books/contact/404 heroes). It's a decorative seam band
     that must ALWAYS sit at the bottom, on every page — hence the override. */
  position: absolute !important; left: 0; right: 0; bottom: 0 !important;
  height: clamp(64px, 12vh, 150px);
  z-index: 0; pointer-events: none;
  background: linear-gradient(to top, #0a1450 0%, #131f5c 46%, rgba(19,31,92,0) 100%);
  -webkit-mask: url(/images/skyline.png?v=2) repeat-x bottom / auto 100%;
          mask: url(/images/skyline.png?v=2) repeat-x bottom / auto 100%;
  opacity: .5;
}
@media (prefers-reduced-motion: reduce) { .sky-skyline { opacity: .4; } }