/* ===== NUX Projects – Cards + Filters + Rich Modal ===== */

/* ---------- Theme ---------- */
:root{
  --nx-bg:#0b0f1a; --nx-surface:#111625; --nx-surface-2:#0e1322;
  --nx-text:#fff; --nx-text-2:#a1a1b2;
  --nx-line:rgba(255,255,255,.12); --nx-line-soft:rgba(255,255,255,.08);
  --nx-primary:#6b2bd8; --nx-primary-2:#8a5ae6;
  --nx-grad:linear-gradient(135deg,var(--nx-primary),var(--nx-primary-2));
}

html[data-bs-theme="light"]{
  --nx-bg:#f7f8fb; --nx-surface:#fff; --nx-surface-2:#f4f5fb;
  --nx-text:#0b0f1a; --nx-text-2:#5a6072;
  --nx-line:rgba(11,15,26,.12); --nx-line-soft:rgba(11,15,26,.08);
}

/* ---------- Section shell ---------- */
.nux-p-section{ background:var(--nx-bg); color:var(--nx-text); padding:72px 0 80px; position:relative; overflow:hidden; }
.nux-p-header{ text-align:center; max-width:760px; margin:0 auto 28px; }
.nux-p-eyebrow{ display:inline-block; font-weight:900; letter-spacing:.5px; font-size:.85rem; color:var(--nx-primary-2); margin-bottom:8px; }
.nux-p-title{ font-size:clamp(1.7rem,3.4vw,2.2rem); font-weight:900; margin:0 0 10px; }
.nux-p-title .brand{ color:var(--nx-primary); }
.nux-p-sub{ color:var(--nx-text-2); line-height:1.75; }

/* ---------- Filters ---------- */
.nux-filter{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:26px auto 30px; }
.nux-chip{
  background:var(--nx-line-soft); border:1px solid var(--nx-line); color:var(--nx-text);
  border-radius:999px; padding:.5rem 1rem; font-weight:800; cursor:pointer;
  transition:background .2s,transform .15s ease,box-shadow .2s;
}
.nux-chip:hover{ transform:translateY(-1px); }
.nux-chip.is-active{ background:var(--nx-grad); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(107,43,216,.28); }

/* ---------- Mini strip (optional) ---------- */
.nux-mini-strip{ overflow-x:a uto; margin:8px 0 20px; width:100%; }
.nux-mini-row{ display:flex; gap:12px; padding:10px; flex-wrap:nowrap; }
@keyframes nxMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.nux-mini-card{ background:transparent; border:1px solid var(--nx-line); border-radius:12px; overflow:hidden; min-width:220px; flex:0 0 auto; }
.nux-mini-card img{ width:100%; height:120px; object-fit:cover; display:block; }
.nux-mini-card .cap{ padding:.6rem .8rem; font-weight:800; font-size:.92rem; color:var(--nx-text); }
/* ====== Grid / Cards base (كما عندك) ====== */
.nux-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:22px;
}
.nux-card{
  position:relative; overflow:hidden; border-radius:16px;
  background: var(--nx-surface, #111625);
  border: 1px solid var(--nx-line, rgba(255,255,255,.12));
  transform: scale(.985);
  opacity: 0;
  animation: nuxFadeIn .6s forwards;
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.nux-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 42px rgba(0,0,0,.22); }

.nux-card .shot{
  width:100%; height:auto; display:block; border-radius:16px;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.nux-card:hover .shot{ transform: scale(1.04); }

.nux-card .ov{
  position:static; padding:12px 12px 16px;
  background: transparent;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.nux-card .ttl{ font-weight:900; margin:0 0 4px; color:var(--nx-text,#fff); font-size:1.02rem; }
.nux-card .sub{ color:var(--nx-text-2,#a1a1b2); font-size:.9rem; margin:0 0 10px; }
.nux-btn{
  background: linear-gradient(135deg, var(--nx-primary,#6b2bd8), var(--nx-primary-2,#8a5ae6));
  color:#fff; border:0; border-radius:999px; padding:.44rem 1rem; font-weight:800;
  text-decoration:none; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.nux-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(107,43,216,.3); }

/* ====== دخول متسلسل للبطاقات ====== */
@keyframes nuxFadeIn{ to{ opacity:1; transform: scale(1);} }
#projectsGrid .nux-card:nth-child(1){animation-delay:.00s}
#projectsGrid .nux-card:nth-child(2){animation-delay:.04s}
#projectsGrid .nux-card:nth-child(3){animation-delay:.08s}
#projectsGrid .nux-card:nth-child(4){animation-delay:.12s}
#projectsGrid .nux-card:nth-child(5){animation-delay:.16s}
#projectsGrid .nux-card:nth-child(6){animation-delay:.20s}
#projectsGrid .nux-card:nth-child(7){animation-delay:.24s}
#projectsGrid .nux-card:nth-child(8){animation-delay:.28s}
#projectsGrid .nux-card:nth-child(9){animation-delay:.32s}
#projectsGrid .nux-card:nth-child(10){animation-delay:.36s}
#projectsGrid .nux-card:nth-child(11){animation-delay:.40s}
#projectsGrid .nux-card:nth-child(12){animation-delay:.44s}

/* =========================================================
   iPhone 16 Pro Max – نسخة مصغّرة لبطاقات التطبيقات فقط
   لا تحتاج تعديل HTML — الإطار يُرسم بـ pseudo-elements
   ========================================================= */
.nux-card[data-cat="apps"]{
  padding:18px 18px 22px;   /* مساحة للإطار */
  border-radius:28px;
  background: radial-gradient(120% 120% at 50% -10%, rgba(255,255,255,.06), transparent 55%),
              var(--nx-surface, #111625);
  box-shadow: inset 0 0 0 1px var(--nx-line, rgba(255,255,255,.12));
}

/* الشاشة داخل إطار الآيفون */
.nux-card[data-cat="apps"] .shot{
  aspect-ratio: 9 / 19.5;         /* أبعاد شاشة iPhone */
  width:100%; height:auto;
  object-fit:cover; background:#000;
  border-radius:28px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 12px 24px rgba(0,0,0,.35);
  position:relative;
  z-index:1;
}

/* الحواف المعدنية (سوبر دقيقة) */
.nux-card[data-cat="apps"]::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:34px;
  box-shadow:
    inset 0 0 0 10px rgba(0,0,0,.35),      /* الحافة الداكنة */
    inset 0 0 0 1px rgba(255,255,255,.05); /* خط لامع رقيق */
  pointer-events:none;
}

/* الجزيرة (Dynamic Island) */
.nux-card[data-cat="apps"]::after{
  content:"";
  position:absolute; left:50%; top:26px; transform:translateX(-50%);
  width:34%; max-width:140px; height:18px;
  border-radius:12px; background:#000;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  z-index:2; pointer-events:none;
}

/* نص وزر أسفل الصورة بشكل متناسق */
.nux-card[data-cat="apps"] .ov{ padding:10px 0 2px; }
.nux-card[data-cat="apps"] .ttl{ font-size: .98rem; }
.nux-card[data-cat="apps"] .sub{ font-size: .86rem; }

/* استجابة مصغّرة لموبايل */
@media (max-width: 480px){
  .nux-card[data-cat="apps"]{ padding:14px 14px 18px; border-radius:24px; }
  .nux-card[data-cat="apps"] .shot{ border-radius:24px; }
  .nux-card .ttl{ font-size:.96rem; }
  .nux-card .sub{ font-size:.84rem; }
}

/* ===== الفلاتر الجديدة (نفس مسمياتك) ===== */
.nux-filter{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:26px auto 30px; }
.nux-chip{
  background: var(--nx-line-soft, rgba(255,255,255,.08));
  border: 1px solid var(--nx-line, rgba(255,255,255,.12));
  color: var(--nx-text, #fff);
  border-radius: 999px; padding: .5rem 1rem; font-weight:800; cursor:pointer;
  transition: background .2s, transform .15s ease, box-shadow .18s ease;
}
.nux-chip:hover{ transform: translateY(-1px); }
.nux-chip.is-active{
  background: linear-gradient(135deg, var(--nx-primary,#6b2bd8), var(--nx-primary-2,#8a5ae6));
  border-color: transparent; color:#fff;
  box-shadow: 0 10px 24px rgba(107,43,216,.28);
}

/* ===== نافذة التفاصيل (اختصار تصميمي) ===== */
.nux-rich-modal{ position:fixed; inset:0; display:none; z-index:1090; }
.nux-rich-modal.is-open{ display:block; }
.nux-rich-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.nux-rich-modal__dialog{
  position:relative; margin:6vh auto 0; width:min(1080px,94vw); background:var(--nx-surface,#111625);
  color:var(--nx-text,#fff); border:1px solid var(--nx-line,rgba(255,255,255,.12)); border-radius:16px;
  box-shadow:0 24px 64px rgba(0,0,0,.5); overflow:hidden;
}
.nux-rich-modal__close{
  position:absolute; top:10px; right:12px; /* RTL */
  background:transparent; border:0; font-size:2rem; line-height:1; color:var(--nx-text,#fff); cursor:pointer; z-index:2;
}
.nux-rich-modal__header{ padding:16px 18px; border-bottom:1px solid var(--nx-line,rgba(255,255,255,.12)); }
.nux-rich-modal__title{ font-weight:900; margin:0 0 6px; }
.nux-rich-modal__tags{ display:flex; gap:8px; flex-wrap:wrap; }
.nux-rich-modal__tags .tag{ background:var(--nx-line-soft,rgba(255,255,255,.08)); border:1px solid var(--nx-line,rgba(255,255,255,.12)); border-radius:999px; padding:.25rem .6rem; font-size:.82rem; }
.nux-rich-modal__body{ display:grid; grid-template-columns: 1.2fr 1fr; gap:14px; padding:14px; }
.nux-rich-modal__gallery{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.nux-rich-modal__gallery img{ width:110px; height:220px; object-fit:cover; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.25); background:#000; }
.nux-rich-modal__desc{ color:var(--nx-text-2,#a1a1b2); line-height:1.8; margin:4px 0 8px; }
.nux-rich-modal__points{ margin:0; padding-left: 18px; color:var(--nx-text-2,#a1a1b2); }
.nux-rich-modal__points li{ margin:.3rem 0; }
@media (max-width: 900px){ .nux-rich-modal__body{ grid-template-columns: 1fr; } }


/* ===== تصغير حجم بطاقات مواقع الويب فقط ===== */
.nux-card[data-cat="web"] {
  transform: scale(0.92);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nux-card[data-cat="web"]:hover {
  transform: scale(0.95) translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
}

/* تصغير الصورة قليلاً */
.nux-card[data-cat="web"] .shot {
  height: 200px; /* كان 240px */
  object-fit: cover;
  border-radius: 12px;
}

/* ضبط النص والزر داخل البطاقة */
.nux-card[data-cat="web"] .ov {
  padding: 10px;
}

.nux-card[data-cat="web"] .ttl {
  font-size: 0.95rem;
}

.nux-card[data-cat="web"] .sub {
  font-size: 0.85rem;
  color: var(--nx-text-2, #a1a1b2);
}

.nux-card[data-cat="web"] .nux-btn {
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
}

/* للشاشات الصغيرة */
@media (max-width: 480px) {
  .nux-card[data-cat="web"] .shot {
    height: 170px;
  }
  .nux-card[data-cat="web"] {
    transform: scale(0.9);
  }
}


/* ===== أزرار الوصول السريع في الشريط المصغّر ===== */
.nux-mini-card {
  position: relative;
  background: var(--nx-surface, #111625);
  border: 1px solid var(--nx-line, rgba(255,255,255,.12));
  border-radius: 14px;
  overflow: hidden;
  min-width: 220px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.nux-mini-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(107,43,216,.25);
}

.nux-mini-card img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.nux-mini-card .cap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem .8rem;
  font-weight: 800;
  font-size: .9rem;
  color: var(--nx-text, #fff);
}

/* الزر الأنيق */
.quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--nx-primary, #6b2bd8), var(--nx-primary-2, #8a5ae6));
  color: #fff;
  font-size: .85rem;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 3px 10px rgba(107,43,216,.25);
}
.quick-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(107,43,216,.35);
  background: linear-gradient(135deg, var(--nx-primary-2, #8a5ae6), var(--nx-primary, #6b2bd8));
}



/* أزرار الوصول السريع في الميني-سترب */
.nux-mini-card .cap{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:.6rem .8rem; font-weight:800; font-size:.92rem;
}
.quick-btn{
  display:inline-grid; place-items:center; width:32px; height:32px;
  border-radius:999px; text-decoration:none; font-weight:900;
  background: linear-gradient(135deg,#6b2bd8,#8a5ae6);
  color:#fff; transition: transform .15s ease, box-shadow .18s ease;
}
.quick-btn:hover{ transform: translateY(-2px); box-shadow:0 10px 22px rgba(107,43,216,.35); }

/* شبكة الهواتف أسفل البطاقات */
.nux-phones-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 26px;
}

/* ===== iPhone 16 Pro Max — بطاقة تطبيق صغيرة ===== */
.nux-card.iphone-card{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:14px 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06));
  border:1px solid var(--nx-line, rgba(255,255,255,.12));
  border-radius:16px;
}

/* الحجم الصغير للهاتف */
.iphone16-wrap{ width: clamp(150px, 72%, 210px); display:grid; place-items:center; }
.iphone16{
  position: relative; width:100%; aspect-ratio:9/19.5; border-radius:28px;
  background:#0d1018;
  box-shadow: 0 18px 36px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden; transform: translateZ(0);
}
.iphone16::before{
  content:""; position:absolute; inset:0; border-radius:28px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), transparent 16%, transparent 84%, rgba(255,255,255,.10));
  mix-blend-mode: screen; pointer-events:none;
}
.iphone16 .screen{ position:absolute; inset:10px; border-radius:20px; overflow:hidden; background:#000;
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 86%,rgba(0,0,0,.65) 95%, transparent 100%);
  mask-image:         linear-gradient(to bottom,#000 0%,#000 86%,rgba(0,0,0,.65) 95%, transparent 100%);
}
.iphone16 .screen img{ width:100%; height:100%; object-fit:cover; display:block; }
.iphone16 .island{ position:absolute; left:50%; top:12px; transform:translateX(-50%);
  width:36%; max-width:140px; height:18px; border-radius:12px; background:#000; box-shadow:0 2px 6px rgba(0,0,0,.45); }

.iphone16.tilt-l{ transform: rotate(-2.2deg); }
.iphone16.tilt-r{ transform: rotate(2.2deg); }

.iphone-meta{ text-align:center; }
.iphone-meta .title{ font-weight:900; font-size:.98rem; margin:0 0 6px; }
.iphone-meta .sub{ margin:0 0 8px; font-size:.82rem; opacity:.75; }

/* زر nux */
.nux-btn{
  background: linear-gradient(135deg,#6b2bd8,#8a5ae6);
  color:#fff; border:0; border-radius:999px; padding:.42rem 1rem; font-weight:800;
  text-decoration:none; display:inline-block; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.nux-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(107,43,216,.28); }

/* ===== ظهور بطيء متتابع عند التمرير ===== */
.nux-phones-grid .iphone-card{
  opacity:0; transform: translateY(14px) scale(.985);
}
.nux-phones-grid .iphone-card.is-in{
  animation: nuxSeq .6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes nuxSeq{
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* تفاعل جذاب بالماوس: ميل خفيف */
.iphone16-wrap{ perspective: 1000px; }
.iphone16-wrap:hover .iphone16{
  transition: transform .18s ease !important;
  transform: translateZ(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}

/* داكن/فاتح للحدود */
html[data-bs-theme="light"] .nux-card.iphone-card{
  border-color: rgba(11,15,26,.12);
  background: #fff;
}




/* ===== مدرج المشي العام + تلاشي الحواف ===== */
.nux-runway{
  position: relative;
  overflow: hidden;
  /* تلاشي عند الأطراف لظهور/اختفاء ناعم */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* الصفّ الذي يتحرّك */
.nux-walk-row{
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
  animation: var(--walk-name, walkL) var(--walk-dur, 24s) linear infinite;
}
.nux-runway:hover .nux-walk-row{ animation-play-state: paused; } /* إيقاف مؤقت عند hover */

/* اتجاه الحركة عبر data-dir */
.nux-runway[data-dir="ltr"] .nux-walk-row{ --walk-name: walkL; }
.nux-runway[data-dir="rtl"] .nux-walk-row{ --walk-name: walkR; }

/* سرعة الحركة من data-duration */
.nux-runway[data-duration] .nux-walk-row{
  --walk-dur: attr(data-duration);
}

/* مفاتيح الحركة */
@keyframes walkL{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@keyframes walkR{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .nux-walk-row{ animation: none !important; }
}

/* ===== تنسيق الهياكل القائمة لديك ===== */
/* اجعل شريط المصغرات في سطر واحد */
.nux-mini-row{ align-items: stretch; }
.nux-mini-card{ flex: 0 0 auto; }

/* اجعل حاوية الهواتف مرنة ليبدو الصف طبيعي */
.nux-phones-grid{ padding-block: 8px; }
.nux-phones-grid .iphone-card{ flex: 0 0 auto; }

/* ===== ظهور تدريجي متسلسل عند التمرير ===== */
.nux-scroll-anim .iphone-card{
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}
.nux-scroll-anim .iphone-card.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.nux-scroll-anim .iphone-card.is-out{
  opacity: 0;
  transform: translateY(-14px) scale(.985);
}
/* تباطؤ متسلسل */
.nux-scroll-anim .iphone-card{ transition-delay: var(--stg, 0ms); }

/* ===== لمسة صغيرة للـ iPhone المصغّر حتى يبدو متناسقاً مع الشريط ===== */
.iphone16-wrap{ width: clamp(150px, 44vw, 200px); }