.ambient-particle-field {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 48%, rgba(255, 151, 38, .10), transparent 34%),
    radial-gradient(circle at 48% 56%, rgba(130, 54, 9, .10), transparent 58%);
  opacity: 0;
  transition: opacity 1.2s ease;
}

.ambient-particle-field.is-ready,
.ambient-particle-field.is-fallback {
  opacity: 1;
}

.ambient-particle-field.is-fallback {
  background:
    radial-gradient(circle at 68% 48%, rgba(255, 171, 62, .17), transparent 8%),
    radial-gradient(ellipse at 68% 48%, rgba(199, 79, 12, .12), transparent 45%),
    #0b0908;
}

.ambient-particle-canvas,
.ambient-particle-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ambient-particle-canvas {
  display: block;
  opacity: .76;
  transform: translateZ(0);
}

.ambient-particle-veil {
  background:
    linear-gradient(90deg, rgba(9, 9, 9, .78), rgba(9, 8, 7, .26) 52%, rgba(9, 8, 7, .48)),
    radial-gradient(ellipse at 68% 48%, transparent 0 23%, rgba(8, 8, 8, .18) 62%, rgba(8, 8, 8, .58) 100%);
}

body.motion-muted .ambient-particle-canvas {
  opacity: .42;
}

.app-shell,
.auth-view,
.shell {
  position: relative;
  z-index: 1;
}

@media (max-width: 800px) {
  .ambient-particle-canvas { opacity: .57; }
  .ambient-particle-veil {
    background: linear-gradient(rgba(8, 8, 8, .58), rgba(8, 8, 8, .72));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-particle-field { transition: none; }
  .ambient-particle-canvas { opacity: .36; }
}