/* ═══════════════════════════════════════════
   Aurora background — drifting blurred radial blobs
   Required markup:
     <div class="aurora-bg">
       <div class="aurora-blob aurora-blob-1"></div>
       <div class="aurora-blob aurora-blob-2"></div>
       <div class="aurora-blob aurora-blob-3"></div>
     </div>
   The colors come from CSS variables defined in tokens-base.css
   (or the template's local override).
   ═══════════════════════════════════════════ */

.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    will-change: transform;
}

.aurora-blob-1 {
    width: 60vw; height: 60vw;
    max-width: 800px; max-height: 800px;
    background: radial-gradient(circle,
        var(--accent-warm-glow, rgba(232, 168, 124, 0.3)) 0%,
        rgba(74, 25, 66, 0.15) 50%,
        transparent 70%);
    top: -20%; left: -15%;
    animation: aurora-blob-drift-1 25s ease-in-out infinite;
}

.aurora-blob-2 {
    width: 50vw; height: 50vw;
    max-width: 700px; max-height: 700px;
    background: radial-gradient(circle,
        rgba(240, 180, 200, 0.2) 0%,
        rgba(212, 160, 160, 0.1) 40%,
        transparent 70%);
    bottom: -25%; right: -10%;
    animation: aurora-blob-drift-2 30s ease-in-out infinite;
}

.aurora-blob-3 {
    width: 40vw; height: 40vw;
    max-width: 600px; max-height: 600px;
    background: radial-gradient(circle,
        rgba(74, 25, 66, 0.25) 0%,
        rgba(12, 18, 34, 0.15) 50%,
        transparent 70%);
    top: 40%; left: 50%;
    transform: translate(-50%, -50%);
    animation: aurora-blob-drift-3 20s ease-in-out infinite;
}

@keyframes aurora-blob-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(8vw, 5vh) scale(1.1); }
    66% { transform: translate(-3vw, 8vh) scale(0.95); }
}
@keyframes aurora-blob-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-6vw, -4vh) scale(1.05); }
    66% { transform: translate(4vw, -7vh) scale(1.12); }
}
@keyframes aurora-blob-drift-3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-45%, -55%) scale(1.15); }
}