/* Tamkeen coming-soon page. Brand tokens from docs/01-brand.md only.
   All motion sits inside @media (prefers-reduced-motion: no-preference):
   visitors who ask for reduced motion get the finished, static page. */
:root{
  --green:#123B32; --gold:#C5A15A; --ivory:#FAF8F2; --deep:#0A231D;
  --gold-light:#E2C68C; --gold-soft:#D9BC80;
  --soft:rgba(250,248,242,.84);
  --f-ui:"Readex Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-title:"Cormorant Garamond",Georgia,serif;
  --f-text:"IBM Plex Sans Arabic","Readex Pro",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.tz{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;position:relative;overflow-x:hidden;
  color:var(--ivory);font-family:var(--f-ui);font-size:17px;line-height:1.7;
  background:radial-gradient(80% 55% at 50% 18%,rgba(197,161,90,.17),transparent 68%),linear-gradient(180deg,var(--green) 45%,var(--deep) 100%);
  background-color:var(--deep)}
html[lang=ar] body.tz{font-family:var(--f-text);line-height:1.85}
h1,h2,p{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px;border-radius:8px}
a{color:inherit}

/* faint khatam pattern, 8 % */
.tz-pattern{position:fixed;inset:-96px;z-index:0;pointer-events:none;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23C5A15A' stroke-width='1.2'%3E%3Crect x='28' y='28' width='40' height='40'/%3E%3Crect x='28' y='28' width='40' height='40' transform='rotate(45 48 48)'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%);mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%)}
.tz-top,.tz-main,.tz-foot{position:relative;z-index:1}

.tz-top{display:flex;justify-content:flex-end;padding:16px clamp(16px,4vw,40px) 0}
.tz-lang{display:flex;border:1px solid rgba(250,248,242,.35);border-radius:999px;padding:3px}
.tz-lang a{font-family:var(--f-ui);text-decoration:none;font-size:14px;line-height:1;padding:0 12px;border-radius:999px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.tz-lang a.on{background:var(--gold);color:var(--green);font-weight:600}

.tz-main{flex:1;width:100%;max-width:760px;margin-inline:auto;padding:clamp(8px,3vw,28px) clamp(16px,4vw,40px) 40px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,3.5vw,26px)}
.tz-logo-wrap{width:clamp(150px,40vw,210px)}
.tz-logo{display:block;width:100%;height:auto;overflow:visible}

.tz-h1{font-family:var(--f-ui);font-weight:700;font-size:clamp(25px,6.2vw,42px);line-height:1.45;text-wrap:balance}
html:not([lang=ar]) .tz-h1{font-family:var(--f-title);font-size:clamp(33px,7.4vw,56px);line-height:1.1}
.tz-line{color:var(--soft);font-size:clamp(16px,1.9vw,18px);max-width:36em;text-wrap:pretty}

/* countdown */
.tz-count{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding-block:6px}
.tz-glow{position:absolute;inset:-18% 4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(197,161,90,.20),transparent 72%)}
.tz-cd{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:560px;direction:inherit}
.tz-unit{display:flex;flex-direction:column;align-items:center;gap:2px;padding-inline:4px;border-inline-start:1px solid rgba(197,161,90,.35)}
.tz-unit:first-child{border-inline-start:0}
.tz-num{font-family:var(--f-title);font-weight:700;font-variant-numeric:lining-nums tabular-nums;font-size:clamp(44px,13.5vw,88px);line-height:1.05;
  color:var(--gold);display:block;min-width:2ch}
.tz-lab{font-family:var(--f-ui);font-size:clamp(12px,3.2vw,14px);font-weight:500;color:var(--gold-light)}
html:not([lang=ar]) .tz-lab{letter-spacing:.14em;text-transform:uppercase;font-size:clamp(10.5px,2.8vw,12.5px)}
.tz-soon{position:relative;font-family:var(--f-ui);font-weight:700;font-size:clamp(38px,10vw,68px);line-height:1.3;color:var(--gold)}
html:not([lang=ar]) .tz-soon{font-family:var(--f-title);font-size:clamp(46px,11vw,80px);line-height:1.1}
.tz-date{position:relative;font-family:var(--f-ui);font-size:15px;color:var(--soft)}

/* waitlist */
.tz-form{width:100%;max-width:520px;display:flex;flex-direction:column;gap:10px;align-items:center}
.tz-h2{font-family:var(--f-ui);font-size:17px;font-weight:600;color:var(--gold-light)}
.tz-row{display:flex;gap:10px;flex-wrap:wrap;width:100%}
.tz-in{flex:1 1 210px;min-width:0;min-height:50px;border-radius:999px;border:1px solid rgba(250,248,242,.45);background:rgba(250,248,242,.08);
  color:var(--ivory);padding:0 20px;font:inherit;font-family:var(--f-ui);font-size:16px;text-align:start}
html[dir=rtl] .tz-in{text-align:right}
html[dir=rtl] .tz-in:not(:placeholder-shown){text-align:left}
.tz-in::placeholder{color:var(--soft)}
.tz-btn{display:inline-block;min-height:50px;padding:12px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-family:var(--f-ui);font-weight:600;font-size:16px;line-height:1.5;text-decoration:none;text-align:center;transition:background-color .2s,border-color .2s,color .2s}
.tz-btn-gold{background:var(--gold);color:var(--green);flex:1 1 auto}
.tz-btn-gold:hover{background:var(--gold-light)}
.tz-btn-gold[disabled]{opacity:.7;cursor:default}
.tz-btn-line{border-color:rgba(250,248,242,.5);color:var(--ivory)}
.tz-btn-line:hover{border-color:var(--gold-light);color:var(--gold-light)}
.tz-msg{min-height:1.7em;font-size:15px;color:var(--gold-light)}
.tz-note{font-size:13.5px;color:var(--soft)}
.tz-actions{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.tz-hint{font-size:13.5px;color:var(--soft)}
.tz-link{font-family:var(--f-ui);font-size:15px;color:var(--gold-light);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px;margin-top:6px}
.tz-link:hover{color:var(--ivory)}
.tz-foot{display:flex;justify-content:center;gap:8px 20px;flex-wrap:wrap;padding:18px 16px 22px;font-family:var(--f-ui);font-size:13.5px;color:rgba(250,248,242,.7);border-top:1px solid rgba(250,248,242,.12)}

/* ---------------- motion (skipped entirely for reduced-motion visitors) ---------------- */
@media (prefers-reduced-motion:no-preference){
  /* 1. opening: the official logo reveals itself in about 3 seconds */
  .lg-outer rect{stroke-dasharray:252;animation:tz-draw 1.5s cubic-bezier(.65,0,.2,1) both}
  .lg-outer rect + rect{animation-delay:.2s}
  .lg-inner rect{stroke-dasharray:219;animation:tz-draw-in 1.2s cubic-bezier(.65,0,.2,1) .55s both}
  .lg-inner rect + rect{animation-delay:.7s}
  .lg-t{animation:tz-fade .55s ease-out 1.5s both}
  .lg-dots{animation:tz-fade .45s ease-out 1.85s both}
  .lg-ar{animation:tz-fade .6s ease-out 2.15s both}
  .lg-en{animation:tz-fade .6s ease-out 2.4s both}
  .lg-inst{animation:tz-fade .6s ease-out 2.65s both}
  /* 2. the page content arrives quietly after the logo */
  .tz-h1{animation:tz-rise .7s ease-out 2.75s both}
  .tz-line{animation:tz-rise .7s ease-out 2.95s both}
  .tz-count{animation:tz-rise .7s ease-out 3.1s both}
  .tz-form,.tz-actions{animation:tz-rise .7s ease-out 3.3s both}
  /* 3. afterwards: slow pattern drift, soft glow, gentle shimmer on the gold */
  .tz-pattern{animation:tz-drift 90s linear infinite}
  .tz-glow{animation:tz-glow 7s ease-in-out 3.2s infinite}
  .tz-logo{animation:tz-glint 8s ease-in-out 4s infinite}
  .tz-num,.tz-soon{background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 42%,var(--gold-light) 50%,var(--gold) 58%,var(--gold) 100%);
    background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:tz-shimmer 8s ease-in-out 3.5s infinite}
  .tz-num.tick{animation:tz-tick .45s ease-out,tz-shimmer 8s ease-in-out infinite}
}
@keyframes tz-draw{from{stroke-dashoffset:252}to{stroke-dashoffset:0}}
@keyframes tz-draw-in{from{stroke-dashoffset:219}to{stroke-dashoffset:0}}
@keyframes tz-fade{from{opacity:0}to{opacity:1}}
@keyframes tz-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tz-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(96px,96px,0)}}
@keyframes tz-glow{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes tz-glint{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}}
@keyframes tz-shimmer{0%,55%{background-position:100% 0}100%{background-position:0 0}}
@keyframes tz-tick{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}