/* Linear homepage-style background — radial glow + vignette + film grain (no dot canvas) */

.site-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--brand-bg);
  contain: strict;
  isolation: isolate;
}

/* Primary: single wide top glow — opaque stops only so nothing cuts off abruptly */
.site-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-bg-radial);
}

/* Secondary: soft horizon line + edge vignette */
.site-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(7, 7, 7, 0.35) 100%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(7, 7, 7, 0.5) 0%, rgba(7, 7, 7, 0.18) 32%, transparent 55%);
  opacity: 0.9;
}

/* Film grain layer (Linear GrainCanvas ~0.1 opacity) */
.site-background__grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  mix-blend-mode: soft-light;
  background-repeat: repeat;
  background-size: 220px 220px;
  /* Softer tile than feTurbulence — Chrome renders SVG noise far harsher than Firefox */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  /* Animate tile offset — transform on a 200% layer causes Chrome compositor grain bleed */
  animation: site-grain-drift 8s steps(10) infinite;
  pointer-events: none;
  will-change: background-position;
}

@keyframes site-grain-drift {
  0% { background-position: 0 0; }
  10% { background-position: -14px -18px; }
  20% { background-position: 12px 8px; }
  30% { background-position: -8px 14px; }
  40% { background-position: 16px -12px; }
  50% { background-position: -12px 18px; }
  60% { background-position: 8px -8px; }
  70% { background-position: -18px 12px; }
  80% { background-position: 14px -16px; }
  90% { background-position: -8px 10px; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-background__grain {
    animation: none;
    opacity: 0.03;
  }
}

/* Legacy dot canvas — hidden if markup not yet updated */
.dot-pattern-wrap {
  display: none !important;
}