/* ==========================================================================
   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; }
}

/* ══════════════════════════════════════════════════════════════════
   حركات الاندكس — بخار · ميل الكروت · شريط القراءة
   ══════════════════════════════════════════════════════════════════
   الهيرو كان خلفية متدرّجة ساكنة. التلاتة دول بيدّوا حياة من غير
   ما ياخدوا الانتباه من الكلام نفسه:

     البخار  حركة بطيئة مستمرة **جوّه** الكادر
     الميل   استجابة للمس المؤشّر — الكارت بيحسّ إنه جسم
     الشريط  بيقول الصفحة فيها كام من غير كلام

   كلهم بيتطفّوا مع `prefers-reduced-motion` (الجافاسكريبت بيرجع
   بدري، والقاعدة تحت بتخفي اللي اتضاف فعلاً). */

/* البخار: فوق التدرّج وتحت الكلام. `pointer-events` مقفولة عشان
   ما يخطفش أي دوسة. */
.hero-steam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.hero-in { position: relative; z-index: 2; }

/* الميل: الانتقال بيخلّي الرجوع ناعم. الـ`transform` نفسها
   بتتكتب من الجافاسكريبت. */
.menu-grid .dish {
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s;
  transform-style: preserve-3d;
  will-change: transform;
}

/* شريط القراءة: خط رفيع فوق خالص. `scaleX` من الشمال في LTR،
   ومن اليمين في RTL — الصفحة عربية فالأصل على اليمين. */
.read-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, #8B5CF0, #D9963C);
  transform: scaleX(0);
  transform-origin: right center;
  z-index: 60;
  pointer-events: none;
}
html[dir="ltr"] .read-bar { transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
  .hero-steam, .read-bar { display: none !important; }
  .menu-grid .dish { transition: none; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   The Craft — scroll-driven sequence
   ══════════════════════════════════════════════════════════════════
   Replaces the 126-card menu grid that used to sit on the landing
   page. A catalogue belongs on the menu page; a landing page should
   show the work.

   The stage is **tall on purpose** (300vh). The inner panel sticks to
   the viewport while you scroll past it, which is what buys the four
   steps their turn. Shorten the stage and the steps flick by too fast
   to read. */
.craft-stage { height: 300vh; position: relative; }
.craft-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.craft-in {
  display: grid;
  grid-template-columns: 4px 1fr minmax(0, .8fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  width: 100%;
}

/* The rail: four ticks and a fill that tracks scroll. It is the only
   thing on screen that says "there are four of these and you are on
   number two" without writing it out. */
.craft-rail {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  height: min(60vh, 420px);
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.craft-rail li {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 30%, transparent);
}
.rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #8B5CF0, #D9963C);
  border-radius: 4px;
  transform: scaleY(0);
  transform-origin: top center;
  /* No transition: the value is written every frame from the scroll
     position. A transition here would lag behind the finger. */
}

/* Steps are stacked in the same cell — only one is lit at a time, and
   the others stay in the flow so the panel never changes height. */
.craft-steps { display: grid; }
.cstep {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.cstep.on { opacity: 1; transform: none; pointer-events: auto; }
.cs-n {
  display: block;
  font: 800 clamp(40px, 7vw, 86px)/1 "Outfit", system-ui, sans-serif;
  background: linear-gradient(135deg, #8B5CF0, #D9963C);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* Fallback colour first: `background-clip: text` has silently failed
     to paint on mobile here before, leaving the number invisible. */
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .cs-n { color: #8B5CF0; -webkit-text-fill-color: #8B5CF0; }
}
.cstep h3 {
  font: 800 clamp(26px, 4vw, 48px)/1.1 "Outfit", system-ui, sans-serif;
  margin: .2em 0 .35em;
}
.cstep p { max-width: 46ch; opacity: .78; line-height: 1.65; }

/* The cup: a flat shape that fills as you scroll. Not a 3D model —
   this is a landing page, and the real machines are one click away in
   the kitchen. */
.craft-art { margin: 0; display: grid; place-items: center; }
.art-cup {
  position: relative;
  width: clamp(110px, 16vw, 190px);
  aspect-ratio: 3 / 4;
  border: 3px solid color-mix(in srgb, currentColor 26%, transparent);
  border-top: 0;
  border-radius: 6px 6px 44% 44% / 6px 6px 26% 26%;
  overflow: hidden;
}
.art-liquid {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 8%;
  background: linear-gradient(180deg, #6B4530, #2E1A10);
  transition: height .18s linear;
}
.art-steam {
  position: absolute;
  inset-inline: 0;
  top: -26%;
  height: 30%;
  display: flex;
  justify-content: center;
  gap: 14%;
}
.art-steam s {
  width: 3px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, currentColor 32%, transparent), transparent);
  border-radius: 3px;
  animation: artSteam 3.2s ease-in-out infinite;
}
.art-steam s:nth-child(2) { animation-delay: .9s; }
.art-steam s:nth-child(3) { animation-delay: 1.7s; }
@keyframes artSteam {
  0%, 100% { opacity: 0; transform: translateY(8px) scaleY(.7); }
  50%      { opacity: 1; transform: translateY(-6px) scaleY(1); }
}

/* Closing call to action */
.closer { text-align: center; }
.closer-h { font: 800 clamp(30px, 6vw, 72px)/1.05 "Outfit", system-ui, sans-serif; }
.closer-p { opacity: .72; margin: .6em 0 1.6em; }
.closer .hero-cta { justify-content: center; }

@media (max-width: 860px) {
  /* On a phone the three columns do not fit. The cup goes, the rail
     stays — it is the part that carries the progress. */
  .craft-in { grid-template-columns: 4px 1fr; }
  .craft-art { display: none; }
  .craft-stage { height: 260vh; }
}

@media (prefers-reduced-motion: reduce) {
  /* No sticky, no tracking: every step visible, read top to bottom. */
  .craft-stage, .craft-stage.static { height: auto; }
  .craft-sticky { position: static; height: auto; display: block; padding: 40px 0; }
  .craft-steps { display: block; }
  .cstep { opacity: 1; transform: none; margin-bottom: 36px; pointer-events: auto; }
  .craft-rail, .art-steam { display: none; }
}