/**
 * AURA.CSS - Premium background effects
 * Animated gradient blobs and grain overlay
 */

/* ========================================
   Premium Aura Background
   ======================================== */

.aura-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 0.92;
  background:
    radial-gradient(1200px 900px at 15% 10%, var(--aura-gold), transparent 55%),
    radial-gradient(900px 700px at 85% 85%, var(--aura-teal), transparent 60%),
    radial-gradient(700px 500px at 45% 55%, rgba(245,241,233,0.06), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.20)),
    var(--bg0);
}

/* Grain Overlay */
.aura-container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

/* ========================================
   Animated Blobs
   ======================================== */

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--blob-blur));
  opacity: var(--blob-opacity);
  will-change: transform;
  backface-visibility: hidden;
}

.blob.gold {
  width: 520px;
  height: 520px;
  background: var(--aura-gold);
  top: -18%;
  left: 6%;
  animation: driftA var(--driftA) ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.blob.teal {
  width: 680px;
  height: 680px;
  background: var(--aura-teal);
  bottom: -22%;
  right: -10%;
  animation: driftB var(--driftB) ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.blob.white {
  width: 900px;
  height: 900px;
  background: var(--aura-frost);
  top: -12%;
  left: 52%;
  opacity: 0.22;
  filter: blur(calc(var(--blob-blur) + 25px));
  animation: driftC var(--driftC) ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* ========================================
   Blob Drift Animations
   ======================================== */

@keyframes driftA {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(26vw, 14vh) scale(1.16) rotate(6deg); }
}

@keyframes driftB {
  0%   { transform: translate(0, 0) scale(1.05) rotate(0deg); }
  100% { transform: translate(-22vw, -16vh) scale(0.94) rotate(-7deg); }
}

@keyframes driftC {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(14vw, -10vh) scale(1.08) rotate(3deg); }
}

/* ========================================
   Mobile Optimizations
   ======================================== */

@media (max-width: 768px) {
  .aura-container {
    opacity: 1;
    background-color: #1a1b1e;
  }

  .blob {
    filter: blur(40px);
  }

  .blob.gold {
    width: 280px;
    height: 280px;
    top: -5%;
    left: -10%;
    mix-blend-mode: color-dodge;
    opacity: 0.5;
  }

  .blob.teal {
    width: 350px;
    height: 350px;
    bottom: -10%;
    right: -15%;
    mix-blend-mode: color-dodge;
    opacity: 0.6;
  }

  .blob.white {
    width: 300px;
    height: 300px;
    top: 20%;
    left: 10%;
    opacity: 0.1;
    mix-blend-mode: overlay;
  }
}

/* ========================================
   Reduced Motion
   ======================================== */

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