/* =============================================================================
   Riwaq Al-Mammar — Global styles
   Layout-level styling lives inline on the elements (faithful to the design);
   this sheet holds the reset, keyframes, gradient-edge pseudo-elements,
   RTL corrections, and the reduced-motion contract.

   Brand palette:  Soft Stone #E9E5DF · Copper #C07439 · Deep Navy #374353
   Type:           Poppins (EN) · Noto Kufi Arabic (AR)
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:#E9E5DF;
  color:#374353;
  font-family:'Poppins',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
button,input,select,textarea{font-family:inherit}
::selection{background:#C07439;color:#E9E5DF}
a{color:inherit;text-decoration:none}

/* ---- keyframes ------------------------------------------------------------ */
@keyframes rmScroll{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(22px);opacity:0}}
@keyframes rmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes rmHairline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rmRise{from{transform:translateY(118%)}to{transform:translateY(0)}}
@keyframes rmUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes rmDrawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rmFadeIn{from{opacity:0}to{opacity:1}}
@keyframes rmArchDraw{to{stroke-dashoffset:0}}
@keyframes rmKen{0%{transform:scale(1.04)}100%{transform:scale(1.16)}}
@keyframes rmPop{0%{opacity:0;transform:translateY(26px) scale(.985)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ---- glass gradient edges (were the design's `style-before` directives) ---- */
.gradient-edge{position:relative}
.gradient-edge::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:var(--edge-pad,1.4px);
  background:var(--edge-grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.nav-pill{--edge-pad:1.4px;--edge-grad:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 22%,rgba(255,255,255,0) 42%,rgba(255,255,255,0) 60%,rgba(255,255,255,.12) 80%,rgba(255,255,255,.34) 100%)}
.btn-glass{--edge-pad:1.2px;--edge-grad:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.05) 50%,rgba(255,255,255,.25))}
.glass-tag{--edge-pad:1.4px;--edge-grad:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08) 50%,rgba(255,255,255,.3))}
.form-card{--edge-pad:1.4px;--edge-grad:linear-gradient(150deg,rgba(255,255,255,.28),rgba(255,255,255,.04) 45%,rgba(192,116,57,.30))}

/* ---- journey strip: hide native scrollbar on the touch scroller ---------- */
[data-journey-track]::-webkit-scrollbar{display:none}

/* ---- RTL corrections for the Arabic version ------------------------------ */
[dir="rtl"] [data-acc-head]{text-align:right !important}
[dir="rtl"] [data-contact-grid]{text-align:right !important}
[dir="rtl"] [data-form] label{text-align:right}
[dir="rtl"] [data-ltr]{direction:ltr;unicode-bidi:isolate;display:inline-block}
[dir="rtl"] [data-journey-sticky]{direction:ltr}

/* Arabic is cursive — Latin letter-spacing pries the joined letters apart,
   so neutralise every inline letter-spacing while in RTL. */
[dir="rtl"] *{letter-spacing:normal !important}

/* The hero headline stacks two lines with Latin-tuned negative margins +
   overflow:hidden; Noto Kufi's taller line-box makes those lines collide.
   Relax them for Arabic so the two lines clear each other. */
[dir="rtl"] #top h1{line-height:1.3}
[dir="rtl"] #top h1 > span{padding-bottom:0;margin-bottom:0;overflow:visible}

/* The journey strip stays LTR so its scroll-driven transforms keep working,
   but the header and panel copy must read right-to-left in Arabic. */
[dir="rtl"] [data-journey-header]{direction:rtl;text-align:right}
[dir="rtl"] [data-panel]{direction:rtl;text-align:right}

/* ---- reduced motion: freeze entrances, keep everything visible ----------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-anim]{animation:none !important;opacity:1 !important;transform:none !important}
  [data-ken]{animation:none !important}
}