/* ==========================================================================
   الراية — طبقة الحركة والتحسينات البصرية (Motion & polish layer)
   تُحمَّل بعد ملفات التصميم الأساسية، ولا تغيّر الألوان أو الهوية.
   كل الحركة تتوقف تلقائيًا مع prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. Scroll reveal (auto-applied by motion-enhance.js) ---------- */
.mx .mx-r {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity .9s var(--ease),
    transform 1s var(--ease),
    filter .9s var(--ease);
  transition-delay: calc(var(--mx-i, 0) * 90ms);
}
.mx .mx-r[data-mx="fade"]  { transform: none; }
.mx .mx-r[data-mx="left"]  { transform: translate3d(-44px, 0, 0); }
.mx .mx-r[data-mx="right"] { transform: translate3d(44px, 0, 0); }
.mx .mx-r[data-mx="zoom"]  { transform: scale(.94); filter: blur(6px); }
.mx .mx-r[data-mx="up-lg"] { transform: translate3d(0, 64px, 0); }
.mx .mx-r.mx-in { opacity: 1; transform: none; filter: none; }

/* ---------- 2. Hero: depth, light & cue ---------- */
.hero .hero__media { overflow: hidden; }
.mx .hero .hero__bg { will-change: transform; }
.hero__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(40% 55% at var(--gx, 78%) var(--gy, 30%), rgba(253, 179, 73, .18), transparent 70%),
    radial-gradient(30% 40% at 12% 85%, rgba(57, 132, 120, .22), transparent 70%);
  mix-blend-mode: screen;
  transition: background-position .6s var(--ease);
}
.hero__title .w > span {
  background: linear-gradient(100deg, #fff 0%, #fff 40%, var(--copper-200) 50%, #fff 60%, #fff 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ---- Hero intro: content waits hidden, motion-enhance.js fades it in.
   Safety: if the script never runs, everything appears after 1.5s anyway. */
.js .hero [data-mx-intro], .js .hero__title, .js .hdr { opacity: 0; animation: mx-show .01s 1.5s forwards; }
.mx-intro-done .hero [data-mx-intro], .mx-intro-done .hero__title, .mx-intro-done .hdr { opacity: 1; animation: none; }
.hero__title .w:last-child > span,
.hero__title .w:nth-last-child(2) > span { color: transparent; background-image: var(--grad-copper); background-size: 100% 100%; }
.hero__kicker i { animation: mx-pulse 2.4s ease-out infinite; }

.mx-scrollcue {
  position: absolute; z-index: 3; bottom: 28px; left: 50%; translate: -50% 0;
  width: 26px; height: 42px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .45);
  display: grid; justify-items: center; padding-top: 7px;
  opacity: 0; animation: mx-fadein .8s 1.8s var(--ease) forwards;
}
.mx-scrollcue::before { content: ""; width: 3px; height: 8px; border-radius: 2px; background: var(--copper-400); animation: scrollcue 1.8s var(--ease) infinite; }
.mx-scrollcue:hover { border-color: var(--copper-400); }
@media (max-width: 767px) { .mx-scrollcue { display: none; } }

/* ---------- 3. Buttons: copper shine sweep + arrow nudge ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--copper::after, .btn--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(120%); transition: transform .9s var(--ease);
}
.btn--copper:hover::after, .btn--dark:hover::after,
.btn--copper:focus-visible::after, .btn--dark:focus-visible::after { transform: translateX(-120%); }
.btn .btn__icon { transition: transform .45s var(--ease); }
.btn:hover .btn__icon, .btn:focus-visible .btn__icon { transform: translateX(-5px); }
.mx .btn--copper.mx-in-cta { animation: mx-glow 2.2s .4s ease-out 1; }

/* ---------- 4. Section headings: copper rule + number badge pop ---------- */
.sec__head .display, #works-title { position: relative; }
.sec__head .display::after, #works-title::after {
  content: ""; display: block; width: 72px; height: 4px; margin-top: 18px; border-radius: 4px;
  background: var(--grad-copper);
  transform: scaleX(0); transform-origin: right; transition: transform 1.1s .35s var(--ease);
}
.sec__head--center .display::after { margin-inline: auto; transform-origin: center; }
.mx-in.display::after, .mx-in#works-title::after, .no-mx .display::after { transform: scaleX(1); }

#elraya-law .section-number { transition: transform .8s var(--ease), box-shadow .8s var(--ease); position: relative; }
.mx .project-section__title.mx-r .section-number,
.mx #results-title.mx-r .section-number { transform: scale(.4) rotate(-90deg); }
.mx .project-section__title.mx-in .section-number,
.mx #results-title.mx-in .section-number { transform: none; box-shadow: 0 0 0 6px rgba(184, 135, 96, .14); }
#elraya-law .project-section__title .section-number::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px dashed rgba(184, 135, 96, .55);
  animation: spin 18s linear infinite;
}

/* ---------- 5. Solutions list: interactive rows ----------
   The highlight now spans the whole row (icon → arrow) with an even tint,
   and the row no longer shifts sideways, so the background fits the content. */
.pain__item { position: relative; isolation: isolate; }
.pain__item::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 10px -18px; border-radius: var(--r-lg);
  background: linear-gradient(to left, rgba(253, 179, 73, .16), rgba(253, 179, 73, .06));
  border: 1px solid rgba(182, 129, 50, .14);
  opacity: 0; transform: scale(.98); transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.pain__item:first-child::before { inset-block-start: -16px; }
.pain__item:hover::before, .pain__item:focus-within::before { opacity: 1; transform: none; }
.pain__item .solution-link { position: relative; width: 100%; }
.pain__item .tile__icon { transition: transform .5s var(--ease), background .4s, color .4s, box-shadow .4s; }
.pain__item .solution-link:hover .tile__icon, .pain__item .solution-link:focus-visible .tile__icon {
  transform: rotate(-6deg) scale(1.04); background: var(--grad-copper-deep); color: #fff; box-shadow: var(--shadow-copper);
}
.pain__item .solution-link:hover b { color: var(--copper-text); }
.pain__item b { transition: color .3s; }
.mx-go {
  margin-inline-start: auto; align-self: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--copper-text); border: 1px solid var(--line-light);
  opacity: 0; transform: translateX(10px); transition: opacity .4s var(--ease), transform .45s var(--ease), background .3s, color .3s;
}
.mx-go svg { width: 12px; height: 12px; }
.solution-link:hover .mx-go, .solution-link:focus-visible .mx-go { opacity: 1; transform: none; background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
@media (hover: none) { .mx-go { opacity: .7; transform: none; } }

/* ---------- 6. Portfolio cards: lift, glow, image zoom ---------- */
#elraya-law .pdf-reader,
#elraya-law .portfolio-gallery,
#elraya-law .website-work {
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s, opacity .9s var(--ease), filter .9s var(--ease);
}
#elraya-law .pdf-reader:hover,
#elraya-law .website-work:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -28px rgba(16, 60, 56, .38), 0 0 0 1px rgba(184, 135, 96, .35);
  border-color: rgba(184, 135, 96, .45);
}
#elraya-law .portfolio-gallery:hover { box-shadow: 0 26px 60px -30px rgba(16, 60, 56, .3); }
#elraya-law .pdf-reader:not(.is-zoomed) .pdf-reader__stage { overflow: hidden; }
#elraya-law .pdf-reader__stage img { transition: transform .9s var(--ease), opacity .35s; }
#elraya-law .pdf-reader:not(.is-zoomed):hover .pdf-reader__stage img { transform: scale(1.025); }
#elraya-law .pdf-reader__stage img.mx-swap { opacity: .25; }
#elraya-law .pdf-reader__file { transition: background .4s, color .4s, transform .5s var(--ease); }
#elraya-law .pdf-reader:hover .pdf-reader__file { background: var(--copper-600); color: #fff; transform: rotate(-6deg); }
#elraya-law .gallery-slide { position: relative; }
#elraya-law .gallery-slide img { transition: transform .9s var(--ease), filter .4s; }
#elraya-law .gallery-slide:hover img { transform: scale(1.06); filter: brightness(1.04); }
#elraya-law .gallery-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to top, rgba(7, 31, 29, .45), transparent 45%);
  opacity: 0; transition: opacity .45s var(--ease);
}
#elraya-law .gallery-slide:hover::after { opacity: 1; }
#elraya-law .website-work > button { overflow: hidden; }
#elraya-law .website-work > button img { transition: transform 1.2s var(--ease); }
#elraya-law .website-work:hover > button img { transform: scale(1.045); }
#elraya-law .portfolio-gallery footer > button { transition: background .25s, transform .35s var(--ease); }
#elraya-law .portfolio-gallery footer > button:hover:not(:disabled) { transform: scale(1.08); }

/* PDF pagination showed the total twice ("من 14 / 14") — keep one */
#elraya-law .pdf-reader__total { display: none; }

/* Four identity guides: 2 × 2 instead of 3 + 1 orphan */
@media (min-width: 900px) {
  #elraya-law #panel-id .pdf-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 7. Campaign results: spotlight + counters ---------- */
.camp { position: relative; overflow: hidden; transition: transform .6s var(--ease), border-color .4s, box-shadow .6s var(--ease); }
.camp::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(320px circle at var(--mx-x, 50%) var(--mx-y, 0%), rgba(253, 179, 73, .16), transparent 60%);
  transition: opacity .4s;
}
.camp:hover::before { opacity: 1; }
.camp > * { position: relative; z-index: 1; }
.camp:hover { transform: translateY(-6px); border-color: rgba(253, 179, 73, .35); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.camp__image { overflow: hidden; display: block; }
.camp__image img { transition: transform 1s var(--ease); }
.camp:hover .camp__image img { transform: scale(1.04); }
.camp__nums dd { font-variant-numeric: tabular-nums; }

/* ---------- 8. Client logos: uniform, calm, lively on hover ---------- */
.customer-marquee__item { transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease); }
#elraya-law .customer-marquee__item img { width: auto; height: auto; max-width: 82%; max-height: 64px; object-fit: contain; transition: transform .5s var(--ease); }
@media (max-width: 767px) { #elraya-law .customer-marquee__item img { max-height: 50px; } }
.customer-marquee__item:hover { transform: translateY(-5px); border-color: rgba(253, 179, 73, .5); box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .7); }
.customer-marquee__item:hover img { transform: scale(1.06); }

/* ---------- 9. Process flow: line draws, steps pop ---------- */
.flow::before { transform-origin: right; transition: transform 1.6s .3s var(--ease); }
.mx .flow:not(.mx-flow-in)::before { transform: scaleX(0); }
@media (max-width: 1023px) { .flow::before { transform-origin: top; } .mx .flow:not(.mx-flow-in)::before { transform: scaleY(0); } }
.flow__n { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.flow__step:hover .flow__n { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 8px var(--sand-50), 0 16px 30px -12px rgba(16, 60, 56, .55); }
.mx .flow .flow__n { transform: scale(.5); opacity: 0; transition: transform .8s var(--ease), opacity .6s, box-shadow .6s; transition-delay: calc(var(--mx-i, 0) * 260ms + .3s); }
.mx .flow.mx-flow-in .flow__n { transform: none; opacity: 1; }

/* ---------- 10. Small touches ---------- */
.whatsapp-float::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #25d366;
  animation: ping 2.6s var(--ease) infinite; pointer-events: none;
}
.hdr__nav a { transition: color .3s; }
.mx-tilt { transform-style: preserve-3d; }

/* ---------- Keyframes ---------- */
@keyframes mx-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes mx-pulse { 0% { box-shadow: 0 0 0 0 rgba(253, 179, 73, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(253, 179, 73, 0); } }
@keyframes mx-fadein { to { opacity: 1; } }
@keyframes mx-fade-in { from { opacity: 0; } }
@keyframes mx-show { to { opacity: 1; } }
@keyframes mx-hero-bg { from { opacity: 0; scale: 1.15; } }
@keyframes mx-drop { from { opacity: 0; translate: 0 -100%; } }
@keyframes mx-blur-up { from { opacity: 0; translate: 0 26px; filter: blur(8px); } }
@keyframes mx-word-up { from { transform: translateY(115%) rotate(4deg); opacity: 0; } }
@keyframes mx-pop { from { opacity: 0; scale: .85; translate: 0 18px; } }
@keyframes mx-glow { 0% { box-shadow: 0 0 0 0 rgba(253, 179, 73, .6); } 100% { box-shadow: 0 0 0 18px rgba(253, 179, 73, 0); } }

/* ---------- Accessibility & print ---------- */
@media (prefers-reduced-motion: reduce) {
  .mx .mx-r, .mx .flow .flow__n { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mx .flow::before, .sec__head .display::after, #works-title::after { transform: none !important; }
  .hero__glow, .mx-scrollcue, .whatsapp-float::before, #elraya-law .project-section__title .section-number::after { animation: none !important; }
  .mx-scrollcue { opacity: 1; }
}
@media print { .mx .mx-r { opacity: 1 !important; transform: none !important; } .hero__glow, .mx-scrollcue { display: none; } }

/* Tighter rhythm between "حلولنا" and "أعمالنا السابقة" (was ~290px of empty space) */
#elraya-law #works.sec { padding-top: clamp(32px, 4vw, 64px); }


/* ==========================================================================
   Fixes — review round (mobile screenshots)
   ========================================================================== */

/* 1. PDF stage hugs the page: no empty grey bands above/below landscape pages.
      motion-enhance.js sets --mx-ratio from each reader's first page.
      (phones/tablets only — on desktop the cards in a row keep one equal height) */
@media (max-width: 899px) {
  #elraya-law .pdf-reader[style*="--mx-ratio"]:not(:fullscreen) .pdf-reader__stage {
    height: auto !important; aspect-ratio: var(--mx-ratio) !important; padding: 8px;
  }
}

/* 2. Fullscreen on phones: the browser's "swipe to exit" notice sits at the bottom
      and covered the page buttons — controls move under the title instead. */
@media (max-width: 900px) {
  #elraya-law .pdf-reader:fullscreen .pdf-reader__head  { order: 0; }
  #elraya-law .pdf-reader:fullscreen .pdf-reader__tools { order: 1; border-bottom: 1px solid #e3dfd8; }
  #elraya-law .pdf-reader:fullscreen .pdf-reader__stage { order: 2; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* 3. Website cards: "زيارة الموقع" sits in the same place on every card */
#elraya-law .website-work .work__body { flex-wrap: nowrap; align-items: center; }
#elraya-law .website-work .work__body > span { flex: 1; min-width: 0; }
#elraya-law .website-work .work__body a {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 1px solid rgba(184, 135, 96, .45); border-radius: 999px;
  text-decoration: none; font-size: .9375rem; font-weight: 600; color: #80572f;
  transition: background .3s, color .3s, border-color .3s;
}
#elraya-law .website-work .work__body a:hover, #elraya-law .website-work .work__body a:focus-visible { background: #b88760; border-color: #b88760; color: #fff; }
@media (max-width: 420px) { #elraya-law .website-work .work__body a { padding: 7px 12px; font-size: .875rem; } }

/* 4. Campaign results follow the same light design as sections 01–05 */
#elraya-law .results--light { background: var(--sand-50); color: var(--ink); padding-block: 0 var(--sec-y); }
#elraya-law .results--light > .pattern { display: none; }
#elraya-law .results--light > .wrap { border-top: 1px solid #d9d5ce; padding-top: 42px; }
#elraya-law .results--light .sec__head { margin-bottom: 28px; }
#elraya-law .results--light .eyebrow { display: none; }
#elraya-law .results--light #results-title { font-size: clamp(25px, 3vw, 38px); color: var(--ink); line-height: 1.35; }
#elraya-law .results--light #results-title::after { display: none; }
#elraya-law .results--light .sec__lead { color: var(--muted); }
#elraya-law #results.results--light .section-number { background: #172c39; color: #fff; }
#elraya-law .results--light .camp {
  background: #fff; border: 1px solid #e3dfd8; border-radius: 20px;
  box-shadow: 0 12px 36px #172c3908; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink);
}
#elraya-law .results--light .camp h3 { color: var(--navy-900); display: flex; align-items: center; gap: 10px; }
#elraya-law .results--light .camp h3::before { content: ""; width: 4px; height: 22px; border-radius: 3px; background: #b88760; flex-shrink: 0; }
#elraya-law .results--light .camp__nums dd { color: var(--navy-900); }
#elraya-law .results--light .camp__nums div:last-child dd { color: var(--copper-600); }
#elraya-law .results--light .camp__nums dt { color: var(--muted); }
#elraya-law .results--light .camp::before { background: radial-gradient(320px circle at var(--mx-x, 50%) var(--mx-y, 0%), rgba(184, 135, 96, .1), transparent 60%); }
#elraya-law .results--light .camp:hover { border-color: rgba(184, 135, 96, .45); box-shadow: 0 30px 60px -28px rgba(16, 60, 56, .32); }
#elraya-law .results--light :focus-visible { outline-color: var(--copper-600); }

/* 5. Client logos: Sultan Alqurishi's wide logo was too small */
#elraya-law .customer-marquee__item img { max-width: 88%; }
#elraya-law .customer-marquee__item.logo-5 img { max-width: 100%; max-height: 84px; }
@media (max-width: 767px) {
  #elraya-law .customer-marquee__item.logo-5 { padding: 10px; }
  #elraya-law .customer-marquee__item.logo-5 img { max-height: 64px; }
}