/* ==========================================================================
   CrowID FX — depth, light and motion over the command-center tokens.
   Loaded after the app's own styles; adds no new colours, only reuses the
   tokens (so light/dark and every theme switch keep working).
   Ambient identity mesh behind glass panels, staged screen entrances,
   charts that draw themselves, cursor light on panels, 4K scaling.
   All motion is removed by the app's prefers-reduced-motion rule.
   ========================================================================== */
:root {
  --fx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fx-glass: color-mix(in srgb, var(--surface) 80%, transparent);
  --fx-glow: color-mix(in srgb, var(--signal) 55%, transparent);
}

/* ---------- 4K and beyond ---------- */
@media (min-width: 3800px) { html { font-size: 175%; } }
@media (min-width: 5000px) { html { font-size: 225%; } }

/* ---------- ambient backdrop ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 70%),
    radial-gradient(50rem 36rem at 105% 110%, color-mix(in srgb, var(--copper) 9%, transparent), transparent 70%);
}
.fx-mesh { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.app { position: relative; z-index: 1; }
::selection { background: var(--signal-tint); color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* ---------- glass ---------- */
.panel, .kpis { background: var(--fx-glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); position: relative; transition: border-color 0.3s, box-shadow 0.3s; }
.panel:hover, .kpis:hover { border-color: var(--line-strong); box-shadow: 0 0.75rem 2.5rem -1.25rem rgba(0, 0, 0, 0.45); }
.t th { background: color-mix(in srgb, var(--surface) 94%, transparent); }
.rail { background: color-mix(in srgb, var(--surface) 76%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); }
.top { background: color-mix(in srgb, var(--ground) 70%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); }
@media (max-width: 980px) { .rail { background: var(--surface); } }

/* cursor light: a soft ring of signal colour follows the pointer around a panel's edge */
.panel::before, .kpis::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: radial-gradient(22rem circle at var(--mx, -999px) var(--my, -999px), var(--fx-glow), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 0.35s;
}
.panel:hover::before, .kpis:hover::before { opacity: 1; }

/* ---------- screen entrance ---------- */
.fx-in { animation: fx-rise 0.75s var(--fx-ease) both; animation-delay: calc(var(--fx-i, 0) * 55ms); }
@keyframes fx-rise { from { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.page-head h1 { background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, var(--signal) 50%, var(--ink) 60%, var(--ink) 100%) 0 0 / 250% 100% text; -webkit-background-clip: text; color: transparent; animation: fx-sheen 2.4s 0.3s var(--fx-ease) both; }
@keyframes fx-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- navigation ---------- */
.nav a { transition: background var(--dur), color var(--dur), transform 0.25s var(--fx-ease); }
.nav a:hover { transform: translateX(2px); }
.nav a[aria-current="page"]::before { animation: fx-grow-y 0.45s var(--fx-ease); box-shadow: 0 0 12px var(--signal); }
.nav a[aria-current="page"] svg { stroke: var(--signal); filter: drop-shadow(0 0 5px var(--fx-glow)); }
@keyframes fx-grow-y { from { transform: scaleY(0); } }
.brand svg { overflow: visible; }
.brand .mark-b { transform-origin: 17.5px 10.75px; transition: transform 0.6s var(--fx-ease); }
.brand:hover .mark-b { transform: rotate(360deg); }
.brand b { transition: letter-spacing 0.4s var(--fx-ease); }
.brand:hover b { letter-spacing: 0.06em; }

/* ---------- KPIs ---------- */
.kpi { position: relative; transition: background 0.25s; }
.kpi.link { grid-template-columns: minmax(0, 1fr); } /* base .link (Trail timeline) grid was leaking into clickable KPIs */
.kpi::after { content: ""; position: absolute; left: var(--s-4); right: var(--s-4); top: 0; height: 2px; background: var(--signal); box-shadow: 0 0 10px var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--fx-ease); }
.kpi:hover::after { transform: scaleX(1); }
.kpi .n { text-shadow: 0 0 1.5rem color-mix(in srgb, var(--signal) 22%, transparent); }

/* ---------- controls ---------- */
.btn { transition: background var(--dur), border-color var(--dur), transform 0.15s var(--fx-ease), box-shadow 0.25s; }
.btn:active { transform: scale(0.97); }
.btn.primary { position: relative; overflow: hidden; box-shadow: 0 0 0 0 var(--fx-glow); }
.btn.primary:hover { box-shadow: 0 0 1.25rem -0.25rem var(--fx-glow); }
.btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); }
.btn.primary:hover::after { transform: translateX(120%); transition: transform 0.7s var(--fx-ease); }
.btn.needs { animation: fx-halo 2.6s ease-out infinite; }
@keyframes fx-halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.6rem transparent; } }
.chip.needs::before { animation: fx-blink 1.6s ease-in-out infinite; }
@keyframes fx-blink { 50% { opacity: 0.35; } }
.search { transition: border-color 0.2s, box-shadow 0.3s, color 0.2s; }
.search:hover { box-shadow: 0 0 0 3px var(--signal-tint); }
.tab { transition: color 0.2s, border-color 0.3s var(--fx-ease); }
.seg button { transition: background 0.2s, color 0.2s; }
.t tbody tr { transition: background 0.18s; }

/* ---------- charts and graphs ---------- */
.score .bar i, .hbar .tr i, .ttl i { transform-origin: left; }
.chart rect, .chart .fx-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.ring .val { filter: drop-shadow(0 0 6px var(--fx-glow)); }
.graph .edge.hot { stroke-dasharray: 6 8; animation: fx-flow 1.1s linear infinite; filter: drop-shadow(0 0 3px var(--fx-glow)); }
.graph .edge.warn { animation: fx-flow 2.2s linear infinite; }
.graph .sk.on { stroke-dasharray: 8 6; animation: fx-flow 1.4s linear infinite; }
@keyframes fx-flow { to { stroke-dashoffset: -28; } }
.graph .node rect, .graph .node circle { transition: stroke 0.2s, fill 0.2s; }
.graph .node.sel rect { filter: drop-shadow(0 0 8px var(--fx-glow)); }
.graph .node.needs-n rect { animation: fx-node-alert 1.8s ease-in-out infinite; }
@keyframes fx-node-alert { 50% { stroke-width: 3.5; } }
.cov i, .days i { transition: transform 0.2s var(--fx-ease); }
.cov i:hover { transform: scale(1.18); }
.step::before { box-shadow: 0 0 0 0 transparent; }
.step.ok::before { box-shadow: 0 0 10px var(--ok); }
.step.blocked::before { box-shadow: 0 0 10px var(--amber); }

/* live stream: each event slides in and flashes once */
.ev { animation: fx-ev 0.6s var(--fx-ease) both; }
@keyframes fx-ev { from { opacity: 0; transform: translateX(-8px); background: var(--signal-tint); } 40% { background: var(--signal-tint); } to { opacity: 1; transform: none; } }
.ev .k.ok, .ev .k.signal { box-shadow: 0 0 6px currentColor; }

/* ---------- overlays ---------- */
.scrim { animation: fx-fade 0.25s ease-out both; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drawer { animation: fx-drawer 0.4s var(--fx-ease) both; }
.modal { animation: fx-modal 0.28s var(--fx-ease) both; }
.toast { animation: fx-toast 0.35s var(--fx-ease) both; }
@keyframes fx-fade { from { opacity: 0; } }
@keyframes fx-drawer { from { opacity: 0; transform: translateX(2rem); } }
@keyframes fx-modal { from { opacity: 0; transform: translateX(-50%) translateY(-0.75rem) scale(0.98); } to { transform: translateX(-50%); } }
@keyframes fx-toast { from { opacity: 0; transform: translate(-50%, 0.75rem); } to { transform: translateX(-50%); } }

/* ---------- boot ---------- */
.fx-boot { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 1.25rem; background: var(--ground); transition: opacity 0.7s var(--fx-ease), visibility 0.7s; }
.fx-boot.out { opacity: 0; visibility: hidden; }
.fx-boot svg { width: 5rem; height: 5rem; overflow: visible; }
.fx-boot .a { fill: transparent; stroke: var(--ink); stroke-width: 0.5; stroke-dasharray: 80; stroke-dashoffset: 80; animation: fx-draw 1s var(--fx-ease) forwards, fx-fill 0.5s 0.8s forwards; }
.fx-boot .b { fill: var(--signal); opacity: 0; transform-origin: 17.5px 10.75px; animation: fx-dart 0.7s 0.65s var(--fx-ease) forwards; filter: drop-shadow(0 0 4px var(--signal)); }
.fx-boot .w { font: 700 2rem/1 var(--font-display); font-stretch: 82%; animation: fx-track 1.1s 0.2s var(--fx-ease) both; }
.fx-boot .bar { width: 12rem; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.fx-boot .bar i { display: block; height: 100%; background: var(--signal); box-shadow: 0 0 10px var(--signal); transform-origin: left; animation: fx-load 1.3s var(--fx-ease) both; }
.fx-boot .s { font: 500 var(--fs-1)/1 var(--font-mono); letter-spacing: 0.24em; color: var(--muted); animation: fx-fade 0.8s 0.5s both; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-fill { to { fill: var(--ink); } }
@keyframes fx-dart { from { opacity: 0; transform: translate(-6px, 6px) scale(0.4) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes fx-track { from { letter-spacing: 0.9em; opacity: 0; } to { letter-spacing: 0.04em; opacity: 1; } }
@keyframes fx-load { from { transform: scaleX(0); } }