/*
 * sota-glass-v2.css — SOTA Glass Morphism 2026
 * Trading Hub v2 — prefix: .thv2- | .sota-
 * Colors: --bg:#06090F --gold:#D4A853 --accent:#4CC2FF --text:#E8EDF5
 * Additive only — does NOT clobber existing styles
 */

/* ============================================================
   1. NOISE TEXTURE
   ============================================================ */

.sota-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.025;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sota-noise::before {
    opacity: 0.015;
  }
}


/* ============================================================
   2. AURORA BACKGROUND
   ============================================================ */

@keyframes sota-aurora-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.sota-aurora {
  background:
    radial-gradient(ellipse 80% 50% at 20% -20%, rgba(76, 194, 255, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 110%, rgba(212, 168, 83, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #06090F 40%, #0A0F1A 100%);
  background-size: 200% 200%;
  animation: sota-aurora-shift 20s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.sota-aurora {
    animation: none;
    background-size: 100% 100%;
  }
}


/* ============================================================
   3. MULTI-LAYER GLASS CARDS
   ============================================================ */

.sota-glass-card {
  background: rgba(12, 16, 24, 0.65);
  backdrop-filter: saturate(180%) blur(32px);
  -webkit-backdrop-filter: saturate(180%) blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  .sota-glass-card {
    background: rgba(12, 16, 24, 0.92);
  }
}


/* ============================================================
   4. ELEVATION LEVELS
   ============================================================ */

/* Elevation 0 — flush / embedded */
.sota-elev-0 {
  background: rgba(8, 11, 18, 0.5);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 1px 4px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

/* Elevation 1 — default card */
.sota-elev-1 {
  background: rgba(12, 16, 24, 0.65);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 4px 16px rgba(0, 0, 0, 0.30),
    0 1px 2px rgba(0, 0, 0, 0.18);
  border-radius: 12px;
}

/* Elevation 2 — modal / overlay */
.sota-elev-2 {
  background: rgba(16, 20, 30, 0.75);
  backdrop-filter: saturate(180%) blur(40px);
  -webkit-backdrop-filter: saturate(180%) blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 40px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
}

/* Elevation 3 — floating / tooltip */
.sota-elev-3 {
  background: rgba(22, 28, 42, 0.85);
  backdrop-filter: saturate(200%) blur(56px);
  -webkit-backdrop-filter: saturate(200%) blur(56px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 16px 64px rgba(0, 0, 0, 0.55),
    0 4px 16px rgba(0, 0, 0, 0.30),
    0 1px 3px rgba(0, 0, 0, 0.20);
  border-radius: 20px;
}

@supports not (backdrop-filter: blur(1px)) {
  .sota-elev-0 { background: rgba(8,  11, 18,  0.90); }
  .sota-elev-1 { background: rgba(12, 16, 24,  0.92); }
  .sota-elev-2 { background: rgba(16, 20, 30,  0.94); }
  .sota-elev-3 { background: rgba(22, 28, 42,  0.96); }
}


/* ============================================================
   5. EDGE HIGHLIGHT GRADIENT
   ============================================================ */

.sota-edge {
  position: relative;
}

.sota-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.00)) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sota-edge::after {
    opacity: 0.7;
  }
}


/* ============================================================
   6. GLOW STATES
   ============================================================ */

/* Gold glow — positive / highlight */
.sota-glow-gold {
  box-shadow:
    0 0 0 1px rgba(212, 168, 83, 0.30),
    0 8px 32px rgba(212, 168, 83, 0.15);
  transition: box-shadow 0.25s var(--ease-snap, ease-out);
}

.sota-glow-gold:hover,
.sota-glow-gold:focus-visible {
  box-shadow:
    0 0 0 1px rgba(212, 168, 83, 0.45),
    0 8px 48px rgba(212, 168, 83, 0.25);
}

/* Green glow — bullish / success */
.sota-glow-green {
  box-shadow:
    0 0 0 1px rgba(63, 211, 143, 0.30),
    0 8px 32px rgba(63, 211, 143, 0.12);
  transition: box-shadow 0.25s var(--ease-snap, ease-out);
}

.sota-glow-green:hover,
.sota-glow-green:focus-visible {
  box-shadow:
    0 0 0 1px rgba(63, 211, 143, 0.45),
    0 8px 48px rgba(63, 211, 143, 0.20);
}

/* Red glow — bearish / danger */
.sota-glow-red {
  box-shadow:
    0 0 0 1px rgba(242, 110, 110, 0.30),
    0 8px 32px rgba(242, 110, 110, 0.12);
  transition: box-shadow 0.25s var(--ease-snap, ease-out);
}

.sota-glow-red:hover,
.sota-glow-red:focus-visible {
  box-shadow:
    0 0 0 1px rgba(242, 110, 110, 0.45),
    0 8px 48px rgba(242, 110, 110, 0.20);
}

/* Accent blue glow — neutral / info */
.sota-glow-accent {
  box-shadow:
    0 0 0 1px rgba(76, 194, 255, 0.30),
    0 8px 32px rgba(76, 194, 255, 0.12);
  transition: box-shadow 0.25s var(--ease-snap, ease-out);
}

.sota-glow-accent:hover,
.sota-glow-accent:focus-visible {
  box-shadow:
    0 0 0 1px rgba(76, 194, 255, 0.45),
    0 8px 48px rgba(76, 194, 255, 0.20);
}

@media (prefers-reduced-motion: reduce) {
  .sota-glow-gold,
  .sota-glow-green,
  .sota-glow-red,
  .sota-glow-accent {
    transition: none;
  }

  .sota-glow-gold:hover,
  .sota-glow-gold:focus-visible,
  .sota-glow-green:hover,
  .sota-glow-green:focus-visible,
  .sota-glow-red:hover,
  .sota-glow-red:focus-visible,
  .sota-glow-accent:hover,
  .sota-glow-accent:focus-visible {
    box-shadow: inherit;
  }
}


/* ============================================================
   COMPOSITE UTILITY — glass card with noise + edge highlight
   Usage: class="sota-glass-card sota-noise sota-edge"
   ============================================================ */

.sota-glass-card.sota-noise::before {
  z-index: 0;
}

.sota-glass-card.sota-edge::after {
  z-index: 1;
}

.sota-glass-card > * {
  position: relative;
  z-index: 2;
}