/* Al Mousalli: "from I to we".
   Default state = the finished poster, fully lit (no JS / reduced motion).
   cinema.js adds .mc--js, which pins the stage and drives it from scroll. */

@font-face {
  font-family: "Mousalli Plex Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

/* Portal front page: the old landing (logo + two tiles) and the theme preloader give way to the campaign scene.
   Remove the module (or the state key) and they return. */
body.ms-cinema .main-page-container, body.ms-cinema .pattern, body.ms-cinema .preloader { display: none !important; }
body.ms-cinema { background: #0f070f !important; }

.mc {
  --mc-black: #0f070f;
  --mc-plum: #1b1319;
  --mc-violet: #953c97;
  --mc-yellow: #f8d30c;
  --mc-vh: 100vh;
  --mc-safe: 0px;
  --ms-ar-head: Bahij, Tahoma, sans-serif;
  position: relative; isolation: isolate; overflow-x: clip;
  background: var(--mc-black); color: #fff;
}
@supports (height: 100svh) { .mc { --mc-vh: 100svh; } }
.mc *, .mc *::before, .mc *::after { box-sizing: border-box; }
.mc img { max-width: none; }
:where(.mc) img { display: block; } /* low specificity so the hide rules below can win */
.mc h1, .mc p, .mc ol, .mc li { margin: 0; padding: 0; list-style: none; }
.mc a { text-decoration: none; }

.mc-sr, .mc-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mc-skip:focus { position: absolute; z-index: 20; top: 12px; inset-inline-start: 12px; padding: 10px 16px; background: var(--mc-yellow); color: var(--mc-black); font-weight: 700; }

.mc-btn { display: inline-block; padding: .95em 1.6em; border: 2px solid var(--mc-yellow); background: var(--mc-yellow); color: var(--mc-black);
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; border-radius: 2px; transition: background .25s, color .25s, border-color .25s; }
.mc-btn:hover, .mc-btn:focus-visible { background: transparent; color: var(--mc-yellow); }
.mc-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.mc-btn--ghost:hover, .mc-btn--ghost:focus-visible { border-color: var(--mc-yellow); color: var(--mc-yellow); }
.mc a:focus-visible, .mc button:focus-visible { outline: 3px solid var(--mc-yellow); outline-offset: 3px; }

/* ───── Static (default): the finished poster ───── */
.mc-stage { position: relative; min-height: var(--mc-vh); overflow: hidden; background: var(--mc-plum); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.mc-world { position: relative; grid-row: 2; width: 100%; aspect-ratio: 16 / 9; align-self: end; }
.mc-photo, .mc-photo img { display: block; width: 100%; height: 100%; }
.mc-photo img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-composite: intersect; }
.mc-says, .mc-world--top, .mc-stamp, .mc-dark, .mc-ana, .mc-pager, .mc-cue { display: none; }
.mc-ehna { grid-row: 1; justify-self: center; width: min(86vw, 860px); height: auto; margin-top: 4vh; }
.mc-line { position: absolute; z-index: 3; inset-inline: 6vw; bottom: 24%; text-align: center; font-family: "Mousalli Plex Arabic", "Noto Sans Arabic", Tahoma, sans-serif; font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem); line-height: 1.5; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.8); }
.mc-brand { position: absolute; z-index: 3; bottom: 4%; inset-inline-end: 8vw; width: min(14vw, 150px); display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.mc-brand__lantern { height: clamp(48px, 9vh, 90px); width: auto; }
.mc-brand__word { width: 100%; height: auto; }
.mc-ctas { position: absolute; z-index: 4; bottom: 5%; inset-inline-start: 4vw; display: flex; flex-wrap: wrap; gap: 10px; max-width: min(46vw, 560px); }
.mc-btn { cursor: pointer; font-family: inherit; }
.mc--js .mc-line { display: none; }
.mc--js .mc-says { display: block; position: absolute; z-index: 4; inset-inline: 6vw; bottom: calc(var(--mc-bar, 0px) + 11vh); text-align: center; pointer-events: none; }
.mc-says p { position: absolute; inset-inline: 0; bottom: 0; margin: 0 auto; max-width: 30ch; opacity: 0; font-family: var(--ms-ar-head, "Mousalli Plex Arabic", "Noto Sans Arabic", Tahoma, sans-serif); font-weight: 700;
  font-size: clamp(1.25rem, 2.7vw, 2.3rem); line-height: 1.45; color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.7); }
.mc-end { height: 6px; background: var(--mc-yellow); }

/* ───── JS mode: pinned, scroll-driven ───── */
.mc--js { --mc-safe: 88px; }
.mc--js .mc-scene { height: 720vh; }
.mc--js .mc-stage { position: sticky; top: 0; height: var(--mc-vh); min-height: 0; display: block; background: var(--mc-black); }
.mc--js .mc-world, .mc--js .mc-world--top { display: block; position: absolute; left: 0; top: 0; width: var(--ww, 100vw); height: var(--wh, 56.25vw); aspect-ratio: auto; transform-origin: 0 0; will-change: transform; } /* sized for max zoom and only scaled DOWN, so the frozen raster stays sharp */
.mc--js .mc-stamp { display: block; position: absolute; width: 14%; height: auto; opacity: 0; clip-path: inset(0 0 0 100%); transform-origin: 50% 100%;
  pointer-events: none; }
.mc--js .mc-world--top { z-index: 2; }
.mc--js .mc-dark { display: block; z-index: 1; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mc--js .mc-ana { display: block; position: absolute; z-index: 3; top: 50%; left: 50%; width: min(52vw, calc(var(--mc-vh) * .5), 520px); height: auto; margin: 0;
  transform: translate(-50%, -50%); opacity: 0; filter: drop-shadow(0 0 40px rgba(248,211,12,.35)); pointer-events: none; }
.mc--js .mc-ehna { position: absolute; z-index: 3; top: calc(var(--mc-safe) + 3vh); left: 50%; margin: 0; width: min(86vw, 880px); transform: translateX(-50%); opacity: 0; clip-path: inset(0 0 0 100%); }
.mc--js .mc-line { bottom: 21%; opacity: 0; }
.mc--js .mc-brand, .mc--js .mc-ctas { opacity: 0; visibility: hidden; }
.mc--js .mc-pager { display: flex; position: absolute; z-index: 5; bottom: clamp(18px, 4vh, 36px); left: 50%; transform: translateX(-50%); gap: 14px; opacity: 0; }
.mc-pager button { width: 14px; height: 14px; padding: 0; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; background: transparent; cursor: pointer; transition: background .3s, border-color .3s, transform .3s; }
.mc-pager button:hover { border-color: var(--mc-yellow); transform: scale(1.25); }
.mc-pager button.is-lit { background: var(--mc-yellow); border-color: var(--mc-yellow); }
.mc--js .mc-cue { display: block; position: absolute; z-index: 5; bottom: 4vh; left: 50%; transform: translateX(-50%); }
.mc-cue i { display: block; width: 1px; height: 44px; background: linear-gradient(var(--mc-yellow), transparent); transform-origin: top; animation: mc-cue 2.2s ease-in-out infinite; }
@keyframes mc-cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-aspect-ratio: 1/1), (max-width: 700px) {
  .mc { --mc-bar: 0px; } /* no bottom bar on the portal */
  .mc-ehna { width: 92vw; }
  .mc-brand { display: none; }
  .mc-ctas { inset-inline: 5vw; max-width: none; bottom: calc(var(--mc-bar) + 26px); display: grid; grid-template-columns: 1fr 1fr; }
  .mc-ctas .mc-btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: .6rem .5rem; }
  .mc-line { bottom: calc(var(--mc-bar) + 150px); inset-inline: 7vw; }
  .mc--js .mc-says { bottom: calc(var(--mc-bar) + 58px); }
  .mc-says p { font-size: 1.2rem; max-width: 26ch; }
  .mc--js .mc-pager { bottom: calc(var(--mc-bar) + 26px); }
  .mc--js .mc-cue { bottom: calc(var(--mc-bar) + 22px); }
  .mc--js .mc-ana { width: min(64vw, calc(var(--mc-vh) * .38)); }
}
@media (prefers-reduced-motion: reduce) { .mc-cue i { animation: none; } }

/* The campaign scene keeps its big type regardless of site-wide skin rules. */
.mc .mc-says p { font-size: clamp(1.25rem, 2.7vw, 2.3rem) !important; line-height: 1.45 !important; margin: 0 auto; }
.mc .mc-line { font-size: clamp(1.1rem, 2.4vw, 1.9rem) !important; line-height: 1.5 !important; }
.mc a.mc-btn { font-size: .78rem !important; }
@media (max-aspect-ratio: 1/1), (max-width: 700px) {
  .mc .mc-says p { font-size: 1.2rem !important; }
}

/* Caption look from the campaign's reels: near-white lilac letters with a violet outline.
   Outline = ring of text-shadows (smooth on Arabic joins, unlike -webkit-text-stroke's mitred corners). */
.mc .mc-says p, .mc .mc-line {
  --o: #b66ebd; /* campaign lilac */
  color: #fbf0ff !important;
  text-shadow:
    2.2px 0 0 var(--o), -2.2px 0 0 var(--o), 0 2.2px 0 var(--o), 0 -2.2px 0 var(--o),
    1.6px 1.6px 0 var(--o), -1.6px 1.6px 0 var(--o), 1.6px -1.6px 0 var(--o), -1.6px -1.6px 0 var(--o),
    2.2px 1.1px 0 var(--o), -2.2px 1.1px 0 var(--o), 2.2px -1.1px 0 var(--o), -2.2px -1.1px 0 var(--o),
    1.1px 2.2px 0 var(--o), -1.1px 2.2px 0 var(--o), 1.1px -2.2px 0 var(--o), -1.1px -2.2px 0 var(--o),
    0 3px 6px rgba(40, 8, 52, .85), 0 4px 22px rgba(15, 4, 20, .95);
}
@media (max-width: 700px), (max-aspect-ratio: 1/1) {
  .mc .mc-says p, .mc .mc-line { text-shadow:
    1.8px 0 0 var(--o), -1.8px 0 0 var(--o), 0 1.8px 0 var(--o), 0 -1.8px 0 var(--o),
    1.3px 1.3px 0 var(--o), -1.3px 1.3px 0 var(--o), 1.3px -1.3px 0 var(--o), -1.3px -1.3px 0 var(--o),
    0 3px 6px rgba(40, 8, 52, .85), 0 4px 18px rgba(15, 4, 20, .95); }
}

/* ───── Portal additions ───── */
.mc-btn--alt { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.mc-btn--alt:hover, .mc-btn--alt:focus-visible { border-color: var(--mc-yellow); color: var(--mc-yellow); }
.mc-ctas { gap: 12px; }
.mc a.mc-btn { font-family: Bahij, Tahoma, "Muli", sans-serif; font-size: 1.05rem !important; letter-spacing: 0; text-transform: none; font-weight: 700; }
.mc-lang { position: absolute; z-index: 30; top: 16px; inset-inline-end: 16px; padding: .5rem 1.05rem; border: 1px solid rgba(248,211,12,.65); border-radius: 999px;
  background: rgba(15,7,15,.55); color: #fff; font-size: .9rem; font-weight: 700; line-height: 1; transition: background .25s, color .25s; }
.mc-lang:hover, .mc-lang:focus-visible { background: var(--mc-yellow); color: var(--mc-black); }

@keyframes ms-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.ms-loader__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ms-loader__inner { position: relative; display: grid; justify-items: center; gap: 22px; width: min(78vw, 360px); }
.ms-loader__glow { position: absolute; top: 4%; left: 50%; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(248,211,12,.28), rgba(149,60,151,.12) 55%, transparent 72%); animation: ms-glow 2.2s ease-in-out infinite alternate; }
.ms-loader__lantern { position: relative; width: 92px; height: auto; animation: ms-bob 2.2s ease-in-out infinite alternate; filter: drop-shadow(0 12px 28px rgba(0,0,0,.55)); }
.ms-loader__word { position: relative; width: 190px; height: auto; opacity: 0; animation: ms-rise 1s cubic-bezier(.2,.7,.2,1) .35s forwards; }
.ms-loader__bar { position: relative; width: 150px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.12); }
.ms-loader__bar i { position: absolute; top: 0; bottom: 0; width: 45%; border-radius: 3px; background: #f8d30c; animation: ms-bar 1.3s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes ms-glow { from { transform: scale(.85); opacity: .65; } to { transform: scale(1.15); opacity: 1; } }
@keyframes ms-bob { from { transform: translateY(5px); } to { transform: translateY(-9px); } }
@keyframes ms-bar { 0% { left: -45%; } 100% { left: 100%; } }
[dir="rtl"] .ms-loader__bar i { animation-name: ms-bar-rtl; }
@keyframes ms-bar-rtl { 0% { right: -45%; } 100% { right: 100%; } }
@media (prefers-reduced-motion: reduce) { .ms-loader__glow, .ms-loader__lantern, .ms-loader__bar i { animation: none; } .ms-loader__word { animation: none; opacity: 1; } }

/* The portal's two links are the point of the page: make them big. */
@media (min-width: 701px) and (min-aspect-ratio: 1/1) {
  .mc-ctas { gap: 16px; bottom: 6%; max-width: none; }
  .mc a.mc-btn { font-size: 1.35rem !important; padding: .8em 2.2em; }
}
@media (max-width: 700px), (max-aspect-ratio: 1/1) { .mc a.mc-btn { font-size: 1.25rem !important; } }

/* The top bar itself is the shared .ms-top component (portal-skin.css). */
@media (max-width: 700px) { .mc--js { --mc-safe: 66px; } }