/**
 * Frontend animated backgrounds for Divi.
 *
 * Usa las siguientes clases en secciones/filas/módulos de Divi (Advanced -> CSS Class):
 *
 *  - armo-abd-floating-shapes   -> Fondos con formas flotantes animadas.
 *  - armo-abd-gradient-pulse    -> Gradiente suave que hace "pulse".
 *  - armo-abd-parallax-mouse    -> Fondo que se mueve sutilmente con el mouse.
 *  - armo-abd-grid              -> Grid tipo matrix.
 *  - armo-abd-lines             -> Líneas diagonales repetidas.
 *  - armo-abd-particles         -> Partículas tipo estrellas/puntos.
 *
 * Importante: estos estilos no rompen el contenido de Divi, trabajan con pseudo-elementos.
 */

.armo-abd-floating-shapes,
.armo-abd-gradient-pulse,
.armo-abd-parallax-mouse,
.armo-abd-grid,
.armo-abd-lines,
.armo-abd-particles {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.armo-abd-floating-shapes > *,
.armo-abd-gradient-pulse > *,
.armo-abd-parallax-mouse > *,
.armo-abd-grid > *,
.armo-abd-lines > *,
.armo-abd-particles > * {
    position: relative;
    z-index: 2;
}

/* Aseguramos que el contenedor tenga fondo por defecto
   para que el efecto sea visible aunque Divi no defina background. */
.armo-abd-floating-shapes,
.armo-abd-gradient-pulse,
.armo-abd-grid,
.armo-abd-lines,
.armo-abd-particles {
    background-color: #050816;
    min-height: 280px;
}

/* Floating shapes */
.armo-abd-floating-shapes::before,
.armo-abd-floating-shapes::after {
    content: "";
    position: absolute;
    inset: -20%;
    opacity: 0.95;
    z-index: 1;
    pointer-events: none;
    animation: armo-abd-floating 24s ease-in-out infinite alternate;
}

.armo-abd-floating-shapes::after {
    animation-duration: 32s;
    animation-direction: alternate-reverse;
    filter: blur(10px);
    opacity: 0.75;
}

@keyframes armo-abd-floating {
    0% {
        transform: translate3d(-10px, -10px, 0) scale(1);
    }
    50% {
        transform: translate3d(20px, 30px, 0) scale(1.06);
    }
    100% {
        transform: translate3d(-25px, 15px, 0) scale(1.02);
    }
}

/* Gradient pulse */
.armo-abd-gradient-pulse::before {
    content: "";
    position: absolute;
    inset: -10%;
    background-size: 200% 200%;
    animation: armo-abd-gradient-move 16s ease-in-out infinite,
               armo-abd-gradient-pulse 4s ease-in-out infinite;
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
}

@keyframes armo-abd-gradient-move {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes armo-abd-gradient-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.03);
        opacity: 1;
    }
}

/* Parallax mouse */
.armo-abd-parallax-mouse {
    background-color: #0b1020;
}

.armo-abd-parallax-mouse::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.2), transparent 60%);
    opacity: 0.7;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.15s ease-out;
    transform-origin: center;
}

.armo-abd-parallax-intensity-low::before {
    transition-duration: 0.25s;
}

.armo-abd-parallax-intensity-high::before {
    transition-duration: 0.08s;
}

/* Grid effect */
.armo-abd-grid::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-size: 40px 40px;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    animation: armo-abd-grid-pan 30s linear infinite;
}

@keyframes armo-abd-grid-pan {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-40px, -40px, 0);
    }
}

/* Lines effect */
.armo-abd-lines::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-size: 24px 24px;
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
    animation: armo-abd-lines-pan 18s linear infinite;
}

@keyframes armo-abd-lines-pan {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(40px, 40px, 0);
    }
}

/* Particles effect */
.armo-abd-particles::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-size: 6px 6px;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
    animation: armo-abd-particles-twinkle 4s ease-in-out infinite alternate;
}

@keyframes armo-abd-particles-twinkle {
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .armo-abd-floating-shapes::before,
    .armo-abd-floating-shapes::after,
    .armo-abd-gradient-pulse::before,
    .armo-abd-parallax-mouse::before,
    .armo-abd-grid::before,
    .armo-abd-lines::before,
    .armo-abd-particles::before {
        animation: none !important;
        transition: none !important;
    }
}