/**
 * Black Label Bots — holographic motion layer
 * Gold/champagne/burgundy holo — no green neon
 */

/* ── Global atmosphere ───────────────────────────────── */
.fx-holo-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.fx-holo-mesh {
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(ellipse 40% 30% at 20% 20%, rgba(249, 226, 125, 0.12), transparent 50%),
    radial-gradient(ellipse 35% 25% at 80% 30%, rgba(139, 58, 74, 0.08), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 80%, rgba(201, 169, 97, 0.06), transparent 55%);
  animation: fx-holo-mesh-drift 24s ease-in-out infinite alternate;
}

@keyframes fx-holo-mesh-drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-3%, 2%) rotate(2deg); }
}

.fx-holo-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(249, 226, 125, 0.03) 40%,
    rgba(249, 226, 125, 0.14) 50%,
    rgba(249, 226, 125, 0.03) 60%,
    transparent 100%
  );
  animation: fx-holo-scan-sweep 7s linear infinite;
  opacity: 0.7;
}

@keyframes fx-holo-scan-sweep {
  0% { top: -120px; }
  100% { top: 100vh; }
}

.fx-holo-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(201, 169, 97, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 97, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 10%, transparent 75%);
  animation: fx-holo-grid-pulse 8s ease-in-out infinite;
}

@keyframes fx-holo-grid-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.65; }
}

.fx-holo-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.fx-holo-noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fx-holo-noise-shift 0.5s steps(2) infinite;
}

@keyframes fx-holo-noise-shift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-2%, -1%); }
}

/* ── Hero holographics ───────────────────────────────── */
.fx-holo-orbit:not(.fx-holo-orbit--inline) {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(220px, 38vw);
  height: min(220px, 38vw);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

.fx-holo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(249, 226, 125, 0.25);
  box-shadow:
    0 0 30px rgba(201, 169, 97, 0.15),
    inset 0 0 40px rgba(201, 169, 97, 0.05);
}

.fx-holo-ring--1 {
  animation: fx-holo-spin 18s linear infinite;
}

.fx-holo-ring--2 {
  inset: 18px;
  border-style: solid;
  border-color: rgba(139, 58, 74, 0.2);
  animation: fx-holo-spin 12s linear infinite reverse;
}

.fx-holo-ring--3 {
  inset: 36px;
  border: 1px solid rgba(249, 226, 125, 0.12);
  animation: fx-holo-spin 28s linear infinite;
}

@keyframes fx-holo-spin {
  to { transform: rotate(360deg); }
}

.fx-hex-stage {
  position: relative;
  perspective: 600px;
}

.fx-hex-glow {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}

.fx-hex-logo {
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 0 18px rgba(249, 226, 125, 0.35));
}

.fx-hex-holo {
  position: absolute;
  inset: -20%;
  z-index: 1;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(249, 226, 125, 0.35) 60deg,
    rgba(212, 175, 55, 0.2) 120deg,
    rgba(139, 58, 74, 0.15) 180deg,
    rgba(232, 230, 225, 0.2) 240deg,
    rgba(249, 226, 125, 0.35) 300deg,
    transparent 360deg
  );
  border-radius: 50%;
  filter: blur(12px);
  animation: fx-holo-spin 6s linear infinite;
  opacity: 0.75;
}

/* Holographic shimmer title */
.fx-scene-title,
.fx-holo-text {
  position: relative;
  background: linear-gradient(
    90deg,
    #8a7340 0%,
    #d4af37 20%,
    #f9e27d 40%,
    #fff8e0 50%,
    #f9e27d 60%,
    #d4af37 80%,
    #8a7340 100%
  ) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: fx-holo-shimmer 4s linear infinite !important;
}

@keyframes fx-holo-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.fx-scene-title::after,
.fx-holo-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 248, 224, 0.5) 45%,
    rgba(249, 226, 125, 0.8) 50%,
    rgba(255, 248, 224, 0.5) 55%,
    transparent 60%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-holo-glint 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fx-holo-glint {
  0%, 100% { background-position: 200% 0; opacity: 0; }
  45%, 55% { background-position: 0% 0; opacity: 0.85; }
}

/* Floating HUD chips */
.fx-holo-chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.fx-holo-chip {
  position: absolute;
  font-family: var(--fx-font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(249, 226, 125, 0.85);
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(201, 169, 97, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 20px rgba(201, 169, 97, 0.12),
    inset 0 0 12px rgba(249, 226, 125, 0.04);
  animation: fx-holo-chip-float 8s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * -1.2s);
  white-space: nowrap;
}

.fx-holo-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 226, 125, 0.6), transparent);
  animation: fx-holo-chip-scan 2s linear infinite;
}

@keyframes fx-holo-chip-scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.fx-holo-chip:nth-child(1) { top: 18%; left: 8%; }
.fx-holo-chip:nth-child(2) { top: 28%; right: 6%; }
.fx-holo-chip:nth-child(3) { bottom: 38%; left: 5%; }
.fx-holo-chip:nth-child(4) { bottom: 32%; right: 8%; }
.fx-holo-chip:nth-child(5) { top: 42%; left: 12%; }
.fx-holo-chip:nth-child(6) { top: 52%; right: 10%; }

@keyframes fx-holo-chip-float {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.7; }
  25% { transform: translateY(-12px) translateX(6px); opacity: 1; }
  50% { transform: translateY(-6px) translateX(-4px); opacity: 0.85; }
  75% { transform: translateY(-14px) translateX(3px); opacity: 1; }
}

@media (max-width: 768px) {
  .fx-holo-chip { display: none; }
  .fx-holo-chip:nth-child(1),
  .fx-holo-chip:nth-child(2) { display: block; font-size: 8px; }
}

/* Vertical data stream */
.fx-holo-stream {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(249, 226, 125, 0.4), transparent);
  opacity: 0.4;
  animation: fx-holo-stream-fall 4s linear infinite;
}

.fx-holo-stream--1 { left: 15%; animation-delay: 0s; }
.fx-holo-stream--2 { left: 35%; animation-delay: -1.3s; }
.fx-holo-stream--3 { right: 20%; animation-delay: -2.6s; }
.fx-holo-stream--4 { right: 8%; animation-delay: -0.8s; }

@keyframes fx-holo-stream-fall {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Perspective floor — animated */
.fx-perspective-floor {
  animation: fx-floor-shimmer 6s ease-in-out infinite;
}

@keyframes fx-floor-shimmer {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.7; }
}

/* Holo card sweep */
.fx-holo-card {
  position: relative;
  overflow: hidden;
}

.fx-holo-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(249, 226, 125, 0.08),
    rgba(255, 248, 224, 0.18),
    rgba(249, 226, 125, 0.08),
    transparent
  );
  transform: skewX(-20deg);
  animation: fx-holo-card-sweep 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fx-holo-card-sweep {
  0%, 100% { left: -60%; }
  50% { left: 120%; }
}

.fx-holo-card:hover {
  box-shadow:
    0 0 40px rgba(201, 169, 97, 0.15),
    0 0 80px rgba(139, 58, 74, 0.06),
    inset 0 0 30px rgba(249, 226, 125, 0.03) !important;
}

/* Intelligence / ROI cards */
.blb-future .intelligence-card--featured,
.blb-future .fx-roi-card--highlight,
.blb-future .fx-pricing-card--featured {
  position: relative;
}

.blb-future .intelligence-card--featured::before,
.blb-future .fx-roi-card--highlight::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(201, 169, 97, 0.5),
    rgba(249, 226, 125, 0.8),
    rgba(139, 58, 74, 0.4),
    rgba(232, 230, 225, 0.5),
    rgba(201, 169, 97, 0.5)
  );
  background-size: 300% 100%;
  animation: fx-holo-border 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes fx-holo-border {
  0% { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

/* Hex glitch flicker */
.fx-hex-stage.fx-holo-glitch .fx-hex-glow {
  animation: fx-hex-float 6s ease-in-out infinite, fx-hex-glitch 8s steps(1) infinite;
}

@keyframes fx-hex-glitch {
  0%, 92%, 100% { filter: drop-shadow(0 0 20px rgba(249,226,125,0.9)) drop-shadow(0 0 48px rgba(201,169,97,0.55)); transform: translate(0); }
  93% { filter: drop-shadow(2px 0 rgba(139,58,74,0.6)) drop-shadow(-2px 0 rgba(249,226,125,0.6)); transform: translate(2px, -1px); }
  94% { filter: drop-shadow(-1px 0 rgba(249,226,125,0.8)); transform: translate(-2px, 1px); }
  95% { transform: translate(0); }
}

/* Chart holo drift */
.fx-chart-watermark {
  animation: fx-chart-drift 20s ease-in-out infinite alternate;
}

@keyframes fx-chart-drift {
  0% { transform: translateX(0) scale(1); opacity: 0.12; }
  100% { transform: translateX(-2%) scale(1.02); opacity: 0.18; }
}

/* Horizon pulse */
.fx-horizon-flare {
  animation: fx-horizon-pulse 3s ease-in-out infinite;
}

@keyframes fx-horizon-pulse {
  0%, 100% {
    box-shadow: 0 0 24px rgba(249,226,125,0.7), 0 0 64px rgba(201,169,97,0.35);
    opacity: 0.9;
  }
  50% {
    box-shadow: 0 0 40px rgba(249,226,125,1), 0 0 100px rgba(201,169,97,0.55), 0 0 140px rgba(139,58,74,0.15);
    opacity: 1;
  }
}

/* Proof cells holo */
.fx-proof-cell {
  position: relative;
  overflow: hidden;
}

.fx-proof-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(249, 226, 125, 0.06) 100%);
  animation: fx-holo-grid-pulse 4s ease infinite;
}

/* Sticky CTA holo edge */
.fx-sticky-cta.visible {
  box-shadow:
    0 -8px 40px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(201, 169, 97, 0.15);
}

.fx-sticky-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f9e27d, rgba(139,58,74,0.6), #f9e27d, transparent);
  background-size: 200% 100%;
  animation: fx-holo-border 3s linear infinite;
}

/* ── HUD cockpit hero (compact, dense) ───────────────── */
.fx-scene--hud {
  padding: 0 0 20px !important;
}

.fx-scene-hud-wrap {
  position: relative;
  z-index: 3;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

.fx-hud-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 6px 12px;
  margin-bottom: 10px;
  font-family: var(--fx-font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fx-champagne-dim, #d4c5a0);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(201, 169, 97, 0.22);
  box-shadow: inset 0 0 20px rgba(249, 226, 125, 0.04);
}

.fx-hud-back {
  color: var(--fx-champagne-dim, #d4c5a0);
  text-decoration: none;
  font-size: inherit;
  letter-spacing: inherit;
  transition: color 0.2s;
}

.fx-hud-back:hover { color: var(--fx-gold-bright, #f9e27d); }

.fx-hud-id { color: var(--fx-gold-bright, #f9e27d); }
.fx-hud-sep { opacity: 0.25; }
.fx-hud-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fx-burgundy, #8b3a4a);
}

.fx-hud-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fx-gold-bright);
  box-shadow: 0 0 8px rgba(249, 226, 125, 0.9);
  animation: fx-trust-pulse 1.5s ease infinite;
}

.fx-hud-stat { color: var(--fx-gold, #c9a961); }
.fx-hud-clock {
  margin-left: auto;
  color: rgba(249, 226, 125, 0.7);
  font-variant-numeric: tabular-nums;
}

.fx-scene-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .fx-scene-grid { grid-template-columns: 1fr; }
  .fx-hud-clock { margin-left: 0; width: 100%; }
}

.fx-scene-col--brand {
  text-align: left;
  position: relative;
  padding: 12px 16px;
  border: 1px solid rgba(201, 169, 97, 0.14);
  background: rgba(0, 0, 0, 0.55);
}

.fx-scene-col--brand::before,
.fx-scene-col--brand::after,
.fx-hud-panel::before,
.fx-hud-panel::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(249, 226, 125, 0.45);
  border-style: solid;
  pointer-events: none;
}

.fx-scene-col--brand::before {
  top: 8px; left: 8px;
  border-width: 1px 0 0 1px;
}

.fx-scene-col--brand::after {
  bottom: 8px; right: 8px;
  border-width: 0 1px 1px 0;
}

.fx-hex-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 4px;
}

.fx-title-block { min-width: 0; }

.fx-holo-orbit--inline {
  position: absolute;
  inset: -12px;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  transform: none;
}

.fx-holo-orbit--inline .fx-holo-ring--2 { inset: 8px; }

.fx-hex-row .fx-hex-stage {
  position: relative;
  width: clamp(72px, 12vw, 100px);
  height: clamp(72px, 12vw, 100px);
}

.fx-horizon-flare--tight {
  margin: 10px 0;
}

.fx-scene-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

.fx-price-badge--inline {
  margin: 0;
  padding: 10px 16px;
}

.fx-price-badge--inline .amount {
  font-size: clamp(28px, 4vw, 40px) !important;
}

.fx-scene--hud .fx-scene-cta {
  justify-content: flex-start;
  margin: 0;
}

.fx-hud-panel {
  position: relative;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(201, 169, 97, 0.28);
  overflow: hidden;
  font-family: var(--fx-font-mono, monospace);
}

.fx-hud-panel::before {
  top: 6px; left: 6px;
  border-width: 1px 0 0 1px;
}

.fx-hud-panel::after {
  bottom: 6px; right: 6px;
  border-width: 0 1px 1px 0;
}

.fx-hud-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--fx-gold-dim);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
}

.fx-hud-panel-live {
  color: var(--fx-burgundy);
  animation: fx-trust-pulse 2s ease infinite;
}

.fx-hud-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.fx-hud-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.fx-hud-line span {
  color: var(--fx-text-mute);
  flex-shrink: 0;
}

.fx-hud-line strong {
  color: var(--fx-champagne, #e8e6e1);
  font-weight: 500;
  text-align: right;
}

.fx-hud-line strong.fx-t-gold { color: var(--fx-gold-bright); }

.fx-hud-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.fx-hud-mini-grid div {
  text-align: center;
  padding: 10px 6px;
  border: 1px solid rgba(201, 169, 97, 0.15);
  background: rgba(201, 169, 97, 0.04);
}

.fx-hud-mini-grid em {
  display: block;
  font-style: normal;
  font-family: var(--fx-font-display, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--fx-gold-bright);
  line-height: 1;
  margin-bottom: 4px;
}

.fx-hud-mini-grid span {
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--fx-text-mute);
}

.fx-hud-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(249, 226, 125, 0.06), transparent);
  animation: fx-holo-scan-sweep 3s linear infinite;
  pointer-events: none;
  opacity: 0.8;
}

.fx-perspective-floor--low {
  height: 12%;
  opacity: 0.3;
}

.fx-scene--hud .fx-perspective-floor {
  display: none;
}

.fx-scene--hud .fx-scene-glow {
  top: -20px;
  width: min(320px, 55vw);
  height: min(180px, 30vw);
  opacity: 0.65;
}

.fx-scene--hud .fx-chart-watermark {
  inset: auto 0 0 0;
  height: 55%;
  opacity: 0.14;
}

/* Stronger global holo for HUD mode */
.fx-scene--hud ~ .fx-marquee-wrap,
.blb-future .fx-scene--hud + .fx-marquee-wrap {
  margin-top: 0;
}

.fx-scene--compact.fx-scene--hud {
  padding-top: 0 !important;
  padding-bottom: 16px !important;
}

.fx-scene-hud-wrap {
  padding-top: 0 !important;
}

.blb-future nav .blb-container,
.blb-future nav .container {
  height: 48px !important;
  min-height: 48px !important;
}

.blb-future .fx-holo-scan {
  opacity: 0.95;
  height: 80px;
}

.blb-future .fx-holo-grid {
  opacity: 0.55;
  background-size: 32px 32px;
}

.blb-future .fx-holo-particles {
  opacity: 0.75;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fx-holo-scan,
  .fx-holo-mesh,
  .fx-holo-ring,
  .fx-holo-chip,
  .fx-holo-stream,
  .fx-holo-card::after,
  .fx-chart-watermark,
  .fx-scene-title,
  .fx-holo-particles { animation: none !important; }
  .fx-hex-holo { display: none; }
}