/* ==========================================================================
   Manifest chrome — design layer over scrub-engine.js
   Direction: port paperwork over documentary footage. The copy card is a
   waybill: bone paper, hairline steel rule, square corners, an oxide rubber
   stamp for the eyebrow, Plex Mono for stage numbers. Legibility lives in
   the card itself — the footage runs clear (no full-side washes).
   Unlayered on purpose: the engine's own CSS sits in @layer sw, so every
   rule here wins without !important. RTL positioning lives in index.html.
   ========================================================================== */

/* ---- kill the default washes; whisper of depth only ---------------------- */
.sw-sky__glow {
  background: radial-gradient(50% 40% at 26% 20%, rgba(118, 126, 132, .10), transparent 70%);
}
/* The engine's legibility scrim, rebuilt for RTL: a cinematic dark gradient
   rising from the reading side (right), like film titles — NOT a white wash,
   NOT a card. The footage stays the hero; the scrim only gives the type a
   quiet corner of the frame. */
.sw-copylayer::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to left,
    rgba(8, 16, 26, .60) 0%,
    rgba(8, 16, 26, .34) 26%,
    rgba(8, 16, 26, 0) 52%);
}
.sw-stage::after {            /* gentle navy vignette — cinema, not overlay */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 62%, rgba(14, 42, 71, .16) 100%);
}

/* ---- engine font variables ----------------------------------------------- */
.sw-root {
  --sw-font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --sw-font-body:    "IBM Plex Sans Arabic", 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 — small manifest data line */
.sw-copy__num {
  display: block;
  direction: ltr;                    /* 01 / 06 is Latin manifest data */
  text-align: end;                   /* hugs the reading edge in RTL */
  font-family: var(--mfx-mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .18em;
  color: rgba(245, 243, 239, .72);
  margin-bottom: 14px;
}

/* the stamp — oxide, struck slightly askew; lighter tint for dark ground */
.sw-copy__eyebrow {
  display: inline-block;
  font-weight: 600;
  font-size: .8rem;
  line-height: 1;
  color: #E09B82;
  border: 1.5px solid rgba(224, 155, 130, .75);
  border-radius: 2px;
  padding: 7px 12px 8px;
  transform: rotate(1.2deg);
  margin-bottom: 16px;
  /* no letter-spacing: tracking breaks Arabic letter joining */
}

.sw-copy__title {
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  color: #F5F3EF;
  margin: 0 0 14px;
  text-shadow: 0 1px 28px rgba(8, 16, 26, .45);
}

.sw-copy__body {
  font-weight: 400;
  font-size: .98rem;
  line-height: 1.9;
  color: rgba(245, 243, 239, .86);
  margin: 0 0 18px;
  text-shadow: 0 1px 18px rgba(8, 16, 26, .4);
}

/* cargo tags — quiet translucent chips with an accent 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: #F5F3EF;
  border: 1px solid rgba(245, 243, 239, .30);
  border-radius: 2px;
  padding: 6px 11px;
  background: rgba(8, 16, 26, .28);
  list-style: none;
}
.sw-copy__tags li::before {
  content: "";
  width: 6px; height: 6px;
  /* fixed blue-lift: per-section accents include navy/steel, which vanish
     against the dark scrim (tokens.css contrast rule) */
  background: #5B9BD5;
  flex: none;
}

/* finale CTAs */
.sw-copy a {
  display: inline-block;
  font-weight: 600; font-size: .9rem;
  border-radius: 2px;
  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: #1863AC; color: #F5F3EF; border: 1px solid #1863AC; }
.sw-copy a:first-of-type:hover { background: #5B9BD5; border-color: #5B9BD5; }
.sw-copy a:not(:first-of-type) { color: #F5F3EF; border: 1px solid rgba(245, 243, 239, .45); }
.sw-copy a:not(:first-of-type):hover { border-color: #F5F3EF; }

/* ---- topbar: quiet, square, brand blue ----------------------------------- */
.sw-topbar { background: none; }
.sw-brand__name { font-weight: 700; font-size: .95rem; color: #14171A; }
.sw-brand__mark { width: 9px; height: 9px; border-radius: 0; background: #B4553C; }
.sw-nav__item {
  font-weight: 500; font-size: .82rem; color: rgba(20, 23, 26, .72);
  border: 1px solid transparent; border-radius: 2px;
  padding: 7px 13px;
  background: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.sw-nav__item:hover { color: #14171A; }
.sw-nav__item.is-active {
  color: #1863AC;
  background: rgba(245, 243, 239, .92);
  border-color: rgba(20, 23, 26, .24);
}
.sw-topcta {
  font-weight: 600; font-size: .85rem;
  color: #F5F3EF; background: #1863AC;
  border-radius: 2px; padding: 10px 18px;
  transition: background-color .18s ease;
}
.sw-topcta:hover { background: #0E2A47; }

/* ---- route rail: numbered progress line ---------------------------------- */
.sw-route { counter-reset: mfx-stop; }
.sw-route::before {                 /* the track */
  content: "";
  position: absolute; top: 6px; bottom: 6px;
  inset-inline-start: 50%; translate: -50% 0;
  width: 1px; background: rgba(20, 23, 26, .18);
}
.sw-route::after {                  /* scroll-progress fill (JS sets --mfx-progress) */
  content: "";
  position: absolute; top: 6px;
  inset-inline-start: 50%; translate: -50% 0;
  width: 1px;
  height: calc((100% - 12px) * var(--mfx-progress, 0));
  background: #1863AC;
  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: 2px; border-radius: 0;
  background: #767E84;
  transition: width .2s ease, background-color .2s ease;
}
.sw-route__dot.is-active i { width: 20px; background: var(--sw-accent, #1863AC); }
.sw-route__dot::after {             /* mono stop number beside each tick */
  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(118, 126, 132, .0);
  transition: color .2s ease;
}
.sw-route:hover .sw-route__dot::after,
.sw-route__dot.is-active::after { color: rgba(118, 126, 132, .9); }
.sw-route__label {
  font-weight: 500; font-size: .74rem; color: #14171A;
  background: rgba(245, 243, 239, .94);
  border: 1px solid rgba(20, 23, 26, .2); border-radius: 2px;
  padding: 4px 9px;
}

/* ---- scroll hint: plumb line --------------------------------------------- */
.sw-hint {
  background: none; border: none; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .74rem; font-weight: 500; color: rgba(20, 23, 26, .62);
}
.sw-hint i {
  display: block; width: 1px; height: 38px; position: relative;
  background: rgba(20, 23, 26, .22);
}
.sw-hint i::after {
  content: "";
  position: absolute; top: 0; inset-inline-start: -1.5px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #B4553C;
}

/* ==========================================================================
   Motion — one orchestrated entrance per scene, gated on .is-live
   (design-layer.js). `.mfx` on <html> proves JS is running: without it
   nothing is ever hidden, so no-JS and crawlers read everything.
   ========================================================================== */
@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-stamp  .45s cubic-bezier(.2, 1.4, .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-plumb 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-stamp {
  from { opacity: 0; transform: rotate(-5deg) scale(1.3); }
  55%  { opacity: 1; transform: rotate(2deg)  scale(.97); }
  to   { opacity: 1; transform: rotate(1.2deg) scale(1); }
}
@keyframes mfx-plumb {
  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(8, 16, 26, .66) 0%,
      rgba(8, 16, 26, .36) 30%,
      rgba(8, 16, 26, 0) 58%);
  }
}