/* ==========================================================================
   AlBasali — MOBILE deck. Vertical full-screen scroll-snap "stories".
   Self-contained. Brand tokens mirror the app. Arabic falls back to Dubai.
   ========================================================================== */
:root{
  --navy:#1B3E5B;--navy-deep:#0E3449;--gold:#E0B87F;--gold-bright:#EEC566;--gold-soft:#efd6ad;
  --cream:#F7E9CF;--success:#3aa06f;--warning:#d1a13a;--danger:#c0453d;
  --on-dark:#F4E9D2;--on-dark-2:#c7bfae;
  --font-display:'Almarai','Dubai','Sakkal Majalla','Tahoma',sans-serif;
  --font-ui:'IBM Plex Sans Arabic','Dubai','Segoe UI','Tahoma',sans-serif;
  --e-out:cubic-bezier(.16,.84,.3,1);--e-back:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{background:#07202c}
body{font-family:var(--font-ui);color:var(--on-dark);direction:rtl;-webkit-font-smoothing:antialiased;
  background:linear-gradient(160deg,#0c2a3a,#06161f);overscroll-behavior:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- reel */
.reel{height:100svh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.panel{position:relative;height:100svh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px 22px calc(96px + env(safe-area-inset-bottom)) 22px}
.panel--center{justify-content:center;text-align:center}
.panel--hero{justify-content:flex-end;text-align:center}   /* photo panels: text sits low in the dark zone */
.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.08);transition:transform 6s linear}
.panel.in .bgimg{transform:scale(1)}
.veil{position:absolute;inset:0;z-index:1}
.veil--photo{background:linear-gradient(0deg,rgba(5,16,23,.97) 0%,rgba(5,16,23,.82) 30%,rgba(5,16,23,.42) 58%,rgba(5,16,23,.28) 78%,rgba(5,16,23,.5) 100%)}
.bg-grad{position:absolute;inset:0;z-index:0}
.bg-a{background:radial-gradient(90% 60% at 50% 8%,#1d4a68 0%,transparent 60%),linear-gradient(160deg,#0e3046,#07161f)}
.bg-b{background:radial-gradient(90% 60% at 50% 100%,#123a52 0%,transparent 58%),linear-gradient(200deg,#0c2c40,#06151e)}
.bg-a::after,.bg-b::after{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 22% 26%,rgba(224,184,127,.06) 0 2px,transparent 3px) 0 0/46px 46px}
.content{position:relative;z-index:3;width:100%;max-width:520px;margin-inline:auto}

/* dust */
.dust{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:.5}
.dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 7px 1px rgba(224,184,127,.7);animation:floaty linear infinite}
@keyframes floaty{0%{transform:translateY(20px);opacity:0}15%{opacity:.7}85%{opacity:.6}100%{transform:translateY(-120px);opacity:0}}

/* ---------------------------------------------------------------- typography */
.kick{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.12em;margin-bottom:12px}
.kick::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.m-h1{font-family:var(--font-display);font-weight:800;line-height:1.08;font-size:clamp(30px,8.5vw,46px)}
.m-h2{font-family:var(--font-display);font-weight:800;line-height:1.15;font-size:clamp(24px,6.6vw,34px)}
.grad{background:linear-gradient(90deg,var(--gold-bright),var(--gold) 60%,#caa06a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 12px rgba(3,12,18,.5))}
.m-sub{margin-top:14px;font-size:clamp(15px,4.4vw,18px);line-height:1.6;color:#efe4cf}
.gold{color:var(--gold-bright)}
.est{color:var(--gold-soft);font-weight:700;letter-spacing:.16em;font-size:12px}

/* reveal on panel enter */
.r{opacity:0;transform:translateY(26px);transition:opacity .7s var(--e-out),transform .8s var(--e-out);
  transition-delay:calc(var(--i,0)*90ms + 60ms)}
.panel.in .r{opacity:1;transform:none}

/* logo */
.m-logo{width:96px;height:96px;border-radius:50%;overflow:hidden;background:#0e3652;
  box-shadow:0 0 0 3px var(--gold),0 0 70px rgba(224,184,127,.4);margin:0 auto 18px}
.m-logo img{width:100%;height:100%;object-fit:cover}
.m-logo.sm{width:74px;height:74px}

/* pain chips */
.chips{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.chip{display:flex;align-items:center;gap:10px;background:rgba(192,69,61,.14);border:1px solid rgba(192,69,61,.4);
  border-radius:12px;padding:11px 13px;font-size:14px;color:#f3d7d3}
.chip b{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;background:rgba(192,69,61,.5);color:#ffe9e6;font-size:13px}

/* ---------------------------------------------------------------- journey vertical stepper */
.steps{position:relative;margin-top:20px;padding-inline-start:6px}
.steps::before{content:"";position:absolute;top:8px;bottom:8px;inset-inline-start:23px;width:3px;border-radius:3px;background:rgba(224,184,127,.18)}
.steps .fill{position:absolute;top:8px;inset-inline-start:23px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--gold-bright),var(--success));height:0;transition:height 1.6s var(--e-out) .2s}
.panel.in .steps .fill{height:calc(100% - 16px)}
.step{position:relative;display:flex;align-items:center;gap:14px;padding:9px 0}
.step .node{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:20px;z-index:2;
  background:#0c2a3c;border:2px solid rgba(224,184,127,.35);transition:.5s var(--e-back)}
.panel.in .step .node{border-color:var(--success);background:#12463a}
.step .tx b{display:block;font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--cream)}
.step .tx span{font-size:12.5px;color:var(--on-dark-2)}

/* ---------------------------------------------------------------- waiting disc */
.wcwrap{display:grid;place-items:center;margin:6px auto 0}
.wc{position:relative;width:min(66vw,270px);aspect-ratio:1;display:grid;place-items:center}
.wc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wc__disc{fill:#0e2e44}.wc__ring{fill:none;stroke:rgba(224,184,127,.4)}
.wc__band path{fill:var(--gold-soft)}
.wc__marker{fill:none;stroke:var(--gold-bright);stroke-width:4;stroke-linecap:round;stroke-dasharray:80 540;transform-box:fill-box;transform-origin:center;animation:orbit 3.6s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.wc__pulse{position:absolute;inset:6%;border-radius:50%;animation:wpulse 2.6s ease-out infinite}
@keyframes wpulse{0%{box-shadow:0 0 0 0 rgba(224,184,127,.35)}70%{box-shadow:0 0 0 26px rgba(224,184,127,0)}100%{box-shadow:0 0 0 0 rgba(224,184,127,0)}}
.wc__content{position:relative;z-index:2;text-align:center}
.wc__num{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(44px,15vw,72px);color:var(--gold-bright);line-height:1}
.wc__label{display:block;margin-top:6px;color:var(--on-dark-2);font-size:13px}
.wc.almost .wc__marker{stroke:var(--warning)}.wc.almost .wc__num{color:var(--warning)}
.wc.called .wc__marker{opacity:0}.wc.called .wc__disc{fill:#12463a}.wc.called .wc__num{color:#eafff5;font-size:clamp(22px,7vw,34px)}

/* ---------------------------------------------------------------- phone + otw */
.pcard{width:min(78vw,300px);margin:6px auto 0;border-radius:24px;background:linear-gradient(180deg,#0c2436,#08192a);
  border:1px solid rgba(224,184,127,.3);box-shadow:0 20px 50px rgba(0,0,0,.5);padding:22px 18px;text-align:center}
.pcard .pnote{font-weight:800;color:var(--gold-bright);font-size:17px}
.pcard .pnote small{display:block;color:var(--on-dark-2);font-weight:600;font-size:12px;margin-top:4px}
.gbtn{display:inline-block;margin-top:16px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#2a1c08;
  font-weight:800;font-size:16px;border-radius:30px;padding:12px 26px;box-shadow:0 10px 24px rgba(224,184,127,.4);
  animation:invite 2.2s var(--e-out) infinite}
@keyframes invite{50%{transform:scale(1.05)}}
.gbtn:active{transform:scale(.96)}
.supmini{display:flex;align-items:center;gap:10px;margin:16px auto 0;max-width:300px;
  background:linear-gradient(180deg,rgba(120,170,255,.14),rgba(120,170,255,.04));border:1px solid rgba(120,170,255,.4);
  border-radius:14px;padding:12px 14px;opacity:0;transform:translateY(10px);transition:.5s var(--e-back)}
.supmini.show{opacity:1;transform:none}
.supmini .av{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#2a5573,#173247);color:#a9c8ff;font-weight:800}
.supmini .who b{display:block;color:#cfe0ff;font-size:14px}.supmini .who span{font-size:11px;color:var(--on-dark-2)}
.supmini .pill{margin-inline-start:auto;background:var(--success);color:#eafff5;font-weight:800;font-size:12px;padding:6px 11px;border-radius:20px}

/* ---------------------------------------------------------------- kpis stacked */
.kpis{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.kpi{display:flex;align-items:baseline;gap:14px;justify-content:center}
.kpi b{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,16vw,76px);line-height:1;
  background:linear-gradient(90deg,var(--gold-bright),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;min-width:1.4em;text-align:center}
.kpi span{font-size:15px;color:var(--on-dark-2);text-align:right;max-width:9em}

/* ---------------------------------------------------------------- HUD */
.mprog{position:fixed;top:0;left:0;right:0;height:4px;z-index:50;background:rgba(224,184,127,.14)}
.mprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-bright),var(--gold));transition:width .3s ease}
.brand{position:fixed;top:calc(14px + env(safe-area-inset-top));inset-inline-start:16px;z-index:50;display:flex;align-items:center;gap:8px;opacity:.92}
.brand img{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--gold)}
.brand b{font-family:var(--font-display);font-weight:800;font-size:15px}
.fsbtn{position:fixed;top:calc(12px + env(safe-area-inset-top));inset-inline-end:14px;z-index:50;width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.32);border:1px solid rgba(224,184,127,.3);display:grid;place-items:center;font-size:16px;color:var(--on-dark);backdrop-filter:blur(6px)}
.hint{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));z-index:4;text-align:center;color:var(--on-dark-2);font-size:12px;letter-spacing:.06em;pointer-events:none}
.hint b{display:block;font-size:22px;line-height:1;margin-top:4px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.dotsr{position:fixed;top:50%;inset-inline-end:10px;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:8px}
.dotsr i{width:7px;height:7px;border-radius:50%;background:rgba(224,184,127,.3);transition:.3s var(--e-back)}
.dotsr i.on{background:var(--gold-bright);height:20px;border-radius:5px}

@media (prefers-reduced-motion:reduce){
  .bgimg,.wc__marker,.wc__pulse,.gbtn,.hint b{animation:none;transition:none}
}