/* ============================================================================
   نبغة — طبقة حركة لوحة الطالب (app dashboard motion layer).
   ADDITIVE ONLY: لا يعيد تعريف أي token؛ يستخدم متغيّرات styles.css القائمة.
   كل الحركة transform/opacity (60fps) ومحاطة بـ prefers-reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- staggered, flash-free view entrance (added by nabgha-motion.js) ---- */
  .ds-anim-in { animation: nb-in .42s cubic-bezier(0,0,.2,1) both; }
  @keyframes nb-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* ---- micro-interactions layered onto existing components ---- */
  .card.click { transition: transform .18s cubic-bezier(0,0,.2,1), box-shadow .22s, border-color .22s; }
  .card.click:hover { transform: translateY(-3px); }
  .card.click:active { transform: scale(.985); }
  .btn { transition: transform .12s cubic-bezier(0,0,.2,1), filter .2s, box-shadow .2s; }
  .btn:active { transform: translateY(0) scale(.97); }
  .nav-link { transition: background .2s, color .2s, transform .12s; }
  .nav-link:active { transform: scale(.99); }
  .pill { transition: transform .15s ease, box-shadow .2s; }
  .pill:hover { transform: translateY(-1px); }
  .lesson { transition: background .18s, transform .12s; }
  .lesson:hover { transform: translateX(-2px); }

  /* animated active-nav indicator */
  .nav-link.active::after {
    content: ""; position: absolute; inset-inline-start: 6px; top: 50%;
    width: 4px; height: 0; border-radius: 999px; background: var(--grad, linear-gradient(120deg,#2b4cc8,#7a2fb0));
    transform: translateY(-50%); animation: nb-navdot .35s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  @keyframes nb-navdot { to { height: 56%; } }

  /* topbar stat pills — gentle pop when values refresh */
  .pill.points, .pill.streak { animation: nb-pop .4s cubic-bezier(.34,1.56,.64,1); }
  @keyframes nb-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
}

/* ---- skeleton shimmer loader (used by loading()) ---- */
.sk { position: relative; overflow: hidden; background: var(--mist, #e9edf6); border-radius: 12px; }
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: nb-shimmer 1.4s infinite;
}
:root[data-theme="dark"] .sk, html.dark .sk { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .sk::after, html.dark .sk::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
}
@keyframes nb-shimmer { 100% { transform: translateX(100%); } }

.sk-load { padding: 4px 0; }
.sk-load .sk + .sk { margin-top: 14px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.sk-card { border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  .ds-anim-in { animation: none; }
  .sk::after { animation: none; }
  .nav-link.active::after { animation: none; height: 56%; }
  .pill.points, .pill.streak { animation: none; }
}

/* ============================================================================
   نبغة — Premium motion tier (2026). ADDITIVE. Upgrades the feel to a spring
   ease-out curve and adds purposeful micro-interactions + celebration/XP/shake
   utilities driven by nabgha-motion.js. All transform/opacity (60fps), and every
   perpetual/motion effect is disabled under prefers-reduced-motion.
   Declined on purpose (perf/battery/decoration): 3D globe, mascot character,
   sound, perpetual aurora/particle fields, magnetic-cursor tracking.
   ========================================================================== */
:root {
  --nb-spring: cubic-bezier(.22, 1, .36, 1); /* premium ease-out "spring" */
  --nb-dur-1: .18s; --nb-dur-2: .26s; --nb-dur-3: .34s;
}

@media (prefers-reduced-motion: no-preference) {

  /* premium card hover: lift + subtle scale + deeper shadow + brand-glow border */
  .card.click { transition: transform var(--nb-dur-2) var(--nb-spring), box-shadow var(--nb-dur-2) var(--nb-spring), border-color var(--nb-dur-2) var(--nb-spring); }
  .card.click:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 22px 44px -18px rgba(31, 37, 64, .32); border-color: rgba(43, 76, 200, .30); }
  .card.click:active { transform: translateY(-2px) scale(.995); }
  :root[data-theme="dark"] .card.click:hover, html.dark .card.click:hover { box-shadow: 0 22px 46px -18px rgba(0, 0, 0, .6); border-color: rgba(122, 47, 176, .42); }

  /* sidebar/nav icon micro-interaction — subtle magnetic pull + scale */
  .nav-link .ic, .nav-link svg { transition: transform var(--nb-dur-2) var(--nb-spring); }
  .nav-link:hover .ic, .nav-link:hover svg { transform: translateX(-3px) scale(1.08); }

  /* buttons — premium hover rise + spring press */
  .btn { transition: transform var(--nb-dur-1) var(--nb-spring), filter .2s, box-shadow .2s; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(.96); }

  /* progress bar — a light sheen travels across the fill (subtle, GPU) */
  .ds-bar > i { position: relative; overflow: hidden; }
  .ds-bar > i::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: nb-barsheen 5s ease-in-out 1.2s infinite;
  }
  @keyframes nb-barsheen { 0% { transform: translateX(-120%); } 24% { transform: translateX(120%); } 100% { transform: translateX(120%); } }

  /* breathing — AI / brain / mascot icon (add data-breathe or class .nb-breathe) */
  .nb-breathe { animation: nb-breathe 3.2s ease-in-out infinite; transform-origin: center; }
  @keyframes nb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

  /* error shake — one gentle pass, 4px max (no aggressive vibration) */
  .nb-shake { animation: nb-shake .4s cubic-bezier(.36, .07, .19, .97); }
  @keyframes nb-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }

  /* success pulse */
  .nb-pulse { animation: nb-pulse .5s var(--nb-spring); }
  @keyframes nb-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

  /* mobile — soften transforms (~40%) for battery/comfort */
  @media (max-width: 640px) {
    .card.click:hover { transform: translateY(-3px) scale(1.008); }
    .nav-link:hover .ic, .nav-link:hover svg { transform: translateX(-2px) scale(1.05); }
  }
}

/* glassmorphism — opt-in utility (backdrop-filter has a cost; apply deliberately) */
.nb-glass {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .5);
}
:root[data-theme="dark"] .nb-glass, html.dark .nb-glass { background: rgba(22, 26, 45, .55); border-color: rgba(255, 255, 255, .12); }

/* XP fly + celebration particles (elements created by nabgha-motion.js) */
.nb-xp { position: fixed; z-index: 9999; pointer-events: none; font-weight: 800; font-size: 15px; color: var(--teal-700, #157a6e); text-shadow: 0 1px 2px rgba(255, 255, 255, .6); }
.nb-particle { position: fixed; z-index: 9998; pointer-events: none; width: 9px; height: 9px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ds-bar > i::after { animation: none; }
  .nb-breathe, .nb-shake, .nb-pulse { animation: none; }
}

/* ============================================================================
   نبغة — Courses discovery ("خانة الكورسات" premium experience). ADDITIVE.
   Netflix-style subject rails + search/filter + real-ecosystem hub. Fed by real
   /courses data — no fabricated tiles. Rails scroll inside themselves (the page
   body never scrolls sideways).
   ========================================================================== */
.cx-search { display: flex; align-items: center; gap: 8px; background: var(--surface, #fff); border: 1px solid var(--mist, #e6e9f2); border-radius: 12px; padding: 10px 13px; margin: 6px 0 12px; }
.cx-search input { border: 0; outline: none; background: none; font: inherit; color: var(--ink, #172033); width: 100%; }
.cx-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cx-chip { border: 1px solid var(--mist, #e6e9f2); background: var(--surface, #fff); color: var(--ink-soft, #5b6478); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: transform .15s cubic-bezier(.22, 1, .36, 1), background .2s, color .2s, border-color .2s; }
.cx-chip:hover { transform: translateY(-1px); }
.cx-chip.on { background: linear-gradient(120deg, var(--brand, #2b4cc8), var(--brand2, #7a2fb0)); color: #fff; border-color: transparent; }
.cx-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 2px 12px; }
.cx-rail-head h2 { font-size: clamp(17px, 2.4vw, 21px); margin: 0; }
.cx-rail-head .muted { color: var(--ink-soft, #5b6478); font-size: 13px; white-space: nowrap; }
.cx-rail { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.cx-rail::-webkit-scrollbar { height: 8px; }
.cx-rail::-webkit-scrollbar-thumb { background: var(--mist, #e6e9f2); border-radius: 999px; }
.cx-card { flex: 0 0 auto; width: 210px; scroll-snap-align: start; background: var(--surface, #fff); border: 1px solid var(--mist, #e6e9f2); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 6px 18px -12px rgba(20, 29, 51, .25); transition: transform .26s cubic-bezier(.22, 1, .36, 1), box-shadow .26s, border-color .26s; }
.cx-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(20, 29, 51, .34); border-color: rgba(43, 76, 200, .3); }
.cx-cover { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: flex-end; padding: 10px; }
.cx-cover .cx-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .2)); }
.cx-cover .chip { position: relative; z-index: 1; background: rgba(255, 255, 255, .92); color: #172033; font-weight: 800; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; }
.cx-cbody { padding: 11px 12px 13px; }
.cx-cbody h3 { font-size: 14.5px; margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-meta { display: flex; align-items: center; gap: 6px; color: var(--ink-soft, #5b6478); font-size: 12px; margin-top: 7px; }
.cx-free { color: #0d7a44; font-weight: 800; }
.cx-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 6px; }
.cx-hub-item { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--mist, #e6e9f2); background: var(--surface, #fff); text-decoration: none; color: inherit; font-weight: 700; font-size: 14px; transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s, border-color .2s; }
.cx-hub-item:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(20, 29, 51, .3); border-color: rgba(43, 76, 200, .28); }
.cx-hub-emoji { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; background: var(--soft, #eef1fb); flex: none; }
@media (max-width: 640px) { .cx-card { width: 168px; } }
@media (prefers-reduced-motion: reduce) { .cx-card, .cx-chip, .cx-hub-item { transition: none; } }