/* ==========================================================================
   شريط الشارع تحت القائمة — فان أسواق الشام بيوصّل للباب (inc/street.php)
   كل الحركة بدورة وحدة 12 ث متزامنة: يدخل ← يوقف ← الطلبية ع الباب ← ✓ ← يكمّل
   ========================================================================== */
.street {
  --door: 58%;           /* مكان البيت من اليسار */
  --dur: 12s;
  position: relative; height: 58px; overflow: hidden; direction: ltr;
  background: linear-gradient(180deg, #FBF6EC 0%, #F7EFDD 100%);
  border-bottom: 1px solid var(--line, #E6DCC6);
}
/* بيوت خط رفيع بالخلفية */
.street__houses { position: absolute; inset: 6px 0 9px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='43' viewBox='0 0 240 43'%3E%3Cg fill='none' stroke='%23C9A04E' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M6 43V18L30 5l24 13v25M18 26h8v7h-8zM34 26h8v7h-8z'/%3E%3Cpath d='M70 43V14h40v29M78 21h8v7h-8zM94 21h8v7h-8zM86 43v-9h8v9'/%3E%3Cpath d='M126 43V20l20-11 20 11v23M138 27h16v8h-16z'/%3E%3Cpath d='M182 43V24h18V12h8v12h22v19M190 30h8v6h-8zM214 30h8v6h-8z'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / 240px 43px; }
.street__road { position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: repeating-linear-gradient(90deg, #C9A04E 0 22px, transparent 22px 40px); opacity: .7; }

/* البيت اللي بيوصلّه الطلب */
.street__home { position: absolute; left: var(--door); bottom: 5px; width: 64px; height: 44px; }
.street__house { width: 100%; height: 100%; display: block; }
.street__parcel { position: absolute; left: 25px; bottom: -1px; width: 16px; height: 14px; opacity: 0; animation: street-parcel var(--dur) infinite; }
.street__tick { position: absolute; left: 44px; top: -2px; width: 15px; height: 15px; opacity: 0; transform: scale(.4); animation: street-tick var(--dur) infinite; }
.street__parcel svg, .street__tick svg { display: block; width: 100%; height: 100%; }
/* شارة «توصيل مجاني» — لافتة، بلمعة ذهبية بتمشي عليها، وبتنط لما توصل الطلبية */
.street__sign { position: absolute; left: calc(100% + 8px); top: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; direction: rtl; overflow: hidden; isolation: isolate;
  font: 900 15px/1 var(--font, 'Cairo', sans-serif); color: #fff; letter-spacing: .01em;
  background: linear-gradient(135deg, #D2551F 0%, #B5451B 55%, #923514 100%);
  border: 2px solid #F2C84B; padding: 6px 12px 7px 8px; border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(242,200,75,.25), 0 6px 16px rgba(146,53,20,.38);
  transform-origin: 0% 50%; animation: street-sign var(--dur) infinite; }
.lang-en .street__sign { direction: ltr; text-transform: uppercase; font-size: 13.5px; }
.street__sign-ic { width: 18px; height: 18px; flex: none; color: #F2C84B; }
.street__sign-main { text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.street__sign-soon { font-size: 11px; font-weight: 800; color: #2E451A; background: #F2C84B; padding: 3px 7px 4px; border-radius: 999px; }
/* لمعة بتقطع الشارة كل دورة */
.street__sign::after { content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0; animation: street-shine var(--dur) infinite; }
@keyframes street-sign {
  0%, 44%, 60%, 100% { transform: translateY(-50%) scale(1); }
  47% { transform: translateY(-50%) scale(1.16) rotate(-2deg); }
  50% { transform: translateY(-50%) scale(.97); }
  53% { transform: translateY(-50%) scale(1.05); }
}
@keyframes street-shine {
  0%, 46% { background-position: 150% 0; }
  58%, 100% { background-position: -60% 0; }
}

/* الفان */
.street__van { position: absolute; bottom: 3px; left: 110%; width: 112px; height: 44px; animation: street-van var(--dur) infinite; will-change: left; }
.street__van svg { display: block; width: 100%; height: 100%; overflow: visible; animation: street-bump var(--dur) infinite; }
.street__wheel { transform-box: fill-box; transform-origin: center; animation: street-wheel var(--dur) infinite linear; }

/* بيدخل من اليمين، بيخفف ويوقف قبل الباب، وبيكمّل لليسار */
@keyframes street-van {
  0%   { left: 110%; animation-timing-function: cubic-bezier(.2,.6,.35,1); }
  30%  { left: calc(var(--door) - 118px); }
  52%  { left: calc(var(--door) - 118px); animation-timing-function: cubic-bezier(.55,0,.8,.4); }
  80%  { left: -20%; }
  100% { left: -20%; }
}
/* هزة خفيفة لما يوقف ولما يطلع */
@keyframes street-bump {
  0%, 29%, 34%, 51%, 56%, 100% { transform: translateY(0) rotate(0); }
  31%  { transform: translateY(-1px) rotate(-1.2deg); }
  53%  { transform: translateY(0) rotate(1deg); }
}
/* الدواليب بتلف وقت المشي بس */
@keyframes street-wheel {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-900deg); }
  52%  { transform: rotate(-900deg); }
  80%  { transform: rotate(-2100deg); }
  100% { transform: rotate(-2100deg); }
}
/* الطلبية بتطلع من ورا الفان وبتنط على عتبة الباب، وبتضل لحتى قبل الدورة الجاية */
@keyframes street-parcel {
  0%, 33% { opacity: 0; transform: translate(-30px, -14px) scale(.7); }
  35%  { opacity: 1; transform: translate(-30px, -14px) scale(.8); }
  40%  { opacity: 1; transform: translate(-14px, -26px) scale(.95); }
  45%  { opacity: 1; transform: translate(0, 0) scale(1); }
  47%  { transform: translate(0, -3px) scale(1.04); }
  49%, 92% { opacity: 1; transform: translate(0, 0) scale(1); }
  98%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
@keyframes street-tick {
  0%, 46% { opacity: 0; transform: scale(.4); }
  49%  { opacity: 1; transform: scale(1.2); }
  52%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.6); }
}

@media (max-width: 860px) {
  .street { --door: 34%; height: 48px; }
  .street__home { width: 54px; height: 37px; }
  .street__van { width: 94px; height: 37px; }
  .street__parcel { left: 21px; width: 13px; height: 12px; }
  .street__tick { left: 37px; width: 13px; height: 13px; }
  .street__sign { font-size: 13px; gap: 4px; padding: 4px 9px 5px 6px; left: calc(100% + 6px); }
  .lang-en .street__sign { font-size: 11.5px; }
  .street__sign-ic { width: 15px; height: 15px; }
  .street__sign-soon { font-size: 10px; padding: 2px 6px 3px; }
  @keyframes street-van {
    0%   { left: 110%; animation-timing-function: cubic-bezier(.2,.6,.35,1); }
    30%  { left: calc(var(--door) - 98px); }
    52%  { left: calc(var(--door) - 98px); animation-timing-function: cubic-bezier(.55,0,.8,.4); }
    80%  { left: -30%; }
    100% { left: -30%; }
  }
}

/* تقليل الحركة: مشهد ساكن — الفان واقف جنب الباب والطلبية ع العتبة */
@media (prefers-reduced-motion: reduce) {
  .street__van, .street__van svg, .street__wheel, .street__parcel, .street__tick, .street__sign, .street__sign::after { animation: none; }
  .street__sign { transform: translateY(-50%); }
  .street__van { left: calc(var(--door) - 118px); }
  .street__parcel, .street__tick { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) { .street__van { left: calc(var(--door) - 98px); } }

/* بالطباعة ما إلها لزمة */
@media print { .street { display: none; } }