/* ==========================================================
   SHARED: SCROLLING AURORA BACKGROUND
   One definition for the home page and the three service pages.
   Driven by --bg, --glow-core and --glow-falloff, which each page
   rewrites while scrolling.
   ========================================================== */
#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
  background: var(--bg);
}

.aurora-stack {
  position: absolute;
  inset: -25% 0;
  will-change: transform;
}

.aurora-sheet {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aurora-sheet-gold {
  background:
    radial-gradient(55% 45% at 18% 76%, color-mix(in srgb, var(--glow-core) 52%, transparent) 0%, transparent 72%),
    radial-gradient(48% 40% at 84% 22%, color-mix(in srgb, var(--glow-core) 32%, transparent) 0%, transparent 70%);
}

.aurora-sheet-blue {
  background:
    radial-gradient(50% 44% at 74% 66%, rgba(30, 58, 138, 0.36) 0%, transparent 70%),
    radial-gradient(42% 36% at 22% 28%, rgba(30, 58, 138, 0.24) 0%, transparent 68%);
}

.aurora-sheet-veil {
  background: linear-gradient(180deg, rgba(6, 9, 14, 0.28) 0%, rgba(6, 9, 14, 0.66) 55%, rgba(6, 9, 14, 0.88) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .aurora-stack {
      animation: aurora-drift linear both;
      animation-timeline: scroll(root block);
    }

    @keyframes aurora-drift {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(0, -34vh, 0); }
    }
  }
}