/* ==========================================================================
   mtemps6 — BASE (هوية "CARTON")
   1) reset  2) typography  3) layout + themes  4) section head (ملصق شحن)
   5) buttons (شريط لاصق بيتلزق) + links  6) forms + chips  7) media + 3D floats
   8) decorations (tape / stamp / road / flutes)  9) reveal + split
   10) page-level (progress = شاحنة بتمشي)  11) reduced motion
   ========================================================================== */
html { --mtemps6-x-start: right; --mtemps6-x-end: left; }
html[dir="ltr"] { --mtemps6-x-start: left; --mtemps6-x-end: right; }

/* ===================== 1) RESET ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--mtemps6-hdr-h-sm) + var(--mtemps6-sp-5)); }
body {
  min-height: 100vh;
  overflow-x: clip;
  background-color: var(--mtemps6-bg);
  background-image: var(--mtemps6-grain);
  color: var(--mtemps6-text);
  font-family: var(--mtemps6-font);
  font-size: var(--mtemps6-fs-base);
  line-height: var(--mtemps6-lh-body);
  -webkit-font-smoothing: antialiased;
  counter-reset: mtemps6-section;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--mtemps6-s-focus); outline-offset: 3px; border-radius: var(--mtemps6-r-xs); }
::selection { background: var(--mtemps6-accent); color: var(--mtemps6-on-accent); }

/* ===================== 2) TYPOGRAPHY ===================== */
h1, h2, h3, h4 { font-weight: var(--mtemps6-fw-bold); line-height: var(--mtemps6-lh-head); color: var(--mtemps6-s-text); }
h1 { font-size: var(--mtemps6-fs-3xl); }
h2 { font-size: var(--mtemps6-fs-2xl); }
h3 { font-size: var(--mtemps6-fs-xl); }
.mtemps6-ui-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ===================== 3) LAYOUT + THEMES ===================== */
.mtemps6-ui-container { width: 100%; max-width: calc(var(--mtemps6-container) + var(--mtemps6-gutter) * 2); margin-inline: auto; padding-inline: var(--mtemps6-gutter); }
.mtemps6-ui-container--narrow { max-width: calc(var(--mtemps6-container-narrow) + var(--mtemps6-gutter) * 2); }
.mtemps6-ui-section { position: relative; isolation: isolate; padding-block: var(--mtemps6-section-y); background-color: var(--mtemps6-s-bg); color: var(--mtemps6-s-text); overflow: clip; }

/* الثيمات: kraft (افتراضي) · card (كرتون فاتح) · paper (أبيض) · navy (كحلي) */
.mtemps6-ui-kraft,
.mtemps6-ui-card,
.mtemps6-ui-paper {
  --mtemps6-s-bg: var(--mtemps6-bg);
  --mtemps6-s-surface: var(--mtemps6-surface);
  --mtemps6-s-text: var(--mtemps6-text);
  --mtemps6-s-muted: var(--mtemps6-muted);
  --mtemps6-s-line: var(--mtemps6-line);
  --mtemps6-s-line-2: var(--mtemps6-line-2);
  --mtemps6-s-link: var(--mtemps6-primary);
  --mtemps6-s-mark: var(--mtemps6-primary);
  --mtemps6-s-focus: var(--mtemps6-primary);
  color: var(--mtemps6-s-text);
}
.mtemps6-ui-kraft { background-image: var(--mtemps6-grain); }
.mtemps6-ui-card { --mtemps6-s-bg: var(--mtemps6-bg-2); background-image: var(--mtemps6-grain); }
.mtemps6-ui-paper { --mtemps6-s-bg: var(--mtemps6-surface); --mtemps6-s-surface: var(--mtemps6-paper); }
.mtemps6-ui-navy {
  --mtemps6-s-bg: var(--mtemps6-deep);
  --mtemps6-s-surface: var(--mtemps6-deep-2);
  --mtemps6-s-text: var(--mtemps6-on-deep);
  --mtemps6-s-muted: var(--mtemps6-on-deep-muted);
  --mtemps6-s-line: var(--mtemps6-deep-line);
  --mtemps6-s-line-2: var(--mtemps6-deep-3);
  --mtemps6-s-link: var(--mtemps6-accent);
  --mtemps6-s-mark: var(--mtemps6-accent);
  --mtemps6-s-focus: var(--mtemps6-accent);
  background-color: var(--mtemps6-s-bg);
  color: var(--mtemps6-s-text);
}
.mtemps6-ui-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===================== 4) SECTION HEAD — ملصق شحن ===================== */
.mtemps6-ui-head { display: grid; gap: var(--mtemps6-sp-4); justify-items: center; margin-block-end: clamp(2.25rem, 5vw, 3.75rem); text-align: center; }
.mtemps6-ui-head--start { justify-items: start; text-align: start; }
/* الملصق: ورقة بيضا بإطار متقطّع + رقم الكرتونة + باركود صغير */
.mtemps6-ui-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mtemps6-sp-3);
  padding: 0.3rem 0.85rem 0.3rem 0.6rem;
  border: var(--mtemps6-hair) dashed var(--mtemps6-line-2);
  border-radius: var(--mtemps6-r-xs);
  background: var(--mtemps6-paper);
  color: var(--mtemps6-text);
  font-size: var(--mtemps6-fs-xs);
  font-weight: var(--mtemps6-fw-bold);
  letter-spacing: var(--mtemps6-tracking-label);
  box-shadow: 0 6px 14px -10px var(--mtemps6-ink-soft);
  transform: rotate(-1.5deg);
}
.mtemps6-ui-tag-num { display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.5rem; padding-inline: 0.35rem; border-radius: var(--mtemps6-r-xs); background: var(--mtemps6-deep); color: var(--mtemps6-accent); font-variant-numeric: tabular-nums; direction: ltr; }
.mtemps6-ui-tag-num::before { counter-increment: mtemps6-section; content: counter(mtemps6-section, decimal-leading-zero); }
.mtemps6-ui-tag-code { width: 2.4rem; height: 1rem; background: repeating-linear-gradient(90deg, var(--mtemps6-text) 0 1px, transparent 1px 3px, var(--mtemps6-text) 3px 5px, transparent 5px 6px, var(--mtemps6-text) 6px 7px, transparent 7px 9px); opacity: 0.7; }
.mtemps6-ui-navy .mtemps6-ui-tag { border-color: var(--mtemps6-deep-3); background: var(--mtemps6-deep-2); color: var(--mtemps6-on-deep); }
.mtemps6-ui-navy .mtemps6-ui-tag-num { background: var(--mtemps6-accent); color: var(--mtemps6-on-accent); }
.mtemps6-ui-navy .mtemps6-ui-tag-code { background: repeating-linear-gradient(90deg, var(--mtemps6-on-deep) 0 1px, transparent 1px 3px, var(--mtemps6-on-deep) 3px 5px, transparent 5px 6px, var(--mtemps6-on-deep) 6px 7px, transparent 7px 9px); }
.mtemps6-ui-title { max-width: 22ch; font-size: var(--mtemps6-fs-3xl); }
.mtemps6-ui-lead { max-width: 38rem; color: var(--mtemps6-s-muted); font-size: var(--mtemps6-fs-md); }
/* كلمة مميزة: شريط لاصق أصفر بيتلزق ورا الكلمة */
.mtemps6-ui-em { position: relative; z-index: 0; display: inline-block; color: var(--mtemps6-s-text); white-space: nowrap; }
.mtemps6-ui-em::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: -0.12em;
  inset-block-end: 0.06em;
  height: 0.48em;
  background: var(--mtemps6-tape);
  transform: rotate(-1.2deg) scaleX(var(--mtemps6-tape-s, 1));
  transform-origin: var(--mtemps6-x-start);
  transition: transform var(--mtemps6-dur-4) var(--mtemps6-ease-out) 350ms;
}
html.mtemps6-js [data-mtemps6-reveal]:not(.mtemps6-is-in) .mtemps6-ui-em,
html.mtemps6-js [data-mtemps6-split]:not(.mtemps6-is-in) .mtemps6-ui-em { --mtemps6-tape-s: 0; }
.mtemps6-ui-navy .mtemps6-ui-em { color: var(--mtemps6-accent); }
.mtemps6-ui-navy .mtemps6-ui-em::before { inset-block-end: -0.02em; height: 0.12em; border-radius: 2px; background: var(--mtemps6-accent); }

/* ===================== 5) BUTTONS — شريط لاصق بيتلزق مع الـ hover ===================== */
.mtemps6-ui-btn {
  --mtemps6-btn-bg: var(--mtemps6-deep);
  --mtemps6-btn-text: var(--mtemps6-on-deep);
  --mtemps6-btn-line: var(--mtemps6-deep);
  --mtemps6-btn-hover-bg: var(--mtemps6-accent);
  --mtemps6-btn-hover-text: var(--mtemps6-on-accent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mtemps6-sp-2);
  min-height: 3.25rem;
  padding: var(--mtemps6-pad-control-y) var(--mtemps6-pad-control-x);
  border: var(--mtemps6-bw) solid var(--mtemps6-btn-line);
  border-radius: var(--mtemps6-r-sm);
  background: var(--mtemps6-btn-bg);
  color: var(--mtemps6-btn-text);
  font-size: var(--mtemps6-fs-sm);
  font-weight: var(--mtemps6-fw-bold);
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4px 0 0 var(--mtemps6-ink-soft);
  transition: color var(--mtemps6-dur-2), border-color var(--mtemps6-dur-2), transform var(--mtemps6-dur-2) var(--mtemps6-ease-spring), box-shadow var(--mtemps6-dur-2);
}
.mtemps6-ui-btn::before {
  content: "";
  position: absolute;
  inset: -2px -8%;
  z-index: -1;
  background: var(--mtemps6-btn-hover-bg);
  transform: translateX(calc(var(--mtemps6-dir) * -105%)) skewX(-12deg);
  transition: transform var(--mtemps6-dur-3) var(--mtemps6-ease-out);
}
.mtemps6-ui-btn:hover, .mtemps6-ui-btn:focus-visible { color: var(--mtemps6-btn-hover-text); border-color: var(--mtemps6-btn-hover-bg); transform: translateY(-2px); box-shadow: 0 7px 0 0 var(--mtemps6-ink-soft); }
.mtemps6-ui-btn:hover::before, .mtemps6-ui-btn:focus-visible::before { transform: translateX(0) skewX(-12deg); }
.mtemps6-ui-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--mtemps6-ink-soft); }
.mtemps6-ui-btn i { transition: transform var(--mtemps6-dur-3) var(--mtemps6-ease-spring); }
.mtemps6-ui-btn:hover i { transform: rotate(-10deg) scale(1.12); }
.mtemps6-ui-btn--tape { --mtemps6-btn-bg: var(--mtemps6-accent); --mtemps6-btn-text: var(--mtemps6-on-accent); --mtemps6-btn-line: var(--mtemps6-accent); --mtemps6-btn-hover-bg: var(--mtemps6-deep); --mtemps6-btn-hover-text: var(--mtemps6-on-deep); }
.mtemps6-ui-navy .mtemps6-ui-btn--tape { --mtemps6-btn-hover-bg: var(--mtemps6-on-deep); --mtemps6-btn-hover-text: var(--mtemps6-deep); }
.mtemps6-ui-btn--ghost { --mtemps6-btn-bg: transparent; --mtemps6-btn-text: var(--mtemps6-s-text); --mtemps6-btn-line: var(--mtemps6-s-text); box-shadow: none; }
.mtemps6-ui-btn--light { --mtemps6-btn-bg: var(--mtemps6-on-deep); --mtemps6-btn-text: var(--mtemps6-deep); --mtemps6-btn-line: var(--mtemps6-on-deep); }
.mtemps6-ui-btn--whatsapp { --mtemps6-btn-bg: var(--mtemps6-whatsapp); --mtemps6-btn-text: var(--mtemps6-on-whatsapp); --mtemps6-btn-line: var(--mtemps6-whatsapp); --mtemps6-btn-hover-bg: var(--mtemps6-whatsapp-2); --mtemps6-btn-hover-text: var(--mtemps6-on-whatsapp); }
.mtemps6-ui-btn--whatsapp:hover, .mtemps6-ui-btn--whatsapp:focus-visible { border-color: var(--mtemps6-whatsapp-2); }
.mtemps6-ui-btn--lg { min-height: 3.75rem; padding-inline: calc(var(--mtemps6-pad-control-x) * 1.25); font-size: var(--mtemps6-fs-md); }
.mtemps6-ui-btn--sm { min-height: 2.6rem; padding: 0.4rem 1rem; font-size: var(--mtemps6-fs-xs); }
.mtemps6-ui-btn--block { width: 100%; }
.mtemps6-ui-btns { display: flex; flex-wrap: wrap; gap: var(--mtemps6-sp-3); }

.mtemps6-ui-link { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--mtemps6-sp-2); color: var(--mtemps6-s-link); font-weight: var(--mtemps6-fw-bold); }
.mtemps6-ui-link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -2px; height: 0.35em; z-index: -1; background: var(--mtemps6-tape); transform: scaleX(0); transform-origin: var(--mtemps6-x-start); transition: transform var(--mtemps6-dur-3) var(--mtemps6-ease-out); }
.mtemps6-ui-link:hover::after, .mtemps6-ui-link:focus-visible::after { transform: scaleX(1); }
.mtemps6-ui-link i { transition: transform var(--mtemps6-dur-2) var(--mtemps6-ease-spring); }
.mtemps6-ui-link:hover i { transform: translateX(calc(var(--mtemps6-dir) * 4px)); }
html[dir="ltr"] .mtemps6-ui-flip { transform: scaleX(-1); }
html[dir="ltr"] .mtemps6-ui-link:hover i.mtemps6-ui-flip { transform: translateX(4px) scaleX(-1); }

/* نقاط الهيرو: ملصقات شحن صغيرة — أيقونة في مربع كحلي + نص + ختم صح.
   الـ li عليه الـ reveal والـ .mtemps6-ui-point جوّه هو اللي بيتحرك مع الـ hover */
.mtemps6-ui-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: var(--mtemps6-sp-3); width: 100%; max-width: 36rem; margin: 0; padding: 0; list-style: none; }
.mtemps6-ui-point { position: relative; display: flex; align-items: center; gap: var(--mtemps6-sp-3); height: 100%; padding: var(--mtemps6-sp-2) var(--mtemps6-sp-3); padding-inline-end: 2rem; border: var(--mtemps6-hair) dashed var(--mtemps6-line-2); border-radius: var(--mtemps6-r-sm); background: var(--mtemps6-paper); box-shadow: 0 6px 14px -12px var(--mtemps6-ink-soft); font-size: var(--mtemps6-fs-sm); font-weight: var(--mtemps6-fw-bold); line-height: 1.45; transform: rotate(var(--mtemps6-point-r, -0.6deg)); transition: transform var(--mtemps6-dur-3) var(--mtemps6-ease-spring), border-color var(--mtemps6-dur-2), box-shadow var(--mtemps6-dur-2); }
.mtemps6-ui-points > li:nth-child(even) .mtemps6-ui-point { --mtemps6-point-r: 0.6deg; }
.mtemps6-ui-point:hover { transform: rotate(0deg) translateY(-3px); border-style: solid; border-color: var(--mtemps6-deep); box-shadow: 0 5px 0 var(--mtemps6-deep); }
.mtemps6-ui-point::after { content: "\2713"; position: absolute; inset-block-start: 50%; inset-inline-end: 0.55rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-block-start: -0.55rem; border-radius: 50%; background: var(--mtemps6-whatsapp); color: var(--mtemps6-on-whatsapp); font-family: system-ui, sans-serif; font-size: 0.65rem; font-weight: var(--mtemps6-fw-bold); line-height: 1; }
.mtemps6-ui-point-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: var(--mtemps6-r-sm); background: var(--mtemps6-deep); color: var(--mtemps6-accent); font-size: 1rem; transition: transform var(--mtemps6-dur-3) var(--mtemps6-ease-spring); }
.mtemps6-ui-point:hover .mtemps6-ui-point-ico { transform: rotate(-10deg) scale(1.06); }
.mtemps6-ui-navy .mtemps6-ui-point { border-color: var(--mtemps6-deep-3); background: var(--mtemps6-deep-2); color: var(--mtemps6-on-deep); }

/* ===================== 6) FORMS + CHIPS ===================== */
.mtemps6-ui-field { display: grid; gap: var(--mtemps6-sp-2); }
.mtemps6-ui-label { color: var(--mtemps6-s-text); font-size: var(--mtemps6-fs-sm); font-weight: var(--mtemps6-fw-bold); }
.mtemps6-ui-input, .mtemps6-ui-select, .mtemps6-ui-textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: var(--mtemps6-sp-2) var(--mtemps6-sp-4);
  border: var(--mtemps6-bw) solid var(--mtemps6-s-line-2);
  border-radius: var(--mtemps6-r-sm);
  background: var(--mtemps6-s-surface);
  color: var(--mtemps6-s-text);
  font-size: var(--mtemps6-fs-base);
  transition: border-color var(--mtemps6-dur-2), box-shadow var(--mtemps6-dur-2);
}
.mtemps6-ui-input::placeholder, .mtemps6-ui-textarea::placeholder { color: var(--mtemps6-s-muted); opacity: 1; }
.mtemps6-ui-input:focus, .mtemps6-ui-select:focus, .mtemps6-ui-textarea:focus { outline: none; border-color: var(--mtemps6-s-focus); box-shadow: var(--mtemps6-ring); }
.mtemps6-ui-input[aria-invalid="true"], .mtemps6-ui-select[aria-invalid="true"] { border-color: var(--mtemps6-primary); box-shadow: 0 0 0 3px var(--mtemps6-accent-soft); }
.mtemps6-ui-textarea { min-height: 6.5rem; resize: vertical; }
.mtemps6-ui-select { appearance: none; padding-inline-end: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--mtemps6-s-text) 50%), linear-gradient(-45deg, transparent 50%, var(--mtemps6-s-text) 50%); background-size: 6px 6px; background-repeat: no-repeat; background-position: left 1rem center, left calc(1rem + 6px) center; }
html[dir="ltr"] .mtemps6-ui-select { background-position: right calc(1rem + 6px) center, right 1rem center; }
.mtemps6-ui-chips { display: flex; flex-wrap: wrap; gap: var(--mtemps6-sp-2); }
.mtemps6-ui-chip { display: inline-flex; align-items: center; gap: var(--mtemps6-sp-2); min-height: 2.6rem; padding: var(--mtemps6-pad-chip-y) var(--mtemps6-pad-chip-x); border: var(--mtemps6-bw) solid var(--mtemps6-s-line-2); border-radius: var(--mtemps6-r-pill); background: var(--mtemps6-s-surface); color: var(--mtemps6-s-text); font-size: var(--mtemps6-fs-sm); font-weight: var(--mtemps6-fw-semibold); transition: border-color var(--mtemps6-dur-2), background-color var(--mtemps6-dur-2), color var(--mtemps6-dur-2), transform var(--mtemps6-dur-2) var(--mtemps6-ease-spring); }
.mtemps6-ui-chip:hover { border-color: var(--mtemps6-s-text); transform: translateY(-2px); }
.mtemps6-ui-chip[aria-pressed="true"], .mtemps6-ui-chip[aria-selected="true"] { border-color: var(--mtemps6-deep); background: var(--mtemps6-deep); color: var(--mtemps6-on-deep); }
.mtemps6-ui-navy .mtemps6-ui-chip[aria-pressed="true"], .mtemps6-ui-navy .mtemps6-ui-chip[aria-selected="true"] { border-color: var(--mtemps6-accent); background: var(--mtemps6-accent); color: var(--mtemps6-on-accent); }
.mtemps6-ui-search { position: relative; display: block; }
.mtemps6-ui-search i { position: absolute; inset-block-start: 50%; inset-inline-start: 1rem; transform: translateY(-50%); color: var(--mtemps6-s-muted); pointer-events: none; }
.mtemps6-ui-search .mtemps6-ui-input { padding-inline-start: 2.6rem; }
.mtemps6-ui-badge { display: inline-flex; align-items: center; gap: var(--mtemps6-sp-1); padding: 0.15rem 0.7rem; border-radius: var(--mtemps6-r-xs); background: var(--mtemps6-accent); color: var(--mtemps6-on-accent); font-size: var(--mtemps6-fs-2xs); font-weight: var(--mtemps6-fw-bold); }

/* ===================== 7) MEDIA + 3D FLOATS ===================== */
.mtemps6-ui-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--mtemps6-ratio, 4 / 3);
  border-radius: var(--mtemps6-r-md);
  background-color: var(--mtemps6-bg-3);
  background-image: repeating-linear-gradient(135deg, var(--mtemps6-hatch) 0 1px, transparent 1px 10px);
}
.mtemps6-ui-navy .mtemps6-ui-media { background-color: var(--mtemps6-deep-3); background-image: repeating-linear-gradient(135deg, var(--mtemps6-deep-line) 0 1px, transparent 1px 10px); }
.mtemps6-ui-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mtemps6-dur-4) var(--mtemps6-ease-out); }
.mtemps6-ui-media--round { border-radius: 50%; }

/* صور 3D طايرة: الغلاف (reveal + parallax بالماوس) ← العنصر الداخلي (طفو مستمر)
   <span class="mtemps6-ui-float" data-mtemps6-depth="0.6"><img class="mtemps6-ui-float-img" …></span> */
.mtemps6-ui-float { display: block; pointer-events: none; transform: translate3d(calc(var(--mtemps6-px, 0) * 1px), calc(var(--mtemps6-pyy, 0) * 1px), 0); transition: transform var(--mtemps6-dur-3) var(--mtemps6-ease-out); }
.mtemps6-ui-float-img { width: 100%; height: auto; filter: drop-shadow(0 26px 22px var(--mtemps6-ink-soft)); animation: mtemps6-float var(--mtemps6-float-dur) var(--mtemps6-ease-soft) infinite alternate; animation-delay: var(--mtemps6-float-delay, 0s); -webkit-user-drag: none; user-select: none; }
@keyframes mtemps6-float { from { transform: translate3d(0, calc(var(--mtemps6-float-y) * -0.5), 0) rotate(var(--mtemps6-float-r0, -2deg)); } to { transform: translate3d(0, calc(var(--mtemps6-float-y) * 0.5), 0) rotate(var(--mtemps6-float-r1, 2deg)); } }

/* ===================== 8) DECORATIONS ===================== */
/* قطعة شريط لاصق بأطراف مقصوصة (زخرفة) */
.mtemps6-ui-tape { position: absolute; z-index: var(--mtemps6-z-raised); width: 7rem; height: var(--mtemps6-tape-h); background: var(--mtemps6-tape); box-shadow: 0 2px 6px -3px var(--mtemps6-ink-soft); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%); pointer-events: none; }
/* ختم "قابل للكسر" */
.mtemps6-ui-stamp { display: inline-grid; place-items: center; padding: 0.35rem 0.9rem; border: 3px double var(--mtemps6-stamp); border-radius: var(--mtemps6-r-xs); color: var(--mtemps6-primary); font-size: var(--mtemps6-fs-xs); font-weight: var(--mtemps6-fw-bold); letter-spacing: 0.06em; line-height: 1.3; transform: rotate(-8deg); }
.mtemps6-ui-navy .mtemps6-ui-stamp { border-color: var(--mtemps6-accent); color: var(--mtemps6-accent); }
/* حافة كرتون مضلّع */
.mtemps6-ui-flutes { height: 8px; background: var(--mtemps6-flutes); border-radius: var(--mtemps6-r-xs) var(--mtemps6-r-xs) 0 0; }
/* طريق بخطوط متقطعة بتتحرك (transform بس) */
.mtemps6-ui-road { position: relative; height: 2.25rem; overflow: hidden; background: var(--mtemps6-deep); }
.mtemps6-ui-road::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: -4rem; width: calc(100% + 8rem); height: 3px; margin-block-start: -1.5px; background: repeating-linear-gradient(90deg, var(--mtemps6-accent) 0 1.6rem, transparent 1.6rem 3.2rem); animation: mtemps6-road var(--mtemps6-road-dur) linear infinite; }
@keyframes mtemps6-road { to { transform: translateX(calc(var(--mtemps6-dir) * -3.2rem)); } }
/* شريط لاصق طويل متحرك (marquee) — بيتكرر تلقائيًا من الـ core */
.mtemps6-ui-marquee { position: relative; overflow: hidden; }
.mtemps6-ui-marquee-track { display: flex; width: max-content; }
.mtemps6-ui-marquee.mtemps6-is-ready .mtemps6-ui-marquee-track { animation: mtemps6-mq var(--mtemps6-mq-dur, 30s) linear infinite; }
.mtemps6-ui-marquee:hover .mtemps6-ui-marquee-track { animation-play-state: paused; }
.mtemps6-ui-marquee-group { display: flex; flex-shrink: 0; align-items: center; }
@keyframes mtemps6-mq { to { transform: translateX(calc(var(--mtemps6-dir) * -50%)); } }

/* الكارت الكرتوني (ورقة + حافة مضلّعة) */
.mtemps6-ui-box { position: relative; border: var(--mtemps6-hair) solid var(--mtemps6-s-line-2); border-radius: var(--mtemps6-r-md); background: var(--mtemps6-s-surface); box-shadow: var(--mtemps6-shadow-box); }

/* ===================== 9) REVEAL + SPLIT ===================== */
html.mtemps6-js [data-mtemps6-reveal] {
  transition: opacity var(--mtemps6-dur-4) var(--mtemps6-ease-out), transform var(--mtemps6-dur-4) var(--mtemps6-ease-out);
  transition-delay: calc(var(--mtemps6-i, 0) * var(--mtemps6-stagger) + var(--mtemps6-delay, 0ms));
}
html.mtemps6-js [data-mtemps6-reveal]:not(.mtemps6-is-in) { opacity: 0; }
html.mtemps6-js [data-mtemps6-reveal="up"]:not(.mtemps6-is-in) { transform: translate3d(0, var(--mtemps6-reveal-y), 0); }
html.mtemps6-js [data-mtemps6-reveal="start"]:not(.mtemps6-is-in) { transform: translate3d(calc(var(--mtemps6-dir) * -1 * var(--mtemps6-reveal-x)), 0, 0); }
html.mtemps6-js [data-mtemps6-reveal="end"]:not(.mtemps6-is-in) { transform: translate3d(calc(var(--mtemps6-dir) * var(--mtemps6-reveal-x)), 0, 0); }
html.mtemps6-js [data-mtemps6-reveal="scale"]:not(.mtemps6-is-in) { transform: scale(var(--mtemps6-reveal-scale)); }
/* "drop": الكرتونة بتنزل وتتعدل كأنها اتحطّت */
html.mtemps6-js [data-mtemps6-reveal="drop"] { transition-timing-function: var(--mtemps6-ease-spring); }
html.mtemps6-js [data-mtemps6-reveal="drop"]:not(.mtemps6-is-in) { transform: translate3d(0, calc(var(--mtemps6-reveal-y) * -1.2), 0) rotate(var(--mtemps6-reveal-rot)); }
html.mtemps6-js [data-mtemps6-reveal="split"]:not(.mtemps6-is-in) { opacity: 1; }
.mtemps6-ui-w { display: inline-block; }
html.mtemps6-js [data-mtemps6-split] .mtemps6-ui-w { transition: opacity var(--mtemps6-dur-4) var(--mtemps6-ease-out), transform var(--mtemps6-dur-4) var(--mtemps6-ease-spring); transition-delay: calc(var(--mtemps6-w, 0) * var(--mtemps6-word-stagger) + var(--mtemps6-delay, 0ms)); }
html.mtemps6-js [data-mtemps6-split]:not(.mtemps6-is-in) .mtemps6-ui-w { opacity: 0; transform: translate3d(0, 0.5em, 0) rotate(3deg); }

/* ===================== 10) PAGE LEVEL ===================== */
.mtemps6-ui-bg { position: absolute; inset: 0; z-index: var(--mtemps6-z-under); overflow: clip; pointer-events: none; }
.mtemps6-is-off, .mtemps6-is-off *, html.mtemps6-paused [data-mtemps6-loop], html.mtemps6-paused [data-mtemps6-loop] * { animation-play-state: paused !important; }
.mtemps6-ui-skip { position: fixed; inset-block-start: var(--mtemps6-sp-3); inset-inline-start: var(--mtemps6-sp-3); z-index: var(--mtemps6-z-toast); padding: var(--mtemps6-sp-2) var(--mtemps6-sp-5); border-radius: var(--mtemps6-r-sm); background: var(--mtemps6-deep); color: var(--mtemps6-on-deep); transform: translateY(-200%); transition: transform var(--mtemps6-dur-2); }
.mtemps6-ui-skip:focus { transform: none; }

/* شريط التقدّم = طريق صغير فوق وشاحنة ماشية عليه */
.mtemps6-ui-progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--mtemps6-z-progress); height: 4px; pointer-events: none; }
.mtemps6-ui-progress::before { content: ""; position: absolute; inset: 0; background: var(--mtemps6-accent); transform-origin: var(--mtemps6-x-start); transform: scaleX(var(--mtemps6-progress, 0)); }
.mtemps6-ui-progress-truck { position: absolute; inset-block-start: 1px; inset-inline-start: 0; width: 1.6rem; height: 1rem; color: var(--mtemps6-deep); transform: translateX(calc(var(--mtemps6-dir) * var(--mtemps6-progress, 0) * (100vw - 1.8rem))); opacity: var(--mtemps6-truck-o, 0); transition: opacity var(--mtemps6-dur-2); }
.mtemps6-ui-progress-truck svg { width: 100%; height: 100%; }
html[dir="ltr"] .mtemps6-ui-progress-truck svg { transform: scaleX(-1); }

.mtemps6-ui-toast { position: fixed; inset-block-end: 6.5rem; inset-inline-start: 50%; z-index: var(--mtemps6-z-toast); display: inline-flex; align-items: center; gap: var(--mtemps6-sp-2); max-width: calc(100vw - 2rem); padding: var(--mtemps6-sp-3) var(--mtemps6-sp-5); border-radius: var(--mtemps6-r-sm); background: var(--mtemps6-deep); color: var(--mtemps6-on-deep); font-size: var(--mtemps6-fs-sm); box-shadow: var(--mtemps6-shadow-lift); opacity: 0; pointer-events: none; transform: translate3d(calc(var(--mtemps6-dir) * -50%), 1rem, 0); transition: opacity var(--mtemps6-dur-3), transform var(--mtemps6-dur-3) var(--mtemps6-ease-spring); }
.mtemps6-ui-toast i { color: var(--mtemps6-accent); }
.mtemps6-ui-toast.mtemps6-is-on { opacity: 1; transform: translate3d(calc(var(--mtemps6-dir) * -50%), 0, 0); }
html.mtemps6-locked, html.mtemps6-locked body { overflow: hidden; }
.mtemps6-ui-preview-note { padding: var(--mtemps6-sp-3) var(--mtemps6-gutter); background: var(--mtemps6-deep); color: var(--mtemps6-on-deep-muted); font-size: var(--mtemps6-fs-xs); text-align: center; }
.mtemps6-ui-preview-note strong, .mtemps6-ui-preview-note a { color: var(--mtemps6-accent); }
.mtemps6-ui-filler { min-height: 120vh; display: grid; place-items: center; color: var(--mtemps6-muted); }

/* ===================== 11) REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  html.mtemps6-js [data-mtemps6-reveal], html.mtemps6-js [data-mtemps6-split] .mtemps6-ui-w { opacity: 1 !important; transform: none !important; }
  .mtemps6-ui-float-img, .mtemps6-ui-road::before { animation: none !important; }
  .mtemps6-ui-float { transform: none !important; }
}