/* ==========================================================================
   mtemps7 — BASE (هوية "CINEMA")
   1) reset  2) typography  3) layout + themes  4) section head (رقم المشهد)
   5) buttons + links  6) forms + chips  7) media + كادر الفيلم + 3D floats
   8) decorations (marquee / grain / timecode)  9) reveal + split
   10) page-level (progress = خط كهرماني)  11) reduced motion
   ========================================================================== */
html { --mtemps7-x-start: right; --mtemps7-x-end: left; }
html[dir="ltr"] { --mtemps7-x-start: left; --mtemps7-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(--mtemps7-hdr-h-sm) + var(--mtemps7-sp-5)); }
body {
  min-height: 100vh;
  overflow-x: clip;
  background-color: var(--mtemps7-bg);
  color: var(--mtemps7-text);
  font-family: var(--mtemps7-font);
  font-size: var(--mtemps7-fs-base);
  line-height: var(--mtemps7-lh-body);
  -webkit-font-smoothing: antialiased;
  counter-reset: mtemps7-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; }
:where(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(--mtemps7-s-focus); outline-offset: 3px; border-radius: var(--mtemps7-r-xs); }
::selection { background: var(--mtemps7-accent); color: var(--mtemps7-on-accent); }

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

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

/* الثيمات: ivory (افتراضي) · sand (رملي فاتح) · paper (أبيض) · navy (كحلي) · night (أسود الشاشة) */
.mtemps7-ui-ivory,
.mtemps7-ui-sand,
.mtemps7-ui-paper {
  --mtemps7-s-bg: var(--mtemps7-bg);
  --mtemps7-s-surface: var(--mtemps7-surface);
  --mtemps7-s-text: var(--mtemps7-text);
  --mtemps7-s-muted: var(--mtemps7-muted);
  --mtemps7-s-line: var(--mtemps7-line);
  --mtemps7-s-line-2: var(--mtemps7-line-2);
  --mtemps7-s-link: var(--mtemps7-primary);
  --mtemps7-s-mark: var(--mtemps7-primary);
  --mtemps7-s-focus: var(--mtemps7-primary);
  color: var(--mtemps7-s-text);
}
.mtemps7-ui-sand { --mtemps7-s-bg: var(--mtemps7-bg-2); }
.mtemps7-ui-paper { --mtemps7-s-bg: var(--mtemps7-surface); --mtemps7-s-surface: var(--mtemps7-paper); }
.mtemps7-ui-navy,
.mtemps7-ui-night {
  --mtemps7-s-bg: var(--mtemps7-deep);
  --mtemps7-s-surface: var(--mtemps7-deep-2);
  --mtemps7-s-text: var(--mtemps7-on-deep);
  --mtemps7-s-muted: var(--mtemps7-on-deep-muted);
  --mtemps7-s-line: var(--mtemps7-deep-line);
  --mtemps7-s-line-2: var(--mtemps7-deep-3);
  --mtemps7-s-link: var(--mtemps7-accent);
  --mtemps7-s-mark: var(--mtemps7-accent);
  --mtemps7-s-focus: var(--mtemps7-accent);
  background-color: var(--mtemps7-s-bg);
  color: var(--mtemps7-s-text);
}
.mtemps7-ui-night { --mtemps7-s-bg: var(--mtemps7-ink); --mtemps7-s-surface: var(--mtemps7-ink-2); }
/* حبيبات فيلم فوق السكشن (طبقة شفافة، مبتاخدش ماوس) */
.mtemps7-ui-grain::after { content: ""; position: absolute; inset: 0; z-index: var(--mtemps7-z-under); background-image: var(--mtemps7-grain); background-size: 160px; opacity: 0.07; mix-blend-mode: overlay; pointer-events: none; }
.mtemps7-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 — رقم المشهد =====================
   <header class="mtemps7-ui-head [mtemps7-ui-head--split | --center]">
     <p class="mtemps7-ui-tag"><span class="mtemps7-ui-tag-num"></span><span>اسم المشهد</span></p>
     <h2 class="mtemps7-ui-title">…</h2>  <p class="mtemps7-ui-lead">…</p>
   </header>  — الرقم بيتعد تلقائيًا (01، 02…) */
.mtemps7-ui-head { display: grid; gap: var(--mtemps7-sp-4); justify-items: start; margin-block-end: clamp(2.5rem, 5.5vw, 4.25rem); text-align: start; }
.mtemps7-ui-head--center { justify-items: center; text-align: center; }
.mtemps7-ui-head--center .mtemps7-ui-lead { margin-inline: auto; }
@media (min-width: 900px) {
  .mtemps7-ui-head--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: var(--mtemps7-sp-8); padding-block-start: var(--mtemps7-sp-5); border-block-start: var(--mtemps7-hair) solid var(--mtemps7-s-line-2); }
  .mtemps7-ui-head--split .mtemps7-ui-tag { grid-column: 1 / -1; }
  .mtemps7-ui-head--split .mtemps7-ui-lead { padding-block-end: 0.4rem; }
}
.mtemps7-ui-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mtemps7-sp-3);
  color: var(--mtemps7-s-muted);
  font-size: var(--mtemps7-fs-xs);
  font-weight: var(--mtemps7-fw-bold);
  letter-spacing: var(--mtemps7-tracking-label);
}
.mtemps7-ui-tag-num { display: inline-flex; align-items: center; gap: var(--mtemps7-sp-2); color: var(--mtemps7-s-text); font-variant-numeric: tabular-nums; direction: ltr; }
.mtemps7-ui-tag-num::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--mtemps7-accent); box-shadow: 0 0 0 4px var(--mtemps7-accent-glow); }
.mtemps7-ui-tag-num::after { counter-increment: mtemps7-section; content: counter(mtemps7-section, decimal-leading-zero) " /"; }
.mtemps7-ui-title { max-width: 20ch; font-size: var(--mtemps7-fs-3xl); line-height: var(--mtemps7-lh-head); letter-spacing: -0.01em; }
.mtemps7-ui-lead { max-width: 36rem; color: var(--mtemps7-s-muted); font-size: var(--mtemps7-fs-md); }
/* كلمة مميزة: لونها + خط كهرماني بيترسم تحتها */
.mtemps7-ui-em {
  color: var(--mtemps7-s-mark);
  font-style: normal;
  background-image: linear-gradient(var(--mtemps7-accent), var(--mtemps7-accent));
  background-repeat: no-repeat;
  background-size: var(--mtemps7-em-s, 100%) 0.09em;
  background-position: var(--mtemps7-x-start) 92%;
  transition: background-size var(--mtemps7-dur-4) var(--mtemps7-ease-film) 400ms;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html.mtemps7-js [data-mtemps7-reveal]:not(.mtemps7-is-in) .mtemps7-ui-em,
html.mtemps7-js [data-mtemps7-split]:not(.mtemps7-is-in) .mtemps7-ui-em { --mtemps7-em-s: 0%; }

/* ===================== 5) BUTTONS — ضوء كهرماني بيكنس الزرار ===================== */
.mtemps7-ui-btn {
  --mtemps7-btn-bg: var(--mtemps7-accent);
  --mtemps7-btn-text: var(--mtemps7-on-accent);
  --mtemps7-btn-line: var(--mtemps7-accent);
  --mtemps7-btn-hover-bg: var(--mtemps7-deep);
  --mtemps7-btn-hover-text: var(--mtemps7-on-deep);
  --mtemps7-btn-hover-line: var(--mtemps7-deep);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mtemps7-sp-3);
  min-height: 3.25rem;
  padding: var(--mtemps7-pad-control-y) var(--mtemps7-pad-control-x);
  border: var(--mtemps7-bw) solid var(--mtemps7-btn-line);
  border-radius: var(--mtemps7-r-sm);
  background: var(--mtemps7-btn-bg);
  color: var(--mtemps7-btn-text);
  font-size: var(--mtemps7-fs-sm);
  font-weight: var(--mtemps7-fw-bold);
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--mtemps7-dur-3) var(--mtemps7-ease-film), border-color var(--mtemps7-dur-3), box-shadow var(--mtemps7-dur-3);
}
.mtemps7-ui-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mtemps7-btn-hover-bg);
  transform: scaleX(0);
  transform-origin: var(--mtemps7-x-end);
  transition: transform var(--mtemps7-dur-3) var(--mtemps7-ease-film);
}
.mtemps7-ui-btn:hover, .mtemps7-ui-btn:focus-visible { color: var(--mtemps7-btn-hover-text); border-color: var(--mtemps7-btn-hover-line); box-shadow: 0 18px 34px -20px var(--mtemps7-ink); }
.mtemps7-ui-btn:hover::before, .mtemps7-ui-btn:focus-visible::before { transform: scaleX(1); transform-origin: var(--mtemps7-x-start); }
.mtemps7-ui-btn:active { transform: translateY(1px); }
.mtemps7-ui-btn i { transition: transform var(--mtemps7-dur-3) var(--mtemps7-ease-out); }
.mtemps7-ui-btn:hover i.mtemps7-ui-flip, .mtemps7-ui-btn:hover .mtemps7-ui-btn-arrow { transform: translateX(calc(var(--mtemps7-dir) * 4px)); }
html[dir="ltr"] .mtemps7-ui-btn:hover i.mtemps7-ui-flip { transform: translateX(4px) scaleX(-1); }
.mtemps7-ui-navy .mtemps7-ui-btn, .mtemps7-ui-night .mtemps7-ui-btn { --mtemps7-btn-hover-bg: var(--mtemps7-on-deep); --mtemps7-btn-hover-text: var(--mtemps7-deep); --mtemps7-btn-hover-line: var(--mtemps7-on-deep); }
.mtemps7-ui-btn--dark { --mtemps7-btn-bg: var(--mtemps7-deep); --mtemps7-btn-text: var(--mtemps7-on-deep); --mtemps7-btn-line: var(--mtemps7-deep); --mtemps7-btn-hover-bg: var(--mtemps7-accent); --mtemps7-btn-hover-text: var(--mtemps7-on-accent); --mtemps7-btn-hover-line: var(--mtemps7-accent); }
.mtemps7-ui-btn--ghost { --mtemps7-btn-bg: transparent; --mtemps7-btn-text: var(--mtemps7-s-text); --mtemps7-btn-line: var(--mtemps7-s-line-2); --mtemps7-btn-hover-bg: var(--mtemps7-s-text); --mtemps7-btn-hover-text: var(--mtemps7-s-bg); --mtemps7-btn-hover-line: var(--mtemps7-s-text); }
.mtemps7-ui-navy .mtemps7-ui-btn--ghost, .mtemps7-ui-night .mtemps7-ui-btn--ghost, .mtemps7-ui-btn--ghost.mtemps7-ui-btn--on-dark { --mtemps7-btn-text: var(--mtemps7-on-deep); --mtemps7-btn-line: var(--mtemps7-glass-line); --mtemps7-btn-hover-bg: var(--mtemps7-on-deep); --mtemps7-btn-hover-text: var(--mtemps7-deep); --mtemps7-btn-hover-line: var(--mtemps7-on-deep); }
.mtemps7-ui-btn--ghost.mtemps7-ui-btn--on-dark { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: var(--mtemps7-glass); }
.mtemps7-ui-btn--whatsapp { --mtemps7-btn-bg: var(--mtemps7-whatsapp); --mtemps7-btn-text: var(--mtemps7-on-whatsapp); --mtemps7-btn-line: var(--mtemps7-whatsapp); --mtemps7-btn-hover-bg: var(--mtemps7-whatsapp-2); --mtemps7-btn-hover-text: var(--mtemps7-on-whatsapp); --mtemps7-btn-hover-line: var(--mtemps7-whatsapp-2); }
.mtemps7-ui-navy .mtemps7-ui-btn--whatsapp, .mtemps7-ui-night .mtemps7-ui-btn--whatsapp { --mtemps7-btn-hover-bg: var(--mtemps7-whatsapp-2); --mtemps7-btn-hover-text: var(--mtemps7-on-whatsapp); --mtemps7-btn-hover-line: var(--mtemps7-whatsapp-2); }
.mtemps7-ui-btn--lg { min-height: 3.75rem; padding-inline: calc(var(--mtemps7-pad-control-x) * 1.3); font-size: var(--mtemps7-fs-md); }
.mtemps7-ui-btn--sm { min-height: 2.6rem; padding: 0.4rem 1.05rem; font-size: var(--mtemps7-fs-xs); }
.mtemps7-ui-btn--block { width: 100%; }
.mtemps7-ui-btns { display: flex; flex-wrap: wrap; gap: var(--mtemps7-sp-3); }

.mtemps7-ui-link { position: relative; display: inline-flex; align-items: center; gap: var(--mtemps7-sp-2); padding-block-end: 0.2rem; color: var(--mtemps7-s-link); font-weight: var(--mtemps7-fw-bold); background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1.5px; background-position: var(--mtemps7-x-start) 100%; transition: background-size var(--mtemps7-dur-3) var(--mtemps7-ease-film); }
.mtemps7-ui-link:hover, .mtemps7-ui-link:focus-visible { background-size: 100% 1.5px; }
.mtemps7-ui-link i { transition: transform var(--mtemps7-dur-2) var(--mtemps7-ease-out); }
.mtemps7-ui-link:hover i { transform: translateX(calc(var(--mtemps7-dir) * 4px)); }
html[dir="ltr"] .mtemps7-ui-flip { transform: scaleX(-1); }
html[dir="ltr"] .mtemps7-ui-link:hover i.mtemps7-ui-flip { transform: translateX(4px) scaleX(-1); }

/* نقاط عامة (الهيرو/صفحة الخدمة بيعيدوا تشكيلها): علامة صح + نص */
.mtemps7-ui-points { display: grid; gap: var(--mtemps7-sp-3); margin: 0; padding: 0; list-style: none; }
.mtemps7-ui-point { display: flex; align-items: center; gap: var(--mtemps7-sp-3); font-size: var(--mtemps7-fs-sm); font-weight: var(--mtemps7-fw-semibold); line-height: 1.5; }
.mtemps7-ui-point-ico { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex-shrink: 0; border: var(--mtemps7-hair) solid var(--mtemps7-accent); border-radius: 50%; color: var(--mtemps7-accent); font-size: 0.85rem; }

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

/* ===================== 7) MEDIA + كادر الفيلم + 3D FLOATS ===================== */
/* خانة صورة (placeholder مخطط لحد ما تتبدل) */
.mtemps7-ui-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--mtemps7-ratio, 4 / 3);
  border-radius: var(--mtemps7-r-md);
  background-color: var(--mtemps7-bg-3);
  background-image: repeating-linear-gradient(135deg, var(--mtemps7-hatch) 0 1px, transparent 1px 10px);
}
.mtemps7-ui-navy .mtemps7-ui-media, .mtemps7-ui-night .mtemps7-ui-media { background-color: var(--mtemps7-deep-3); background-image: repeating-linear-gradient(135deg, var(--mtemps7-deep-line) 0 1px, transparent 1px 10px); }
.mtemps7-ui-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mtemps7-dur-5) var(--mtemps7-ease-out); }
.mtemps7-ui-media--round { border-radius: 50%; }
/* زوايا الكادر (علامة الهوية): <span class="mtemps7-ui-corners" aria-hidden="true"></span> جوّه أي عنصر relative */
.mtemps7-ui-corners {
  --mtemps7-c: var(--mtemps7-accent);
  --mtemps7-t: 2px;
  position: absolute;
  inset: var(--mtemps7-corners-in, var(--mtemps7-sp-3));
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--mtemps7-c), var(--mtemps7-c)) 0 0 / var(--mtemps7-corner) var(--mtemps7-t),
    linear-gradient(var(--mtemps7-c), var(--mtemps7-c)) 0 0 / var(--mtemps7-t) var(--mtemps7-corner),
    linear-gradient(var(--mtemps7-c), var(--mtemps7-c)) 100% 0 / var(--mtemps7-corner) var(--mtemps7-t),
    linear-gradient(var(--mtemps7-c), var(--mtemps7-c)) 100% 0 / var(--mtemps7-t) var(--mtemps7-corner),
    linear-gradient(var(--mtemps7-c), var(--mtemps7-c)) 0 100% / var(--mtemps7-corner) var(--mtemps7-t),
    linear-gradient(var(--mtemps7-c), var(--mtemps7-c)) 0 100% / var(--mtemps7-t) var(--mtemps7-corner),
    linear-gradient(var(--mtemps7-c), var(--mtemps7-c)) 100% 100% / var(--mtemps7-corner) var(--mtemps7-t),
    linear-gradient(var(--mtemps7-c), var(--mtemps7-c)) 100% 100% / var(--mtemps7-t) var(--mtemps7-corner);
  background-repeat: no-repeat;
  transition: inset var(--mtemps7-dur-3) var(--mtemps7-ease-film), opacity var(--mtemps7-dur-3);
}

/* صور 3D طايرة: الغلاف (parallax بالماوس) ← الصورة (طفو مستمر) */
.mtemps7-ui-float { display: block; pointer-events: none; transform: translate3d(calc(var(--mtemps7-px, 0) * 1px), calc(var(--mtemps7-pyy, 0) * 1px), 0); transition: transform var(--mtemps7-dur-3) var(--mtemps7-ease-out); }
.mtemps7-ui-float-img { width: 100%; height: auto; filter: drop-shadow(0 30px 26px color-mix(in srgb, var(--mtemps7-ink) 45%, transparent)); animation: mtemps7-float var(--mtemps7-float-dur) var(--mtemps7-ease-soft) infinite alternate; animation-delay: var(--mtemps7-float-delay, 0s); -webkit-user-drag: none; user-select: none; }
@keyframes mtemps7-float { from { transform: translate3d(0, calc(var(--mtemps7-float-y) * -0.5), 0) rotate(var(--mtemps7-float-r0, -1deg)); } to { transform: translate3d(0, calc(var(--mtemps7-float-y) * 0.5), 0) rotate(var(--mtemps7-float-r1, 1deg)); } }

/* ===================== 8) DECORATIONS ===================== */
/* شريط متحرك (marquee) — بيتكرر تلقائيًا من الـ core */
.mtemps7-ui-marquee { position: relative; overflow: hidden; }
.mtemps7-ui-marquee-track { display: flex; width: max-content; }
.mtemps7-ui-marquee.mtemps7-is-ready .mtemps7-ui-marquee-track { animation: mtemps7-mq var(--mtemps7-mq-dur, 30s) linear infinite; }
.mtemps7-ui-marquee:hover .mtemps7-ui-marquee-track { animation-play-state: paused; }
.mtemps7-ui-marquee-group { display: flex; flex-shrink: 0; align-items: center; }
@keyframes mtemps7-mq { to { transform: translateX(calc(var(--mtemps7-dir) * -50%)); } }
/* نقطة "تسجيل" بتنبض */
.mtemps7-ui-rec { display: inline-block; width: 0.5rem; height: 0.5rem; flex-shrink: 0; border-radius: 50%; background: var(--mtemps7-accent); animation: mtemps7-rec 1.6s var(--mtemps7-ease-soft) infinite; }
@keyframes mtemps7-rec { 50% { opacity: 0.25; } }
/* ثقوب شريط الفيلم (زخرفة) */
.mtemps7-ui-sprockets { height: 0.6rem; background: repeating-linear-gradient(90deg, transparent 0 0.8rem, var(--mtemps7-sprocket, var(--mtemps7-deep-3)) 0.8rem 1.9rem); border-radius: 2px; }
/* بوكس عام (كارت أبيض بخط شعرة) */
.mtemps7-ui-box { position: relative; border: var(--mtemps7-hair) solid var(--mtemps7-s-line); border-radius: var(--mtemps7-r-md); background: var(--mtemps7-s-surface); }

/* ===================== 9) REVEAL + SPLIT ===================== */
html.mtemps7-js [data-mtemps7-reveal] {
  transition: opacity var(--mtemps7-dur-4) var(--mtemps7-ease-out), transform var(--mtemps7-dur-4) var(--mtemps7-ease-out), clip-path var(--mtemps7-dur-5) var(--mtemps7-ease-film);
  transition-delay: calc(var(--mtemps7-i, 0) * var(--mtemps7-stagger) + var(--mtemps7-delay, 0ms));
}
html.mtemps7-js [data-mtemps7-reveal]:not(.mtemps7-is-in) { opacity: 0; }
html.mtemps7-js [data-mtemps7-reveal="up"]:not(.mtemps7-is-in) { transform: translate3d(0, var(--mtemps7-reveal-y), 0); }
html.mtemps7-js [data-mtemps7-reveal="start"]:not(.mtemps7-is-in) { transform: translate3d(calc(var(--mtemps7-dir) * -1 * var(--mtemps7-reveal-x)), 0, 0); }
html.mtemps7-js [data-mtemps7-reveal="end"]:not(.mtemps7-is-in) { transform: translate3d(calc(var(--mtemps7-dir) * var(--mtemps7-reveal-x)), 0, 0); }
html.mtemps7-js [data-mtemps7-reveal="scale"]:not(.mtemps7-is-in) { transform: scale(var(--mtemps7-reveal-scale)); }
html.mtemps7-js [data-mtemps7-reveal="fade"]:not(.mtemps7-is-in) { transform: none; }
/* "frame": الكادر بيتفتح زي ستارة شاشة السينما (فوق وتحت) */
html.mtemps7-js [data-mtemps7-reveal="frame"]:not(.mtemps7-is-in) { opacity: 1; clip-path: inset(50% 0 50% 0); }
html.mtemps7-js [data-mtemps7-reveal="frame"].mtemps7-is-in { clip-path: inset(0 0 0 0); }
html.mtemps7-js [data-mtemps7-reveal="frame"] > img, html.mtemps7-js [data-mtemps7-reveal="frame"] .mtemps7-ui-media > img { transition: transform 2.4s var(--mtemps7-ease-out); }
html.mtemps7-js [data-mtemps7-reveal="frame"]:not(.mtemps7-is-in) > img, html.mtemps7-js [data-mtemps7-reveal="frame"]:not(.mtemps7-is-in) .mtemps7-ui-media > img { transform: scale(1.18); }
html.mtemps7-js [data-mtemps7-reveal="split"]:not(.mtemps7-is-in) { opacity: 1; }
.mtemps7-ui-w { display: inline-block; }
html.mtemps7-js [data-mtemps7-split] .mtemps7-ui-w { transition: opacity var(--mtemps7-dur-4) var(--mtemps7-ease-out), transform var(--mtemps7-dur-4) var(--mtemps7-ease-out), filter var(--mtemps7-dur-4) var(--mtemps7-ease-out); transition-delay: calc(var(--mtemps7-w, 0) * var(--mtemps7-word-stagger) + var(--mtemps7-delay, 0ms)); }
html.mtemps7-js [data-mtemps7-split]:not(.mtemps7-is-in) .mtemps7-ui-w { opacity: 0; transform: translate3d(0, 0.35em, 0); filter: blur(6px); }

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

/* شريط التقدّم: خط كهرماني رفيع بيلمع في آخره */
.mtemps7-ui-progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--mtemps7-z-progress); height: 3px; pointer-events: none; }
.mtemps7-ui-progress::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to var(--mtemps7-x-end), var(--mtemps7-accent-2), var(--mtemps7-accent)); box-shadow: 0 0 12px var(--mtemps7-accent-glow); transform-origin: var(--mtemps7-x-start); transform: scaleX(var(--mtemps7-progress, 0)); }

.mtemps7-ui-toast { position: fixed; inset-block-end: 6.5rem; inset-inline-start: 50%; z-index: var(--mtemps7-z-toast); display: inline-flex; align-items: center; gap: var(--mtemps7-sp-2); max-width: calc(100vw - 2rem); padding: var(--mtemps7-sp-3) var(--mtemps7-sp-5); border-radius: var(--mtemps7-r-sm); background: var(--mtemps7-ink); color: var(--mtemps7-on-deep); font-size: var(--mtemps7-fs-sm); box-shadow: var(--mtemps7-shadow-lift); opacity: 0; pointer-events: none; transform: translate3d(calc(var(--mtemps7-dir) * -50%), 1rem, 0); transition: opacity var(--mtemps7-dur-3), transform var(--mtemps7-dur-3) var(--mtemps7-ease-out); }
.mtemps7-ui-toast i { color: var(--mtemps7-accent); }
.mtemps7-ui-toast.mtemps7-is-on { opacity: 1; transform: translate3d(calc(var(--mtemps7-dir) * -50%), 0, 0); }
html.mtemps7-locked, html.mtemps7-locked body { overflow: hidden; }
.mtemps7-ui-preview-note { padding: var(--mtemps7-sp-3) var(--mtemps7-gutter); background: var(--mtemps7-ink); color: var(--mtemps7-on-deep-muted); font-size: var(--mtemps7-fs-xs); text-align: center; }
.mtemps7-ui-preview-note strong, .mtemps7-ui-preview-note a { color: var(--mtemps7-accent); }
.mtemps7-ui-filler { min-height: 120vh; display: grid; place-items: center; color: var(--mtemps7-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.mtemps7-js [data-mtemps7-reveal], html.mtemps7-js [data-mtemps7-split] .mtemps7-ui-w { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .mtemps7-ui-float-img, .mtemps7-ui-rec { animation: none !important; }
  .mtemps7-ui-float { transform: none !important; }
}