/* ==========================================================
   PULSE FLUID TOPOGRAPHY BACKGROUND SYSTEM
   Sistema Visual de Fundo com SVG Topográfico Dedicado
   ========================================================== */

/* Container Principal do Fundo Público */
.pulse-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Camada 1: Base Gradiente Profunda (Preto Profundo -> Grafite -> Azul Petróleo) */
.pulse-background__base {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 12% 18%, rgba(12, 24, 39, 0.85) 0%, transparent 55%),
        radial-gradient(circle at 88% 82%, rgba(14, 26, 44, 0.75) 0%, transparent 55%),
        radial-gradient(circle at 50% 85%, rgba(20, 22, 27, 0.95) 0%, transparent 60%),
        #080B0F;
    z-index: 1;
}

/* Base Comum para Glows Desfocados */
.pulse-background__glow {
    position: absolute;
    will-change: transform;
    pointer-events: none;
}

/* Camada 2: Glow Central Grafite Frio (Profundidade Neutra Atrás do Card) */
.pulse-background__glow--neutral {
    top: 20%;
    left: 50%;
    width: 920px;
    height: 920px;
    margin-left: -460px;
    border-radius: 50%;
    background: radial-gradient(ellipse 85% 65% at 50% 45%, rgba(30, 41, 59, 0.42) 0%, rgba(15, 23, 42, 0.12) 50%, transparent 70%);
    filter: blur(150px);
    opacity: 0.85;
    z-index: 2;
    transform: translate3d(var(--parallax-neutral-x, 0px), var(--parallax-neutral-y, 0px), 0);
    animation: pulse-ambient-neutral 24s ease-in-out infinite alternate;
}

/* Camada 3: Glow Verde Esmeralda Organic Aurora (Top-Left, Alongado & Difuso) */
.pulse-background__glow--emerald {
    top: -2%;
    left: 2%;
    width: 840px;
    height: 540px;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    background: radial-gradient(ellipse 75% 50% at 25% 25%, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.015) 55%, transparent 75%);
    filter: blur(120px);
    opacity: 0.85;
    z-index: 3;
    transform: translate3d(var(--parallax-emerald-x, 0px), var(--parallax-emerald-y, 0px), 0);
    animation: pulse-ambient-emerald 22s ease-in-out infinite alternate;
}

/* Camada 4: Glow Azul Petróleo Organic Aurora (Bottom-Right, Alongado & Frio) */
.pulse-background__glow--petrol {
    bottom: -2%;
    right: 2%;
    width: 880px;
    height: 580px;
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    background: radial-gradient(ellipse 80% 55% at 75% 75%, rgba(14, 116, 144, 0.09) 0%, rgba(15, 26, 42, 0.02) 60%, transparent 75%);
    filter: blur(130px);
    opacity: 0.85;
    z-index: 4;
    transform: translate3d(var(--parallax-petrol-x, 0px), var(--parallax-petrol-y, 0px), 0);
    animation: pulse-ambient-petrol 28s ease-in-out infinite alternate;
}

/* Camada 5: SVG Topográfico Dedicado (72 Curvas Orgânicas Multi-Camada) */
.pulse-background__topography {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 1.0;
    background-image: url("../img/pulse-login-topography.svg?v=topografia-final-v6");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* Máscara radial calibrada: ~30% de redução no centro vs laterais (leitura sem apagar a topografia) */
    -webkit-mask-image: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.85) 28%, rgba(0, 0, 0, 1.0) 58%, rgba(0, 0, 0, 0.88) 82%, transparent 100%);
    mask-image: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.85) 28%, rgba(0, 0, 0, 1.0) 58%, rgba(0, 0, 0, 0.88) 82%, transparent 100%);
}

/* Camada 6: Noise Textura Ultra-Sutil */
.pulse-background__noise {
    position: absolute;
    inset: 0;
    z-index: 6;
    opacity: 0.012;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* Camada 7: Vinheta Focal Conduzindo Olhar ao Centro */
.pulse-background__vignette {
    position: absolute;
    inset: 0;
    z-index: 7;
    background: radial-gradient(circle at 50% 45%, transparent 32%, rgba(4, 5, 7, 0.86) 100%);
}

/* ─────────────────────────────────────────────
   ANIMAÇÕES AMBIENTES DE RESPIRAÇÃO (AURORAS VIVAS: 22s - 28s)
───────────────────────────────────────────── */
@keyframes pulse-ambient-emerald {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    50% {
        transform: translate3d(14px, -14px, 0) scale(1.025) rotate(1deg);
    }
    100% {
        transform: translate3d(-10px, 8px, 0) scale(0.985) rotate(-1deg);
    }
}

@keyframes pulse-ambient-petrol {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    50% {
        transform: translate3d(-16px, 12px, 0) scale(1.02) rotate(-1deg);
    }
    100% {
        transform: translate3d(8px, -12px, 0) scale(0.99) rotate(1deg);
    }
}

@keyframes pulse-ambient-neutral {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(8px, 10px, 0) scale(1.015);
    }
    100% {
        transform: translate3d(-6px, -8px, 0) scale(0.995);
    }
}

/* ─────────────────────────────────────────────
   RESPONSIVIDADE & PREFERS-REDUCED-MOTION
───────────────────────────────────────────── */
@media (max-width: 768px), (pointer: coarse) {
    .pulse-background__glow {
        filter: blur(70px);
        animation: none !important;
        transform: none !important;
    }
    .pulse-background__glow--emerald {
        width: 480px;
        height: 360px;
        top: -5%;
        left: -15%;
    }
    .pulse-background__glow--petrol {
        width: 500px;
        height: 380px;
        bottom: -5%;
        right: -15%;
    }
    .pulse-background__glow--neutral {
        display: none;
    }
    .pulse-background__topography {
        opacity: 0.70;
        background-size: cover;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pulse-background__glow {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}