/* v3. Aurora backdrop for #pricing, replacing the dot-grid canvas (Bm).
 *
 * The reference component animates `background-position` from 50% to 350% on a
 * blurred, 300%-sized, mix-blend-difference layer. That repaints the whole
 * surface every frame -- the same class of cost that took this page to 2.7fps
 * with an SVG dash animation on 2026-08-20. Here the gradient is static and an
 * oversized layer is slid with translate3d instead, which the compositor owns:
 * visually the same drifting bands, no per-frame repaint.
 *
 * Two layers at different widths and speeds give the interference that the
 * original gets from blending a white repeating gradient over the aurora.
 */

.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Same falloff as the reference: strongest top-right, gone by the middle. */
  /* Two masks: the reference's top-right falloff, AND a fade across the first
     slice of the section. Without the second one the aurora begins at full
     strength on the border line and the join with the white section above
     reads as a hard cut. */
  -webkit-mask-image:
    radial-gradient(ellipse at 100% 0%, #000 18%, transparent 78%),
    linear-gradient(to bottom, transparent 0, #000 22%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(ellipse at 100% 0%, #000 18%, transparent 78%),
    linear-gradient(to bottom, transparent 0, #000 22%);
          mask-composite: intersect;
}

.aurora span {
  position: absolute;
  top: -30%;
  left: -60%;
  width: 220%;
  height: 160%;
  will-change: transform;
  filter: blur(36px);
}

/* The aurora ramp itself, straight from the reference's colour stops. */
.aurora .a1 {
  background-image: repeating-linear-gradient(
    100deg,
    #1e40af 10%, #4f46e5 15%, #2563eb 20%, #7c3aed 25%, #1d4ed8 30%
  );
  opacity: .30;
  animation: aurora-drift-a 62s linear infinite;
}

/* The lighter counter-band. In the reference this is the white repeating
   gradient composited with mix-blend-difference; a second offset layer at a
   different rate gives the same shifting interference far more cheaply. */
.aurora .a2 {
  background-image: repeating-linear-gradient(
    100deg,
    #ffffff 0%, #ffffff 7%, transparent 10%, transparent 12%, #ffffff 16%
  );
  opacity: .34;
  animation: aurora-drift-b 41s linear infinite;
}

@keyframes aurora-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-32%, 0, 0); }
}
@keyframes aurora-drift-b {
  from { transform: translate3d(-26%, 0, 0); }
  to   { transform: translate3d(4%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora span { animation: none; }
}

/* Phones get a cheaper version: one layer, less blur. A 46px blur across a
   full-width surface is the expensive part on mobile GPUs. */
@media (max-width: 767px) {
  .aurora span { filter: blur(28px); }
  .aurora .a2 { display: none; }
}