/* MAWGOD, COMING SOON: what mawgod.app shows until the app itself is served there.
 *
 * The look is the landing page's closing section (app/[locale]/(site)/landing.css,
 * .final): the teal, the white headline, the presence dot as its full stop, and
 * the compound's masterplan behind it. Here the masterplan draws itself in
 * (plan.svg) and its units light up one by one, because the product is still
 * being built. No script anywhere: every movement is CSS, and all of it stops
 * for prefers-reduced-motion.
 *
 * Logical properties only, like the rest of the repository (lint:rtl). The
 * English page is the same sheet under html[lang=en], dir=ltr. */

/* IBM Plex Sans Arabic (SIL Open Font License 1.1), the app's own face: the
 * Arabic and Latin subsets the app is built with, self-hosted so the page asks
 * no other site for anything. */
@font-face{font-family:Plex;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-400-arabic.woff2) format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Plex;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-600-arabic.woff2) format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Plex;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plex-700-arabic.woff2) format("woff2");unicode-range:U+6??,U+750-77F,U+870-88E,U+890-891,U+897-8E1,U+8E3-8FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Plex;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-400-latin.woff2) format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Plex;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-600-latin.woff2) format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Plex;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plex-700-latin.woff2) format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Arial stretched to Plex's measurements, as next/font does, so nothing jumps
   when the real face arrives. */
@font-face{font-family:"Plex Fallback";src:local(Arial);ascent-override:107.25%;descent-override:41.02%;line-gap-override:0%;size-adjust:101.17%}

:root{
  --teal:#0E5259; --live:#7BE3D6;
  --ink:#fff; --ink-2:#D5ECEA; --ink-3:#A9CFCC; --kick:#9FD8D4; --rule:rgba(255,255,255,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1240px; --gut:clamp(16px,4vw,40px);
  /* teal in every theme: the page has one look, and native bits (a scrollbar,
     a focus ring) should be drawn for a dark ground */
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--teal)}
body{margin:0; background:var(--teal); color:var(--ink); font:400 16px/1.6 Plex,"Plex Fallback",system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip}
p{margin:0}

.page{position:relative; isolation:isolate; display:flex; flex-direction:column; min-block-size:100vh; min-block-size:100svh; overflow:hidden}
/* paper grain, as on the landing page: felt, not seen */
.page::after{content:""; position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{inline-size:100%; max-inline-size:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.grow{flex:1}

/* ── the masterplan ────────────────────────────────────────────────
   The landing page's closing plan (plan(FINAL_MARKS, FINAL_MARKS) in
   app/[locale]/(site)/markup.ts), written into each page. It sits on the far
   side from the words; a map never flips with the language, so only its place
   on the page follows the reading direction. It draws itself in, then its units
   light up one by one (--k) and keep pinging. */
.plan{position:absolute; z-index:-1; inset-block:-40px; inset-inline-end:-12%; inline-size:min(940px,64%);
  --pl:rgba(255,255,255,.1); --pr:var(--teal); --pw:rgba(255,255,255,.04); --pg:rgba(255,255,255,.05); --pd:var(--live);
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 35%,transparent 100%); mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 35%,transparent 100%)}
.plan svg{display:block; inline-size:100%; block-size:100%}
.plan .fence{fill:none; stroke:var(--pl); stroke-width:1; stroke-dasharray:3 5}
.plan .ro{fill:none; stroke:var(--pl); stroke-width:17; stroke-linecap:round}
.plan .ri{fill:none; stroke:var(--pr); stroke-width:15; stroke-linecap:round}
.plan .cl{fill:none; stroke:var(--pl); stroke-width:.8; stroke-dasharray:6 7}
.plan .water{fill:var(--pw); stroke:var(--pl); stroke-width:1}
.plan .green{fill:var(--pg); stroke:var(--pl); stroke-width:1}
.plan .edge{fill:none; stroke:var(--pl); stroke-width:1}
.plan .plot{fill:transparent; stroke:var(--pl); stroke-width:1}
.plan .tree{fill:var(--pg); stroke:var(--pl); stroke-width:.8}
.plan .plot.hit{fill:rgba(123,227,214,.22); stroke:var(--pd)}
.plan .mk,.plan .mkr{fill:var(--pd); transform-box:fill-box; transform-origin:center}
.plan .dr{stroke-dasharray:1 1; animation:draw 1.5s var(--ease) calc(var(--i,0) * 35ms + .1s) both}
.plan .plot.hit{animation:draw 1.5s var(--ease) calc(var(--i,0) * 35ms + .1s) both, lit .6s var(--ease) calc(var(--k) * .35s + 2s) both}
.plan .fence,.plan .cl,.plan .tree{animation:fade 1s 1.4s both}
.plan .mk{animation:pop .5s var(--ease) calc(var(--k) * .35s + 2s) both}
.plan .mkr{opacity:0; animation:ping 2.2s var(--ease) calc(var(--k) * .35s + 2.3s) infinite}
@keyframes draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}}
@keyframes lit{from{fill:transparent; stroke:var(--pl)}}
@keyframes pop{from{opacity:0; transform:scale(0)}}

/* ── the signature: the presence dot ─────────────────────────────── */
.live{position:relative; display:inline-block; inline-size:var(--s,.28em); block-size:var(--s,.28em); border-radius:50%; background:var(--live); flex:none}
.live::after{content:""; position:absolute; inset:0; border-radius:inherit; background:inherit; animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1); opacity:.6} 70%,100%{transform:scale(3.4); opacity:0}}

/* ── header ─────────────────────────────────────────────────────── */
.top{display:flex; align-items:center; gap:16px; block-size:72px}
.brand{display:inline-flex; align-items:baseline; font-weight:700; font-size:23px; line-height:1; color:#fff}
.brand .live{--s:7px; margin-inline-start:3px}
html[lang=en] .brand{letter-spacing:-.035em}
.lang{display:inline-block; padding:9px 11px; border-radius:8px; border:1px solid rgba(255,255,255,.24); color:#DDEFEE; font:600 13px/1 Plex,"Plex Fallback",system-ui,sans-serif; text-decoration:none; transition:color .2s, border-color .2s}
.lang:hover{color:#fff; border-color:rgba(255,255,255,.5)}
.lang:focus-visible{outline:2px solid var(--live); outline-offset:3px}

/* ── the message ────────────────────────────────────────────────── */
.main{flex:1; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(48px,9vh,112px)}
/* «قريبًا» as a presence status: the dot is on, the product is nearly here */
.kick{display:inline-flex; align-self:flex-start; align-items:center; gap:10px; margin-block-end:26px; padding-block:7px; padding-inline:14px 16px; border:1px solid rgba(255,255,255,.18); border-radius:99px; background:rgba(255,255,255,.05); font-size:15.5px; font-weight:600; line-height:1.3; color:var(--kick)}
.kick .live{--s:8px}
h1{margin:0; font-weight:700; font-size:clamp(50px,8vw,128px); line-height:1.12; color:#fff}
html[lang=en] h1{font-size:clamp(46px,7.4vw,118px); line-height:1.02; letter-spacing:-.045em}
/* each line rises out of its own mask; the padding keeps the shadda and the
   dots below a letter inside it */
h1 .l{display:block; overflow:hidden; padding-block:.12em .16em; margin-block:-.12em -.16em}
h1 .l>span{display:inline-block; animation:rise 1s var(--ease) var(--d,.1s) both}
@keyframes rise{from{transform:translateY(112%)}}
h1 .live{--s:.15em; margin-inline-start:.06em}
.lead{margin-block-start:30px; max-inline-size:30em; font-size:clamp(17px,1.5vw,21px); line-height:1.75; color:var(--ink-2)}
.note{margin-block-start:14px; font-size:14.5px; color:var(--ink-3)}
.lift{animation:lift 1s var(--ease) var(--d,0s) both}
@keyframes lift{from{opacity:0; transform:translateY(14px)}}

/* ── footer ─────────────────────────────────────────────────────── */
.foot{display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding-block:22px 30px; padding-block-end:max(30px,env(safe-area-inset-bottom)); border-block-start:1px solid var(--rule); font-size:14px; color:var(--ink-3)}

/* ── narrow screens: the words on top, the compound underneath ──── */
@media (max-width:860px){
  .plan{inset-inline:-35%; inline-size:auto; inset-block:auto 0; block-size:56%;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 30%,transparent 100%); mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 30%,transparent 100%)}
  .main{justify-content:flex-start; padding-block:clamp(40px,10vh,88px) 56px}
}
@media (max-width:640px){
  .top{block-size:62px}
  .brand{font-size:21px}
  h1{font-size:14.5vw}
  html[lang=en] h1{font-size:14vw}
  .kick{margin-block-end:16px}
  .lead{margin-block-start:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .live::after{display:none}
}