/* Nasaq Portfolio — سلايدر سينمائي. يرث ألوان القالب ويعمل بدونه. */
.nqw {
  --a: var(--accent, #F2B53A);
  --on-a: var(--on-accent, #0B1D2A);
  --nb: var(--bg, #0B1D2A);
  --ni: var(--ink, #F5F1E8);
  --dim: var(--ink-dim, #C9D6DD);
  --f: 1;            /* اتجاه: 1 عربي، -1 إنجليزي */
  --gut: clamp(20px, 5vw, 64px);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; background: var(--nb); color: var(--ni);
  font-family: inherit; line-height: 1.5;
}
.nqw[dir="ltr"] { --f: -1; }
.nqw *, .nqw *::before, .nqw *::after { box-sizing: border-box; }
.nqw button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- طبقة العنوان العلوية ---------- */
.nqw-top {
  position: absolute; z-index: 5; inset-block-start: clamp(22px, 4vw, 44px);
  inset-inline: var(--gut); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  pointer-events: none;
}
.nqw-top > * { pointer-events: auto; }
.nqw-eyebrow { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a); display: flex; align-items: center; gap: 10px; }
.nqw-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--a); }
.nqw-h1 { margin: 0; flex: 1 1 320px; font-family: Cairo, inherit; font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1.3; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.nqw-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: var(--a); color: var(--on-a); font-weight: 800; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.nqw-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--a) 40%, transparent); }

/* ---------- المسرح: كل الشرائح في خلية واحدة فيأخذ الارتفاع أطولها ---------- */
.nqw-stage { display: grid; }
.nqw-slide {
  grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center; gap: clamp(28px, 5vw, 72px);
  padding: clamp(150px, 20vh, 200px) var(--gut) 120px;
  min-height: clamp(660px, 90vh, 880px);
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s;
}
.nqw-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 2; }

/* خلفية مضيئة من نفس صورة العمل (ambient) */
.nqw-bg { position: absolute; inset: -12%; z-index: -1; background: var(--img) center / cover no-repeat; filter: blur(50px) grayscale(1) brightness(.5); opacity: .35; mix-blend-mode: soft-light; transform: scale(1.1); }
.nqw-slide.is-active .nqw-bg { animation: nqw-drift 16s ease-in-out infinite alternate; }
.nqw-slide::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 55% at 22% 45%, color-mix(in srgb, var(--a) 16%, transparent), transparent 70%), radial-gradient(50% 50% at 85% 20%, color-mix(in srgb, #5EE6C0 10%, transparent), transparent 70%), linear-gradient(180deg, #0F2535, var(--nb)); }
.nqw-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); }
@keyframes nqw-drift { to { transform: scale(1.22) translate3d(calc(var(--f) * 2%), -2%, 0); } }

/* ---------- النص ---------- */
.nqw-copy { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.nqw-copy > * { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.nqw-slide.is-active .nqw-copy > * { opacity: 1; transform: none; }
.nqw-slide.is-active .nqw-copy > :nth-child(1) { transition-delay: .25s; }
.nqw-slide.is-active .nqw-copy > :nth-child(2) { transition-delay: .38s; }
.nqw-slide.is-active .nqw-copy > :nth-child(3) { transition-delay: .52s; }
.nqw-slide.is-active .nqw-copy > :nth-child(4) { transition-delay: .66s; }

.nqw-chip { padding: 7px 16px; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--a); border: 1px solid color-mix(in srgb, var(--a) 55%, transparent); background: color-mix(in srgb, var(--a) 10%, transparent); backdrop-filter: blur(6px); }
.nqw-title { margin: 0; font-family: Cairo, inherit; font-weight: 800; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.18; text-wrap: balance; overflow-wrap: anywhere; }
.nqw-result { margin: 0; display: flex; gap: 12px; align-items: flex-start; color: var(--dim); font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 34ch; padding-inline-start: 16px; border-inline-start: 3px solid var(--a); }
.nqw-result .nqw-i { flex: none; margin-top: 3px; color: var(--a); }
.nqw-result-label { color: var(--ni); }
.nqw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.nqw-visit { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 14px; background: var(--ni); color: var(--nb); font-weight: 800; text-decoration: none; transition: transform .25s, background .25s; }
.nqw-visit:hover { transform: translateY(-3px); background: var(--a); color: var(--on-a); }
.nqw-demo { padding: 6px 14px; border-radius: 8px; border: 1px dashed var(--dim); color: var(--dim); font-size: .82rem; }

/* ---------- الجهاز: إطار متصفح بميلان ثلاثي الأبعاد ---------- */
.nqw-device { position: relative; perspective: 1500px; min-width: 0; opacity: 0; transform: translateX(calc(var(--f) * -70px)) scale(.92); transition: opacity .9s ease .15s, transform 1.1s cubic-bezier(.2,.8,.2,1) .15s; }
.nqw-slide.is-active .nqw-device { opacity: 1; transform: none; }
.nqw-frame {
  --rx: 4deg; --ry: -9deg;
  position: relative; border-radius: 16px; overflow: hidden; background: #0c1822;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 60px 100px -34px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4), 0 0 80px -20px color-mix(in srgb, var(--a) 35%, transparent);
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) * var(--f))); transform-style: preserve-3d; transition: transform .35s ease-out;
}
.nqw-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: linear-gradient(#18293a, #122130); border-block-end: 1px solid rgba(255,255,255,.08); }
.nqw-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3b5063; }
.nqw-bar i:nth-child(1) { background: #ff6b6b; } .nqw-bar i:nth-child(2) { background: #ffd166; } .nqw-bar i:nth-child(3) { background: #5ee6c0; }
.nqw-url { margin-inline-start: 12px; flex: 1; max-width: 70%; padding: 4px 14px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--dim); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nqw-shot { aspect-ratio: 16 / 10; overflow: hidden; background: #0c1822; }
.nqw-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.nqw-slide.is-active .nqw-shot img { animation: nqw-kb 9s ease-out both; }
@keyframes nqw-kb { from { transform: scale(1.0); } to { transform: scale(1.09); } }
/* لمعة تمر على الإطار عند ظهور الشريحة */
.nqw-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); transform: translateX(calc(var(--f) * 140%)); }
.nqw-slide.is-active .nqw-frame::after { animation: nqw-sheen 1.6s ease .9s both; }
@keyframes nqw-sheen { to { transform: translateX(calc(var(--f) * -140%)); } }
.nqw-glow { position: absolute; z-index: -1; inset-inline-end: -8%; inset-block-start: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--a) 45%, transparent), transparent 68%); filter: blur(24px); animation: nqw-pulse 5s ease-in-out infinite; }
@keyframes nqw-pulse { 50% { transform: scale(1.18); opacity: .7; } }

/* ---------- عناصر التحكم ---------- */
.nqw-ui { position: absolute; z-index: 6; inset-inline: var(--gut); padding-inline-end: 84px; inset-block-end: clamp(20px, 3.4vw, 40px); display: flex; align-items: center; gap: clamp(14px, 3vw, 36px); }
.nqw-count { display: flex; align-items: baseline; gap: 8px; font-family: Cairo, inherit; font-variant-numeric: tabular-nums; }
.nqw-count b { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px var(--ni); }
.nqw-count span { color: var(--dim); font-size: .95rem; }
.nqw-bars { flex: 1; display: flex; gap: 8px; min-width: 0; }
.nqw-seg { flex: 1; height: 22px; padding: 0; border: 0; background: none; position: relative; }
.nqw-seg::before { content: ""; position: absolute; inset-inline: 0; inset-block: 9px; border-radius: 3px; background: rgba(255,255,255,.2); }
.nqw-seg span { position: absolute; inset-inline: 0; inset-block: 9px; border-radius: 3px; background: var(--a); transform: scaleX(0); transform-origin: var(--origin, right); }
.nqw[dir="ltr"] .nqw-seg span { --origin: left; }
.nqw-seg.is-done span { transform: scaleX(1); }
.nqw-seg.is-active span { animation: nqw-fill var(--dur) linear forwards; }
.nqw.is-static .nqw-seg.is-active span { animation: none; transform: scaleX(1); }
.nqw.is-paused .nqw-seg.is-active span { animation-play-state: paused; }
@keyframes nqw-fill { to { transform: scaleX(1); } }
.nqw-seg:focus-visible, .nqw-btn:focus-visible, .nqw-visit:focus-visible, .nqw-cta:focus-visible { outline: 3px solid var(--ni); outline-offset: 3px; }

.nqw-btns { display: flex; gap: 10px; }
.nqw-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); backdrop-filter: blur(8px); transition: background .2s, color .2s, transform .2s; }
.nqw-btn:hover { background: var(--a); color: var(--on-a); border-color: var(--a); transform: scale(1.06); }
.nqw-i-play { display: none; } .nqw.is-userpaused .nqw-i-play { display: block; } .nqw.is-userpaused .nqw-i-pause { display: none; }

/* اتجاه الأسهم: is-fwd = السهم الذي يشير لاتجاه القراءة "للأمام" */
.nqw .nqw-arrow { transform: none; }
.nqw[dir="ltr"] .nqw-arrow.is-fwd, .nqw[dir="rtl"] .nqw-arrow:not(.is-fwd) { transform: rotate(180deg); }
/* السهم الأساسي المرسوم يشير لليسار: يناسب "للأمام" في العربية و"للخلف" في الإنجليزية */
.nqw[dir="rtl"] .nqw-arrow.is-fwd { transform: none; }
.nqw[dir="ltr"] .nqw-arrow:not(.is-fwd) { transform: none; }

/* ---------- الجوال ---------- */
@media (max-width: 860px) {
  .nqw-slide { grid-template-columns: 1fr; gap: 26px; padding-block: 180px 130px; min-height: 0; align-content: start; }
  .nqw-device { order: -1; }
  .nqw-frame { --rx: 2deg; --ry: -5deg; }
  .nqw-top { gap: 8px 16px; }
  .nqw-h1 { flex-basis: 100%; }
  .nqw-count { display: none; }
  .nqw-btn { width: 42px; height: 42px; }
}
@media (max-width: 480px) { .nqw-btns .nqw-btn:first-child { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nqw *, .nqw *::before, .nqw *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .nqw-frame { transform: none; }
}

/* ======================================================
   نافذة قصة العمل (Case Study)
   ====================================================== */
.nqw-visit { border: 0; font-family: inherit; font-size: 1rem; cursor: pointer; }
.nqw-site { color: var(--ni); text-decoration: none; font-weight: 700; padding: 12px 4px; border-block-end: 2px solid color-mix(in srgb, var(--ni) 35%, transparent); transition: border-color .2s, color .2s; }
.nqw-site:hover { color: var(--a); border-color: var(--a); }
.nqw-site--btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; }

.nqw-case {
  --cb: #0F2535;
  padding: 0; border: 0; color: var(--ni); background: var(--cb); font-family: inherit; line-height: 1.7;
  width: min(1120px, calc(100vw - 48px)); height: min(900px, calc(100dvh - 48px)); max-width: none; max-height: none;
  margin: auto; border-radius: 26px; overflow: hidden; box-shadow: 0 60px 140px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1);
}
.nqw-case[open] { animation: nqw-pop .55s cubic-bezier(.2,.9,.2,1) both; }
.nqw-case::backdrop { background: rgba(4, 12, 19, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: nqw-fade .4s ease both; }
@keyframes nqw-pop { from { opacity: 0; transform: translateY(40px) scale(.97); } }
@keyframes nqw-fade { from { opacity: 0; } }
html.nqw-lock { overflow: hidden; }

.nqw-case-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #33566A transparent; }
.nqw-case-close { position: absolute; top: 16px; inset-inline-end: 22px; z-index: 6; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(11,29,42,.7); backdrop-filter: blur(8px); color: var(--ni); cursor: pointer; transition: background .2s, transform .2s; }
.nqw-case-close:hover { background: var(--a); color: var(--on-a); transform: rotate(90deg); }
.nqw-case-close:focus-visible { outline: 3px solid var(--ni); outline-offset: 3px; }

/* الغلاف: صورة العمل كاملة العرض مع تدرج يذوب في الخلفية */
.nqw-case-hero { position: relative; min-height: clamp(260px, 42vh, 400px); display: flex; align-items: flex-end; }
.nqw-case-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.nqw-case-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,37,53,.15) 0%, rgba(15,37,53,.55) 55%, var(--cb) 100%); }
.nqw-case-head { position: relative; z-index: 1; padding: 0 clamp(22px, 4vw, 52px) 26px; display: grid; gap: 14px; justify-items: start; }
.nqw-case-title { margin: 0; font-family: Cairo, inherit; font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.2; text-wrap: balance; text-shadow: 0 4px 30px rgba(0,0,0,.45); }

.nqw-case-body { display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.4fr); gap: clamp(26px, 5vw, 64px); padding: 12px clamp(22px, 4vw, 52px) 40px; align-items: start; }
.nqw-case-side { display: grid; gap: 22px; position: sticky; top: 16px; }
.nqw-metric { display: grid; gap: 4px; padding-block-end: 22px; border-block-end: 1px solid rgba(255,255,255,.14); }
.nqw-metric b { font-family: Cairo, inherit; font-size: clamp(3.2rem, 8vw, 5.4rem); line-height: 1; font-weight: 800; color: var(--a); letter-spacing: -.02em; }
.nqw-metric span { color: var(--dim); font-size: 1.02rem; }
.nqw-case-result { margin: 0; padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--a) 11%, transparent); border-inline-start: 4px solid var(--a); font-weight: 700; display: grid; gap: 4px; }
.nqw-case-result small { color: var(--a); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

.nqw-case-story { display: grid; gap: 34px; }
.nqw-block { position: relative; padding-inline-start: 74px; }
.nqw-block-n { position: absolute; inset-inline-start: 0; top: -4px; font-family: Cairo, inherit; font-weight: 800; font-size: 3rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--a) 70%, transparent); font-variant-numeric: tabular-nums; }
.nqw-block h3 { margin: 0 0 8px; font-family: Cairo, inherit; font-size: 1.35rem; font-weight: 800; }
.nqw-block p { margin: 0; color: var(--dim); font-size: 1.08rem; max-width: 60ch; }

.nqw-gallery { display: grid; gap: 14px; padding: 0 clamp(22px, 4vw, 52px) 36px; grid-template-columns: repeat(3, 1fr); }
.nqw-gallery.g1 { grid-template-columns: 1fr; } .nqw-gallery.g2 { grid-template-columns: 1fr 1fr; }
.nqw-gallery img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: #0c1822; }

/* شريط الدعوة: يلتصق بأسفل النافذة أثناء القراءة */
.nqw-case-cta { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px clamp(22px, 4vw, 52px); background: linear-gradient(180deg, transparent, var(--cb) 38%); backdrop-filter: blur(6px); border-block-start: 1px solid rgba(255,255,255,.1); }
.nqw-case-cta p { margin: 0; font-family: Cairo, inherit; font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.5rem); }

@media (max-width: 860px) {
  .nqw-case { width: 100vw; height: 100dvh; border-radius: 0; }
  .nqw-case-body { grid-template-columns: 1fr; }
  .nqw-case-side { position: static; }
  .nqw-block { padding-inline-start: 62px; }
  .nqw-gallery { grid-template-columns: 1fr 1fr; } .nqw-gallery.g3 img:first-child { grid-column: 1 / -1; }
  .nqw-case-cta { flex-direction: column; align-items: stretch; text-align: center; } .nqw-case-cta .nqw-cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .nqw-case[open], .nqw-case::backdrop { animation: none !important; } }

@media (max-width: 760px) {
  .nqw-case::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(4, 12, 19, .88); }
  .nqw-case-close, .nqw-chip, .nqw-case-cta { backdrop-filter: none; -webkit-backdrop-filter: none; }
}