/* ============================================================================
   Background engine styles — layer base + animation presets.
   Paired with src/background.js. Link this wherever backgrounds are used.
   ============================================================================ */

.fx-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* ── Animation preset: 'aurora' — soft drifting brand blobs (the menu hero look) ── */
.fx-aurora { background: var(--mb-surface-1a, #f2f2f0); }
.fx-aurora-blob {
  position: absolute;
  width: 48%; aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
.fx-aurora-1 {
  left: -8%; top: -10%;
  background: radial-gradient(circle, rgba(233,30,99,0.55), transparent 70%);
  animation: fx-aurora-1 13s ease-in-out infinite;
}
.fx-aurora-2 {
  right: -10%; top: 6%;
  background: radial-gradient(circle, rgba(124,90,224,0.45), transparent 70%);
  animation: fx-aurora-2 16s ease-in-out infinite;
}
.fx-aurora-3 {
  left: 24%; bottom: -14%;
  background: radial-gradient(circle, rgba(69,90,100,0.35), transparent 70%);
  animation: fx-aurora-3 19s ease-in-out infinite;
}

/* Larger travel + 3-stop paths so the drift is clearly perceptible (the blobs
   are heavily blurred, so they need to move a fair distance to read as alive). */
@keyframes fx-aurora-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(34%,22%) scale(1.22); }
  66%     { transform: translate(14%,40%) scale(0.9); }
}
@keyframes fx-aurora-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-30%,26%) scale(1.15); }
  66%     { transform: translate(-44%,-14%) scale(1.28); }
}
@keyframes fx-aurora-3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(30%,-34%) scale(1.3); }
}

/* Reduced motion → hold a still frame (the engine also degrades video/animation
   to a static layer, but this covers presets already mounted). */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora-blob { animation: none !important; }
}