/* TACTIS Smooth Transitions - Eliminates Flickering */

/* ============================================
   GLOBAL TRANSITIONS - SMOOTH 1.5-2s
   ============================================ */

/* Smooth all text/number value changes */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent layout shifts during updates */
[class*="price"],
[class*="value"],
[class*="balance"],
[class*="equity"],
[class*="profit"],
[class*="bid"],
[class*="ask"],
[class*="spread"],
[class*="change"],
[class*="pnl"],
[class*="percent"],
[class*="rsi"],
[class*="macd"] {
  transition: color 1.5s ease-out, opacity 1s ease-out;
  will-change: contents;
}

/* ============================================
   MARKET SCANNER - Left Panel
   ============================================ */

/* Symbol cards should not jump around */
.market-scanner > div,
[class*="scanner"] > div,
[class*="symbol-card"],
[class*="market-item"],
[class*="watchlist"] > div {
  transition: transform 1s ease-out, opacity 1s ease-out, background-color 1.5s ease;
  will-change: transform, opacity;
}

/* Smooth selection highlight */
[class*="selected"],
[class*="active"] {
  transition: all 1s ease-out;
}

/* Price bars animate smoothly */
[class*="bar"],
[class*="progress"],
[class*="meter"] {
  transition: width 2s ease-out, height 2s ease-out, background-color 1.5s ease;
}

/* ============================================
   CHART AREA
   ============================================ */

/* Chart container stays stable */
[class*="chart"] {
  transition: opacity 1.5s ease;
}

/* Smooth line/candle updates */
canvas,
svg,
svg path,
svg line,
svg rect {
  transition: opacity 1s ease;
}

/* ============================================
   TECHNICAL ANALYSIS PANEL
   ============================================ */

/* RSI indicator bar */
[class*="rsi"] [class*="bar"],
[class*="rsi"] [class*="indicator"],
[class*="rsi"] [class*="fill"] {
  transition: width 2s ease-out, left 2s ease-out;
}

/* MACD histogram bars */
[class*="macd"] [class*="bar"],
[class*="histogram"] > div {
  transition: height 1.5s ease-out, background-color 1s ease;
}

/* Trend badge */
[class*="trend"],
[class*="badge"],
[class*="tag"] {
  transition: background-color 1.5s ease, color 1.5s ease, opacity 1s ease;
}

/* ============================================
   AI ANALYSIS PANEL
   ============================================ */

/* Decision display (BUY/SELL/HOLD) */
[class*="decision"],
[class*="signal"],
[class*="recommendation"] {
  transition: color 2s ease, transform 1.5s ease, opacity 1.5s ease;
}

/* Confidence bar */
[class*="confidence"] [class*="bar"],
[class*="confidence"] [class*="fill"],
[class*="confidence"] [class*="progress"] {
  transition: width 2s ease-out;
}

/* Entry/SL/TP values */
[class*="entry"],
[class*="stop"],
[class*="target"],
[class*="sl"],
[class*="tp"] {
  transition: color 1.5s ease-out;
}

/* ============================================
   RIGHT PANEL - News & Positions
   ============================================ */

/* News items fade in smoothly */
[class*="news"] > div,
[class*="headline"],
[class*="article"] {
  transition: opacity 1.5s ease, transform 1s ease;
}

/* Position rows */
[class*="position"],
[class*="trade-row"],
[class*="order"] {
  transition: background-color 1s ease, opacity 1.5s ease;
}

/* P&L color changes */
[class*="positive"],
[class*="negative"],
[class*="profit"],
[class*="loss"] {
  transition: color 1.5s ease-out;
}

/* ============================================
   HEADER - Balance/Equity Display
   ============================================ */

/* Top bar values */
header [class*="value"],
header [class*="balance"],
header [class*="equity"],
[class*="header"] span,
[class*="topbar"] span {
  transition: color 1.5s ease-out;
  font-variant-numeric: tabular-nums; /* Prevents width jumping */
}

/* Connection status indicator */
[class*="status"],
[class*="connected"],
[class*="indicator"] {
  transition: background-color 1.5s ease, box-shadow 1.5s ease;
}

/* ============================================
   ANTI-FLICKER TECHNIQUES
   ============================================ */

/* Use GPU acceleration for smoother updates */
.market-scanner,
[class*="panel"],
[class*="card"],
[class*="container"] {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Stable number widths - prevents jumping */
[class*="price"],
[class*="value"],
[class*="number"] {
  font-variant-numeric: tabular-nums;
  min-width: fit-content;
  display: inline-block;
}

/* Fade loading states instead of flash */
[class*="loading"],
[class*="skeleton"],
[class*="placeholder"] {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}

/* Smooth scroll for lists */
[class*="list"],
[class*="scroll"] {
  scroll-behavior: smooth;
}

/* ============================================
   SIMULATION/LIVE MODE TOGGLE
   ============================================ */

[class*="mode"],
[class*="toggle"],
[class*="switch"] {
  transition: all 0.3s ease;
}

/* ============================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */

button,
[class*="btn"],
[class*="button"] {
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

button:active,
[class*="btn"]:active {
  transform: scale(0.98);
}

/* ============================================
   DROPDOWN & INPUTS
   ============================================ */

select,
input,
[class*="dropdown"],
[class*="select"] {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================
   REDUCE MOTION FOR ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}