/* ════════════════════════════════════════════════════════════════════
   Nexo Skeleton — placeholderهای بارگذاری مشترک (Shared loading skeletons)
   منبع واحد، سراسری در layout.tsx لود می‌شود.

   دو بخش:
   1) primitive قابل‌استفاده‌ی `.nexo-skel` — هر بلوک/خطِ shimmer.
   2) skeletonهای `:empty` برای mount pointهای خالیِ صفحات legacy. این
      کانتینرها در HTMLِ اولیه خالی‌اند و اسکریپتِ afterInteractive آن‌ها را
      با `innerHTML=` پر می‌کند؛ به‌محضِ پر شدن، `:empty` دیگر match نمی‌کند و
      skeleton **خودکار محو می‌شود** — بدون JS، بدون پاکسازی.

   رنگ‌ها همیشه از CSS variables در tokens.css. با reduce-motion ساکن می‌شود.
   throbberهای موجود (استودیو، دکمه‌ی پرداخت) دست‌نخورده می‌مانند.
   ════════════════════════════════════════════════════════════════════ */

@keyframes nexoShimmer { to { background-position-inline-start: -200%; } }
@keyframes nexoShimmerFallback { to { background-position: -200% 0; } }

/* Shared shimmer surface. */
.nexo-skel,
#siteHeaderRoot:empty,
#siteFooterRoot:empty,
.catx-side:empty,
.catx-hero:empty,
.catx-block:empty,
#accountSide:empty,
#ordersList:empty {
  background-color: var(--color-neutral-100);
  background-image: linear-gradient(
    110deg,
    var(--color-neutral-100) 8%,
    var(--color-neutral-200) 20%,
    var(--color-neutral-100) 34%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: nexoShimmerFallback 1.5s linear infinite;
}

/* primitive: small blocks / lines. Height & width set by the caller. */
.nexo-skel {
  display: block;
  border-radius: var(--radius-sm);
}

/* ───── Empty mount-point skeletons (auto-clear on render via :empty) ───── */

/* Site header — reserve bar height to cut layout shift while site-header.js runs. */
#siteHeaderRoot:empty { display: block; block-size: 64px; }

/* Site footer. */
#siteFooterRoot:empty { display: block; min-block-size: 240px; }

/* Catalog: above-the-fold sections only — below-the-fold reveal on scroll, so
   skeletoning them would just add gray noise. */
.catx-side:empty  { display: block; min-block-size: 420px; border-radius: var(--radius-xl); }
.catx-hero:empty  { display: block; min-block-size: 300px; border-radius: var(--radius-xl); }
.catx-block:empty { display: block; min-block-size: 150px; border-radius: var(--radius-lg); margin-block: var(--space-6); }

/* Account: sidebar + the orders list. */
#accountSide:empty { display: block; min-block-size: 360px; border-radius: var(--radius-xl); }
#ordersList:empty  { display: block; min-block-size: 320px; border-radius: var(--radius-lg); }

/* ───── Reduced motion — hold a calm static tone, no shimmer ───── */
@media (prefers-reduced-motion: reduce) {
  .nexo-skel,
  #siteHeaderRoot:empty,
  #siteFooterRoot:empty,
  .catx-side:empty,
  .catx-hero:empty,
  .catx-block:empty,
  #accountSide:empty,
  #ordersList:empty {
    animation: none;
    background-image: none;
    background-color: var(--color-neutral-100);
  }
}