/* Shared aurora background — used across all pages.
   Markup: <div class="bg-aurora"><div class="glow-3"></div><div class="mesh"></div></div> */

.bg-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-aurora::before, .bg-aurora::after { content: ''; position: absolute; border-radius: 50%; }
.bg-aurora::before { width: 900px; height: 600px; top: -220px; left: 50%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(45, 212, 168, 0.22) 0%, rgba(45, 212, 168, 0.06) 40%, transparent 70%); filter: blur(60px); }
.bg-aurora::after { width: 600px; height: 500px; bottom: -180px; right: -150px; background: radial-gradient(ellipse, rgba(45, 212, 168, 0.10) 0%, rgba(30, 180, 160, 0.04) 50%, transparent 70%); filter: blur(80px); }
.bg-aurora .glow-3 { position: absolute; width: 500px; height: 400px; bottom: 10%; left: -120px; background: radial-gradient(ellipse, rgba(45, 212, 168, 0.08) 0%, transparent 70%); filter: blur(70px); border-radius: 50%; }
.bg-aurora .mesh { position: absolute; inset: 0; background-image: linear-gradient(rgba(45, 212, 168, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 212, 168, 0.03) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 100%); }

.light .bg-aurora::before { background: radial-gradient(ellipse, rgba(22, 160, 133, 0.18) 0%, rgba(22, 160, 133, 0.05) 40%, transparent 70%); }
.light .bg-aurora::after { background: radial-gradient(ellipse, rgba(22, 160, 133, 0.08) 0%, rgba(22, 160, 133, 0.03) 50%, transparent 70%); }
.light .bg-aurora .glow-3 { background: radial-gradient(ellipse, rgba(22, 160, 133, 0.06) 0%, transparent 70%); }
.light .bg-aurora .mesh { background-image: linear-gradient(rgba(22, 160, 133, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 160, 133, 0.04) 1px, transparent 1px); }

@media (max-width: 600px) {
  .bg-aurora::before { filter: blur(40px); width: 600px; height: 400px; }
  .bg-aurora::after { filter: blur(50px); width: 400px; height: 350px; }
  .bg-aurora .glow-3 { filter: blur(45px); width: 350px; height: 300px; }
  .bg-aurora .mesh { display: none; }
  .bg-aurora::before, .bg-aurora::after, .bg-aurora .glow-3 { will-change: transform; }
}