/*
 * sota-data-display.css
 * SOTA data display primitives — price flash, live pulse, number display,
 * tier badges, score ring, delta chip.
 * Prefix: .sota- (isolated; never clobbers existing styles)
 * Colors: --bg:#06090F  --gold:#D4A853  --accent:#4CC2FF  --text:#E8EDF5
 */

/* =========================================================
   1. PRICE FLASH
   ========================================================= */

@keyframes sota-flash-up {
  0%   { background: rgba(63, 211, 143, 0.25); color: var(--color-directional-bullish, #3fd38f); }
  100% { background: transparent; color: inherit; }
}

@keyframes sota-flash-down {
  0%   { background: rgba(242, 110, 110, 0.25); color: var(--color-directional-bearish, #f26e6e); }
  100% { background: transparent; color: inherit; }
}

.sota-flash-up   { animation: sota-flash-up   600ms ease-out; }
.sota-flash-down { animation: sota-flash-down 600ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .sota-flash-up,
  .sota-flash-down { animation: none; }
}


/* =========================================================
   2. LIVE PULSE DOT
   ========================================================= */

.sota-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sota-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-directional-bullish, #3fd38f);
  position: relative;
  flex-shrink: 0;
}

.sota-live-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.4;
  animation: sota-pulse-ring 2s ease-out infinite;
}

@keyframes sota-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.4; }
  100% { transform: scale(2.5); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
  .sota-live-dot::after { animation: none; }
}


/* =========================================================
   3. NUMBER DISPLAY
   ========================================================= */

.sota-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.sota-num-xl {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.sota-num-lg {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sota-num-md {
  font-size: 1.25rem;
  font-weight: 600;
}

.sota-price-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   4. TIER BADGE — SOTA
   ========================================================= */

.sota-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sota-tier-strong-buy {
  background: rgba(63, 211, 143, 0.12);
  border: 1px solid rgba(63, 211, 143, 0.3);
  color: var(--color-directional-bullish, #3fd38f);
}

.sota-tier-buy {
  background: rgba(76, 194, 255, 0.10);
  border: 1px solid rgba(76, 194, 255, 0.25);
  color: #4CC2FF;
}

.sota-tier-hold {
  background: rgba(139, 149, 168, 0.10);
  border: 1px solid rgba(139, 149, 168, 0.2);
  color: #8B95A8;
}

.sota-tier-sell {
  background: rgba(245, 166, 35, 0.10);
  border: 1px solid rgba(245, 166, 35, 0.25);
  color: #F5A623;
}

.sota-tier-strong-sell {
  background: rgba(242, 110, 110, 0.10);
  border: 1px solid rgba(242, 110, 110, 0.25);
  color: var(--color-directional-bearish, #f26e6e);
}


/* =========================================================
   5. SCORE RING — SVG ANIMATION
   ========================================================= */

.sota-score-ring-track {
  stroke: rgba(255, 255, 255, 0.08);
}

.sota-score-ring-fill {
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.34, 1.1, 0.64, 1);
  transform-origin: center;
  transform: rotate(-90deg);
}

.sota-score-ring-fill.sota-animate {
  stroke-dashoffset: var(--score-offset);
}

@media (prefers-reduced-motion: reduce) {
  .sota-score-ring-fill {
    transition: none;
  }
}


/* =========================================================
   6. DELTA CHIP
   ========================================================= */

.sota-delta-pos { color: var(--color-directional-bullish, #3fd38f); }
.sota-delta-neg { color: var(--color-directional-bearish, #f26e6e); }

.sota-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sota-delta-chip.pos {
  background: rgba(63, 211, 143, 0.12);
  color: var(--color-directional-bullish, #3fd38f);
}

.sota-delta-chip.neg {
  background: rgba(242, 110, 110, 0.12);
  color: var(--color-directional-bearish, #f26e6e);
}