/* غضا · الدخان يكتب
   الطبقات: العناوين الكبيرة تحت الدخان، والدخان فوقها، وأدوات المتجر فوقه */
:root{
  --green:#13211B;--deep:#0E1814;--smoke:#E7E1D3;--smoke-70:#AFADA1;--smoke-14:rgba(231,225,211,.18);--copper:#B07A4A;--copper-l:#D29A68;
  --ar-d:'Alexandria',system-ui,sans-serif;--ar:'Readex Pro',system-ui,sans-serif;--lat:'Manrope',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --dock:74px;--top:64px;
}
*{box-sizing:border-box;margin:0}
html{background:var(--deep);-webkit-text-size-adjust:100%;overscroll-behavior-x:none;scroll-padding-block-start:calc(var(--top) + 12px);scroll-padding-block-end:calc(var(--dock) + 16px)}
body{overscroll-behavior-x:none;background:var(--deep);color:var(--smoke);font-family:var(--ar);font-size:17px;line-height:1.7;overflow-x:clip;-webkit-tap-highlight-color:transparent}
bdi{font-family:var(--lat)}
button,input{font:inherit;color:inherit;background:none;border:0;padding:0;border-radius:0}
button{cursor:pointer;touch-action:manipulation}
a{color:inherit}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--copper-l);outline-offset:3px}
.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:20;background:var(--smoke);color:var(--deep);padding:8px 14px;transform:translateY(-200%);transition:transform .2s var(--ease)}
.skip:focus{transform:none}

/* الدخان */
#smoke{position:fixed;inset-block-start:0;inset-inline:0;inline-size:100%;block-size:100vh;block-size:100lvh;z-index:2;pointer-events:none;display:block}
.up{position:relative;z-index:3}
.big,h1{position:relative;z-index:1}

/* الرأس */
.top{position:fixed;inset-block-start:0;inset-inline:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px clamp(14px,3vw,36px);pointer-events:none}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--deep);border-block-end:1px solid var(--smoke-14);opacity:0;transition:opacity .3s ease}
.top.solid::before{opacity:1}
.top>*{pointer-events:auto}
.wm{font-family:var(--ar-d);font-weight:700;font-size:25px;line-height:1.3;text-decoration:none}
.ours{font-size:12.5px;line-height:1.5;color:var(--smoke-70);text-decoration:underline;text-decoration-color:var(--smoke-14);text-underline-offset:4px;margin-inline-end:auto;padding-block:4px}
.top-acts{display:flex;gap:6px;align-items:center}
.hush,.bag{font-size:13.5px;min-block-size:40px;padding-inline:12px;border:1px solid var(--smoke-14);background:rgba(14,24,20,.72);transition:border-color .2s ease,background-color .2s ease;white-space:nowrap}
.hush[aria-pressed="true"]{background:var(--smoke);color:var(--deep)}
.bag bdi{font-weight:700;margin-inline-start:4px}
.bag.has{border-color:var(--copper-l)}

/* الهيرو */
.hero{min-block-size:100vh;min-block-size:100svh;padding-block:76px calc(var(--dock) + 24px);padding-inline:clamp(18px,5vw,72px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
h1{font-family:var(--ar-d);font-weight:700;font-size:min(42vw,40vh);font-size:min(42vw,40svh);line-height:1.3;transition:opacity 1.1s ease}
h1 span{display:inline-block}
h1.smoked{opacity:0}
.lead{max-inline-size:640px;margin-block-start:clamp(0px,1vh,14px)}
.say{text-wrap:balance;font-family:var(--ar-d);font-weight:600;font-size:clamp(23px,3.2vw,38px);line-height:1.35;text-shadow:0 0 18px var(--deep),0 0 4px var(--deep)}
.hand{text-wrap:balance;color:var(--smoke);font-size:clamp(15px,1.4vw,17px);margin-block:8px 18px;text-shadow:0 0 14px var(--deep),0 0 3px var(--deep)}
.go{display:inline-flex;align-items:center;min-block-size:46px;padding-inline:22px;border:1px solid var(--smoke);background:rgba(14,24,20,.62);text-decoration:none;transition:background-color .2s ease,color .2s ease}

/* المناسبة: الكلام نفسه هو الاختيار */
.choose{min-block-size:100vh;padding-block:110px calc(var(--dock) + 60px);padding-inline:clamp(18px,6vw,96px);display:flex;flex-direction:column;justify-content:center;transition:opacity .45s ease}
.big{font-family:var(--ar-d);font-weight:700;font-size:clamp(24px,3vw,38px);line-height:1.35;color:var(--smoke)}
.big.second{margin-block-start:clamp(26px,5vh,54px)}
.words{display:flex;flex-wrap:wrap;gap:0 clamp(16px,3vw,44px);margin-block-start:6px}
.words button{font-family:var(--ar-d);font-weight:700;font-size:clamp(44px,min(6.6vw,10.5vh),112px);line-height:1.32;color:var(--smoke-70);position:relative;transition:color .25s ease;text-shadow:0 0 22px var(--deep)}
.words button::after{content:"";position:absolute;inset-inline:0;inset-block-end:.07em;block-size:3px;background:var(--copper-l);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.words button[aria-pressed="true"]{color:var(--smoke)}
.words button[aria-pressed="true"]::after{transform:none}
.sugg{margin-block-start:clamp(22px,4vh,40px);max-inline-size:640px;text-shadow:0 0 14px var(--deep),0 0 3px var(--deep)}
.sugg b{display:block;font-weight:500;font-size:clamp(18px,2vw,22px);line-height:1.5}
.sugg span{color:var(--smoke);font-size:15.5px}

/* الخلطات: قائمة نصية بعرض الشاشة، لا بطاقات */
.blends{padding-block:90px calc(var(--dock) + 70px);padding-inline:clamp(18px,6vw,96px);transition:opacity .45s ease}
.bl-head{max-inline-size:620px}
.note{font-size:15.5px;color:var(--smoke);margin-block-start:8px;text-shadow:0 0 14px var(--deep),0 0 3px var(--deep)}
.list{margin-block-start:26px;max-inline-size:min(760px,100%)}
.row{display:grid;grid-template-columns:1fr auto;gap:0 18px;inline-size:100%;text-align:start;padding-block:14px;border-block-start:1px solid var(--smoke-14);position:relative}
.row>*{transition:transform .45s var(--ease),color .25s ease}
li:last-child .row{border-block-end:1px solid var(--smoke-14)}
.row b{font-family:var(--ar-d);font-weight:700;font-size:clamp(28px,4.4vw,56px);line-height:1.32;color:var(--smoke-70);transition:color .25s ease;text-shadow:0 0 18px var(--deep)}
.row .notes{align-self:center;font-size:14px;color:var(--smoke-70);text-align:end}
.row .how{grid-column:1/-1;font-size:15px;line-height:1.6;color:var(--smoke)}
.row .how em{font-style:normal;font-weight:500;color:var(--copper-l);margin-inline-end:8px}
.row[aria-pressed="true"]>*{transform:translateX(-22px)}
.row[aria-pressed="true"] b{color:var(--smoke)}
.row::before{content:"";position:absolute;inset-inline-start:0;inset-block:18px;inline-size:4px;background:var(--copper-l);transform:scaleY(0);transition:transform .45s var(--ease)}
.row[aria-pressed="true"]::before{transform:none}
.burners{margin-block-start:40px;max-inline-size:min(760px,100%)}
.burners h3{font-family:var(--ar-d);font-weight:600;font-size:clamp(20px,2vw,24px);line-height:1.4;margin-block-end:8px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--smoke-14)}
.seg button{text-align:start;padding:12px 14px;border-inline-start:1px solid var(--smoke-14);transition:background-color .2s ease,color .2s ease;background:rgba(14,24,20,.55)}
.seg button:first-child{border-inline-start:0}
.seg b{display:block;font-weight:500;line-height:1.5}
.seg span{display:block;font-size:13px;line-height:1.5;color:var(--smoke-70)}
.seg button[aria-pressed="true"]{background:var(--smoke);color:var(--deep)}
.seg button[aria-pressed="true"] span{color:var(--green)}
.fine{font-size:13.5px;color:var(--smoke-70);line-height:1.6}
.note.fine{margin-block-start:18px;color:var(--smoke-70)}

/* البطاقة */
.card{min-block-size:100vh;min-block-size:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-block:80px calc(var(--dock) + 34px);padding-inline:clamp(18px,6vw,96px)}
.sky{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-block-size:0}
.still-line{display:none;font-family:var(--ar-d);font-weight:700;font-size:clamp(38px,7.4vw,104px);line-height:1.35;overflow-wrap:anywhere}
.card-in{inline-size:min(760px,100%);margin-inline:auto}
.card-in h2{font-family:var(--ar-d);font-weight:600;font-size:clamp(19px,2vw,24px);line-height:1.4;text-shadow:0 0 14px var(--deep)}
.msg{inline-size:100%;font-family:var(--ar-d);font-weight:700;font-size:clamp(28px,4.4vw,52px);line-height:1.4;padding-block:6px 10px;border-block-end:2px solid var(--smoke);background:rgba(14,24,20,.55);border-radius:0;-webkit-appearance:none;appearance:none}
.msg::placeholder{color:var(--smoke-70);opacity:1}
.msg:focus,.msg:focus-visible{outline:0;border-block-end-color:var(--copper-l);box-shadow:0 2px 0 var(--copper-l)}
.msg-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-block-start:8px;font-size:14px;color:var(--smoke)}
.again{min-block-size:44px;padding-inline:14px;border:1px solid var(--smoke-14);background:rgba(14,24,20,.62);transition:border-color .2s ease}

/* الآخر */
.end{min-block-size:80vh;padding-block:90px calc(var(--dock) + 70px);padding-inline:clamp(18px,6vw,96px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.end .big{text-wrap:balance;font-size:clamp(38px,7vw,104px);line-height:1.3;max-inline-size:14em}
.end p{max-inline-size:600px;margin-block:32px 26px;font-size:15.5px;text-shadow:0 0 14px var(--deep),0 0 3px var(--deep)}
.want{display:inline-flex;align-items:center;justify-content:center;min-block-size:56px;padding-inline:40px;background:var(--copper-l);color:var(--deep);font-weight:500;font-size:19px;text-decoration:none;transition:background-color .2s ease}

/* الصندوق: حافة الشاشة السفلى، ومنه يطلع الدخان */
.dock{position:fixed;inset-inline:0;inset-block-end:0;z-index:5;background:var(--deep);border-block-start:1px solid var(--smoke-14);display:flex;align-items:stretch;padding-block-end:env(safe-area-inset-bottom)}
.slots{display:grid;grid-template-columns:repeat(3,1fr) minmax(84px,.62fr);flex:1;min-inline-size:0}
.slot{text-align:start;padding:9px 14px 10px;border-inline-end:1px solid var(--smoke-14);position:relative;min-block-size:60px;min-inline-size:0;transition:background-color .2s ease}
.slot i{display:block;font-style:normal;font-size:11.5px;line-height:1.4;color:var(--smoke-70)}
.slot b{display:block;font-weight:500;font-size:15.5px;line-height:1.4;color:var(--smoke-70);transition:color .2s ease}
.slot.full b{color:var(--smoke)}
.slot::before{content:"";position:absolute;inset-inline:0;inset-block-start:-1px;block-size:2px;background:var(--copper-l);transform:scaleX(0);transition:transform .45s var(--ease)}
.slot[aria-pressed="true"]::before{transform:none}
.burn{border-inline-end:1px solid var(--smoke-14)}
.buy{flex:none;min-inline-size:230px;padding-inline:20px;background:var(--copper-l);color:var(--deep);font-weight:500;font-size:16px;line-height:1.35;transition:background-color .2s ease,color .2s ease}
.buy:disabled{background:transparent;color:var(--smoke-70);cursor:default}

.toast{position:fixed;inset-inline:14px;inset-block-end:calc(var(--dock) + 12px);z-index:7;margin-inline:auto;inline-size:fit-content;max-inline-size:calc(100vw - 28px);background:var(--smoke);color:var(--deep);padding:10px 16px;font-size:14.5px;line-height:1.5;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .35s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:none}

/* السلة */
.cart{margin:auto;inset-inline:0;inline-size:min(520px,calc(100vw - 24px));max-block-size:calc(100vh - 48px);background:var(--green);color:var(--smoke);border:1px solid var(--smoke-14);padding:20px clamp(16px,4vw,26px)}
.cart::backdrop{background:rgba(14,24,20,.72)}
.cart-top{display:flex;justify-content:space-between;align-items:center;margin-block-end:10px}
.cart h2{font-family:var(--ar-d);font-weight:700;font-size:28px;line-height:1.35}
.x{min-block-size:44px;padding-inline:14px;border:1px solid var(--smoke-14)}
#cartl li{padding-block:12px;border-block-start:1px solid var(--smoke-14)}
#cartl b{display:block;font-weight:500}
#cartl span{display:block;font-size:14.5px;color:var(--smoke)}
#cartl q{display:block;quotes:none;font-family:var(--ar-d);font-weight:600;font-size:18px;line-height:1.4;margin-block:4px}
#cartl button{min-block-size:40px;font-size:14px;text-decoration:underline;text-underline-offset:4px;color:var(--smoke)}
.empty{padding-block:14px;border-block-start:1px solid var(--smoke-14)}
.cart .fine{margin-block-start:12px}

/* حين يأخذ الدخان الكلام تتنحى الصفحة قليلاً */
body.writing .choose,body.writing .blends{opacity:.08}

/* بلا حركة أو بلا WebGL: صورة ثابتة، والبطاقة نص كبير */
body.nomotion .hush,body.nomotion .hand-try{display:none}
body.still .still-line{display:block}
body.still h1.smoked{opacity:1}
html.rm{scroll-behavior:auto}

@media (max-width:760px){
  :root{--dock:118px}
  body{font-size:16px}
  .top{flex-wrap:wrap;gap:0 10px;padding:8px 14px}
  .wm{font-size:23px}
  .ours{order:3;inline-size:100%;font-size:12px}
  .hush,.bag{font-size:13px;min-block-size:40px;padding-inline:10px}
  .dock{flex-direction:column}
  .slot{padding:6px 9px 7px;min-block-size:58px}
  .slot:last-child{border-inline-end:0}
  .slot b{font-size:13.5px;line-height:1.3}
  .slot i{font-size:11px}
  .slots{grid-template-columns:repeat(3,1fr) 72px}
  .buy{min-block-size:50px;min-inline-size:0;inline-size:100%;border-block-start:1px solid var(--smoke-14)}
  .buy:disabled{min-block-size:40px;font-size:14px}
  .hero{padding-block-start:84px}
  h1{font-size:min(43vw,30svh)}
  .seg{grid-template-columns:1fr}
  .seg button{border-inline-start:0;border-block-start:1px solid var(--smoke-14)}
  .seg button:first-child{border-block-start:0}
  .choose{padding-block-start:96px}
  .row{grid-template-columns:1fr}
  .row b{font-size:30px}
  .row .notes{text-align:start;order:2}
  .row .how{order:3}
  .words button{font-size:clamp(42px,14vw,84px)}
  .toast{inset-block-end:calc(var(--dock) + 8px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
  .toast{transform:none}
}

@media (hover:hover) and (pointer:fine){
  .ours:hover{color:var(--smoke)}
  .hush:hover,.bag:hover{border-color:var(--smoke)}
  .go:hover{background:var(--smoke);color:var(--deep)}
  .words button:hover{color:var(--smoke)}
  .row:hover b{color:var(--smoke)}
  .again:hover{border-color:var(--smoke)}
  .want:hover{background:var(--smoke)}
  .slot:hover{background:var(--green)}
  .buy:hover:not(:disabled){background:var(--smoke)}
  .x:hover{border-color:var(--smoke)}
}