/* =============================================================================
   xtrade — POLISH LAYER
   Pure visual effects. No structural / layout changes. Drop-in.

   Adds:
   - Cursor-tracking spotlight on every .panel / .stat / .mover / .hero-ticker
   - Animated holographic gradient borders on hover (conic-gradient sweep)
   - Glass refraction (backdrop-filter + subtle saturation lift)
   - Perspective tilt on cards (very subtle, 6deg max)
   - Magnetic primary buttons (transform pulled toward cursor)
   - Reveal-on-scroll fade/translate
   - Custom cursor (dot + trailing ring) — only on fine pointers
   - Scanline + grain overlay (very low opacity, can be toggled)
   - Numeric counter "tick" animation when prices update
   - Sky-blue glow halos on focused/active rows
   - Smooth-scroll & momentum
   - CRT-glow on the running ticker
   ========================================================================== */

/* -- Reduced motion respect --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* -- Root tokens for the polish layer ----------------------------------- */
:root {
  --pol-glow: 135, 206, 235;          /* sky blue rgb */
  --pol-glow-violet: 183, 151, 255;
  --pol-glow-amber: 244, 183, 64;
  --pol-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pol-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

/* =============================================================================
   1. GLOBAL ATMOSPHERE — subtle scanlines + grain on the body
   ========================================================================== */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: overlay;
  opacity: 0.6;
}
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 998;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* Ambient orbs that drift very slowly behind the app */
.app::before {
  content: '';
  position: fixed; top: -20%; left: -10%;
  width: 60vmax; height: 60vmax; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(var(--pol-glow), 0.08), transparent 60%);
  filter: blur(40px);
  animation: pol-drift-1 32s ease-in-out infinite alternate;
}
.app::after {
  content: '';
  position: fixed; bottom: -30%; right: -10%;
  width: 50vmax; height: 50vmax; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(var(--pol-glow-violet), 0.06), transparent 60%);
  filter: blur(40px);
  animation: pol-drift-2 40s ease-in-out infinite alternate;
}
@keyframes pol-drift-1 { from { transform: translate(0,0); } to { transform: translate(8vw, 6vh); } }
@keyframes pol-drift-2 { from { transform: translate(0,0); } to { transform: translate(-6vw, -8vh); } }

/* =============================================================================
   2. PANEL POLISH — spotlight + gradient border + tilt
   ========================================================================== */
.panel,
.stat,
.mover,
.hero-ticker,
.back-card,
.empty-card,
.modal {
  position: relative;
  /* Cursor coords are streamed in by polish.js as --mx / --my (px relative
     to the element). Fall back to the center if JS hasn't run yet. */
  --mx: 50%;
  --my: 50%;
  transition:
    transform 0.4s var(--pol-ease),
    border-color 0.3s ease,
    box-shadow 0.4s var(--pol-ease);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Spotlight follow — drawn as a pseudo-element so it doesn't leak into
   children's compositing. */
.panel::before,
.stat::before,
.mover::before,
.hero-ticker::before,
.back-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx) var(--my),
    rgba(var(--pol-glow), 0.10),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s var(--pol-ease);
  pointer-events: none;
  z-index: 1;
}
.panel:hover::before,
.stat:hover::before,
.mover:hover::before,
.hero-ticker:hover::before,
.back-card:hover::before { opacity: 1; }

/* Animated holographic border — built from a conic-gradient on a ::after,
   masked to a 1px ring. Only visible on hover. */
.panel::after,
.stat::after,
.mover::after,
.hero-ticker::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--pol-angle, 0deg),
    transparent 0deg,
    rgba(var(--pol-glow), 0.85) 30deg,
    rgba(var(--pol-glow-violet), 0.85) 90deg,
    transparent 130deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s var(--pol-ease);
  pointer-events: none;
  z-index: 2;
  animation: pol-spin 4s linear infinite;
  animation-play-state: paused;
}
.panel:hover::after,
.stat:hover::after,
.mover:hover::after,
.hero-ticker:hover::after { opacity: 1; animation-play-state: running; }
@property --pol-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes pol-spin { to { --pol-angle: 360deg; } }

/* Lift on hover — very subtle, no scale */
.panel:hover, .stat:hover, .back-card:hover, .empty-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(var(--pol-glow), 0.15),
    0 0 60px -20px rgba(var(--pol-glow), 0.25);
}
.mover:hover, .hero-ticker:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px -8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(var(--pol-glow), 0.2);
}

/* Tilt — applied only when polish.js sets data-tilt. Wrapped in an inner
   so child content isn't perspective-distorted. */
[data-tilt] {
  transform: perspective(1100px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateY(var(--lift, 0px));
}

/* =============================================================================
   3. BUTTONS — magnetic + sheen
   ========================================================================== */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s var(--pol-ease), background 0.18s ease, border-color 0.18s ease, box-shadow 0.3s ease;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 65%,
    transparent 100%);
  transform: translateX(-150%);
  transition: transform 0.7s var(--pol-ease);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::before { transform: translateX(150%); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 0.05s; }

.btn.primary {
  box-shadow:
    0 0 0 0 rgba(var(--pol-glow), 0.0),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn.primary:hover {
  box-shadow:
    0 0 0 6px rgba(var(--pol-glow), 0.18),
    0 12px 28px -8px rgba(var(--pol-glow), 0.5),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Magnetic translation, applied via JS as --bx / --by (px) */
[data-magnetic] {
  transform: translate(var(--bx, 0px), var(--by, 0px));
  transition: transform 0.25s var(--pol-ease-out);
}
[data-magnetic]:hover { transition-duration: 0.08s; }

/* =============================================================================
   4. NAV + HEADER — frosted glass + active glow
   ========================================================================== */
.hdr {
  background: linear-gradient(180deg, rgba(8, 11, 16, 0.72), rgba(8, 11, 16, 0.55));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(var(--pol-glow), 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 8px 32px -16px rgba(0, 0, 0, 0.6);
}
.hdr-nav button { position: relative; transition: color 0.2s ease, background 0.2s ease; }
.hdr-nav button::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--pol-glow), 0.7), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.35s var(--pol-ease);
}
.hdr-nav button:hover::after,
.hdr-nav button.active::after { transform: scaleX(1); }
.hdr-nav button.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(var(--pol-glow), 0.06), rgba(var(--pol-glow), 0.02));
  box-shadow: inset 0 0 0 1px rgba(var(--pol-glow), 0.15), 0 4px 14px -6px rgba(var(--pol-glow), 0.25);
}

.hdr-search { transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
.hdr-search:focus-within {
  border-color: rgba(var(--pol-glow), 0.5);
  box-shadow: 0 0 0 4px rgba(var(--pol-glow), 0.12), inset 0 0 20px -8px rgba(var(--pol-glow), 0.2);
}

/* =============================================================================
   5. TICKER BAR — CRT glow + edge fade
   ========================================================================== */
.ticker {
  position: relative;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  text-shadow: 0 0 8px rgba(var(--pol-glow), 0.15);
}
.ticker::before, .ticker::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 2;
}
.ticker::before { left: 110px; background: linear-gradient(90deg, var(--bg-2), transparent); }
.ticker::after  { right: 0;     background: linear-gradient(-90deg, var(--bg-2), transparent); }
.ticker-item .price { transition: text-shadow 0.3s ease; }
.ticker-item:hover .price { text-shadow: 0 0 12px rgba(var(--pol-glow), 0.6); }

/* =============================================================================
   6. MARKETS TABLE — row spotlight + sym hover lift
   ========================================================================== */
.mkt-table tbody tr {
  position: relative;
  transition: background 0.2s ease, transform 0.2s ease;
}
.mkt-table tbody tr::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(var(--pol-glow), 0.9), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mkt-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(var(--pol-glow), 0.05), rgba(var(--pol-glow), 0.01));
}
.mkt-table tbody tr:hover::after { opacity: 1; }
.mkt-table tbody tr.active {
  background: linear-gradient(90deg, rgba(var(--pol-glow), 0.10), rgba(var(--pol-glow), 0.02)) !important;
}
.mkt-table tbody tr.active::after { opacity: 1; }
.mkt-table td.sym-cell img {
  transition: transform 0.3s var(--pol-ease), box-shadow 0.3s ease;
}
.mkt-table tbody tr:hover td.sym-cell img {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(var(--pol-glow), 0.25), 0 0 16px -2px rgba(var(--pol-glow), 0.4);
}

/* =============================================================================
   7. ORDER BOOK — bar pulse + price tick
   ========================================================================== */
.ob-row { transition: background 0.15s ease; }
.ob-row:hover { background: rgba(var(--pol-glow), 0.04); }
.ob-row .bar {
  transition: width 0.4s var(--pol-ease), opacity 0.3s ease;
  opacity: 0.20;
}
.ob-row:hover .bar { opacity: 0.35; }
.ob-spread .last { transition: text-shadow 0.3s ease, transform 0.2s ease; }
.ob-spread .last:hover {
  text-shadow: 0 0 14px rgba(var(--pol-glow), 0.5);
  transform: scale(1.04);
}

/* Price tick flash — applied by JS via class 'flash-up' / 'flash-down' */
.flash-up   { animation: pol-flash-up   0.55s var(--pol-ease); }
.flash-down { animation: pol-flash-down 0.55s var(--pol-ease); }
@keyframes pol-flash-up {
  0%   { background-color: rgba(46, 204, 113, 0.30); color: var(--green); }
  100% { background-color: transparent; }
}
@keyframes pol-flash-down {
  0%   { background-color: rgba(255, 95, 109, 0.30); color: var(--red); }
  100% { background-color: transparent; }
}

/* =============================================================================
   8. SWAP PANEL — input focus glow + arrow rotate
   ========================================================================== */
.swap-input { transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
.swap-input:focus-within {
  border-color: rgba(var(--pol-glow), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--pol-glow), 0.10), inset 0 0 32px -10px rgba(var(--pol-glow), 0.18);
  background: linear-gradient(180deg, var(--bg-2), rgba(var(--pol-glow), 0.02));
}
.swap-input input { transition: text-shadow 0.3s ease; }
.swap-input:focus-within input { text-shadow: 0 0 16px rgba(var(--pol-glow), 0.25); }
.swap-arrow button { transition: transform 0.4s var(--pol-ease), color 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease; }
.swap-arrow button:hover {
  transform: rotate(180deg);
  box-shadow: 0 0 0 4px rgba(var(--pol-glow), 0.15), 0 0 20px -4px rgba(var(--pol-glow), 0.4);
}
.token-pill { transition: transform 0.2s var(--pol-ease), border-color 0.2s ease, background 0.2s ease; }
.token-pill:hover { transform: translateY(-1px); border-color: rgba(var(--pol-glow), 0.35); background: var(--panel-2); }

/* Big stat numbers — counter-up flash */
.stat .v, .port-h .v, .hero-stat .v { transition: text-shadow 0.4s ease; }
.stat:hover .v { text-shadow: 0 0 18px rgba(var(--pol-glow), 0.35); }

/* =============================================================================
   9. HERO — terminal-style cursor + grid glow + parallax
   ========================================================================== */
.hero-eyebrow .dot { animation: pol-pulse 2s ease-in-out infinite; }
@keyframes pol-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
}
.hero h1 { position: relative; }
.hero h1 .accent {
  background: linear-gradient(135deg, #b3e0f3 0%, var(--accent) 50%, #cdb8ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(var(--pol-glow), 0.35));
}
.hero-grid {
  animation: pol-grid-pan 30s linear infinite;
}
@keyframes pol-grid-pan {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }
}
.hero-cta .btn.primary { box-shadow: 0 0 40px -8px rgba(var(--pol-glow), 0.55), inset 0 1px 0 rgba(255,255,255,0.4); }

/* =============================================================================
  10. ALLOC BAR — segments hover + animated stripes
   ========================================================================== */
.alloc-bar > span {
  position: relative;
  transition: filter 0.25s ease, transform 0.25s var(--pol-ease);
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.06) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.06) 75%,
    transparent 75%
  );
  background-size: 12px 12px;
  animation: pol-stripe 8s linear infinite;
}
@keyframes pol-stripe { from { background-position: 0 0; } to { background-position: 24px 0; } }
.alloc-bar > span:hover { filter: brightness(1.2); transform: scaleY(1.4); }

/* =============================================================================
  11. MODAL — entrance + backdrop
   ========================================================================== */
.modal-bg { animation: pol-fade 0.25s ease-out both; }
.modal { animation: pol-pop 0.35s var(--pol-ease) both; }
@keyframes pol-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pol-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1);    filter: blur(0); }
}

/* =============================================================================
  12. REVEAL ON SCROLL — applied via IntersectionObserver in polish.js
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--pol-ease), transform 0.7s var(--pol-ease);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* =============================================================================
  13. CUSTOM CURSOR — only on fine pointers, only when JS bootstraps it
   ========================================================================== */
@media (pointer: fine) {
  html.has-pol-cursor, html.has-pol-cursor * { cursor: none !important; }
  html.has-pol-cursor a, html.has-pol-cursor button,
  html.has-pol-cursor [role="button"], html.has-pol-cursor input { cursor: none !important; }
}
.pol-cursor {
  position: fixed; left: 0; top: 0; pointer-events: none; z-index: 99999;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--pol-glow), 0.9);
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--pol-ease), height 0.2s var(--pol-ease), background 0.2s ease, opacity 0.2s ease;
  mix-blend-mode: screen;
}
.pol-cursor-ring {
  position: fixed; left: 0; top: 0; pointer-events: none; z-index: 99998;
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid rgba(var(--pol-glow), 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--pol-ease), height 0.3s var(--pol-ease),
              border-color 0.3s ease, transform 0.06s linear, opacity 0.2s ease;
  mix-blend-mode: screen;
}
.pol-cursor.is-link, .pol-cursor.is-button { width: 0; height: 0; opacity: 0; }
.pol-cursor-ring.is-link, .pol-cursor-ring.is-button {
  width: 48px; height: 48px;
  border-color: rgba(var(--pol-glow), 0.9);
  background: rgba(var(--pol-glow), 0.08);
}
.pol-cursor-ring.is-text { width: 4px; height: 22px; border-radius: 2px; border-width: 0; background: rgba(var(--pol-glow), 0.6); }

/* =============================================================================
  14. SELECTION
   ========================================================================== */
::selection {
  background: rgba(var(--pol-glow), 0.3);
  color: #fff;
  text-shadow: 0 0 10px rgba(var(--pol-glow), 0.5);
}

/* =============================================================================
  15. FOCUS-VISIBLE — accessible + on-brand
   ========================================================================== */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--pol-glow), 0.7);
  border-radius: 6px;
}

/* =============================================================================
  16. LOGO + BRAND PULSE
   ========================================================================== */
.hdr-logo img {
  filter: drop-shadow(0 0 6px rgba(var(--pol-glow), 0.3));
  transition: filter 0.3s ease, transform 0.3s var(--pol-ease);
}
.hdr-logo:hover img {
  filter: drop-shadow(0 0 14px rgba(var(--pol-glow), 0.7));
  transform: rotate(-6deg) scale(1.06);
}
.hdr-logo .badge {
  position: relative;
  overflow: hidden;
}
.hdr-logo .badge::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-150%);
  animation: pol-badge-sheen 4s ease-in-out infinite;
}
@keyframes pol-badge-sheen {
  0%, 80% { transform: translateX(-150%); }
  100%    { transform: translateX(150%); }
}

/* =============================================================================
  17. CHIPS (up/down/warn/pro) — soft inner glow
   ========================================================================== */
.chip.up    { box-shadow: inset 0 0 12px -2px rgba(46, 204, 113, 0.25); }
.chip.down  { box-shadow: inset 0 0 12px -2px rgba(255, 95, 109, 0.25); }
.chip.warn  { box-shadow: inset 0 0 12px -2px rgba(244, 183, 64, 0.25); }
.chip.pro   { box-shadow: inset 0 0 12px -2px rgba(183, 151, 255, 0.30); }

/* =============================================================================
  18. CHART-PANE — top-edge highlight when active, frosted controls
   ========================================================================== */
.chart-pane {
  position: relative;
}
.chart-pane::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--pol-glow), 0.6), transparent);
  opacity: 0.6;
  z-index: 3;
}
.chart-tools .tf-group button { transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.chart-tools .tf-group button.active {
  background: linear-gradient(180deg, var(--panel-2), rgba(var(--pol-glow), 0.06));
  box-shadow: 0 0 0 1px rgba(var(--pol-glow), 0.3), 0 4px 14px -6px rgba(var(--pol-glow), 0.4);
}

/* =============================================================================
  19. SCROLLBARS — slimmer, glow on hover
   ========================================================================== */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--line-2), var(--line));
  border-radius: 4px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(var(--pol-glow), 0.6), rgba(var(--pol-glow), 0.3));
  box-shadow: 0 0 8px rgba(var(--pol-glow), 0.4);
}

/* =============================================================================
  20. PORTFOLIO ROWS
   ========================================================================== */
.port-row { transition: background 0.2s ease, transform 0.2s ease; }
.port-row:hover {
  background: linear-gradient(90deg, rgba(var(--pol-glow), 0.05), transparent);
}
.port-row .tk img { transition: transform 0.3s var(--pol-ease), box-shadow 0.3s ease; }
.port-row:hover .tk img {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px rgba(var(--pol-glow), 0.2), 0 0 14px -2px rgba(var(--pol-glow), 0.35);
}

/* =============================================================================
  21. STATUS DOT — pulse
   ========================================================================== */
.status-dot { animation: pol-pulse-green 2.4s ease-in-out infinite; }
@keyframes pol-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(46, 204, 113, 0); }
}