/* LabsNinja shared visual system: subtle motion, refined hierarchy.
 * All animations are pure CSS so the strict CSP (script-src 'self') is preserved.
 * Respects prefers-reduced-motion: animations are reset to 0s for users who ask.
 */

/* ─── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Spacing rhythm — consistent across pages */
  --ln-space-1: 4px;
  --ln-space-2: 8px;
  --ln-space-3: 12px;
  --ln-space-4: 16px;
  --ln-space-5: 24px;
  --ln-space-6: 32px;
  --ln-space-7: 48px;

  /* Type scale */
  --ln-text-xs: 0.72rem;
  --ln-text-sm: 0.82rem;
  --ln-text-base: 0.92rem;
  --ln-text-lg: 1.05rem;
  --ln-text-xl: 1.25rem;
  --ln-text-2xl: 1.55rem;

  /* Motion — short and calm, never over 250ms for primary actions */
  --ln-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ln-d-fast: 120ms;
  --ln-d-base: 200ms;
  --ln-d-slow: 320ms;
}

/* ─── Animations ────────────────────────────────────────────────────────── */
@keyframes ln-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ln-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ln-slide-up-soft {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ln-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(54, 217, 176, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(54, 217, 176, 0); }
}
@keyframes ln-pulse-warning {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 194, 111, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(247, 194, 111, 0); }
}
@keyframes ln-shimmer {
  0%   { background-position: -240px 0; }
  100% { background-position: 240px 0; }
}

/* ─── Utility classes ───────────────────────────────────────────────────── */
.ln-fade-in        { animation: ln-fade-in var(--ln-d-base) var(--ln-ease) both; }
.ln-slide-up       { animation: ln-slide-up var(--ln-d-base) var(--ln-ease) both; }
.ln-slide-up-soft  { animation: ln-slide-up-soft var(--ln-d-base) var(--ln-ease) both; }

/* Stagger children: each child fades up slightly later than the last */
.ln-stagger > *           { animation: ln-slide-up var(--ln-d-base) var(--ln-ease) both; }
.ln-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.ln-stagger > *:nth-child(2)  { animation-delay: 40ms; }
.ln-stagger > *:nth-child(3)  { animation-delay: 80ms; }
.ln-stagger > *:nth-child(4)  { animation-delay: 120ms; }
.ln-stagger > *:nth-child(5)  { animation-delay: 160ms; }
.ln-stagger > *:nth-child(6)  { animation-delay: 200ms; }
.ln-stagger > *:nth-child(n+7){ animation-delay: 240ms; }

.ln-pulse-success { animation: ln-pulse-ring 1800ms ease-out infinite; }
.ln-pulse-warn    { animation: ln-pulse-warning 2400ms ease-out infinite; }

/* Status badge dot */
.ln-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.ln-status-dot.ln-ok    { background: #36d9b0; box-shadow: 0 0 0 0 rgba(54,217,176,.45); animation: ln-pulse-ring 2400ms ease-out infinite; }
.ln-status-dot.ln-warn  { background: #f7c26f; }
.ln-status-dot.ln-err   { background: #f76f6f; }
.ln-status-dot.ln-muted { background: #4a5066; }

/* Button micro-interactions */
.ln-press {
  transition: transform var(--ln-d-fast) var(--ln-ease),
              box-shadow var(--ln-d-fast) var(--ln-ease),
              opacity var(--ln-d-fast) var(--ln-ease);
}
.ln-press:hover { transform: translateY(-1px); }
.ln-press:active { transform: translateY(0); }

/* Card hover lift */
.ln-card-lift {
  transition: transform var(--ln-d-base) var(--ln-ease),
              border-color var(--ln-d-base) var(--ln-ease),
              box-shadow var(--ln-d-base) var(--ln-ease);
}
.ln-card-lift:hover {
  transform: translateY(-1px);
  border-color: #4f8ef7;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* "Copied!" feedback flash */
@keyframes ln-flash {
  0%   { background-color: rgba(54,217,176,0); }
  35%  { background-color: rgba(54,217,176,0.18); }
  100% { background-color: rgba(54,217,176,0); }
}
.ln-flash { animation: ln-flash 900ms ease-out; }

/* Skeleton row for loading audit/activity tables */
.ln-skeleton {
  background: linear-gradient(90deg, #1a1e2a 0%, #252a38 50%, #1a1e2a 100%);
  background-size: 480px 100%;
  animation: ln-shimmer 1400ms linear infinite;
  border-radius: 4px;
}

/* Filter chip group */
.ln-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--ln-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(79,142,247,0.10);
  color: #c5d4ff;
  border: 1px solid rgba(79,142,247,0.30);
  text-decoration: none;
  transition: background var(--ln-d-fast) var(--ln-ease), border-color var(--ln-d-fast) var(--ln-ease);
}
.ln-chip:hover { background: rgba(79,142,247,0.18); border-color: rgba(79,142,247,0.55); }
.ln-chip.ln-chip-active { background: rgba(79,142,247,0.28); border-color: #4f8ef7; color: #fff; }
.ln-chip.ln-chip-ok    { background: rgba(54,217,176,0.10); color: #9be9d4; border-color: rgba(54,217,176,0.28); }
.ln-chip.ln-chip-warn  { background: rgba(247,194,111,0.10); color: #f6dca9; border-color: rgba(247,194,111,0.28); }
.ln-chip.ln-chip-err   { background: rgba(247,111,111,0.10); color: #ffb3b3; border-color: rgba(247,111,111,0.28); }
.ln-chip.ln-chip-muted { background: rgba(139,147,168,0.10); color: #b9c0d2; border-color: rgba(139,147,168,0.28); }

/* Detail drawer (expandable row content) */
.ln-drawer { margin-top: 12px; }
.ln-drawer summary {
  cursor: pointer;
  font-size: var(--ln-text-sm);
  color: #8b93a8;
  list-style: none;
}
.ln-drawer summary::-webkit-details-marker { display: none; }
.ln-drawer[open] > summary {
  color: #4f8ef7;
}

/* Empty-state container */
.ln-empty {
  text-align: center;
  padding: var(--ln-space-7) var(--ln-space-5);
  color: #8b93a8;
}
.ln-empty .ln-empty-title {
  font-size: var(--ln-text-lg);
  font-weight: 700;
  color: #e4e8f0;
  margin-bottom: var(--ln-space-2);
}
.ln-empty .ln-empty-body {
  font-size: var(--ln-text-sm);
  max-width: 420px;
  margin: 0 auto var(--ln-space-5);
}

/* ─── Reduced motion: turn animations off cleanly ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ln-pulse-success,
  .ln-pulse-warn,
  .ln-status-dot.ln-ok,
  .ln-skeleton {
    animation: none !important;
  }
}