/* ───────────────────────────────────────────────────────────────────────────
   tt-motion.css — shared restrained motion system (Architecture Decision 26)
   Linked by all 8 pages. SINGLE SOURCE for the page-agnostic motion pass:
   boxed nav tabs, KPI tile hover lift, sparkline chart glow, feed-item pop-out,
   and the feed font sizing. Future motion tweaks = edit this one file.

   Relies on design tokens defined in each page's :root (--accent, --accent-bg,
   --accent-bg-strong, --text-secondary, --text-primary, --bg-tile-hover).

   DELIBERATELY NOT HERE (kept scoped to index.html): the native live-feed
   marquee/carousel (@keyframes tt-marquee, .feed-marquee*) and the
   `min-width: 0` feed-grid fixes. The marquee only exists on index (it reads
   feed_items into the two-column feed grid), and lifting it here would risk
   re-surfacing the ~34000px grid width-blowout on pages whose grid was never
   built for it. Leave marquee + grid fixes in index.html.
   ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════ Boxed nav tabs ═══════════ */
/* Resting: box outline + brighter text so tabs read as clickable.
   Hover: bronze gradient + 2px lift. Active page: bronze fill.
   The old underline ::after is neutralized (scaleX(0)) but kept as a hook. */
.header-nav a {
  font-size: 18px;
  white-space: nowrap;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  position: relative;
  padding: 7px 16px 8px;
  border-radius: 9px;
  border: 0.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
  transition: color .18s ease, background .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.header-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

.header-nav a:hover {
  color: var(--text-primary);
  border-color: rgba(200,150,91,0.45);
  background: linear-gradient(180deg, var(--accent-bg-strong) 0%, var(--accent-bg) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.34), inset 0 0.5px 0 rgba(255,255,255,0.08);
}

.header-nav a:hover::after { transform: scaleX(0); }

.header-nav a.active {
  color: var(--text-primary);
  border-color: rgba(200,150,91,0.55);
  background: linear-gradient(180deg, var(--accent-bg-strong) 0%, var(--accent-bg) 100%);
}

.header-nav a.active::after { transform: scaleX(0); }

/* ═══════════ KPI tile hover lift ═══════════ */
.kpi-card {
  transition: transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease, border-color .26s ease, background .26s ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
  background: var(--bg-tile-hover);
  border-color: rgba(200,150,91,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.32), inset 0 0.5px 0 rgba(255,255,255,0.05);
}

/* ═══════════ Sparkline chart glow ═══════════ */
/* Hue-safe white luminance drop-shadow on the data stroke; intensifies on tile
   hover. Uses the `stroke` attribute path (fill="none"), so currentColor can't
   read it — a soft white glow reads on any line hue. Data line stays clean. */
.kpi-spark { overflow: visible; }
.kpi-spark path[fill="none"] {
  filter: drop-shadow(0 0 2.5px rgba(255,255,255,0.28));
  stroke-width: 1.75;
  transition: filter .26s ease, stroke-width .26s ease;
  vector-effect: non-scaling-stroke;
}
.kpi-card:hover .kpi-spark path[fill="none"] {
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.42));
  stroke-width: 2;
}

/* ═══════════ Feed-item pop-out ═══════════ */
.feed-item {
  border-radius: 8px;
  transition: transform .24s cubic-bezier(.22,.61,.36,1), background .24s ease, box-shadow .24s ease;
}
.feed-item:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.022) 0%, rgba(255,255,255,0) 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.26), inset 0 0.5px 0 rgba(255,255,255,0.05);
}

/* ═══════════ Feed font bumps ═══════════ */
.feed-headline { font-size: 18px; }
.feed-summary { font-size: 14px; }

/* ═══════════ Reduced-motion guard (motion classes) ═══════════ */
/* Marquee's reduced-motion handling stays in index.html alongside the marquee. */
@media (prefers-reduced-motion: reduce) {
  .kpi-card, .feed-item, .header-nav a { transition: none; }
  .kpi-card:hover, .feed-item:hover, .header-nav a:hover { transform: none; }
}