/* ==========================================================================
   NexiBook DS — Motion primitives (P5)
   Page transitions, micro-animations, skeleton loaders, gold-glow moments.
   Respects prefers-reduced-motion via existing admin_palette.css reset.
   ========================================================================== */

/* Page content fade-in on load (additive — applies to .nb-page-fade) */
@keyframes nb-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nb-page-fade {
  animation: nb-fade-in 0.35s var(--nb-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)) both;
}

/* Stagger utility for card lists */
.nb-stagger > * {
  animation: nb-fade-in 0.35s var(--nb-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)) both;
}
.nb-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.nb-stagger > *:nth-child(2) { animation-delay: 0.06s; }
.nb-stagger > *:nth-child(3) { animation-delay: 0.10s; }
.nb-stagger > *:nth-child(4) { animation-delay: 0.14s; }
.nb-stagger > *:nth-child(5) { animation-delay: 0.18s; }
.nb-stagger > *:nth-child(6) { animation-delay: 0.22s; }
.nb-stagger > *:nth-child(n+7) { animation-delay: 0.26s; }

/* Gold glow pulse — for hero moments / important CTAs / success states */
@keyframes nb-gold-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.45); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 215, 0, 0); }
}
.nb-gold-pulse {
  animation: nb-gold-pulse 1.6s ease-out infinite;
}

/* Number counter fade — pair with JS that animates text value */
.nb-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s var(--nb-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}
.nb-counter.is-counting {
  color: var(--nb-gold, #FFD700);
}

/* Tap feedback — adds subtle scale-down on press (works with :active) */
.nb-tap-feedback {
  transition: transform 0.08s var(--nb-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}
.nb-tap-feedback:active {
  transform: scale(0.97);
}

/* Skeleton shimmer loader — use .nb-skeleton + inline w/h, no actual content */
@keyframes nb-skeleton-shimmer {
  0%   { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}
.nb-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 215, 0, 0.08) 40%,
    rgba(255, 255, 255, 0.04) 80%
  );
  background-size: 960px 100%;
  border-radius: 8px;
  animation: nb-skeleton-shimmer 1.4s linear infinite;
  min-height: 14px;
}
.nb-skeleton--text { height: 14px; margin: 6px 0; }
.nb-skeleton--title { height: 22px; margin: 10px 0; width: 60%; }
.nb-skeleton--card { height: 84px; margin: 8px 0; border-radius: 14px; }
.nb-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }

/* Slide-in panel (right-to-left) — drawers, sidebars, modals */
@keyframes nb-slide-in-right {
  from { transform: translateX(100%); opacity: 0.5; }
  to   { transform: translateX(0); opacity: 1; }
}
.nb-slide-in-right { animation: nb-slide-in-right 0.28s var(--nb-ease-out, cubic-bezier(0.34, 1.56, 0.64, 1)) both; }

/* Slide-up from bottom (for toasts / reminders) */
@keyframes nb-slide-up {
  from { transform: translateY(32px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.nb-slide-up { animation: nb-slide-up 0.32s var(--nb-ease-out, cubic-bezier(0.34, 1.56, 0.64, 1)) both; }

/* Success check animation — draw SVG path
   Usage: <svg class="nb-check-anim"><path d="..."/></svg> with path dash props inline */
@keyframes nb-check-draw {
  from { stroke-dashoffset: 40; }
  to   { stroke-dashoffset: 0; }
}
.nb-check-anim path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: nb-check-draw 0.6s ease-out 0.15s forwards;
}

/* Reduced-motion: kill all the above */
@media (prefers-reduced-motion: reduce) {
  .nb-page-fade,
  .nb-stagger > *,
  .nb-gold-pulse,
  .nb-skeleton,
  .nb-slide-in-right,
  .nb-slide-up,
  .nb-check-anim path {
    animation: none !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}