/* ============================================================================
   WeinBus, Base: reset, typography, RTL, shared keyframes, utilities
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: var(--fw-reg);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-x);
  line-height: var(--lh-tight);
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Arabic display fonts read better a touch heavier & with normal tracking */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5 { letter-spacing: 0; line-height: 1.25; }
html[lang="ar"] body { line-height: 1.7; }
/* All Arabic UI uses Cairo, headings and body */
html[lang="ar"] { --font-display: "Cairo", system-ui, sans-serif; --font-body: "Cairo", system-ui, -apple-system, sans-serif; }

p { color: var(--ink-2); }
/* Smoother multi-line wrapping: balance short headings, avoid orphan words */
body { text-wrap: pretty; }
h1, h2, h3, h4, h5, .h-sec, .greet, .sec-title, .tl-name, .toast__title, .feature h3 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }

::selection { background: var(--brand-primary); color: var(--brand-on-primary); }

:focus-visible {
  outline: 3px solid var(--wb-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Friendly scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

/* ---- Layout utilities ------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.stack    { display: flex; flex-direction: column; }
.row      { display: flex; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.between  { justify-content: space-between; }
.center   { align-items: center; justify-content: center; }
.gap1{gap:var(--s1)} .gap2{gap:var(--s2)} .gap3{gap:var(--s3)} .gap4{gap:var(--s4)}
.gap5{gap:var(--s5)} .gap6{gap:var(--s6)} .gap7{gap:var(--s7)} .gap8{gap:var(--s8)}
.grow { flex: 1 1 auto; }
.wrap-text { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

/* ---- Text utilities --------------------------------------------------- */
.muted   { color: var(--ink-3); }
.dim     { color: var(--ink-2); }
.tiny    { font-size: var(--fs-2xs); }
.small   { font-size: var(--fs-sm); }
.big     { font-size: var(--fs-xl); }
.bold    { font-weight: var(--fw-bold); }
.x-bold  { font-weight: var(--fw-x); }
.display { font-family: var(--font-display); font-weight: var(--fw-x); }
.center-text { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
/* digits always Latin / tabular; force LTR so phones/plates/times never reorder in RTL */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .num { text-align: inherit; }

.hide { display: none !important; }
@media (max-width: 720px){ .hide-mobile { display: none !important; } }
@media (min-width: 721px){ .only-mobile { display: none !important; } }

/* ---- Shared keyframes ------------------------------------------------- */
@keyframes float    { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }
@keyframes floatX   { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(8px) } }
@keyframes bobble   { 0%,100%{ transform: translateY(0) rotate(-1.5deg) } 50%{ transform: translateY(-7px) rotate(1.5deg) } }
@keyframes pop      { 0%{ transform: scale(.6); opacity: 0 } 60%{ transform: scale(1.08) } 100%{ transform: scale(1); opacity: 1 } }
@keyframes popIn    { from{ transform: scale(.9); opacity: 0 } to{ transform: scale(1); opacity: 1 } }
@keyframes fadeUp   { from{ transform: translateY(22px); opacity: 0 } to{ transform: translateY(0); opacity: 1 } }
@keyframes fadeIn   { from{ opacity: 0 } to{ opacity: 1 } }
@keyframes pulse    { 0%{ box-shadow: 0 0 0 0 rgba(52,211,153,.55) } 70%{ box-shadow: 0 0 0 12px rgba(52,211,153,0) } 100%{ box-shadow: 0 0 0 0 rgba(52,211,153,0) } }
@keyframes pulseDot { 0%,100%{ transform: scale(1); opacity: 1 } 50%{ transform: scale(.6); opacity:.5 } }
@keyframes spin     { to { transform: rotate(360deg) } }
@keyframes wiggle   { 0%,100%{ transform: rotate(0) } 25%{ transform: rotate(-7deg) } 75%{ transform: rotate(7deg) } }
@keyframes shimmer  { 0%{ background-position: -460px 0 } 100%{ background-position: 460px 0 } }
@keyframes roadMove { to { background-position-x: -80px; } }
@keyframes wheelSpin{ to { transform: rotate(360deg); } }
@keyframes confettiFall { to { transform: translateY(130px) rotate(360deg); opacity: 0; } }
@keyframes ring { 0%{ transform: scale(.7); opacity:.7 } 100%{ transform: scale(2.4); opacity: 0 } }

/* RTL flips horizontal-drift animations so motion still reads "forward" */
html[dir="rtl"] .flipX { transform: scaleX(-1); }

/* ---- Reveal on scroll (driven by ui.js IntersectionObserver) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1{ transition-delay: .08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay: .24s } .reveal.d4{ transition-delay:.32s }
.reveal.d5{ transition-delay: .40s } .reveal.d6{ transition-delay:.48s }

/* Visually hidden but accessible */
.vh { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0 0 0 0); white-space: nowrap; border:0; }

/* Loading spinner */
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand-primary-deep); animation: spin .7s linear infinite; }