/* BRO.TEAM v0.9.25-R — Visible Motion Recovery / Pill Restore
   FLOW = CSS-only / always-on / visible z-index:0 / no toggle / no localStorage.
   Fixes v0.9.23 issue where z-index/isolation and opaque backgrounds made motion invisible or visually disconnected. */
:root {
  --flow-cyan: 0, 245, 255;
  --flow-blue: 70, 110, 255;
  --flow-violet: 175, 80, 255;
  --flow-pink: 255, 45, 190;
  --flow-emerald: 0, 214, 143;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body.static-ambient-v924,
body.cyberpunk-neon-mode.static-ambient-v924 {
  position: relative;
  overflow-x: hidden;
  isolation: auto !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(var(--flow-cyan), 0.13), transparent 34rem),
    radial-gradient(circle at 86% 18%, rgba(var(--flow-violet), 0.13), transparent 36rem),
    linear-gradient(135deg, #040611 0%, #080b18 48%, #050611 100%) !important;
}

/* Important: keep app content above ambient layer */
body.static-ambient-v924 > :not(.cyber-ambient-v924):not(.flow925):not(.pill925) {
  position: relative;
  z-index: 1;
}

.cyber-ambient-v924 {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
}

.cyber-ambient-v924__orb,
.cyber-ambient-v924__sweep,
.cyber-ambient-v924__grid {
  position: absolute;
  inset: -20%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Visible moving cyan/violet field */
.cyber-ambient-v924__orb--a {
  opacity: 0.48;
  background:
    radial-gradient(circle at 22% 30%, rgba(var(--flow-cyan), 0.45), transparent 24rem),
    radial-gradient(circle at 72% 18%, rgba(var(--flow-violet), 0.32), transparent 30rem),
    radial-gradient(circle at 48% 78%, rgba(var(--flow-blue), 0.26), transparent 34rem);
  animation: cyberFlowOrbA 22s ease-in-out infinite;
}

/* Second layer moving opposite direction */
.cyber-ambient-v924__orb--b {
  opacity: 0.32;
  background:
    radial-gradient(circle at 80% 70%, rgba(var(--flow-pink), 0.28), transparent 28rem),
    radial-gradient(circle at 28% 86%, rgba(var(--flow-cyan), 0.22), transparent 30rem),
    radial-gradient(circle at 58% 52%, rgba(var(--flow-emerald), 0.10), transparent 34rem);
  animation: cyberFlowOrbB 31s ease-in-out infinite;
}

/* Soft diagonal movement, no blink */
.cyber-ambient-v924__sweep {
  opacity: 0.24;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 24%,
      rgba(var(--flow-cyan), 0.12) 38%,
      rgba(var(--flow-pink), 0.10) 50%,
      rgba(var(--flow-blue), 0.10) 62%,
      transparent 76%,
      transparent 100%
    );
  animation: cyberFlowSweep 26s linear infinite;
}

/* Moving grid */
.cyber-ambient-v924__grid {
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(var(--flow-cyan), 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--flow-cyan), 0.22) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 74%);
  animation: cyberFlowGrid 38s linear infinite;
}

/* Seamless shell: keep the same world behind topbar/sidebar/main instead of separate hard panels. */
.static-ambient-v924 .topbar {
  background:
    linear-gradient(180deg, rgba(5, 7, 15, 0.84), rgba(5, 7, 15, 0.70)) !important;
  border-bottom-color: rgba(0, 245, 255, 0.14) !important;
  backdrop-filter: blur(20px) saturate(1.15);
}

.static-ambient-v924 .sidenav {
  background:
    linear-gradient(180deg, rgba(6, 10, 18, 0.78), rgba(5, 9, 17, 0.70)) !important;
  border-right-color: rgba(0, 245, 255, 0.12) !important;
  backdrop-filter: blur(16px) saturate(1.08);
}

.static-ambient-v924 .main-content {
  background: transparent !important;
}

.static-ambient-v924 .card,
.static-ambient-v924 .metric,
.static-ambient-v924 .bro-mission-hero,
.static-ambient-v924 .bro-status-card,
.static-ambient-v924 .bro-command-card,
.static-ambient-v924 .cyber-panel {
  background-color: rgba(15, 19, 29, 0.72);
  backdrop-filter: blur(10px) saturate(1.08);
}

/* Tone down left rail so it feels continuous, not like a split screen. */
.static-ambient-v924 .sidenav::after,
.static-ambient-v924 .sidenav::before {
  opacity: 0.52 !important;
}

@keyframes cyberFlowOrbA {
  0% { transform: translate3d(-3%, -2%, 0) scale(1.02); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.02); }
}

@keyframes cyberFlowOrbB {
  0% { transform: translate3d(3%, 2%, 0) scale(1.04); }
  50% { transform: translate3d(-3%, -2%, 0) scale(1.10); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.04); }
}

@keyframes cyberFlowSweep {
  0% { transform: translate3d(-12%, 0, 0); }
  100% { transform: translate3d(12%, 0, 0); }
}

@keyframes cyberFlowGrid {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(76px, 76px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cyber-ambient-v924__orb--a { animation-duration: 80s; }
  .cyber-ambient-v924__orb--b { animation-duration: 90s; }
  .cyber-ambient-v924__sweep { animation-duration: 95s; }
  .cyber-ambient-v924__grid { animation-duration: 110s; }
}