/* ===== التوب السوداني v2 — scrollytelling ===== */
:root{
  --bg:#f3e6d3; --fg:#2b1810; --accent:#a8432a;
  --henna:#a8432a; --henna-d:#7f2f1c; --gold:#d9a640; --gold-l:#f1d08a;
  --cream:#fffaf2; --brown:#2b1810; --muted:#7a6153; --line:rgba(43,24,16,.12);
  --card:#fffaf2; --card-fg:#2b1810;
  --r:26px; --shadow:0 24px 50px -22px rgba(20,10,5,.55);
  --hdr:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.js{scroll-behavior:auto}
body{font-family:"Tajawal",system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.7;font-size:16.5px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,.bold{font-family:"Cairo",sans-serif;line-height:1.2;letter-spacing:-.01em}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hdr);display:flex;align-items:center;color:var(--fg);transition:background .3s,box-shadow .3s}
.hdr.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 color-mix(in srgb,var(--fg) 12%,transparent)}
.hdr .wrap{display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Cairo";font-weight:900;font-size:1.25rem;white-space:nowrap}
.logo svg{width:34px;height:34px;flex:none}
.nav{display:flex;gap:2px;list-style:none;margin-inline-start:auto}
.nav a{display:block;padding:8px 14px;border-radius:999px;font-weight:700;font-size:.95rem;opacity:.78;transition:.2s}
.nav a:hover,.nav a.on{opacity:1;background:color-mix(in srgb,var(--fg) 10%,transparent)}
.hdr .cta-btn{margin-inline-start:6px}
.menu-btn{display:none;background:none;border:1.5px solid color-mix(in srgb,var(--fg) 30%,transparent);color:inherit;border-radius:14px;width:44px;height:44px;cursor:pointer;place-items:center}
@media (max-width:899px){
  :root{--hdr:64px}
  .nav{position:fixed;inset:var(--hdr) 12px auto 12px;flex-direction:column;background:var(--card);color:var(--card-fg);border-radius:22px;padding:10px;box-shadow:var(--shadow);display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 16px;opacity:1}
  .menu-btn{display:grid}
  .hdr .cta-btn{margin-inline-start:auto;padding:9px 16px;font-size:.9rem}
  .logo{font-size:1.1rem}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font-family:"Cairo";font-weight:800;font-size:1rem;border:0;cursor:pointer;white-space:nowrap;transition:transform .2s,background .2s,color .2s;background:var(--fg);color:var(--bg)}
.btn:hover{transform:translateY(-2px)}
.btn.accent{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--fg) 40%,transparent)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--fg)}
.btn.sm{padding:9px 18px;font-size:.92rem}
.btn .arr{display:inline-block;transition:transform .2s}
.btn:hover .arr{transform:translateX(-4px)}

/* ---------- scrolly sections ---------- */
.sec{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--hdr) + 28px) 0 48px;overflow:hidden;background:var(--sbg);color:var(--sfg);--accent:var(--sac)}
html.anim .sec{background:transparent;color:inherit;--accent:inherit}
.sec .wrap{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;width:min(1240px,100% - 40px)}
.copy{max-width:560px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;letter-spacing:.02em;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--fg) 9%,transparent);margin-bottom:16px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.sec h1{font-size:clamp(3.1rem,8.6vw,7.4rem);font-weight:900;line-height:1.12;margin-bottom:18px}
.sec h1 em{font-style:normal;color:var(--accent);display:block}
.sec h2{font-size:clamp(2.3rem,5.6vw,4.6rem);font-weight:900;line-height:1.05;margin-bottom:14px}
.lead{font-size:clamp(1.05rem,1.8vw,1.3rem);opacity:.88;max-width:40ch}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pill{font-size:.9rem;font-weight:700;padding:5px 13px;border-radius:999px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--fg) 22%,transparent)}
.stat{display:flex;gap:28px;margin-top:22px}
.stat b{display:block;font-family:"Cairo";font-weight:900;font-size:2.6rem;line-height:1;color:var(--accent)}
.stat span{font-size:.9rem;opacity:.8}

/* visual column (left in RTL) */
.visual{position:relative;min-height:min(74vh,640px)}
.art{position:absolute;inset:6% 8%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.art .intro,.stage .intro{position:absolute;inset:0;transform-origin:50% 50%}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;filter:drop-shadow(0 40px 40px rgba(0,0,0,.28))}
html.stage-on .art{visibility:hidden}

/* fixed stage (desktop only) */
.stage{display:none}
html.stage-on .stage{display:block;position:fixed;z-index:2;left:max(20px,calc((100vw - 1240px)/2));--sh:min(70vh,620px);top:calc(var(--hdr) + (100vh - var(--hdr) - var(--sh)) / 2);width:min(46vw,640px);height:var(--sh);pointer-events:none}
.stage .tb{position:absolute;inset:0;visibility:hidden;will-change:transform,opacity}
.stage .tb:first-child{visibility:visible}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 46px 40px rgba(0,0,0,.3))}
/* fabric flutter: CSS sway hung from the top edge (+ SVG displacement on desktop, driven by flutter.js) */
.fx{position:absolute;width:0;height:0;overflow:hidden}
.toub{transform-origin:50% 3%}
html.flutter .toub{animation:sway 6.8s ease-in-out infinite;animation-play-state:paused;animation-delay:var(--fd,0s)}
html.flutter .toub.on{animation-play-state:running}
@keyframes sway{0%,100%{transform:translateY(0) rotate(-1.2deg) skewX(.9deg)}27%{transform:translateY(-6px) rotate(.5deg) skewX(-.5deg)}52%{transform:translateY(-10px) rotate(1.3deg) skewX(-1.2deg)}76%{transform:translateY(-4px) rotate(.1deg) skewX(.6deg)}}
@keyframes sway-m{0%,100%{transform:translateY(0) rotate(-.7deg) skewX(.5deg)}50%{transform:translateY(-5px) rotate(.8deg) skewX(-.6deg)}}
/* v5: the displacement filter is only attached while the ripple is live (flutter.js drops it during scroll) */
@media (min-width:900px){html.cloth-live .stage img,html.cloth-live .art img{filter:url(#cloth) drop-shadow(0 46px 40px rgba(0,0,0,.3))}}
@media (max-width:899px){html.flutter .toub{animation-name:sway-m;animation-duration:5.6s}}

/* floating UI cards */
.floats{position:absolute;inset:0;z-index:4}
.fc{position:absolute;background:var(--card);color:var(--card-fg);border-radius:20px;padding:13px 16px;box-shadow:var(--shadow);font-size:.9rem;line-height:1.45;max-width:250px;display:block}
a.fc:hover{outline:2px solid var(--gold)}
.fc .lbl{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;color:var(--henna);margin-bottom:4px;letter-spacing:.02em}
.fc .lbl::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.fc b{font-family:"Cairo";font-weight:800;font-size:1rem;display:block}
.fc small{color:var(--muted);display:block}
.fc.tag{padding:9px 16px;border-radius:999px;font-family:"Cairo";font-weight:800;font-size:.98rem}
.fc.big{font-size:1.5rem;padding:12px 24px;background:var(--gold);color:var(--brown)}
.cdown{display:flex;gap:6px;margin-top:8px;direction:rtl}
.cdown span{background:var(--brown);color:var(--gold-l);border-radius:10px;padding:4px 0;min-width:46px;text-align:center;font-family:"Cairo";font-weight:800;font-size:1.15rem;line-height:1.1;font-variant-numeric:tabular-nums}
.cdown span i{display:block;font-style:normal;font-size:.62rem;font-weight:600;color:#e7d5bd}
.st{display:inline-block;font-size:.72rem;font-weight:800;padding:1px 8px;border-radius:999px;margin-inline-start:4px;vertical-align:middle}
.st.up{background:#dff1e8;color:#1b6b4a}.st.now{background:#fff0c7;color:#8a5a00}.st.past{background:#eee6de;color:#7a6153}.st.tba{background:#e0eef0;color:#176d6d}
.p1{top:4%;right:2%}.p2{bottom:8%;right:6%}.p3{top:40%;left:0}.p4{bottom:2%;left:2%}.p5{top:0;left:22%}

/* lists in copy column */
.list{list-style:none;display:grid;gap:10px;margin-top:20px}
.list a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-radius:18px;background:color-mix(in srgb,var(--fg) 8%,transparent);transition:.2s}
.list a:hover{background:color-mix(in srgb,var(--fg) 15%,transparent)}
.list .d{font-family:"Cairo";font-weight:800;font-size:.85rem;color:var(--accent);white-space:nowrap}
.list b{font-family:"Cairo";font-weight:800;display:block;line-height:1.35}
.list small{opacity:.75}

/* ghost outline text */

/* frozen-in-time bits */
.bits{position:absolute;inset:0;z-index:2;pointer-events:none}
.bit{position:absolute;will-change:transform}
.bit>*{display:block;animation:hover 6s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes hover{50%{transform:translateY(-10px) rotate(8deg)}}
.dot>i{width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 35% 30%,#d96a48,#8a2e18 70%);box-shadow:0 6px 10px rgba(0,0,0,.18)}
.bead>i{width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff6d2 0 10%,#f0c75e 30%,#a8761c 80%);box-shadow:0 8px 12px rgba(0,0,0,.22)}
.bit svg{width:var(--s);height:auto;overflow:visible}

/* ad form */
.formcard{background:var(--card);color:var(--card-fg);border-radius:30px;padding:28px;box-shadow:var(--shadow)}
.formcard h3{font-size:1.4rem;font-weight:900;margin-bottom:4px}
form{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:14px}
form .full{grid-column:1/-1}
label{display:grid;gap:4px;font-weight:800;font-size:.88rem;color:#5a3a2b}
input,select,textarea{font:inherit;font-weight:400;padding:11px 14px;border-radius:14px;border:1.5px solid #e6d6bd;background:#fff;color:var(--card-fg);width:100%}
input[type=tel]{text-align:right}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(217,166,64,.2)}
textarea{min-height:86px;resize:vertical}
.formcard .btn{background:var(--henna);color:#fff}
.ok{display:none;background:#dff1e8;color:#1b6b4a;border-radius:14px;padding:11px 14px;font-weight:800}
.ok.err{background:#fde3dc;color:#8a2a14}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#wa-line a{color:inherit;font-weight:800;text-decoration:underline}
/* hero intro: hidden until motion.js takes over (inline head script adds .intro-pre; safety timeout removes it) */
html.intro-pre .stage,html.intro-pre #hero .art,html.intro-pre #hero .copy>*,html.intro-pre #hero-floats{opacity:0}
.ok.show{display:block}
.note{font-size:.84rem;opacity:.75}
.framed{position:absolute;inset:8% 10%;border-radius:220px 220px 32px 32px;overflow:hidden;border:6px solid var(--gold-l);box-shadow:var(--shadow);background:#f6ead6}
.framed img{width:100%;height:100%;object-fit:cover}
/* v6: «أعلن معانا» video — sits on top of the image (= poster) and fades in once it really plays */
.framed .ad-img,.framed .ad-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.framed .ad-vid{opacity:0;transition:opacity .9s ease;background:transparent}
.framed.vid-on .ad-vid{opacity:1}
.framed::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 -40px 60px -30px rgba(43,24,16,.35)}

/* footer */
.foot{position:relative;z-index:5;background:#1f120c;color:#e9d8c3;padding:48px 0 20px}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
.foot h4{font-family:"Cairo";font-weight:900;color:var(--gold-l);font-size:1.1rem;margin-bottom:8px}
.foot ul{list-style:none;display:grid;gap:4px}
.foot a:hover{color:var(--gold-l)}
.social{display:flex;gap:10px;margin-top:14px}
.social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(241,208,138,.3);transition:.2s}
.social a:hover{background:var(--gold);color:var(--brown)}
.social svg{width:19px;height:19px;fill:currentColor}
.copyr{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:14px;font-size:.84rem;color:#bfa893;text-align:center}

/* ---------- bazaars page ---------- */
.phero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.phero{min-height:86vh;min-height:86svh}
.phero .visual{min-height:min(66vh,560px)}
.phero .art{inset:0 4%}
.listing{position:relative;z-index:3;padding:30px 0 80px;min-height:100vh;min-height:100svh}
.filters{position:sticky;top:var(--hdr);z-index:20;padding:12px 0;margin-bottom:20px}
.filters.stuck{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.frow{display:flex;flex-wrap:wrap;gap:8px}
.frow+.frow{margin-top:8px}
.fbtn{font:inherit;font-family:"Cairo";font-weight:800;font-size:.92rem;padding:8px 17px;border-radius:999px;border:0;cursor:pointer;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);transition:.2s}
.fbtn:hover{background:color-mix(in srgb,var(--fg) 15%,transparent)}
.fbtn.active{background:var(--fg);color:var(--bg)}
.fbtn.s.active{background:var(--henna);color:#fff}
.count{font-weight:700;opacity:.7;margin-bottom:14px}
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--card);color:var(--card-fg);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px -26px rgba(43,24,16,.5);position:relative;overflow:hidden;transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card>*{position:relative;z-index:1}
.card::after{content:"";position:absolute;z-index:0;width:120px;height:120px;border-radius:50%;left:-44px;top:-44px;pointer-events:none;background:var(--tint,#a8432a);opacity:.12}
.card[data-country=sudan]{--tint:#a8432a}.card[data-country=saudi]{--tint:#0f6b4a}.card[data-country=other]{--tint:#2b3a7a}.card[data-country=tba]{--tint:#d9a640}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .ctry{font-family:"Cairo";font-weight:800;color:var(--tint);font-size:.95rem}
.card h3{font-size:1.25rem;font-weight:900}
.card .en{font-size:.88rem;color:var(--muted);direction:ltr;text-align:right}
.meta{display:grid;gap:3px;font-size:.93rem;color:#5a3a2b}
.meta span{display:flex;gap:8px}
.meta i{font-style:normal;width:20px;flex:none;text-align:center}
.card p{color:#5a3a2b;font-size:.96rem}
.card .src{margin-top:auto;padding-top:10px;border-top:1px dashed #e6d6bd;display:flex;justify-content:space-between;align-items:center;font-size:.88rem;color:var(--muted)}
.card .src a{font-family:"Cairo";font-weight:800;color:var(--henna)}
.card.past{opacity:.82}
.empty{grid-column:1/-1;text-align:center;padding:44px 20px;border-radius:var(--r);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.empty a{color:var(--henna);font-weight:800}

/* ---------- mobile ---------- */
@media (max-width:899px){
  body{font-size:16px}
  .sec{display:block;padding:calc(var(--hdr) + 18px) 0 44px}
  .sec .wrap{grid-template-columns:1fr;gap:6px}
  .visual{display:contents}
  .art{position:relative;inset:auto;order:-1;height:min(42vh,360px);margin:0 8% 4px}
  .floats{position:relative;inset:auto;order:1;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:18px}
  #hero-floats .fc:first-child{flex-basis:100%}
  .phero .floats{display:none}
  .fc{position:relative;inset:auto!important;max-width:none;flex:1 1 44%;font-size:.86rem;padding:11px 13px}
  .fc.tag{flex:0 1 auto}
  .fc.big{font-size:1.2rem}
  .cdown span{min-width:0;flex:1}
  .sec h1{font-size:clamp(3rem,15vw,4.4rem)}
  .sec h2{font-size:clamp(2.1rem,10vw,3rem)}
  .actions .btn{flex:1}
  .bit:nth-child(n+6){display:none}
  form{grid-template-columns:1fr}
  .formcard{padding:22px 18px}
  .framed{position:relative;inset:auto;order:-1;height:260px;margin:0 14% 18px}
  .foot .cols{grid-template-columns:1fr 1fr}
  .foot .cols>div:first-child{grid-column:1/-1}
  .phero{min-height:auto}
  .cards{grid-template-columns:1fr}
  .frow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .frow::-webkit-scrollbar{display:none}
  .fbtn{flex:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- v5: smoother motion ---------- */
/* mobile: a live backdrop blur over a colour-blending page is costly on phones — use a denser solid bar */
@media (max-width:899px){.hdr.scrolled{background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* page transitions: native cross-document View Transitions where supported… */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-old(root){animation-name:pt-out}
::view-transition-new(root){animation-name:pt-in}
@keyframes pt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes pt-in{from{opacity:0;transform:translateY(16px)}}
/* …and a soft fade fallback driven by app.js elsewhere (opacity only, so fixed header/stage never jump) */
html.leaving body{opacity:0;transition:opacity .22s ease-in}
html.pt-in body{animation:pt-fade .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes pt-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html.leaving body{opacity:1}
}