/* ============================================================
   Wave AI · shared design system
   White / Inter / teal-azure gradient. Pages add their own
   page-specific styles inline; everything common lives here.
   ============================================================ */

:root{
  --bg:#f7fafb; --card:#ffffff; --ink:#0a1b22; --ink2:#3c4c53; --mut:#647680;
  --line:#e2e9ec; --line2:#c9d6db; --soft:#edf3f5;
  --teal:#136572; --azure:#4aa9d8; --ok:#10a37f;
  --deep:#052430; --deep2:#083344;
  --xo:cubic-bezier(.22,.8,.32,1);
  --spring:cubic-bezier(.3,1.36,.44,1);
  --sh-soft:0 10px 30px rgba(6,44,60,.07);
  --sh-lift:0 22px 60px rgba(6,44,60,.13);
  --grad:linear-gradient(118deg,#136572 0%,#2596ad 34%,#4aa9d8 64%,#8ecdf3 100%);
  --grad-deep:linear-gradient(126deg,#0b3d4a 0%,#155e70 42%,#2a7d9c 78%,#4b9fc4 100%);
  --grad-dawn:linear-gradient(112deg,#2a7d9c 0%,#4aa9d8 40%,#8ecdf3 74%,#c8e6f8 100%);
  --grad-dusk:linear-gradient(122deg,#123a5c 0%,#1f5f7e 38%,#2596ad 72%,#6cc0e4 100%);
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation-duration:.16s}
  ::view-transition-new(root){animation-duration:.26s}
}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:rgba(19,101,114,.16)}
.wrap{max-width:1216px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
section{scroll-margin-top:80px}
.wmark{display:block}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:fixed;top:12px;left:12px;z-index:200;background:var(--ink);color:#fff;border-radius:8px;
  width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;padding:10px 16px;clip-path:none}

/* ===== Arabic / RTL ===== */
html[lang="ar"] body{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
html[lang="ar"] .h1,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0}
html[lang="ar"] .h1,html[lang="ar"] h1{line-height:1.18}
html[lang="ar"] h2{line-height:1.3}
html[dir="rtl"] .brand{margin-right:0;margin-left:auto}
html[dir="rtl"] .arw{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .card .go{transform:scaleX(-1)}

/* ===== type & scaffolding ===== */
.label{font-size:12.5px;font-weight:600;color:var(--teal);margin-bottom:16px;
  text-transform:uppercase;letter-spacing:.14em}
html[lang="ar"] .label{letter-spacing:0}
h2.label{max-width:none;line-height:1.6;letter-spacing:.14em}
html[lang="ar"] h2.label{letter-spacing:0}
.h1{font-weight:600;font-size:clamp(46px,8.6vw,116px);line-height:1.01;letter-spacing:-.045em}
h2{font-weight:600;font-size:clamp(32px,4.9vw,60px);letter-spacing:-.035em;line-height:1.08;max-width:24ch}
.sec{padding:clamp(72px,12vh,140px) 0}
.sec.tight{padding-top:clamp(40px,6vh,64px)}
.sec.flat{padding-top:0}
.sec .lede,.shead p{font-size:clamp(16.5px,2vw,19.5px);color:var(--ink2);max-width:58ch;margin-top:20px;line-height:1.65}
.shead{max-width:820px;margin-bottom:clamp(40px,6vh,60px)}

/* hero ocean scaffolding (pages drop in <canvas class="hwave">) */
.hero{position:relative}
.hero .wrap{position:relative;z-index:1}
.hwave{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(200px,32vh,330px);
  pointer-events:none;opacity:.7;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 40%,#000 76%,transparent 100%)}

/* animated gradient sheen for focal words */
@keyframes sheen{from{background-position:0% 40%}to{background-position:100% 60%}}

/* ===== buttons & links ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:600;font-size:15px;
  border-radius:999px;padding:12px 24px;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s,transform .3s var(--spring),box-shadow .3s var(--xo)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:#26262e;box-shadow:0 10px 26px rgba(13,13,13,.22)}
.btn.ghost{border-color:var(--line2);color:var(--ink);background:transparent}
.btn.ghost:hover{border-color:var(--ink);background:var(--soft)}
.btn.sm{padding:9px 18px;font-size:14px}
.tlink{font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px;color:var(--ink);position:relative}
.tlink::after{content:"";position:absolute;inset-inline:0;bottom:-3px;height:1.5px;background:var(--teal);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--xo)}
html[dir="rtl"] .tlink::after{transform-origin:100% 50%}
.tlink:hover{color:var(--teal)}
.tlink:hover::after{transform:scaleX(1)}
.tlink .arw{display:inline-block;transition:transform .3s var(--spring)}
.tlink:hover .arw{transform:translateX(4px)}
html[dir="rtl"] .tlink .arw{transform:scaleX(-1)}
html[dir="rtl"] .tlink:hover .arw{transform:scaleX(-1) translateX(4px)}
.langtog{font-family:inherit;font-size:13px;font-weight:500;border:1px solid var(--line2);border-radius:999px;
  padding:7px 14px;background:transparent;color:var(--ink2);cursor:pointer;transition:border-color .2s,color .2s}
.langtog:hover{border-color:var(--ink);color:var(--ink)}

/* ===== nav: floating glass pill ===== */
header.site{position:sticky;top:0;z-index:60;padding:14px 0 6px;pointer-events:none}
header.site .wrap{pointer-events:auto}
header.site nav{height:58px;display:flex;align-items:center;gap:22px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(10,27,34,.08);border-radius:999px;
  padding-inline:22px 10px;box-shadow:0 6px 24px rgba(6,44,60,.07);
  transition:box-shadow .35s var(--xo),background .35s}
header.site.scrolled nav{background:rgba(255,255,255,.86);box-shadow:0 14px 40px rgba(6,44,60,.13)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em;margin-right:auto}
.brand .wmark{width:27px;height:27px;flex:none}
.nl{display:flex;align-items:center;gap:24px;font-size:14.5px;font-weight:500}
.nl .lk{color:var(--ink2);position:relative}
.nl .lk::after{content:"";position:absolute;inset-inline:0;bottom:-5px;height:1.5px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--xo)}
html[dir="rtl"] .nl .lk::after{transform-origin:100% 50%}
.nl .lk:hover{color:var(--ink)}
.nl .lk:hover::after{transform:scaleX(1)}
.nl .lk[aria-current="page"]{color:var(--ink);font-weight:600}
.nl .lk[aria-current="page"]::after{transform:scaleX(1);background:var(--teal)}
.menub{display:none;width:40px;height:40px;border:1px solid var(--line2);border-radius:999px;background:transparent;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:border-color .2s}
.menub:hover{border-color:var(--ink)}
.menub span{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--xo),opacity .2s}
.menub[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menub[aria-expanded="true"] span:nth-child(2){opacity:0}
.menub[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
  .nl .lk{display:none}
  .menub{display:flex}
}
@media(max-width:430px){.nl .btn{display:none}}

/* mobile drawer */
.drawer{position:fixed;inset:0;top:78px;z-index:55;background:var(--bg);padding:28px clamp(20px,6vw,40px) 40px;
  display:none;flex-direction:column;gap:6px;overflow-y:auto}
.drawer.open{display:flex}
.drawer .dl{font-size:26px;font-weight:600;letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--line)}
.drawer .dl:hover{color:var(--teal)}
.drawer .dfoot{margin-top:26px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
body.drawer-open{overflow:hidden}

/* ===== cards ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.cards.four{grid-template-columns:repeat(2,1fr)}
@media(max-width:840px){.cards,.cards.four{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:24px;padding:32px;background:var(--card);position:relative;isolation:isolate;
  transition:border-color .25s,transform .3s var(--xo),box-shadow .35s var(--xo)}
.card:hover{border-color:rgba(37,150,173,.32);transform:translateY(-4px);box-shadow:var(--sh-lift)}
@media(pointer:fine){
  .card::after,.feat::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,40%),rgba(37,150,173,.10),transparent 70%);
    transition:opacity .35s}
  .card:hover::after,.feat:hover::after{opacity:1}
}
@media(pointer:fine) and (prefers-reduced-motion:no-preference){
  .card:hover,.feat:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
}
.card .n{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--teal)}
.card h3{font-size:21px;font-weight:600;letter-spacing:-.015em;margin:14px 0 8px}
.card p{font-size:15px;color:var(--ink2);line-height:1.62}
.card p b{color:var(--ink);font-weight:600}

/* feature grid (text-only tiles on soft bg) */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
@media(max-width:920px){.feats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feats{grid-template-columns:1fr}}
.feat{border-radius:18px;background:var(--soft);border:1px solid var(--line);padding:24px;position:relative;isolation:isolate;
  transition:border-color .25s,transform .3s var(--xo),box-shadow .35s var(--xo)}
.feat:hover{border-color:rgba(37,150,173,.3);transform:translateY(-4px);box-shadow:var(--sh-soft)}
.feat h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.feat p{margin-top:7px;font-size:14.5px;color:var(--ink2);line-height:1.6}

/* stats */
.statrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.stat{border:1px solid var(--line);border-radius:16px;padding:14px 20px;background:var(--card)}
.stat .v{font-size:22px;font-weight:600;letter-spacing:-.02em}
.stat .k{font-size:12.5px;color:var(--mut);margin-top:1px}

/* sticky-stack storytelling panels */
.stack{display:flex;flex-direction:column;gap:20px;margin-top:clamp(36px,6vh,56px)}
.scard{position:sticky;top:calc(92px + var(--si,0)*18px);border:1px solid var(--line);border-radius:30px;
  background:var(--card);padding:clamp(30px,5.5vw,68px);min-height:min(46vh,420px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,5vw,72px);align-items:center;
  box-shadow:0 -14px 44px rgba(6,44,60,.08)}
@media(max-width:720px){.scard{grid-template-columns:1fr;gap:14px;min-height:0;align-items:start}}
.scard .bign{font-family:var(--mono);font-size:clamp(56px,10vw,148px);font-weight:500;line-height:.8;
  background:linear-gradient(180deg,rgba(19,101,114,.30),rgba(19,101,114,.03));
  -webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.scard h3{font-size:clamp(25px,3.6vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.scard p{margin-top:14px;font-size:clamp(15.5px,1.9vw,19px);color:var(--ink2);line-height:1.66;max-width:56ch}
.scard p b{color:var(--ink);font-weight:600}
.scard.deep{background:var(--grad-deep);border-color:transparent;color:#fff}
.scard.deep .bign{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.08));
  -webkit-background-clip:text;background-clip:text}
.scard.deep p,.scard.deep p b{color:rgba(255,255,255,.92)}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;border-top:2px solid var(--ink);padding-top:20px}
.step .sn{font-family:var(--mono);font-size:12.5px;color:var(--mut)}
.step h3{font-size:19px;font-weight:600;margin:10px 0 6px;letter-spacing:-.01em}
.step p{font-size:15px;color:var(--ink2);line-height:1.6}

/* full-bleed statement band */
.band{position:relative;overflow:hidden;border-radius:34px;color:#fff;isolation:isolate;
  padding:clamp(72px,12vw,150px) clamp(26px,5vw,72px);text-align:center}
.band .art{position:absolute;inset:0;background:var(--grad-dusk);z-index:-2}
.band .art::after{content:"";position:absolute;left:50%;top:-40%;transform:translateX(-50%);
  width:80%;aspect-ratio:2/1;border-radius:50%;
  background:radial-gradient(50% 60% at 50% 50%,rgba(140,205,243,.35),transparent 70%)}
.band .bwaves{position:absolute;left:0;right:0;bottom:-4px;width:100%;height:34%;z-index:-1;opacity:.55;pointer-events:none}
.band .bt{font-size:clamp(34px,6.4vw,82px);font-weight:600;letter-spacing:-.04em;line-height:1.06;max-width:20ch;margin:0 auto}
.band .bs{margin:22px auto 0;font-size:clamp(15.5px,2vw,19.5px);opacity:.9;max-width:52ch}
.bw1{animation:bwf1 8s linear infinite}
.bw2{animation:bwf2 13s linear infinite}
@keyframes bwf1{to{transform:translateX(56px)}}
@keyframes bwf2{from{transform:translateX(56px)}to{transform:translateX(0)}}

/* news tiles */
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media(max-width:860px){.newsgrid{grid-template-columns:1fr}}
.newscard{display:block;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--card);
  transition:border-color .25s,transform .3s var(--xo),box-shadow .35s var(--xo)}
.newscard:hover{border-color:rgba(37,150,173,.32);transform:translateY(-5px);box-shadow:var(--sh-lift)}
.newscard .nart{display:block;height:190px;position:relative;overflow:hidden}
.newscard .nart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--xo)}
.newscard:hover .nart img{transform:scale(1.05)}
.newscard .nart::after{content:"";position:absolute;inset:0;background:inherit;opacity:.38;mix-blend-mode:multiply}
.newscard .nart .scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,rgba(8,36,44,.74) 100%);z-index:1}
.newscard .nart .ntitle{position:absolute;inset-inline:18px;bottom:14px;z-index:2;color:#fff;margin:0;font-size:19px;line-height:1.3}
.newscard .nbody{display:block;padding:22px 24px 26px}
.newscard .ndate{display:block;font-size:12.5px;font-weight:500;color:var(--mut)}
.newscard h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:9px 0 7px;line-height:1.3}
.newscard p{font-size:14.5px;color:var(--ink2);line-height:1.6}
.g-main{background:var(--grad)}
.g-deep{background:var(--grad-deep)}
.g-dawn{background:var(--grad-dawn)}
.g-dusk{background:var(--grad-dusk)}

/* FAQ accordion */
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:24px 2px;font-size:18.5px;font-weight:600;letter-spacing:-.012em;transition:color .2s}
.qa summary:hover{color:var(--teal)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex:none;font-weight:400;font-size:22px;color:var(--mut);line-height:1;transition:transform .3s var(--xo)}
.qa[open] summary .pm{transform:rotate(45deg)}
.qa .qbody{padding:0 2px 24px;color:var(--ink2);font-size:15.5px;line-height:1.68;max-width:72ch}
.qa .qbody a{color:var(--teal);font-weight:500}
.faqwrap{margin-top:36px;border-top:1px solid var(--line)}
@supports (interpolate-size:allow-keywords){
  @media(prefers-reduced-motion:no-preference){
    :root{interpolate-size:allow-keywords}
    .qa::details-content{opacity:0;block-size:0;overflow:clip;
      transition:content-visibility .4s allow-discrete,opacity .35s var(--xo),block-size .4s var(--xo)}
    .qa[open]::details-content{opacity:1;block-size:auto}
  }
}

/* ===== article pages ===== */
.arthero{padding:clamp(56px,9vh,104px) 0 clamp(28px,4vh,44px);max-width:820px}
.arthero .adate{font-size:14px;color:var(--mut);font-weight:500;margin-bottom:18px}
.arthero h1{font-weight:600;font-size:clamp(34px,5.4vw,60px);letter-spacing:-.03em;line-height:1.08}
.arthero .alede{margin-top:22px;font-size:clamp(17px,2vw,20px);color:var(--ink2);line-height:1.6}
.artbody{max-width:720px;padding-bottom:clamp(56px,9vh,96px)}
.artbody h2{font-size:clamp(23px,3vw,30px);margin:44px 0 14px;max-width:none}
.artbody p{margin:16px 0;color:var(--ink2);font-size:16.5px;line-height:1.75}
.artbody p b{color:var(--ink);font-weight:600}
.artbody ul{margin:16px 0;padding-inline-start:22px;color:var(--ink2);font-size:16.5px;line-height:1.75}
.artbody li{margin:8px 0}
.artbody li b{color:var(--ink);font-weight:600}
.artbody .pull{margin:32px 0;padding:24px 28px;border-radius:18px;background:var(--soft);border:1px solid var(--line);
  font-size:17px;color:var(--ink);font-weight:500;line-height:1.6}
.artbody .pull .grad{font-weight:600}
.artcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.artnext{border-top:1px solid var(--line);padding:36px 0 clamp(56px,9vh,80px)}
.artnext .label{margin-bottom:20px}

/* legal pages */
.legal{max-width:760px;padding:clamp(24px,4vh,40px) 0 clamp(64px,10vh,110px)}
.legal h2{font-size:21px;margin:38px 0 10px;max-width:none;letter-spacing:-.015em}
.legal p,.legal li{color:var(--ink2);font-size:15.5px;line-height:1.7}
.legal p{margin:12px 0}
.legal ul{margin:12px 0;padding-inline-start:22px}
.legal .meta{font-size:13.5px;color:var(--mut)}

/* split layout */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.split .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* closing */
.closing{text-align:center;padding:clamp(96px,16vh,190px) 0;position:relative}
.closing h2,.closing .big{margin:0 auto;max-width:none}
.closing h2{font-size:clamp(40px,7.4vw,96px)}
.closing .big{font-size:clamp(44px,8.4vw,110px);font-weight:600;letter-spacing:-.045em;line-height:1.02}
.closing .sub{color:var(--ink2);max-width:46ch;margin:20px auto 0;font-size:clamp(16px,2vw,19px)}
.closing .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:38px}

/* ===== footer: deep ocean ===== */
footer.site{position:relative;overflow:hidden;border-top:none;padding:clamp(64px,9vw,96px) 0 40px;
  background:linear-gradient(180deg,var(--deep2),var(--deep) 55%);color:#e8f1f4}
footer.site::before{content:"";position:absolute;left:50%;top:-160px;transform:translateX(-50%);
  width:min(1200px,140vw);aspect-ratio:3/1;pointer-events:none;
  background:radial-gradient(50% 70% at 50% 100%,rgba(37,150,173,.28),transparent 72%)}
footer.site .wrap{position:relative}
.fsurf{position:absolute;left:0;right:0;top:-1px;height:48px;overflow:hidden;pointer-events:none;z-index:1}
.fsurf svg{width:100%;height:100%;display:block}
.fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.fbrand{max-width:300px}
.fbrand .about{color:rgba(232,241,244,.6);font-size:14px;margin-top:14px;line-height:1.65}
.fbrand .fmail{margin-top:10px;font-size:14px}
.fbrand .fmail a{color:#8ecdf3;font-weight:500}
.fcols{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(28px,5vw,72px)}
@media(max-width:900px){.fcols{grid-template-columns:1fr 1fr;width:100%}}
.fcol h4{font-size:12px;font-weight:600;color:rgba(232,241,244,.45);margin-bottom:14px;
  text-transform:uppercase;letter-spacing:.12em}
html[lang="ar"] .fcol h4{letter-spacing:0}
.fcol a{display:block;font-size:14.5px;font-weight:500;margin-bottom:10px;color:rgba(232,241,244,.78);
  transition:color .2s}
.fcol a:hover{color:#fff}
.fbar{margin-top:44px;padding-top:22px;border-top:1px solid rgba(232,241,244,.14);color:rgba(232,241,244,.5);
  font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fmark{margin-top:clamp(36px,6vw,64px);font-size:clamp(64px,13.5vw,190px);font-weight:700;letter-spacing:-.05em;
  line-height:.82;white-space:nowrap;user-select:none;pointer-events:none;
  background:linear-gradient(180deg,rgba(142,205,243,.34),rgba(142,205,243,.02));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== motion ===== */
.js .up{opacity:0;transform:translateY(18px)}
.js.ld .up{opacity:1;transform:none;transition:opacity .8s var(--xo),transform .8s var(--xo)}
.js.ld .up.d1{transition-delay:.08s}
.js.ld .up.d2{transition-delay:.18s}
.js.ld .up.d3{transition-delay:.3s}
.js.ld .up.d4{transition-delay:.42s}
.js .rev{opacity:0;transform:translateY(20px);transition:opacity .65s var(--xo),transform .65s var(--xo)}
.js .rev.in{opacity:1;transform:none}

/* word-mask hero reveal (site.js splits [data-ws] into .w > .wi) */
[data-ws] .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.1em;margin-bottom:-.1em}
.js [data-ws] .wi{display:inline-block;transform:translateY(114%)}
.js.ld [data-ws] .wi{transform:none;transition:transform .9s var(--xo);transition-delay:calc(var(--i,0)*.075s)}
html[lang="ar"] [data-ws] .w{overflow:visible;padding-bottom:0;margin-bottom:0}
html[lang="ar"].js [data-ws] .wi{transform:translateY(.35em);opacity:0}
html[lang="ar"].js.ld [data-ws] .wi{transform:none;opacity:1;
  transition:transform .8s var(--xo),opacity .8s var(--xo);transition-delay:calc(var(--i,0)*.075s)}

/* word masks inside scroll-revealed sections: hold until the .rev container is .in */
.js .rev [data-ws] .wi,.js .rev[data-ws] .wi{transform:translateY(114%);transition:none}
.js .rev.in [data-ws] .wi,.js .rev.in[data-ws] .wi{transform:none;
  transition:transform .85s var(--xo);transition-delay:calc(var(--i,0)*.06s)}
html[lang="ar"].js .rev [data-ws] .wi,html[lang="ar"].js .rev[data-ws] .wi{
  transform:translateY(.35em);opacity:0;transition:none}
html[lang="ar"].js .rev.in [data-ws] .wi,html[lang="ar"].js .rev.in[data-ws] .wi{transform:none;opacity:1;
  transition:transform .7s var(--xo),opacity .7s var(--xo);transition-delay:calc(var(--i,0)*.06s)}

/* article reading progress (injected by site.js) */
.rp{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:120;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
html[dir="rtl"] .rp{transform-origin:100% 50%}

/* gentle scroll parallax on large imagery (native scroll timeline only) */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .pxy{animation:pxy linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes pxy{from{transform:scale(1.12) translateY(3.2%)}to{transform:scale(1.12) translateY(-3.2%)}}
  }
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rev,.js .up{opacity:1;transform:none}
  .js [data-ws] .wi,.js .rev [data-ws] .wi,.js .rev[data-ws] .wi{transform:none!important;opacity:1!important}
}