/* ============================================================
   Club Crux Dashboard — Animations & loading states
   Pairs with theme.css and animations.js
   ============================================================ */

/* ── Shimmer skeleton placeholders ─────────────────────────── */
.skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--surface2) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    var(--surface2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
  border-radius: 4px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
  min-width: 40px;
}
@keyframes skeleton-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* Sized variants for typical placements */
.skeleton-kpi      { height: 28px; width: 90px; }
.skeleton-delta    { height: 12px; width: 110px; margin-top: 6px; }
.skeleton-mini     { height: 22px; width: 60px; }
.skeleton-line     { height: 12px; width: 100%; margin: 6px 0; }
.skeleton-line.w70 { width: 70%; }
.skeleton-line.w50 { width: 50%; }
.skeleton-chart    { height: 180px; width: 100%; border-radius: 8px; }

/* ── KPI count-up support ──────────────────────────────────── */
.count-up {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ── Card hover lift + gradient accent ─────────────────────── */
.card {
  position: relative;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sand), var(--navy));
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  opacity: 0;
  transition: opacity 0.18s ease-out;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(200, 175, 158, 0.6);
}
.card:hover::before {
  opacity: 1;
}

/* Opt-out for cards we don't want lifting (e.g. nested cards) */
.card.no-hover-lift:hover {
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: var(--border);
}
.card.no-hover-lift::before { display: none; }

/* ── Nav-item active slide ─────────────────────────────────── */
.nav-item {
  position: relative;
  overflow: hidden;
}
.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sand);
  transform: translateX(-3px);
  transition: transform 0.15s ease-out;
}
.nav-active::before { transform: translateX(0); }

/* ── Chart container fade-in ───────────────────────────────── */
.chart-fade-in {
  animation: chart-fade-in 0.5s ease-out;
}
@keyframes chart-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bar entry animation for custom HTML charts ────────────── */
.bar-grow {
  animation: bar-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: bottom;
  transform: scaleY(0);
}
@keyframes bar-grow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ── SVG bar entry animation ───────────────────────────────── */
/* For inline SVG rects — needs transform-box so transform-origin
   resolves to the bar's own bounding box, not the SVG view-box. */
.svg-bar-grow {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: bar-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* SVG path fade-in for line overlays (net profit line) */
.svg-line-fade {
  animation: svg-line-fade 0.6s ease-out 0.4s backwards;
}
@keyframes svg-line-fade {
  from { opacity: 0; stroke-dashoffset: 800; }
  to   { opacity: 0.8; stroke-dashoffset: 0; }
}

.svg-dot-fade {
  animation: svg-dot-fade 0.4s ease-out backwards;
}
@keyframes svg-dot-fade {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: var(--dot-opacity, 0.9); transform: scale(1); }
}

/* ── Reduced motion: collapse everything to instant ────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton {
    animation: none !important;
    background: var(--surface2) !important;
  }
}