/* ============================================================
   Feed Analytics — Network Transition
   Vanilla CSS · responsive · scoped under .fa-transition
   ============================================================ */

.fa-transition {
  /* Tokens (override these on the host element to rebrand) */
  --fa-bg:           #ffffff;
  --fa-text:         #15181d;
  --fa-text-dim:     #5a6472;
  --fa-text-faint:   #8b94a0;
  --fa-line:         #e3e6ea;
  --fa-bg-soft:      #f0f2f5;
  --fa-accent:       #2563eb;
  --fa-accent-soft:  rgba(37, 99, 235, 0.08);
  --fa-start:        #16a34a;
  --fa-end:          #2563eb;
  --fa-route:        #2563eb;
  --fa-mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fa-display:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Timing — adjust to taste */
  --fa-duration:     2600ms;
  --fa-spin:         8s;

  /* Layout */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--fa-bg);
  color: var(--fa-text);
  font-family: var(--fa-display);
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* When inlined inside a panel instead of full-screen, set position: relative on the host */
.fa-transition[data-mode="inline"] {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  z-index: auto;
}

.fa-transition * { box-sizing: border-box; }

/* ---------- Veil (white wash that fades to reveal target page) ---------- */
.fa-veil {
  position: absolute;
  inset: 0;
  background: var(--fa-bg);
  opacity: 1;
}

/* ---------- 3D scene ---------- */
.fa-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Responsive: scale with viewport min-side */
  width: clamp(280px, 48vmin, 720px);
  aspect-ratio: 1 / 1;
  perspective: 1200px;
}

.fa-ball {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center;
}

.fa-running .fa-ball {
  animation: fa-spin var(--fa-spin) linear infinite;
}

@keyframes fa-spin {
  0%   { transform: rotateY(0deg)   rotateX(-12deg); }
  100% { transform: rotateY(360deg) rotateX(-12deg); }
}

/* ---------- Lattice dots (sphere body) ---------- */
.fa-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--fa-accent);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: 0;
  will-change: opacity;
}

.fa-running .fa-dot {
  animation: fa-dot-show 700ms ease-out forwards;
}

@keyframes fa-dot-show {
  0%   { opacity: 0; }
  100% { opacity: var(--fa-o, 0.65); }
}

/* ---------- Route arc dots ---------- */
.fa-route-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--fa-route);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: 0;
}

.fa-running .fa-route-dot {
  animation: fa-dot-show 400ms ease-out forwards;
}

/* ---------- Pins (origin / destination) ---------- */
.fa-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: 0;
  will-change: opacity, transform;
}

.fa-pin.fa-start {
  background: var(--fa-start);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 3px var(--fa-start);
}

.fa-pin.fa-end {
  background: var(--fa-end);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 3px var(--fa-end);
}

.fa-running .fa-pin {
  animation: fa-pin-pop 500ms ease-out forwards;
}

@keyframes fa-pin-pop {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Pulse ring around destination pin */
.fa-pin-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--fa-end);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: 0;
}

.fa-running .fa-pin-ring {
  animation: fa-pin-ring 1400ms ease-out forwards;
}

@keyframes fa-pin-ring {
  0%   { opacity: 0; }
  30%  { opacity: 0.7; }
  100% { opacity: 0; }
}

/* Vehicle markers */
.fa-vehicle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--fa-accent);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: 0;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}

.fa-running .fa-vehicle {
  animation: fa-dot-show 400ms ease-out forwards;
}

/* ---------- Trip label (top) ---------- */
.fa-trip-label {
  position: absolute;
  left: 50%;
  top: clamp(16px, 6vh, 56px);
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  font-family: var(--fa-mono);
  font-size: clamp(10px, 1.4vmin, 14px);
  letter-spacing: 0.18em;
  color: var(--fa-text-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

.fa-running .fa-trip-label {
  animation: fa-fade-in-mid var(--fa-duration) 200ms ease-out forwards;
}

/* ---------- Loader (bottom) ---------- */
.fa-loader {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 8vh, 80px);
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  width: min(90%, 520px);
}

.fa-loader-label {
  font-family: var(--fa-mono);
  font-size: clamp(10px, 1.2vmin, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fa-text-faint);
}

.fa-loader-pct {
  font-family: var(--fa-display);
  font-weight: 700;
  font-size: clamp(32px, 6vmin, 64px);
  letter-spacing: -0.02em;
  color: var(--fa-text);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fa-loader-pct .fa-u {
  font-size: 0.45em;
  color: var(--fa-text-faint);
  font-weight: 500;
  margin-left: 4px;
}

.fa-loader-bar {
  margin: 14px auto 0;
  width: min(100%, 320px);
  height: 2px;
  background: var(--fa-bg-soft);
  border-radius: 2px;
  overflow: hidden;
}

.fa-loader-fill {
  height: 100%;
  background: var(--fa-accent);
  width: 0;
}

.fa-loader-meta {
  margin-top: 14px;
  font-family: var(--fa-mono);
  font-size: clamp(9px, 1vmin, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fa-text-dim);
}

.fa-running .fa-loader {
  animation: fa-loader-show var(--fa-duration) ease-out forwards;
}

.fa-running .fa-loader-fill {
  animation: fa-bar-fill calc(var(--fa-duration) - 700ms) 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ---------- Veil fade-out (reveal target page) ---------- */
.fa-running .fa-veil {
  animation: fa-fade-out var(--fa-duration) 0ms ease-out forwards;
}

/* ---------- Keyframes ---------- */
@keyframes fa-fade-out {
  0%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fa-fade-in-mid {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fa-loader-show {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  78%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  90%  { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  100% { opacity: 0; }
}

@keyframes fa-bar-fill {
  0%   { width: 0; }
  100% { width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fa-running .fa-ball { animation: none; }
  .fa-running .fa-dot,
  .fa-running .fa-route-dot,
  .fa-running .fa-pin,
  .fa-running .fa-vehicle { animation-duration: 200ms; }
  .fa-running .fa-veil { animation-duration: 600ms; }
}

/* ---------- Dark mode (auto) ---------- */
@media (prefers-color-scheme: dark) {
  .fa-transition:not([data-theme="light"]) {
    --fa-bg:         #0b0d10;
    --fa-text:       #f4f5f7;
    --fa-text-dim:   #8b94a0;
    --fa-text-faint: #5a6472;
    --fa-line:       #1f2329;
    --fa-bg-soft:    #15181d;
    --fa-accent:     #60a5fa;
    --fa-start:      #34d399;
    --fa-end:        #60a5fa;
    --fa-route:      #60a5fa;
  }
}

.fa-transition[data-theme="dark"] {
  --fa-bg:         #0b0d10;
  --fa-text:       #f4f5f7;
  --fa-text-dim:   #8b94a0;
  --fa-text-faint: #5a6472;
  --fa-line:       #1f2329;
  --fa-bg-soft:    #15181d;
  --fa-accent:     #60a5fa;
  --fa-start:      #34d399;
  --fa-end:        #60a5fa;
  --fa-route:      #60a5fa;
}