html, body {
  background: #020617;
}

.suite-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(37, 99, 235, 0.18), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #020617 55%, #020617 100%);
}

.suite-atmosphere-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  animation: suite-atmosphere-drift 18s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
}

.suite-atmosphere-orb-cool {
  width: min(52vw, 520px);
  height: min(52vw, 520px);
  top: -8%;
  left: -6%;
  background: radial-gradient(circle, #90d4f5 0%, #2563eb 38%, transparent 70%);
}

.suite-atmosphere-orb-warm {
  width: min(48vw, 460px);
  height: min(48vw, 460px);
  right: -8%;
  bottom: -12%;
  background: radial-gradient(circle, #faaa35 0%, #ed3558 40%, transparent 70%);
  animation-delay: -7s;
}

.suite-atmosphere-grid {
  position: absolute;
  inset: 42% 0 0;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent 95%);
  transform: perspective(500px) rotateX(62deg) scale(1.35);
  transform-origin: center top;
  opacity: 0.45;
}

.suite-atmosphere-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(2, 6, 23, 0.18) 3px 4px
  );
  opacity: 0.25;
}

.suite-atmosphere-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes suite-atmosphere-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

/* Phones / tablets: Dynamic Island clips the blurred orbs. Flat Suite blue only. */
html.mobile-layout .suite-atmosphere {
  background: #020617;
}

html.mobile-layout .suite-atmosphere-orb,
html.mobile-layout .suite-atmosphere-grid,
html.mobile-layout .suite-atmosphere-scan,
html.mobile-layout .suite-atmosphere-noise {
  display: none !important;
  animation: none !important;
}

@media (hover: none) and (pointer: coarse) {
  .suite-atmosphere {
    background: #020617;
  }
  .suite-atmosphere-orb,
  .suite-atmosphere-grid,
  .suite-atmosphere-scan,
  .suite-atmosphere-noise {
    display: none !important;
    animation: none !important;
  }
}