/* ============================================================
   fx.css — AURUM HUD effects layer.
   Loaded on every page AFTER aurum.css / site.css / page-local
   and BEFORE mobile.css so phone overrides still win.

   System: scanlines, HUD corner brackets, holographic depth,
   slate ticker ribbon, rolling-digit counters, animated glows.
   One coherent "trading desk HUD" voice. Throttles itself
   under (prefers-reduced-motion) and (max-width: 768px).
   ============================================================ */

:root {
  --fx-gold:        #C9A94E;
  --fx-gold-bright: #E8D48B;
  --fx-gold-glow:   rgba(201,169,78,0.55);
  --fx-gold-bloom:  rgba(232,212,139,0.18);
  --fx-cyan:        #6fd5e0;     /* HUD telemetry accent — used very sparingly */
  --fx-scan:        rgba(201,169,78,0.045);
  --fx-bg:          #060608;
}

/* ─── Global atmospherics: scanline overlay ─────────────────── */
.fx-scanlines {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 2px,
      var(--fx-scan) 2px 3px
    );
  mix-blend-mode: screen;
  opacity: 0.6;
}
.fx-vignette {
  position: fixed; inset: 0; z-index: 9001;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ─── Slate ticker ribbon ───────────────────────────────────── */
.fx-ticker {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  height: 26px;
  background: linear-gradient(180deg, #08080c 0%, #050507 100%);
  border-bottom: 1px solid rgba(201,169,78,0.22);
  overflow: hidden;
  font-family: 'Barlow Condensed', 'Bebas Neue', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.78);
  display: flex; align-items: center;
}
.fx-ticker::before, .fx-ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px;
  pointer-events: none; z-index: 2;
}
.fx-ticker::before { left: 0; background: linear-gradient(90deg, #060608, transparent); }
.fx-ticker::after  { right: 0; background: linear-gradient(270deg, #060608, transparent); }

.fx-ticker__rail {
  display: flex; align-items: center;
  gap: 48px;
  white-space: nowrap;
  animation: fx-ticker-roll 60s linear infinite;
  padding-left: 100%;
  will-change: transform;
}
.fx-ticker__item { display: inline-flex; align-items: center; gap: 10px; }
.fx-ticker__item .tag {
  display: inline-block; width: 6px; height: 6px;
  background: var(--fx-gold);
  box-shadow: 0 0 6px var(--fx-gold-glow);
  transform: rotate(45deg);
}
.fx-ticker__item .tag.live { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.6); }
.fx-ticker__item .tag.warn { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.5); }
.fx-ticker__item .tag.cyan { background: var(--fx-cyan); box-shadow: 0 0 6px rgba(111,213,224,0.5); }
.fx-ticker__item .tag.red  { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.5); }
.fx-ticker__item strong { color: var(--fx-gold-bright); font-weight: 700; letter-spacing: 0.18em; }
.fx-ticker__item .num { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--fx-gold); }
.fx-ticker__sep { width: 6px; height: 6px; border-radius: 50%; background: rgba(201,169,78,0.25); }

@keyframes fx-ticker-roll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* push existing fixed nav + content down by 26px to clear ticker */
body.fx-on .aurum .nav { top: 26px; }
body.fx-on .term-header { top: calc(26px + 60px) !important; }
body.fx-on .page { padding-top: 122px; }   /* 26 ticker + 60 nav + 36 breathing */
body.fx-on { padding-top: 26px; }
@media (max-width: 520px) {
  body.fx-on .page { padding-top: 104px !important; }
}

/* ─── Constellation canvas backdrop ─────────────────────────── */
.fx-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* ─── HUD corner brackets ────────────────────────────────────── */
[data-fx-hud] {
  position: relative;
  isolation: isolate;
}
[data-fx-hud]::before,
[data-fx-hud]::after,
[data-fx-hud] > .fx-hud-tl,
[data-fx-hud] > .fx-hud-br {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  z-index: 5;
  border: 1.5px solid var(--fx-gold);
  opacity: 0.85;
}
[data-fx-hud]::before {  /* top-left */
  top: -2px; left: -2px;
  border-right: 0; border-bottom: 0;
}
[data-fx-hud]::after {   /* bottom-right */
  bottom: -2px; right: -2px;
  border-left: 0; border-top: 0;
}
[data-fx-hud] > .fx-hud-tr {
  position: absolute; top: -2px; right: -2px;
  width: 14px; height: 14px; pointer-events: none; z-index: 5;
  border: 1.5px solid var(--fx-gold);
  border-left: 0; border-bottom: 0; opacity: 0.85;
}
[data-fx-hud] > .fx-hud-bl {
  position: absolute; bottom: -2px; left: -2px;
  width: 14px; height: 14px; pointer-events: none; z-index: 5;
  border: 1.5px solid var(--fx-gold);
  border-right: 0; border-top: 0; opacity: 0.85;
}

/* HUD chip — small label that sits on a HUD frame */
.fx-hud-chip {
  position: absolute;
  top: -10px; left: 20px;
  z-index: 6;
  background: var(--fx-bg);
  padding: 1px 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fx-gold);
  border: 1px solid rgba(201,169,78,0.4);
}
.fx-hud-chip::before {
  content: ""; display: inline-block;
  width: 4px; height: 4px; margin-right: 6px;
  background: var(--fx-gold);
  vertical-align: middle;
  animation: fx-pulse 1.6s ease-in-out infinite;
}

/* ─── Holographic / depth gradient ──────────────────────────── */
.fx-holo {
  position: relative;
}
.fx-holo::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg,
      transparent 30%,
      rgba(201,169,78,0.04) 50%,
      rgba(232,212,139,0.06) 51%,
      transparent 70%);
  pointer-events: none;
  animation: fx-holo-sweep 8s ease-in-out infinite;
  z-index: 1;
}
@keyframes fx-holo-sweep {
  0%, 100% { transform: translateX(-10%); opacity: 0.6; }
  50%      { transform: translateX( 10%); opacity: 1; }
}

/* ─── Scan beam — emits across an element on load + ambient ─ */
.fx-scan-beam {
  position: relative;
  overflow: hidden;
}
.fx-scan-beam::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,169,78,0.18) 40%,
    rgba(232,212,139,0.32) 50%,
    rgba(201,169,78,0.18) 60%,
    transparent 100%);
  transform: translateX(-100%);
  animation: fx-scan 4.5s cubic-bezier(0.4,0,0.2,1) infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes fx-scan {
  0%, 28%   { transform: translateX(-100%); }
  100%      { transform: translateX(100%); }
}

/* ─── Glow / pulse / breathing primitives ───────────────────── */
@keyframes fx-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.92); }
}
@keyframes fx-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,78,0); }
  50%      { box-shadow: 0 0 24px 0 rgba(201,169,78,0.18); }
}
.fx-breathe { animation: fx-breathe 3.4s ease-in-out infinite; }

.fx-glow      { text-shadow: 0 0 12px var(--fx-gold-glow); }
.fx-glow-soft { text-shadow: 0 0 8px var(--fx-gold-bloom); }

/* ─── Rolling-digit counter — used via data-fx-num ──────────── */
.fx-roll {
  display: inline-flex; align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', 'Barlow Condensed', ui-monospace, monospace;
}
.fx-roll__d {
  display: inline-block;
  overflow: hidden;
  /* height was 1em — too short: digit glyphs (mono/display, large cap-height) render
     taller than 1em, so overflow:hidden shaved their tops/bottoms (looked like truncated
     numbers in the tape / slate-summary / KPI boxes). 1.3em + matching line-height fully
     contains the glyph; the slide animation transforms the box itself so the taller slot
     doesn't change the motion. */
  height: 1.3em;
  line-height: 1.3em;
  width: 0.62em;          /* roughly mono char width */
  vertical-align: bottom;
  position: relative;
}
.fx-roll__d::before {
  content: attr(data-d);
  display: inline-block;
  line-height: 1.3em;
}
.fx-roll__d.fx-roll__d--anim {
  animation: fx-roll-up 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-roll__d--sign,
.fx-roll__d--dot,
.fx-roll__d--unit { width: auto; }
@keyframes fx-roll-up {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ─── Reticle / radar mark ──────────────────────────────────── */
.fx-reticle {
  display: inline-block;
  width: 14px; height: 14px;
  position: relative;
  vertical-align: middle;
}
.fx-reticle::before, .fx-reticle::after {
  content: ""; position: absolute;
  background: var(--fx-gold);
}
.fx-reticle::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.fx-reticle::after  { left: 0; right: 0; top: 50%; height: 1px; }
.fx-reticle__ring {
  position: absolute; inset: 2px;
  border: 1px solid var(--fx-gold);
  border-radius: 50%;
  opacity: 0.7;
}

/* ─── Live-pip evolved: outward rings ───────────────────────── */
.fx-pip {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fx-gold);
  box-shadow: 0 0 8px var(--fx-gold-glow);
}
.fx-pip::before, .fx-pip::after {
  content: ""; position: absolute; inset: -3px;
  border: 1px solid var(--fx-gold);
  border-radius: 50%; opacity: 0;
  animation: fx-pip-ring 2.4s cubic-bezier(0.22,1,0.36,1) infinite;
}
.fx-pip::after { animation-delay: 1.2s; }
@keyframes fx-pip-ring {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.8); opacity: 0; }
}
.fx-pip--live  { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.6); }
.fx-pip--live::before, .fx-pip--live::after { border-color: #4ade80; }

/* ─── HUD divider line with target glyph ────────────────────── */
.fx-divider {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fx-gold);
  margin: 24px 0;
}
.fx-divider::before, .fx-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fx-gold-bright), transparent);
  opacity: 0.5;
}
.fx-divider .glyph {
  display: inline-block; width: 8px; height: 8px;
  border: 1px solid var(--fx-gold);
  transform: rotate(45deg);
}

/* ─── HUD KPI tile — re-skin for db-kpi & lp-yest values ───── */
.fx-kpi-glow {
  position: relative;
}
.fx-kpi-glow::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(201,169,78,0.12), transparent 70%);
  pointer-events: none;
}

/* ─── Entry choreography — fade-up reveal ───────────────────── */
.fx-rise { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.fx-rise.is-in { opacity: 1; transform: none; }

/* ─── Section title with HUD accent ─────────────────────────── */
.fx-section-h {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 14px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fx-section-h .label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.32em; color: var(--fx-gold);
  padding: 2px 8px; border: 1px solid var(--fx-gold);
  background: rgba(201,169,78,0.05);
}

/* ─── Terminal-specific HUD overlays ────────────────────────── */
.aurum.terminal {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,78,0.06), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(111,213,224,0.03), transparent 50%),
    #060608 !important;
}

/* matrix gets a faint grid backdrop + animated bloom */
.term-matrix-wrap {
  position: relative;
  background:
    linear-gradient(180deg, rgba(201,169,78,0.025), transparent 80%),
    var(--c-surface) !important;
  background-image:
    linear-gradient(90deg, rgba(201,169,78,0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.012) 1px, transparent 1px),
    var(--c-surface);
  background-size: 60px 60px, 60px 60px, 100% 100% !important;
}
.term-matrix-wrap::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,169,78,0.04) 40%,
    rgba(232,212,139,0.08) 50%,
    rgba(201,169,78,0.04) 60%,
    transparent 100%);
  transform: translateX(-100%);
  animation: fx-scan 9s linear infinite;
  z-index: 1;
}
.term-matrix tbody tr.term-row { position: relative; z-index: 2; }

/* row hover: pulse the row's left edge */
.term-matrix tbody tr.term-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--fx-gold);
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.18s ease;
  z-index: 3;
}
.term-matrix tbody tr.term-row:hover::before,
.term-matrix tbody tr.term-row.expanded::before { transform: scaleY(1); box-shadow: 0 0 12px var(--fx-gold-glow); }

/* edge cell glow */
.cell-edge__num--pos {
  text-shadow: 0 0 10px var(--fx-gold-bloom);
}
.cell-edge__num--neg {
  text-shadow: 0 0 10px rgba(248,113,113,0.25);
}

/* sharp/EV gets subtle live shimmer */
.cell-sharp__ev--pos { text-shadow: 0 0 8px rgba(201,169,78,0.4); }
.cell-conf-pill--high {
  box-shadow: 0 0 14px rgba(232,212,139,0.16);
  animation: fx-breathe 4s ease-in-out infinite;
}

/* slate tabs underline becomes glowing */
.term-slate-tab--active {
  text-shadow: 0 0 10px var(--fx-gold-bloom);
}
.term-slate-tab--active::after {
  content: ""; position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 1px; background: var(--fx-gold);
  box-shadow: 0 0 8px var(--fx-gold-glow);
}
.term-slate-tab { position: relative; }

/* refresh button gets a sweep ring */
.term-iconbtn {
  position: relative;
  overflow: hidden;
}
.term-iconbtn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201,169,78,0.18), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.term-iconbtn:hover::after { transform: translateX(100%); }

/* side rail cards get HUD shoulder + scan bar */
.rail-card {
  background:
    linear-gradient(135deg, rgba(201,169,78,0.04), transparent 50%),
    var(--c-surface) !important;
  border-color: rgba(201,169,78,0.18) !important;
}

/* expanded detail panel: holographic depth */
.term-detail__inner {
  background:
    linear-gradient(180deg, rgba(201,169,78,0.05) 0%, transparent 30%),
    linear-gradient(90deg, transparent 0%, rgba(111,213,224,0.025) 50%, transparent 100%);
}
.term-detail__col h4 { color: var(--fx-gold) !important; }
.term-detail__col h4::after {
  background: linear-gradient(90deg, var(--fx-gold), transparent) !important;
  opacity: 0.5;
}

/* CLV / ring drawing */
.score-ring {
  filter: drop-shadow(0 0 8px var(--fx-gold-bloom));
}

/* ─── Landing-specific ──────────────────────────────────────── */
.lp-hero__title { text-shadow: 0 0 30px rgba(201,169,78,0.08); }
.lp-hero__title .gw { text-shadow: 0 0 22px rgba(232,212,139,0.45); }

.lp-now {
  background:
    linear-gradient(135deg, rgba(201,169,78,0.03), transparent 60%),
    var(--c-panel) !important;
}
.lp-now__game { transition: background 0.2s; position: relative; }
.lp-now__game:hover { background: rgba(201,169,78,0.04); }
.lp-now__edge {
  text-shadow: 0 0 10px var(--fx-gold-bloom);
}

.lp-yest__val.gold { text-shadow: 0 0 14px rgba(232,212,139,0.35); }
.lp-yest__val.win { text-shadow: 0 0 14px rgba(74,222,128,0.35); }

.lp-engine__step {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s;
}
.lp-engine__step:hover {
  transform: translateY(-4px);
  border-color: var(--fx-gold) !important;
  box-shadow: 0 12px 36px rgba(201,169,78,0.1);
}
.lp-engine__step::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0;
  height: 2px; background: linear-gradient(90deg, transparent, var(--fx-gold), transparent);
  transform: scaleX(0); transition: transform 0.4s;
  transform-origin: center;
}
.lp-engine__step:hover::before { transform: scaleX(1); }

.lp-cta {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,78,0.12), transparent 60%),
    linear-gradient(180deg, rgba(201,169,78,0.06), transparent) !important;
  position: relative;
}
.lp-cta::before, .lp-cta::after {
  content: ""; position: absolute; width: 20px; height: 20px;
  border: 1.5px solid var(--fx-gold);
  opacity: 0.6;
}
.lp-cta::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.lp-cta::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* ─── Picks-specific ─────────────────────────────────────────── */
.pk-play {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pk-play:hover {
  transform: translateX(2px);
  box-shadow: -3px 0 16px rgba(201,169,78,0.12);
}
.pk-play--high::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 2px; background: var(--fx-gold);
  box-shadow: 0 0 14px var(--fx-gold-glow);
  z-index: 2;
}
.pk-play__edge { text-shadow: 0 0 14px var(--fx-gold-bloom); }
.pk-play__deeplink {
  position: relative;
  transition: padding 0.2s ease, color 0.2s ease;
}
.pk-play__deeplink:hover { padding-left: 10px; }
.pk-play__deeplink::before {
  content: "▸"; position: absolute; left: -8px; opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.pk-play__deeplink:hover::before { opacity: 1; transform: translateX(4px); }

/* ─── Dashboard-specific ─────────────────────────────────────── */
.db-kpi { position: relative; }
.db-kpi::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0; background: var(--fx-gold);
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.db-kpi.is-in::after { width: 100%; box-shadow: 0 0 10px var(--fx-gold-glow); }
.db-kpi__val { text-shadow: 0 0 14px rgba(232,212,139,0.25); }

.db-pnl__chart { position: relative; }
.db-pnl__chart::before {
  content: ""; position: absolute; inset: 18px 18px 30px;
  background-image:
    linear-gradient(90deg, rgba(201,169,78,0.04) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 24px, 100% 24px;
  pointer-events: none;
}
.db-pnl__bar {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.db-pnl__bar.up { box-shadow: 0 0 8px rgba(201,169,78,0.25); }
.db-pnl.is-in .db-pnl__bar { transform: scaleY(1); }

.db-clv { position: relative; }
.db-clv::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fx-gold));
}

.cal__dot {
  box-shadow: 0 0 12px currentColor;
}
.cal__dot--ok { color: var(--fx-gold); }
.cal__dot--warn { color: #fbbf24; }
.cal__dot--off  { color: #f87171; }

/* ─── Reduced motion + mobile throttle ──────────────────────── */
/* Honor the OS-level motion preference comprehensively: previously only a handful of
   selectors were quieted, so the ticker scroll, holo-sweep, scanline, pulse, breathe,
   rolling-digit and pip-ring loops kept animating for users who asked for no motion.
   Now every FX animation/transition is neutralized and elements snap to their rest state.
   (fx.js also short-circuits the digit roll + hero entrance when reduced-motion is set.) */
@media (prefers-reduced-motion: reduce) {
  body.fx-on *,
  body.fx-on *::before,
  body.fx-on *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .fx-rise { opacity: 1 !important; transform: none !important; }
  .db-pnl__bar { transform: scaleY(1) !important; }
}

@media (max-width: 768px) {
  /* lighter atmospherics on phone — keep ticker but cut some effects */
  .fx-scanlines { opacity: 0.35; }
  .fx-vignette { display: none; }
  .fx-stars { opacity: 0.4; }
  .term-matrix-wrap::after { animation-duration: 14s; }
  .fx-ticker__rail { animation-duration: 75s; }
}
@media (max-width: 520px) {
  .fx-ticker { height: 22px; font-size: 10px; letter-spacing: 0.14em; }
  body.fx-on .aurum .nav { top: 22px; }
  body.fx-on .page { padding-top: 100px !important; }
  /* hide HUD brackets on phone — they're too tight */
  [data-fx-hud]::before,
  [data-fx-hud]::after,
  [data-fx-hud] > .fx-hud-tr,
  [data-fx-hud] > .fx-hud-bl { display: none; }
  .fx-hud-chip { font-size: 8px; padding: 1px 6px; letter-spacing: 0.24em; }
}