/* ==========================================================================
   Road chrome — design layer over scrub-engine.js (أيادي أفريقيا للشحن البري)
   Identity: the overland highway. The eyebrow is a green highway-sign plate,
   stage numbers are mono kilometre data, the route rail is a road with a
   dashed centre line that fills as you drive (scroll). Copy floats on the
   footage over a cinematic dark scrim from the reading side (RTL: right).
   Unlayered on purpose: engine CSS sits in @layer sw, so these rules win
   without !important. RTL positioning lives in index.html.
   ========================================================================== */

/* ---- atmosphere: no white washes, navy-charcoal cinema instead ------------ */
.sw-sky__glow {
  background: radial-gradient(50% 40% at 30% 20%, rgba(110, 119, 126, .08), transparent 70%);
}
.sw-copylayer::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to left,
    rgba(15, 14, 10, .62) 0%,
    rgba(15, 14, 10, .34) 26%,
    rgba(15, 14, 10, 0) 52%);
}
.sw-stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 62%, rgba(34, 38, 42, .18) 100%);
}

/* ---- engine font variables ----------------------------------------------- */
.sw-root {
  --sw-font-display: "Almarai", system-ui, sans-serif;
  --sw-font-body:    "Almarai", system-ui, sans-serif;
  --mfx-mono:        "IBM Plex Mono", ui-monospace, monospace;
}

/* ---- floating copy — type lives IN the footage --------------------------- */
.sw-copy {
  width: min(40vw, 470px);
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* stage number — km-marker data line */
.sw-copy__num {
  display: block;
  direction: ltr;
  text-align: end;
  font-family: var(--mfx-mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .18em;
  color: rgba(250, 248, 244, .72);
  margin-bottom: 14px;
}

/* the eyebrow — a green highway-sign plate, straight and confident */
.sw-copy__eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1;
  color: #FAF8F4;
  background: #1B5E43;
  border: 1.5px solid rgba(250, 248, 244, .55);
  border-radius: 5px;
  padding: 8px 14px 9px;
  box-shadow: 0 1px 12px rgba(15, 14, 10, .35);
  margin-bottom: 16px;
  /* no letter-spacing: tracking breaks Arabic letter joining */
}

.sw-copy__title {
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.35;
  color: #FAF8F4;
  margin: 0 0 14px;
  text-shadow: 0 1px 28px rgba(15, 14, 10, .5);
}

.sw-copy__body {
  font-weight: 400;
  font-size: .98rem;
  line-height: 1.9;
  color: rgba(250, 248, 244, .88);
  margin: 0 0 18px;
  text-shadow: 0 1px 18px rgba(15, 14, 10, .45);
}

/* cargo tags — translucent chips with an amber tick */
.sw-copy__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.sw-copy__tags li {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: .78rem; color: #FAF8F4;
  border: 1px solid rgba(250, 248, 244, .30);
  border-radius: 5px;
  padding: 6px 11px;
  background: rgba(15, 14, 10, .30);
  list-style: none;
}
.sw-copy__tags li::before {
  content: "";
  width: 6px; height: 6px;
  background: #E39B2D;
  flex: none;
}

/* finale CTAs */
.sw-copy a {
  display: inline-block;
  font-weight: 700; font-size: .9rem;
  border-radius: 5px;
  padding: 11px 20px;
  margin-inline-end: 10px; margin-top: 6px;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.sw-copy a:first-of-type { background: #E39B2D; color: #1B1D1F; border: 1px solid #E39B2D; }
.sw-copy a:first-of-type:hover { background: #FAF8F4; border-color: #FAF8F4; }
.sw-copy a:not(:first-of-type) { color: #FAF8F4; border: 1px solid rgba(250, 248, 244, .45); }
.sw-copy a:not(:first-of-type):hover { border-color: #FAF8F4; }

/* ---- topbar: light road-paper, green CTA --------------------------------- */
.sw-topbar { background: none; }
.sw-brand__name { font-weight: 800; font-size: .95rem; color: #1B1D1F; }
.sw-brand__mark { width: 9px; height: 9px; border-radius: 2px; background: #E39B2D; }
.sw-nav__item {
  font-weight: 700; font-size: .82rem; color: rgba(27, 29, 31, .72);
  border: 1px solid transparent; border-radius: 5px;
  padding: 7px 13px;
  background: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.sw-nav__item:hover { color: #1B1D1F; }
.sw-nav__item.is-active {
  color: #1B5E43;
  background: rgba(250, 248, 244, .92);
  border-color: rgba(27, 29, 31, .24);
}
.sw-topcta {
  font-weight: 700; font-size: .85rem;
  color: #FAF8F4; background: #1B5E43;
  border-radius: 5px; padding: 10px 18px;
  transition: background-color .18s ease;
}
.sw-topcta:hover { background: #22262A; }

/* ---- route rail: the road itself — dashed centre line that fills ---------- */
.sw-route { counter-reset: mfx-stop; }
.sw-route::before {                 /* the road: dashed centre line */
  content: "";
  position: absolute; top: 6px; bottom: 6px;
  inset-inline-start: 50%; translate: -50% 0;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(27, 29, 31, .28) 0 6px,
    transparent 6px 12px);
}
.sw-route::after {                  /* driven distance (JS sets --mfx-progress) */
  content: "";
  position: absolute; top: 6px;
  inset-inline-start: 50%; translate: -50% 0;
  width: 2px;
  height: calc((100% - 12px) * var(--mfx-progress, 0));
  background: #E39B2D;
  transition: height .12s linear;
}
.sw-route__dot { position: relative; z-index: 1; counter-increment: mfx-stop; }
.sw-route__dot i {
  display: block; width: 10px; height: 3px; border-radius: 1px;
  background: #6E777E;
  transition: width .2s ease, background-color .2s ease;
}
.sw-route__dot.is-active i { width: 20px; background: #1B5E43; }
.sw-route__dot::after {             /* mono km number beside each stop */
  content: "0" counter(mfx-stop);
  position: absolute; top: 50%; translate: 0 -50%;
  inset-inline-start: calc(100% + 30px);
  font-family: var(--mfx-mono); font-size: .6rem; letter-spacing: .12em;
  color: rgba(110, 119, 126, 0);
  transition: color .2s ease;
}
.sw-route:hover .sw-route__dot::after,
.sw-route__dot.is-active::after { color: rgba(110, 119, 126, .9); }
.sw-route__label {
  font-weight: 700; font-size: .74rem; color: #FAF8F4;
  background: #1B5E43;
  border: 1px solid rgba(250, 248, 244, .35); border-radius: 5px;
  padding: 4px 10px;
}

/* ---- scroll hint: a headlight dropping down the lane ---------------------- */
.sw-hint {
  background: none; border: none; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .74rem; font-weight: 700; color: rgba(27, 29, 31, .62);
}
.sw-hint i {
  display: block; width: 2px; height: 38px; position: relative;
  background: repeating-linear-gradient(
    to bottom,
    rgba(27, 29, 31, .25) 0 5px,
    transparent 5px 10px);
}
.sw-hint i::after {
  content: "";
  position: absolute; top: 0; inset-inline-start: -1.5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #E39B2D;
}

/* ==========================================================================
   Motion — one staged entrance per scene, gated on .is-live (design-layer.js).
   `.mfx` on <html> proves JS runs: without it nothing is ever hidden.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .mfx .sw-copy:not(.is-live) .sw-copy__num,
  .mfx .sw-copy:not(.is-live) .sw-copy__eyebrow,
  .mfx .sw-copy:not(.is-live) .sw-copy__title,
  .mfx .sw-copy:not(.is-live) .sw-copy__body,
  .mfx .sw-copy:not(.is-live) .sw-copy__tags li,
  .mfx .sw-copy:not(.is-live) a { opacity: 0; }

  .mfx .sw-copy.is-live .sw-copy__num     { animation: mfx-fade  .4s ease-out both; }
  .mfx .sw-copy.is-live .sw-copy__eyebrow { animation: mfx-sign  .5s cubic-bezier(.2, 1.3, .4, 1) .08s both; }
  .mfx .sw-copy.is-live .sw-copy__title   { animation: mfx-rise  .5s cubic-bezier(.2, .8, .2, 1) .18s both; }
  .mfx .sw-copy.is-live .sw-copy__body    { animation: mfx-fade  .5s ease-out .32s both; }
  .mfx .sw-copy.is-live .sw-copy__tags li { animation: mfx-rise  .35s ease-out both; }
  .mfx .sw-copy.is-live .sw-copy__tags li:nth-child(1) { animation-delay: .42s; }
  .mfx .sw-copy.is-live .sw-copy__tags li:nth-child(2) { animation-delay: .48s; }
  .mfx .sw-copy.is-live .sw-copy__tags li:nth-child(3) { animation-delay: .54s; }
  .mfx .sw-copy.is-live a                 { animation: mfx-rise  .4s ease-out .45s both; }

  .sw-hint i::after { animation: mfx-lane 1.8s ease-in-out infinite; }
}

@keyframes mfx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mfx-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mfx-sign {                      /* the sign slides in like passing it on the road */
  from { opacity: 0; transform: translateX(-14px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes mfx-lane {
  0%   { top: 0;    opacity: 0; }
  15%  { opacity: 1; }
  70%  { top: 34px; opacity: 1; }
  100% { top: 34px; opacity: 0; }
}

/* ---- small screens: copy docks to the bottom, scrim rises from below ------ */
@media (max-width: 700px) {
  [dir="rtl"] .sw-copy, .sw-copy {
    left: 14px; right: 14px;
    top: auto; bottom: 22px; transform: none;
    width: auto;
    padding: 0;
  }
  .sw-copy__title { font-size: 1.45rem; }
  .sw-copylayer::before {
    background: linear-gradient(to top,
      rgba(15, 14, 10, .66) 0%,
      rgba(15, 14, 10, .36) 30%,
      rgba(15, 14, 10, 0) 58%);
  }
}