/* Motion + depth layer.
   Patterns borrowed from the reference libraries (kinetic reveal, stagger,
   magnetic hover, shimmer skeletons) but written as dependency-free CSS so the
   vanilla stack stays vanilla. Everything here degrades to "no movement" under
   prefers-reduced-motion: the layout never depends on an animation finishing. */

:root {
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;
  --shadow-1: 0 1px 2px rgba(0,0,0,.30);
  --shadow-2: 0 6px 18px -6px rgba(0,0,0,.45);
  --shadow-3: 0 18px 40px -18px rgba(0,0,0,.60);
  --glow: 0 0 0 1px rgba(79,230,154,.22), 0 8px 30px -12px rgba(79,230,154,.30);
}

/* ---------- entrance: reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Stagger children without needing per-element JS delays. */
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 55ms); }

/* ---------- interactive affordance ---------- */
.card, .metric-card {
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.card:hover, .metric-card:hover {
  transform: translateY(-3px);
  border-color: #2f5544;
  box-shadow: var(--shadow-2);
}

button, .nav a, tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
button.primary:hover { transform: translateY(-1px); box-shadow: var(--glow); }
button:active { transform: translateY(0) scale(.985); }
tbody tr:hover { background: #0e1c17; }

/* Focus ring is never animated away - keyboard users always see it. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Underline that grows from the left, a cheap version of the kinetic nav
   underline used by the reference sites. */
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- loading shimmer ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #0d1a15;
  border-radius: 8px;
  min-height: 14px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(79,230,154,.10), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- numeric emphasis ---------- */
.stat-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ---------- reduced motion: hard stop ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .card:hover, .metric-card:hover, button.primary:hover { transform: none; }
  .skeleton::after { animation: none; }
}

/* ---------- dossier: trend chart ---------- */
.trend-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:10px 0 6px}
.trend-head[hidden]{display:none}
.trend-tabs{display:flex;flex-wrap:wrap;gap:6px}
.trend-tabs button{padding:5px 11px;font-size:12px;border-radius:999px;line-height:1.4}
.trend-tabs button.is-active{border-color:var(--accent);color:var(--accent);background:#0f2018}
.trend-read{margin:0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.trend-read[data-dir="up"]{color:var(--accent)}
.trend-read[data-dir="down"]{color:var(--hazard)}
.trend-canvas{display:block;width:100%;height:150px;margin:4px 0 14px;border:1px solid var(--line);border-radius:var(--radius);background:#07120e}
.trend-canvas[hidden]{display:none}

/* ---------- dossier: holder distribution ---------- */
.dist{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:9px}
.dist[hidden]{display:none}
.dist-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-bottom:4px}
.dist-track{height:7px;border-radius:999px;background:#0e1c17;border:1px solid var(--line);overflow:hidden}
.dist-track span{display:block;height:100%;background:linear-gradient(90deg,#2f8f63,var(--accent));border-radius:999px;transition:width var(--dur-slow) var(--ease-out)}
@media (prefers-reduced-motion: reduce){.dist-track span{transition:none}}