:root {
  --tt-bg: #020617;
  --tt-fg: #f9fafb;
  --tt-gold: #fbbf24;
}

body {
  background: radial-gradient(circle at top, #020617 0, #020617 45%, #000 100%);
  color: var(--tt-fg);
}

/* Root background container behind React app */
.tt-bg-root {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.7) 60%, #000 100%);
}

/* Ensure React root floats above background */
#root {
  position: relative;
  z-index: 1;
}

/* LAYER 1 — TOPOGRAPHIC GRID */

.tt-topo-grid {
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle at 0 0, rgba(148, 163, 184, 0.06) 0, transparent 55%),
    repeating-linear-gradient(
      0deg,
      rgba(148, 163, 184, 0.08),
      rgba(148, 163, 184, 0.08) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.08),
      rgba(148, 163, 184, 0.08) 1px,
      transparent 1px,
      transparent 12px
    );
  mix-blend-mode: soft-light;
  opacity: 0.08;
  transform: translate3d(0, 0, 0);
  animation: tt-topo-drift 90s linear infinite;
}

@keyframes tt-topo-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-40px, -40px, 0) rotate(1deg);
  }
  100% {
    transform: translate3d(-80px, -80px, 0) rotate(0deg);
  }
}

/* LAYER 2 — SATELLITE SCAN SWEEP */

.tt-radar {
  position: absolute;
  width: 140vmin;
  height: 140vmin;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(15, 23, 42, 0.4) 0, transparent 70%),
    conic-gradient(
      from 0deg,
      rgba(251, 191, 36, 0.18),
      rgba(251, 191, 36, 0) 30%,
      transparent 60%,
      transparent 100%
    );
  mix-blend-mode: soft-light;
  opacity: 0.2;
  animation: tt-radar-rotate 22s linear infinite;
}

@keyframes tt-radar-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* LAYER 3 — GEOSPATIAL DATA PARTICLES */

.tt-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tt-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: var(--tt-gold);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.65);
  opacity: 0.8;
  transform: translate3d(0, 0, 0);
  animation: tt-particle-drift linear infinite;
}

@keyframes tt-particle-drift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translate3d(var(--tt-dx, 60px), var(--tt-dy, -80px), 0);
    opacity: 0;
  }
}

/* Vignette + subtle scan flash when logging in (optional hook) */

.tt-scan-pulse {
  position: absolute;
  inset: -10%;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.22), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: tt-scan-pulse 900ms ease-out forwards;
}

@keyframes tt-scan-pulse {
  0% {
    opacity: 0.0;
    transform: scale(0.75);
  }
  30% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}