/* ═══════════════════════════════════════════════════════════════════════════
   FP3-DYNAMICS · CSS · v1.0
   HUD chart shared styles — Palantir/Oxford intelligence aesthetic
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── HUD CONTAINER ──────────────────────────────────────────────────────── */
.fp3-hud {
  position: relative;
  background: rgba(8,8,10,.55);
  border: 1px solid rgba(201,169,97,.18);
  padding: 26px 24px 22px;
  margin: 32px 0;
  overflow: hidden;
}
.fp3-hud::before {
  /* scan-line overlay */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(255,255,255,.012) 3px, rgba(255,255,255,.012) 4px
  );
  pointer-events: none;
  z-index: 0;
}
.fp3-hud > * { position: relative; z-index: 1; }

/* corner brackets */
.fp3-hud-corner {
  position: absolute; width: 14px; height: 14px;
  border-color: rgba(201,169,97,.55); border-style: solid; border-width: 0;
  z-index: 2; pointer-events: none;
}
.fp3-hud-corner.tl { top: 8px;    left: 8px;    border-top-width: 1px; border-left-width: 1px; }
.fp3-hud-corner.tr { top: 8px;    right: 8px;   border-top-width: 1px; border-right-width: 1px; }
.fp3-hud-corner.bl { bottom: 8px; left: 8px;    border-bottom-width: 1px; border-left-width: 1px; }
.fp3-hud-corner.br { bottom: 8px; right: 8px;   border-bottom-width: 1px; border-right-width: 1px; }

/* ─── HUD HEADER ─────────────────────────────────────────────────────────── */
.fp3-hud-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  font-family: 'IBM Plex Mono','JetBrains Mono','Archivo',monospace;
  font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
  color: #C5A258; font-weight: 700;
}
.fp3-hud-head .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #e6c97a; box-shadow: 0 0 8px rgba(230,201,122,.7);
  animation: fp3Pulse 2.2s ease-in-out infinite;
}
.fp3-hud-head .meta {
  margin-left: auto; color: #5f5a52; font-weight: 400; letter-spacing: .22em;
}
.fp3-hud-title {
  font-family: 'Fraunces','Cormorant Garamond',Georgia,serif;
  font-weight: 400; font-size: 22px; color: #f5f0e6;
  margin: 0 0 4px; line-height: 1.2;
}
.fp3-hud-sub {
  font-family: 'Crimson Pro','Cormorant Garamond',Georgia,serif;
  font-style: italic; color: #9a9388; font-size: 13.5px;
  margin: 0 0 22px;
}

/* ─── HUD LEGEND ─────────────────────────────────────────────────────────── */
.fp3-hud-legend {
  display: flex; flex-wrap: wrap; gap: 16px 22px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(201,169,97,.18);
  font-family: 'IBM Plex Mono','JetBrains Mono',monospace;
  font-size: 9px; letter-spacing: .18em; color: #9a9388;
  text-transform: uppercase;
}
.fp3-hud-legend span { display: inline-flex; align-items: center; gap: 7px; }
.fp3-hud-legend .sw {
  display: inline-block; width: 11px; height: 11px;
  border: 1px solid rgba(245,240,230,.45);
}
.fp3-hud-legend .sw.line {
  height: 2px; width: 18px; border: none;
}
.fp3-hud-legend .sw.dot { border-radius: 50%; }
.fp3-hud-legend .sw.dia { transform: rotate(45deg); }
.fp3-hud-legend b { color: #f5f0e6; font-weight: 600; letter-spacing: .12em; }

/* ─── HUD STAT TILES ─────────────────────────────────────────────────────── */
.fp3-hud-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin: 18px 0 8px;
}
.fp3-hud-stat {
  background: rgba(4,4,5,.55);
  border: 1px solid rgba(201,169,97,.15);
  padding: 12px 14px 13px;
  position: relative;
}
.fp3-hud-stat::after {
  content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 1px;
  background: #C5A258;
}
.fp3-hud-stat .lbl {
  font-family: 'IBM Plex Mono','JetBrains Mono',monospace;
  font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase;
  color: #8a7139; margin-bottom: 6px;
}
.fp3-hud-stat .val {
  font-family: 'Fraunces','Cormorant Garamond',Georgia,serif;
  font-size: 26px; line-height: 1; color: #f5f0e6; font-weight: 400;
}
.fp3-hud-stat .val .unit {
  font-size: 11px; color: #C5A258; letter-spacing: .1em;
  margin-left: 3px; font-family: 'IBM Plex Mono',monospace;
}
.fp3-hud-stat .delta {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px; margin-top: 6px; letter-spacing: .08em;
}
.fp3-hud-stat .delta.up   { color: #7fb069; }
.fp3-hud-stat .delta.down { color: #e63946; }
.fp3-hud-stat .delta.flat { color: #c9c2b5; }

/* ─── ENTRY ANIMATION via [data-fp3-animate] ─────────────────────────────── */
[data-fp3-animate] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s ease-out, transform .9s ease-out;
}
[data-fp3-animate].fp3-on {
  opacity: 1; transform: translateY(0);
}
[data-fp3-animate="stagger"] > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
[data-fp3-animate="stagger"].fp3-on > *:nth-child(1) { transition-delay: .05s; opacity:1; transform:none; }
[data-fp3-animate="stagger"].fp3-on > *:nth-child(2) { transition-delay: .18s; opacity:1; transform:none; }
[data-fp3-animate="stagger"].fp3-on > *:nth-child(3) { transition-delay: .31s; opacity:1; transform:none; }
[data-fp3-animate="stagger"].fp3-on > *:nth-child(4) { transition-delay: .44s; opacity:1; transform:none; }
[data-fp3-animate="stagger"].fp3-on > *:nth-child(5) { transition-delay: .57s; opacity:1; transform:none; }
[data-fp3-animate="stagger"].fp3-on > *:nth-child(6) { transition-delay: .70s; opacity:1; transform:none; }
[data-fp3-animate="stagger"].fp3-on > *:nth-child(n+7) { transition-delay: .83s; opacity:1; transform:none; }

/* ─── KEYFRAMES ──────────────────────────────────────────────────────────── */
@keyframes fp3Pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(.78); opacity: .55; }
}
@keyframes fp3PulseGlow {
  0%,100% { filter: drop-shadow(0 0 4px currentColor); opacity: 1; }
  50%     { filter: drop-shadow(0 0 12px currentColor); opacity: .75; }
}
@keyframes fp3ScanV {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes fp3SpinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes fp3Float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}
@keyframes fp3FadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── CHART HELPERS ──────────────────────────────────────────────────────── */
.fp3-grid line { stroke: rgba(201,169,97,.08); stroke-width: 1; }
.fp3-axis line { stroke: rgba(201,169,97,.35); stroke-width: 1; }
.fp3-tick {
  font-family: 'IBM Plex Mono','JetBrains Mono',monospace;
  font-size: 9px; fill: #5f5a52; letter-spacing: .12em;
}
.fp3-axis-label {
  font-family: 'IBM Plex Mono','JetBrains Mono',monospace;
  font-size: 9.5px; fill: #9a9388; letter-spacing: .22em; text-transform: uppercase;
}

/* Pulsing data point */
.fp3-pulse-pt { transform-origin: center; transform-box: fill-box; }
.fp3-pulse-pt circle.halo {
  animation: fp3PulseHalo 2.4s ease-out infinite;
}
@keyframes fp3PulseHalo {
  0%   { r: 4; opacity: .8; }
  100% { r: 18; opacity: 0; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  [data-fp3-animate], [data-fp3-animate="stagger"] > *,
  .fp3-hud-head .dot, .fp3-pulse-pt circle.halo {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
  }
}