/* ==========================================================================
   aurora.css — hero aurora. NON-NEGOTIABLE (Business Discovery Spec §11).
   --------------------------------------------------------------------------
   Carried over verbatim in construction; only the literal values have been
   lifted into the --lg-* tokens in tokens.css. Output is unchanged. Do not
   edit this file, its tokens, or the keyframes without an explicit
   instruction to change the hero.

   Construction (per BDS §11):
     - circular container: aspect-ratio 1/1, border-radius 50%,
       overflow hidden, isolation isolate
     - two pseudo-element layers (::before / ::after), each carrying four
       radial-gradient(at X% Y%, var(--lg-cN), transparent 50%) stops at
       differing positions
     - filter: blur(--lg-blur) saturate(--lg-saturation) on the parent
     - pseudo-elements inset: -5%
     - motion: lgFlowA on ::before at --lg-speed (5s); lgFlowB on ::after at
       calc(--lg-speed * 1.3) (6.5s); counter-rotating; both linear infinite;
       ::after at opacity 0.9; keyframes translate +/-5-10% while rotating a
       full 360deg / -360deg
     - responsive: --lg-size 45vw -> 60vw (<=1024) -> 85vw (<=767) -> 90vw
       (<=480); --lg-blur 50 -> 45 -> 35 -> 28px; circle at every breakpoint
   ========================================================================== */

.aurora {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: var(--lg-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  z-index: var(--z-aurora);
  pointer-events: none;
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  inset: -5%;
  border-radius: 50%;
}

.aurora::before {
  background:
    radial-gradient(at 22% 24%, var(--lg-c1), transparent 50%),
    radial-gradient(at 78% 20%, var(--lg-c2), transparent 50%),
    radial-gradient(at 28% 80%, var(--lg-c3), transparent 50%),
    radial-gradient(at 76% 74%, var(--lg-c4), transparent 50%);
  animation: lgFlowA var(--lg-speed) linear infinite;
}

.aurora::after {
  background:
    radial-gradient(at 32% 70%, var(--lg-c1), transparent 50%),
    radial-gradient(at 70% 32%, var(--lg-c2), transparent 50%),
    radial-gradient(at 64% 82%, var(--lg-c3), transparent 50%),
    radial-gradient(at 18% 40%, var(--lg-c4), transparent 50%);
  opacity: 0.9;
  animation: lgFlowB calc(var(--lg-speed) * 1.3) linear infinite;
}

@keyframes lgFlowA {
  0%   { transform: rotate(0deg)   translate(-6%, -4%); }
  50%  { transform: rotate(180deg) translate(6%, 9%); }
  100% { transform: rotate(360deg) translate(-6%, -4%); }
}

@keyframes lgFlowB {
  0%   { transform: rotate(0deg)    translate(7%, -5%); }
  50%  { transform: rotate(-180deg) translate(-7%, 6%); }
  100% { transform: rotate(-360deg) translate(7%, -5%); }
}

/* Responsive size / blur steps — circle preserved at every breakpoint. */
@media (max-width: 1024px) {
  :root {
    --lg-size: 60vw;
    --lg-blur: 30px;
  }
}

@media (max-width: 767px) {
  :root {
    --lg-size: 85vw;
    --lg-blur: 24px;
  }
}

@media (max-width: 480px) {
  :root {
    --lg-size: 90vw;
    --lg-blur: 20px;
  }
}

/* Reduced motion: rotation is paused (see base.css global rule); the
   blurred, saturated colour field is retained exactly. This is the agreed
   resolution of the aurora-vs-prefers-reduced-motion conflict. */
@media (prefers-reduced-motion: reduce) {
  .aurora::before,
  .aurora::after {
    animation: none;
  }
}