/**
 * Shared marketing canvas — Home + About (ambient gradients + grain).
 */
#grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.018;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  #grain { opacity: 0; }
}

[data-theme="dark"] #grain {
  opacity: 0.04;
  mix-blend-mode: soft-light;
}

.home-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  min-height: 100vh;
}

.home-ambient-layer {
  position: absolute;
  inset: -25%;
  --dx: 0px;
  --dy: 0px;
  --dx2: 0px;
  --dy2: 0px;
  will-change: transform;
  transform: translate3d(var(--dx), var(--dy), 0) scale(1.04);
}

.home-ambient-layer--back {
  background:
    radial-gradient(ellipse 72% 58% at 0% 0%, rgba(0, 113, 227, 0.065) 0%, transparent 58%),
    radial-gradient(ellipse 68% 52% at 100% 0%, rgba(175, 210, 232, 0.11) 0%, transparent 54%),
    radial-gradient(ellipse 62% 48% at 0% 100%, rgba(225, 240, 248, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 58% 46% at 100% 100%, rgba(205, 230, 236, 0.09) 0%, transparent 52%),
    radial-gradient(ellipse 95% 78% at 50% 38%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, #f7f8fa 0%, #fafbfc 30%, #fcfcfd 100%);
}

.home-ambient-layer--front {
  transform: translate3d(var(--dx2), var(--dy2), 0) scale(1.06);
  opacity: 1;
  background:
    radial-gradient(ellipse 52% 42% at 6% 14%, rgba(0, 113, 227, 0.035) 0%, transparent 52%),
    radial-gradient(ellipse 50% 40% at 94% 18%, rgba(160, 200, 220, 0.055) 0%, transparent 50%),
    radial-gradient(ellipse 46% 38% at 10% 92%, rgba(235, 248, 252, 0.07) 0%, transparent 48%),
    radial-gradient(ellipse 44% 36% at 90% 94%, rgba(220, 238, 244, 0.06) 0%, transparent 46%);
  filter: blur(52px);
}

[data-theme="dark"] .home-ambient-layer--back {
  background: linear-gradient(180deg, #111111 0%, #131316 100%);
}

[data-theme="dark"] .home-ambient-layer--front {
  opacity: 0;
}

body.page-marketing {
  background: var(--ds-canvas-bg);
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .home-ambient-layer {
    transform: none !important;
  }
}