:root {
  --aura-blue: rgba(42, 112, 246, 0.38);
  --aura-sky: rgba(92, 179, 255, 0.34);
  --aura-slate: rgba(140, 155, 185, 0.29);
  --aura-pearl: rgba(207, 221, 242, 0.48);
  --aura-trail: rgba(44, 124, 255, 0.3);
  --aura-trail-blend: multiply;
}

:root[data-theme="dark"] {
  --aura-blue: rgba(65, 126, 255, 0.34);
  --aura-sky: rgba(62, 164, 222, 0.28);
  --aura-slate: rgba(85, 103, 140, 0.31);
  --aura-pearl: rgba(121, 145, 190, 0.21);
  --aura-trail: rgba(74, 145, 255, 0.24);
  --aura-trail-blend: screen;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
}

.aura-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

.aura-veil {
  position: absolute;
  left: -30vw;
  width: 160vw;
  height: 62vh;
  min-height: 32rem;
  filter: blur(34px);
  will-change: transform, opacity;
}

.aura-veil::before,
.aura-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  will-change: transform;
}

.aura-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 17rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--aura-trail) 0%, transparent 70%);
  filter: blur(22px);
  mix-blend-mode: var(--aura-trail-blend);
  opacity: 0;
  will-change: transform, opacity;
}

.aura-veil-one {
  top: -18vh;
  animation: aura-flow-one 8s ease-in-out infinite;
}

.aura-veil-one::before {
  background:
    radial-gradient(ellipse 36% 26% at 18% 52%, var(--aura-blue), transparent 72%),
    radial-gradient(ellipse 42% 22% at 58% 42%, var(--aura-sky), transparent 72%),
    radial-gradient(ellipse 32% 28% at 90% 58%, var(--aura-pearl), transparent 74%);
  animation: aura-ripple 6.5s ease-in-out -4s infinite;
}

.aura-veil-two {
  top: 20vh;
  animation: aura-flow-two 10s ease-in-out -7s infinite;
}

.aura-veil-two::before {
  background:
    radial-gradient(ellipse 40% 20% at 16% 48%, var(--aura-slate), transparent 73%),
    radial-gradient(ellipse 38% 25% at 52% 62%, var(--aura-blue), transparent 72%),
    radial-gradient(ellipse 42% 21% at 87% 44%, var(--aura-sky), transparent 74%);
  animation: aura-ripple 8s ease-in-out -9s infinite reverse;
}

.aura-veil-three {
  top: 58vh;
  animation: aura-flow-three 12s ease-in-out -12s infinite;
}

.aura-veil-three::before {
  background:
    radial-gradient(ellipse 45% 21% at 22% 54%, var(--aura-pearl), transparent 74%),
    radial-gradient(ellipse 36% 28% at 62% 48%, var(--aura-slate), transparent 73%),
    radial-gradient(ellipse 34% 22% at 92% 60%, var(--aura-blue), transparent 72%);
  animation: aura-ripple 9.5s ease-in-out -2s infinite;
}

.aura-veil::after {
  background: linear-gradient(104deg, transparent 8%, var(--aura-sky) 42%, transparent 68%);
  animation: aura-sweep 7s ease-in-out infinite;
}

.site-header,
.announcement-bar,
.page-shell,
.site-footer {
  position: relative;
  z-index: 2;
}

.site-header { background: var(--bg); }
.announcement-bar { background: var(--accent); }

@keyframes aura-flow-one {
  0%, 100% { transform: translate3d(-12%, -8%, 0) rotate(-4deg) scale(0.94, 0.84); opacity: 0.48; }
  28% { transform: translate3d(7%, 10%, 0) rotate(3deg) scale(1.12, 1.16); opacity: 0.9; }
  57% { transform: translate3d(15%, -4%, 0) rotate(-2deg) scale(1.04, 0.9); opacity: 0.64; }
  81% { transform: translate3d(-4%, 12%, 0) rotate(4deg) scale(1.16, 1.08); opacity: 0.84; }
}

@keyframes aura-flow-two {
  0%, 100% { transform: translate3d(13%, 7%, 0) rotate(4deg) scale(1.08, 0.88); opacity: 0.42; }
  24% { transform: translate3d(-8%, -11%, 0) rotate(-3deg) scale(0.92, 1.17); opacity: 0.8; }
  54% { transform: translate3d(-15%, 7%, 0) rotate(2deg) scale(1.14, 0.94); opacity: 0.58; }
  78% { transform: translate3d(5%, -5%, 0) rotate(-5deg) scale(1.03, 1.12); opacity: 0.76; }
}

@keyframes aura-flow-three {
  0%, 100% { transform: translate3d(-9%, 11%, 0) rotate(-3deg) scale(1.12, 0.9); opacity: 0.36; }
  31% { transform: translate3d(12%, -8%, 0) rotate(4deg) scale(0.92, 1.14); opacity: 0.7; }
  66% { transform: translate3d(-5%, -14%, 0) rotate(-2deg) scale(1.16, 1.05); opacity: 0.52; }
  86% { transform: translate3d(-13%, 4%, 0) rotate(3deg) scale(1.03, 1.18); opacity: 0.66; }
}

@keyframes aura-ripple {
  0%, 100% { transform: translateX(-9%) skewX(-7deg) scaleX(0.9); }
  35% { transform: translateX(10%) skewX(6deg) scaleX(1.13); }
  68% { transform: translateX(-3%) skewX(-3deg) scaleX(1.04); }
}

@keyframes aura-sweep {
  0%, 100% { transform: translateX(-20%) skewY(-7deg) scaleY(0.36); opacity: 0.08; }
  48% { transform: translateX(18%) skewY(5deg) scaleY(0.62); opacity: 0.28; }
  76% { transform: translateX(4%) skewY(-2deg) scaleY(0.48); opacity: 0.16; }
}

@media (prefers-reduced-motion: reduce) {
  .aura-veil,
  .aura-veil::before,
  .aura-veil::after {
    animation-duration: 80s;
  }

  .aura-trail {
    display: none;
  }
}

@media (pointer: coarse) {
  .aura-trail {
    display: none;
  }
}