/* ==========================================================================
   RAW — الموقع

   البنية مأخوذة من مواقع الكافيهات الكبيرة (ناف ثابت · هيرو · أقسام
   متبادلة · فوتر بأعمدة)، **بس الهوية بتاعتنا**: بنفسجي RAW واستانلس
   رصاصي، مش نبيتي ولبني حد تاني.

   مفيش صور منتجات — المشهد ثلاثي الأبعاد هو الصورة الوحيدة، والباقي
   تيبوغرافيا ولون. ده مقصود: أسرع تحميل، ومفيش صور ستوك بتبان مستعارة.
   ========================================================================== */

/* ---------- التوكنز ---------- */
:root {
  /* الموقع فاتح ثابت. من غير السطر ده المتصفح بيلوّن
     السكرول والإنبوت حسب إعداد الجهاز، فالصفحة بتبان مختلفة
     على موبايل غامق عن موبايل فاتح. */
  color-scheme: light;
  /* البنفسجي من لوجو RAW */
  --violet-900: #1B1030;
  --violet-800: #2B1B4A;
  --violet-700: #3D2668;
  --violet-600: #5A37A0;
  --violet-400: #8B5CF0;
  --violet-200: #C9B3F5;

  /* استانلس */
  --steel-700: #3A4046;
  --steel-500: #6B747D;
  --steel-300: #A9B2BA;
  --steel-100: #E3E7EA;

  --cream: #FAF7F2;
  --cream-2: #F1ECE3;
  --ink: #16121E;
  --ink-soft: #5B5468;
  --line: #E4DED4;

  --max: 1180px;
  --pad: clamp(18px, 5vw, 56px);
  --r: 18px;

  --f-disp: 'Outfit', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;

  /* سلّم الخط — clamp عشان مايحصلش قفزة بين الموبايل والمكتب */
  --t-hero: clamp(2.9rem, 9vw, 6.2rem);
  --t-h2:   clamp(1.8rem, 4.4vw, 3.1rem);
  --t-h3:   clamp(1.05rem, 2vw, 1.3rem);
  --t-lede: clamp(1rem, 1.7vw, 1.22rem);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.18; margin: 0; font-weight: 700; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }

.skip {
  position: absolute; inset-inline-start: -999px; top: 8px; z-index: 200;
  background: var(--violet-800); color: #fff; padding: 10px 16px; border-radius: 10px;
}
.skip:focus { inset-inline-start: 8px; }

/* ---------- الناف ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 242, .82);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.stuck { border-bottom-color: var(--line); background: rgba(250, 247, 242, .96); }

.nav-in {
  max-width: var(--max); margin: 0 auto;
  padding: 14px var(--pad);
  display: flex; align-items: center; gap: 28px;
}

.logo {
  font-family: var(--f-disp); font-weight: 900; font-size: 1.42rem;
  letter-spacing: .1em; text-decoration: none; color: var(--violet-700);
  display: flex; align-items: baseline; gap: 9px; flex: none;
}
.logo span {
  font-family: var(--f-body); font-size: .62rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink-soft);
}

.links { display: flex; gap: 26px; margin-inline-start: auto; }
.links a {
  text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--ink);
  position: relative; padding: 4px 0;
}
.links a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--violet-600); transform: scaleX(0); transform-origin: inline-end;
  transition: transform .22s ease;
}
.links a:hover::after { transform: scaleX(1); transform-origin: inline-start; }

/* نسخة «اطلب» اللي جوّه القائمة للموبايل بس — على المكتب `.cta-sm`
   بره القائمة هو اللي بيبان، والاتنين مع بعض بيبقوا تكرار. */
.links .m-cta { display: none; }

.cta-sm {
  flex: none; text-decoration: none;
  font-size: .86rem; font-weight: 700; padding: 10px 20px; border-radius: 999px;
  background: var(--violet-700); color: #fff;
  transition: background .2s ease, transform .15s ease;
}
.cta-sm:hover { background: var(--violet-600); transform: translateY(-1px); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span {
  display: block; width: 22px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.burger span + span { margin-top: 5px; }
.nav.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .burger span:nth-child(2) { opacity: 0; }
.nav.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- الهيرو ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--violet-900) 0%, var(--violet-800) 48%, var(--violet-700) 100%);
  color: #fff;
  padding: clamp(70px, 13vw, 150px) 0 0;
  isolation: isolate;
}
/* الخلفية: تدرّج CSS تحت، وكانفس WebGL فوقه. لو الشيدر اشتغل
   `body.gl` بتتحط والتدرّج بيختفي. الترتيب ده معناه إن الصفحة
   عمرها ما تبان سودا — حتى لو الكارت مش مدعوم. */
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.1s ease .15s;
}
body.gl .hero-bg canvas { opacity: 1; }

.hero-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(60px, 10vw, 110px); }

.eyebrow {
  font-size: .74rem; font-weight: 600; letter-spacing: .2em;
  color: var(--violet-200); margin-bottom: 18px;
}
.eyebrow.dark { color: var(--violet-600); }

.hero h1 {
  font-family: var(--f-disp); font-weight: 800;
  font-size: var(--t-hero); line-height: .98; letter-spacing: -.02em;
  margin-bottom: 26px;
}
.hero h1 span { display: block; }
.hero h1 .l2 { color: #F0D8A8; }

.lede {
  font-size: var(--t-lede); max-width: 34ch; color: rgba(255,255,255,.82);
  margin-bottom: 34px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 700;
  padding: 15px 30px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: #fff; color: var(--violet-800); }
.btn.primary:hover { background: var(--violet-200); }
.btn.ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.sec:not(.kitchen) .btn.primary { background: var(--violet-700); color: #fff; }
.sec:not(.kitchen) .btn.primary:hover { background: var(--violet-600); }

/* الشريط المتحرّك تحت الهيرو */
.hero-strip {
  background: var(--violet-900); border-top: 1px solid rgba(255,255,255,.1);
  overflow: hidden; padding: 13px 0;
}
.ticker { display: flex; width: max-content; }
.ticker span {
  font-family: var(--f-disp); font-weight: 700; font-size: .84rem;
  letter-spacing: .16em; color: rgba(255,255,255,.42); white-space: nowrap;
  padding-inline-end: 42px;
}
.ticker span::after {
  content: 'RAW · خام · نضيف · من غير زيادة · حمّص على دفعات · RAW · خام · نضيف · من غير زيادة · حمّص على دفعات · ';
}
@media (prefers-reduced-motion: no-preference) {
  .ticker { animation: slide 34s linear infinite; }
  @keyframes slide { to { transform: translateX(50%); } }
}

/* ---------- الأقسام ---------- */
.sec { padding: clamp(64px, 11vw, 122px) 0; }
.sec h2 { font-family: var(--f-disp); font-size: var(--t-h2); letter-spacing: -.015em; }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 38px;
}
.more {
  text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--violet-600);
  white-space: nowrap;
}
.more:hover { text-decoration: underline; }

/* ---------- المنيو ---------- */
.menu-sec { background: var(--cream-2); }
.menu-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.loading { color: var(--ink-soft); font-size: .9rem; }

.dish {
  position: relative; overflow: hidden;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 22px 20px;
  display: flex; flex-direction: column; gap: 10px; min-height: 216px;
  transition: transform .4s cubic-bezier(.2,.8,.2,1),
              box-shadow .4s ease, border-color .3s ease, opacity .6s ease;
}

/* شريط لون المشروب — بيتحسب من مكوّناته، مش رسمة.
   على الهوفر بيكبر وياخد الكارت، زي صبّة. */
.dish .pour {
  position: absolute; inset-inline: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--a), var(--b));
  transition: height .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.dish:hover .pour { height: 100%; opacity: .14; }

.dish .d-body { flex: 1; }
.dish h3 { font-family: var(--f-disp); font-size: var(--t-h3); font-weight: 700; margin-bottom: 6px; }
.dish .ing { font-size: .78rem; color: var(--ink-soft); line-height: 1.65; }

.dish .price {
  display: flex; align-items: baseline; gap: 5px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
}
.dish .price b {
  font-family: var(--f-disp); font-weight: 800; font-size: 2rem;
  line-height: 1; color: var(--violet-700);
}
.dish:hover {
  transform: translateY(-5px); border-color: transparent;
  box-shadow: 0 22px 50px rgba(43, 27, 74, .16);
}

.dish .price small { font-family: var(--f-body); font-size: .68rem; font-weight: 500; color: var(--ink-soft); }

/* ---------- المطبخ ---------- */
.kitchen {
  background: linear-gradient(160deg, var(--steel-700), var(--violet-900) 78%);
  color: #fff;
}
.k-grid {
  display: grid; gap: clamp(30px, 5vw, 58px);
  grid-template-columns: 1fr 1.15fr; align-items: center;
}
.k-txt p { color: rgba(255,255,255,.8); font-size: var(--t-lede); }
.k-txt h2 { margin-bottom: 16px; }
.k-list { list-style: none; margin: 24px 0 30px; padding: 0; }
.k-list li {
  font-size: .92rem; color: rgba(255,255,255,.76);
  padding: 11px 0 11px 0; border-top: 1px solid rgba(255,255,255,.13);
}
.k-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.k-list b { color: #fff; font-weight: 700; }

.k-shot { margin: 0; }
.k-shot img {
  border-radius: var(--r); width: 100%;
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
}
.k-shot figcaption {
  font-size: .72rem; color: rgba(255,255,255,.45);
  margin-top: 11px; text-align: center;
}

/* ---------- قصتنا ---------- */
.s-grid {
  display: grid; gap: clamp(28px, 5vw, 60px);
  grid-template-columns: .8fr 1.2fr; align-items: start;
}
.s-num {
  border-top: 3px solid var(--violet-600); padding-top: 18px;
}
.s-num b {
  display: block; font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(3rem, 8vw, 5rem); line-height: 1; letter-spacing: .04em;
  color: var(--violet-700);
}
.s-num span { font-size: .84rem; color: var(--ink-soft); }
.s-txt h2 { margin-bottom: 18px; }
.s-txt p { font-size: var(--t-lede); color: var(--ink-soft); }
.s-txt p + p { margin-top: 16px; }
.s-txt b { color: var(--ink); font-weight: 700; }

/* ---------- فروعنا ---------- */
.find { background: var(--violet-800); color: #fff; }
.find h2 { margin-bottom: 36px; }
.branches {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.branches article {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r); padding: 24px 22px;
}
.branches h3 { font-family: var(--f-disp); font-size: 1.3rem; margin-bottom: 8px; }
.branches p { font-size: .88rem; color: rgba(255,255,255,.78); }
.branches .hrs { font-size: .76rem; color: var(--violet-200); margin-top: 10px; }

/* ---------- الفوتر ---------- */
.foot { background: var(--violet-900); color: rgba(255,255,255,.72); }
.f-grid {
  display: grid; gap: 34px; padding-top: 56px; padding-bottom: 44px;
  grid-template-columns: 1.6fr 1fr 1fr;
}
.f-brand .logo { color: #fff; margin-bottom: 12px; }
.f-brand .logo span { color: rgba(255,255,255,.5); }
.f-brand p { font-size: .84rem; }
.foot h4 {
  font-size: .72rem; letter-spacing: .14em; color: rgba(255,255,255,.45);
  margin-bottom: 14px; font-weight: 600;
}
.foot nav { display: flex; flex-direction: column; gap: 9px; }
.foot nav a { text-decoration: none; font-size: .88rem; }
.foot nav a:hover { color: #fff; }
.f-legal {
  border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0;
  font-size: .74rem; color: rgba(255,255,255,.4);
}

/* ---------- الموبايل ---------- */
@media (max-width: 860px) {
  .k-grid, .s-grid { grid-template-columns: 1fr; }
  .k-shot { order: -1; }
  .f-grid { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .burger { display: block; margin-inline-start: auto; }
  .cta-sm { display: none; }
  .links {
    position: fixed; inset: 58px 0 auto; margin: 0;
    flex-direction: column; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 20px;
    transform: translateY(-120%); transition: transform .28s ease;
    box-shadow: 0 18px 40px rgba(22,18,30,.1);
  }
  .nav.open .links { transform: translateY(0); }
  .links a { padding: 14px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .links a::after { display: none; }
  .links .m-cta {
    display: block;
    margin-top: 16px; text-align: center; border: 0;
    background: var(--violet-700); color: #fff; border-radius: 999px; font-weight: 700;
  }
  .hero-cta .btn { flex: 1 1 100%; text-align: center; }
  .lede { max-width: none; }
}


/* ==========================================================================
   الحركة

   الصفحة كانت بتبان مرة واحدة ساكنة. دلوقتي كل قسم بيدخل لوحده وانت
   نازل — بيدّي إحساس إن الصفحة مشهد بيتفتح مش لوحة معلومات.

   الحالة الابتدائية مكتوبة في CSS والـJS بيضيف `.in` بس. لو الجافا
   وقعت، الحارس تحت بيخلّي كل حاجة ظاهرة — الصفحة ما تبقاش فاضية.
   ========================================================================== */
[data-rise], .dish {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
[data-rise].in, .dish.in { opacity: 1; transform: none; }

/* الكروت بتطلع ورا بعض مش مرة واحدة */
.dish[data-i="1"] { transition-delay: .07s; }
.dish[data-i="2"] { transition-delay: .14s; }
.dish[data-i="3"] { transition-delay: .21s; }
.dish[data-i="4"] { transition-delay: .28s; }
.dish[data-i="5"] { transition-delay: .35s; }

/* **شبكة أمان**: لو الجافاسكريبت مشتغلتش، `.no-js` مش بيتشال
   والمحتوى بيبان عادي بدل ما الصفحة تفضل بيضا. */
html.no-js [data-rise], html.no-js .dish { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rise], .dish { opacity: 1; transform: none; transition: none; }
  .dish .pour { transition: none; }
}

/* سطر الدليل تحت الهيرو — التوصيل والفروع والسعر */
.proof {
  margin-top: 26px; font-size: .82rem; color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}
/* سطر تحت عنوان القسم */
.sub { margin-top: 10px; color: var(--ink-soft); font-size: .95rem; }
.sec-head h2 { line-height: 1.1; }


/* ==========================================================================
   الحركة — النسخة التانية

   اللي كان: عناصر بتطلع وتخف. ده «ظهور» مش حركة.
   ========================================================================== */

/* ---------- العنوان كلمة كلمة ----------

   `inline-block` على **الكلمة** مش الحرف. الخط العربي متصل، وعزل
   الحرف في عنصر لوحده بيرسمه في الشكل المنفصل — «القهوة» بتبقى
   «ا ل ق ه و ة». الكلمة هي أصغر وحدة تتقسّم في العربي. */
.hero h1 .wd {
  display: inline-block; font-style: normal;
  opacity: 0; transform: translateY(.34em);
  transition: opacity .6s ease, transform .85s cubic-bezier(.16,1,.3,1);
}
.hero h1.in .wd { opacity: 1; transform: none; }

/* السطر التاني بلون صريح مش تدرّج مقصوص.

   `background-clip: text` هشّة: على الموبايل رسمت الكلمة بمقاسها
   الصح (٨١×٤٥) وسابت لونها شفاف — العنوان اختفى نصّه. وحتى لما
   بتشتغل، التدرّج بيبدأ من أول كل كلمة فبيتكرّر بدل ما يمتد على
   السطر.

   لون واحد دافي بيدّي نفس التباين مع الأبيض فوقه، وبيترسم في
   كل مكان. */
.hero h1 .l2 { background: none; color: #F0D8A8; }

/* النسخة اللي قارئ الشاشة بيقراها — الحروف المقسّمة بتتقرا واحد
   واحد وده مش مفهوم. */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- سطر الدليل ---------- */
.proof {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; gap: clamp(20px, 4vw, 44px); flex-wrap: wrap;
}
.proof li { display: flex; flex-direction: column; gap: 2px; }
.proof b {
  font-family: var(--f-disp); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;   /* الرقم مايرقصش وهو بيعدّ */
}
.proof span { font-size: .74rem; color: rgba(255,255,255,.55); }

/* ---------- تلميح النزول ---------- */
.scroll-hint {
  display: block; width: 22px; height: 36px; margin-top: 44px;
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 12px; position: relative;
}
.scroll-hint i {
  position: absolute; inset-inline: 0; top: 7px; margin: auto;
  width: 3px; height: 7px; border-radius: 2px; background: rgba(255,255,255,.7);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint i { animation: wheel 1.8s ease-in-out infinite; }
  @keyframes wheel {
    0%, 100% { transform: translateY(0);    opacity: 1; }
    55%      { transform: translateY(11px); opacity: .2; }
  }
}

/* ---------- الظهور ---------- */
/* الانزلاق بقى أطول ومعاه ميل خفيف — الحركة المستقيمة بتبان آلية */
[data-rise], .dish {
  opacity: 0; transform: translateY(38px) scale(.985);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
[data-rise].in, .dish.in { opacity: 1; transform: none; }

/* البارالاكس بيكتب `transform` من الجافا، فلازم يبقى عنصر منفصل
   عن اللي بيتحرّك في الظهور — وإلا الاتنين بيتصارعوا على نفس
   الخاصية والحركة بتنطّ. */
[data-par] { will-change: transform; }

/* ---------- الأزرار المغناطيسية ---------- */
.btn, .cta-sm { transition: transform .32s cubic-bezier(.2,.9,.3,1), background .2s ease, border-color .2s ease; }
.btn:hover { transform: none; }        /* الجذب بياخد مكان الرفعة */

@media (prefers-reduced-motion: reduce) {
  .hero h1 .wd { opacity: 1; transform: none; transition: none; }
  [data-par] { transform: none !important; }
}