/* TradeBrain ambient layer and engine graphic. Decorative only.
 * Reads the shared design tokens with fallbacks; defines none of its own.
 * Every animation is declared only under prefers-reduced-motion:no-preference
 * AND :root:not([data-motion="off"]); otherwise everything renders still. */

#tb-ambient,
.tb-ambient-sky {
  position: fixed;
  pointer-events: none;
}

#tb-ambient {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
}

.tb-ambient-sky {
  inset: -12%;
  z-index: -2;
  background:
    radial-gradient(ellipse 55% 45% at 18% 22%, var(--violet-soft, rgba(143,123,255,.14)), transparent 70%),
    radial-gradient(ellipse 50% 40% at 82% 74%, var(--cyan-soft, rgba(79,216,255,.14)), transparent 70%),
    radial-gradient(ellipse 35% 30% at 62% 18%, rgba(79,216,255,.06), transparent 70%),
    linear-gradient(165deg, var(--bg, #060b18) 0%, var(--bg-2, #0a1226) 52%, var(--bg, #060b18) 100%);
  will-change: transform;
}

/* ----- engine graphic */

.tb-engine {
  display: block;
  width: clamp(132px, 30vw, 240px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  pointer-events: none;
}

.tb-engine-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.tb-engine-ring,
.tb-engine-glow,
.tb-engine-node {
  transform-box: view-box;
  transform-origin: 120px 120px;
}

.tb-engine-glow { opacity: 0.85; }

.tb-engine-node {
  transform-box: fill-box;
  transform-origin: center;
}

.tb-engine[data-mode="working"] .tb-engine-glow { opacity: 1; }

/* ----- motion, guarded twice */

@media (prefers-reduced-motion: no-preference) {
  @keyframes tb-sky-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-3%, 2%, 0) scale(1.04); }
    100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
  }

  @keyframes tb-engine-turn {
    to { transform: rotate(360deg); }
  }

  @keyframes tb-engine-turn-back {
    to { transform: rotate(-360deg); }
  }

  @keyframes tb-engine-breathe {
    0%, 100% { opacity: 0.6; transform: scale(0.97); }
    50% { opacity: 0.95; transform: scale(1.03); }
  }

  @keyframes tb-engine-node-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
  }

  :root:not([data-motion="off"]) .tb-ambient-sky {
    animation: tb-sky-drift 70s ease-in-out infinite alternate;
  }

  :root:not([data-motion="off"]) .tb-engine-ring-outer {
    animation: tb-engine-turn 120s linear infinite;
  }

  :root:not([data-motion="off"]) .tb-engine-ring-mid {
    animation: tb-engine-turn-back 80s linear infinite;
  }

  :root:not([data-motion="off"]) .tb-engine-orbit {
    animation: tb-engine-turn 40s linear infinite;
  }

  :root:not([data-motion="off"]) .tb-engine-glow {
    animation: tb-engine-breathe 7s ease-in-out infinite;
  }

  :root:not([data-motion="off"]) .tb-engine-node {
    animation: tb-engine-node-pulse 7s ease-in-out infinite;
  }

  :root:not([data-motion="off"]) .tb-engine[data-mode="working"] .tb-engine-glow {
    animation-duration: 2.8s;
  }

  :root:not([data-motion="off"]) .tb-engine[data-mode="working"] .tb-engine-node {
    animation-duration: 2.8s;
  }

  :root:not([data-motion="off"]) .tb-engine[data-mode="working"] .tb-engine-orbit {
    animation-duration: 20s;
  }
}