/* ==========================================================
   REPORTES AsEp
   BACKGROUND.CSS
   Fondo visual del Home
   ========================================================== */

.hero-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 50% -10%,
            var(--home-bg-glow-strong) 0%,
            var(--home-bg-glow-medium) 24%,
            var(--home-bg-glow-soft) 52%,
            transparent 76%
        ),
        linear-gradient(
            180deg,
            var(--home-bg-top) 0%,
            var(--home-bg-middle) 48%,
            var(--home-bg-bottom) 100%
        );
}


/* ==========================================================
   PATRÓN — DOTS + GRID
   ========================================================== */

.hero-bg::before,
.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
}

.hero-bg::before {
    background-image:
        url("/static/img/background/light/dots.svg"),
        url("/static/img/background/light/grid.svg");

    background-position:
        center center,
        center center;

    background-size:
        clamp(1500px, 120vw, 2300px) auto,
        clamp(1500px, 120vw, 2300px) auto;

    opacity: var(--home-bg-pattern-opacity);

    animation:
        backgroundFloat
        var(--home-bg-pattern-duration)
        var(--ease-standard)
        infinite;
}


/* ==========================================================
   LÍNEAS
   ========================================================== */

.hero-bg::after {
    background-image:
        url("/static/img/background/light/lines.svg");

    background-position: center center;
    background-size: clamp(1450px, 112vw, 2150px) auto;

    opacity: var(--home-bg-lines-opacity);

    animation:
        backgroundFloat
        var(--home-bg-lines-duration)
        var(--ease-standard)
        infinite
        reverse;
}


/* ==========================================================
   ILUMINACIÓN AMBIENTAL
   ========================================================== */

.hero-light {
    position: fixed;
    inset: 0;
    z-index: var(--z-normal);
    overflow: hidden;
    pointer-events: none;
}

.hero-light::before {
    content: "";
    position: absolute;
    top: -24vw;
    left: 50%;
    width: min(1800px, 125vw);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    border-radius: var(--radius-circle);

    background:
        radial-gradient(
            ellipse,
            var(--home-light-glow-strong) 0%,
            var(--home-light-glow-medium) 28%,
            var(--home-light-glow-soft) 55%,
            transparent 78%
        );

    filter: blur(var(--home-light-blur));
    opacity: var(--home-light-opacity);

    animation:
        glowPulse
        var(--home-glow-duration)
        var(--ease-standard)
        infinite;
}

.hero-light::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1350px, 95vw);
    aspect-ratio: 2.8 / 1;
    transform: translateX(-50%);
    border-radius: var(--radius-circle);

    background:
        radial-gradient(
            ellipse,
            var(--home-blue-glow-strong) 0%,
            var(--home-blue-glow-medium) 40%,
            transparent 74%
        );

    filter: blur(var(--home-blue-blur));
}


/* ==========================================================
   NOISE
   ========================================================== */

.hero-noise {
    position: fixed;
    inset: 0;
    z-index: var(--z-normal);
    pointer-events: none;

    opacity: var(--home-noise-opacity);
    mix-blend-mode: soft-light;

    background-image:
        radial-gradient(
            circle at 20% 24%,
            var(--home-noise-color) .5px,
            transparent .6px
        ),
        radial-gradient(
            circle at 78% 32%,
            var(--home-noise-color) .5px,
            transparent .6px
        ),
        radial-gradient(
            circle at 42% 72%,
            var(--home-noise-color) .5px,
            transparent .6px
        ),
        radial-gradient(
            circle at 72% 88%,
            var(--home-noise-color) .5px,
            transparent .6px
        );

    background-size:
        180px 180px,
        220px 220px,
        260px 260px,
        300px 300px;
}


/* ==========================================================
   DARK
   ========================================================== */

[data-theme="dark"] .hero-bg {
    background:
        radial-gradient(
            ellipse at 50% -10%,
            var(--home-dark-bg-glow-strong) 0%,
            var(--home-dark-bg-glow-medium) 28%,
            transparent 62%
        ),
        linear-gradient(
            180deg,
            var(--home-dark-bg-top) 0%,
            var(--home-dark-bg-middle) 48%,
            var(--home-dark-bg-bottom) 100%
        );
}

[data-theme="dark"] .hero-bg::before {
    background-image:
        url("/static/img/background/dark/dots.svg"),
        url("/static/img/background/dark/grid.svg");

    opacity: var(--home-dark-pattern-opacity);
}

[data-theme="dark"] .hero-bg::after {
    background-image:
        url("/static/img/background/dark/lines.svg");

    opacity: var(--home-dark-lines-opacity);
    mix-blend-mode: screen;
}

[data-theme="dark"] .hero-light {
    opacity: var(--home-dark-light-opacity);
}

[data-theme="dark"] .hero-light::before {
    background:
        radial-gradient(
            ellipse,
            var(--home-dark-light-blue-strong) 0%,
            var(--home-dark-light-blue-medium) 38%,
            transparent 78%
        );
}

[data-theme="dark"] .hero-light::after {
    background:
        radial-gradient(
            ellipse,
            var(--home-dark-light-orange-strong) 0%,
            var(--home-dark-light-orange-medium) 40%,
            transparent 76%
        );
}

[data-theme="dark"] .hero-noise {
    opacity: var(--home-dark-noise-opacity);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1200px) {

    .hero-bg::before {
        background-size:
            118vw auto,
            118vw auto;
    }

    .hero-bg::after {
        background-size:
            110vw auto;
    }
}

@media (max-width: 992px) {

    .hero-bg::before {
        background-size:
            128vw auto,
            128vw auto;

        opacity: var(--home-bg-pattern-opacity-tablet);
    }

    .hero-bg::after {
        background-size: 122vw auto;
        opacity: var(--home-bg-lines-opacity-tablet);
    }
}

@media (max-width: 768px) {

    .hero-bg::before {
        background-size:
            145vw auto,
            145vw auto;

        opacity: var(--home-bg-pattern-opacity-mobile);
    }

    .hero-bg::after {
        background-size: 138vw auto;
        opacity: var(--home-bg-lines-opacity-mobile);
    }

    .hero-light::before {
        width: 175vw;
        top: -12vw;
        filter: blur(var(--home-light-blur-mobile));
    }

    .hero-light::after {
        width: 125vw;
        filter: blur(var(--home-blue-blur-mobile));
    }
}

@media (max-width: 576px) {

    .hero-bg::before {
        background-size:
            170vw auto,
            170vw auto;

        opacity: var(--home-bg-pattern-opacity-small);
    }

    .hero-bg::after {
        background-size: 165vw auto;
        opacity: var(--home-bg-lines-opacity-small);
    }

    .hero-light::before {
        width: 210vw;
        top: -10vw;
    }

    .hero-light::after {
        width: 150vw;
    }
}


/* ==========================================================
   ANIMACIONES
   ========================================================== */

@keyframes backgroundFloat {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(0, -8px, 0)
            scale(1.012);
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }
}

@keyframes glowPulse {

    0%,
    100% {
        transform:
            translateX(-50%)
            scale(1);

        opacity: var(--home-light-opacity);
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.035);

        opacity: var(--home-light-opacity-pulse);
    }
}


/* ==========================================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-bg::before,
    .hero-bg::after,
    .hero-light::before,
    .hero-light::after {
        animation: none !important;
    }
}


/* ==========================================================
   PRINT
   ========================================================== */

@media print {

    .hero-bg,
    .hero-light,
    .hero-noise {
        display: none !important;
    }
}