.home-hero-gradient,
.footer-gradient {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #070c18;
    background-image:
        radial-gradient(ellipse 62% 72% at 3% 104%, rgba(80, 5, 12, 0.20) 0%, rgba(80, 5, 12, 0.08) 34%, transparent 66%),
        radial-gradient(ellipse 46% 55% at 94% 3%, rgba(30, 41, 59, 0.34) 0%, rgba(15, 23, 42, 0.12) 48%, transparent 72%),
        linear-gradient(115deg, #080914 0%, #07101e 50%, #0b1424 100%);
}

.home-hero-gradient > *,
.footer-gradient > * {
    position: relative;
    z-index: 1;
}

.home-hero-gradient::before,
.home-hero-gradient::after,
.footer-gradient::before,
.footer-gradient::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    will-change: transform;
}

/*
   Back layer: broad, irregular burgundy smoke. Dark navy ellipses are deliberately
   layered above the red forms to cut channels and gaps through the haze so it reads
   as smoke rather than a spotlight or single radial glow.
*/
.home-hero-gradient::before {
    width: 172%;
    height: 176%;
    left: -43%;
    bottom: -66%;
    opacity: 0.88;
    transform-origin: 26% 76%;
    filter: blur(18px);
    background-image:
        radial-gradient(ellipse 16% 11% at 24% 61%, rgba(2, 6, 23, 0.66) 0%, rgba(2, 6, 23, 0.24) 48%, transparent 72%),
        radial-gradient(ellipse 13% 9% at 36% 70%, rgba(2, 6, 23, 0.55) 0%, rgba(2, 6, 23, 0.18) 50%, transparent 72%),
        radial-gradient(ellipse 11% 8% at 18% 76%, rgba(7, 12, 24, 0.50) 0%, rgba(7, 12, 24, 0.16) 48%, transparent 72%),
        radial-gradient(ellipse 29% 18% at 17% 71%, rgba(80, 5, 12, 0.82) 0%, rgba(80, 5, 12, 0.42) 34%, rgba(80, 5, 12, 0.10) 62%, transparent 78%),
        radial-gradient(ellipse 24% 14% at 30% 76%, rgba(120, 10, 20, 0.58) 0%, rgba(80, 5, 12, 0.28) 38%, rgba(80, 5, 12, 0.07) 64%, transparent 77%),
        radial-gradient(ellipse 18% 11% at 9% 82%, rgba(185, 28, 28, 0.36) 0%, rgba(120, 10, 20, 0.18) 38%, transparent 72%),
        radial-gradient(ellipse 18% 9% at 40% 80%, rgba(120, 10, 20, 0.28) 0%, rgba(80, 5, 12, 0.11) 42%, transparent 72%),
        radial-gradient(ellipse 12% 7% at 49% 77%, rgba(185, 28, 28, 0.13) 0%, rgba(120, 10, 20, 0.06) 42%, transparent 70%);
    animation: save-nein-smoke-back 54s ease-in-out infinite alternate;
}

/* Front layer: narrower crimson wisps that break up the broad back layer. */
.home-hero-gradient::after {
    width: 166%;
    height: 168%;
    left: -40%;
    bottom: -58%;
    opacity: 0.76;
    transform-origin: 33% 80%;
    filter: blur(9px);
    background-image:
        radial-gradient(ellipse 9% 5% at 21% 66%, rgba(3, 7, 18, 0.54) 0%, rgba(3, 7, 18, 0.16) 50%, transparent 72%),
        radial-gradient(ellipse 8% 5% at 33% 73%, rgba(3, 7, 18, 0.46) 0%, rgba(3, 7, 18, 0.14) 50%, transparent 72%),
        radial-gradient(ellipse 17% 7% at 15% 71%, rgba(185, 28, 28, 0.52) 0%, rgba(120, 10, 20, 0.26) 34%, rgba(80, 5, 12, 0.08) 64%, transparent 75%),
        radial-gradient(ellipse 13% 6% at 27% 68%, rgba(120, 10, 20, 0.46) 0%, rgba(80, 5, 12, 0.20) 38%, transparent 72%),
        radial-gradient(ellipse 12% 5% at 22% 79%, rgba(220, 38, 38, 0.20) 0%, rgba(185, 28, 28, 0.13) 30%, rgba(120, 10, 20, 0.05) 60%, transparent 73%),
        radial-gradient(ellipse 15% 6% at 38% 78%, rgba(185, 28, 28, 0.30) 0%, rgba(120, 10, 20, 0.13) 38%, transparent 72%),
        radial-gradient(ellipse 10% 4% at 45% 73%, rgba(120, 10, 20, 0.20) 0%, rgba(80, 5, 12, 0.07) 42%, transparent 70%),
        radial-gradient(ellipse 8% 4% at 11% 84%, rgba(185, 28, 28, 0.28) 0%, rgba(120, 10, 20, 0.10) 40%, transparent 70%);
    animation: save-nein-smoke-wisp 37s ease-in-out infinite alternate-reverse;
}

/* Footer uses the same visual language, but with a separate composition and lower intensity. */
.footer-gradient::before {
    width: 176%;
    height: 230%;
    left: -39%;
    bottom: -108%;
    opacity: 0.67;
    transform-origin: 41% 80%;
    filter: blur(16px);
    background-image:
        radial-gradient(ellipse 15% 10% at 30% 49%, rgba(2, 6, 23, 0.58) 0%, rgba(2, 6, 23, 0.20) 48%, transparent 72%),
        radial-gradient(ellipse 12% 8% at 45% 55%, rgba(2, 6, 23, 0.48) 0%, rgba(2, 6, 23, 0.15) 50%, transparent 72%),
        radial-gradient(ellipse 27% 17% at 22% 55%, rgba(80, 5, 12, 0.72) 0%, rgba(80, 5, 12, 0.34) 36%, rgba(80, 5, 12, 0.08) 63%, transparent 76%),
        radial-gradient(ellipse 22% 13% at 39% 58%, rgba(120, 10, 20, 0.45) 0%, rgba(80, 5, 12, 0.20) 40%, transparent 72%),
        radial-gradient(ellipse 17% 10% at 12% 60%, rgba(185, 28, 28, 0.26) 0%, rgba(120, 10, 20, 0.12) 38%, transparent 70%),
        radial-gradient(ellipse 14% 8% at 52% 58%, rgba(120, 10, 20, 0.18) 0%, rgba(80, 5, 12, 0.07) 42%, transparent 70%);
    animation: save-nein-smoke-back 50s ease-in-out -19s infinite alternate-reverse;
}

.footer-gradient::after {
    width: 170%;
    height: 216%;
    left: -34%;
    bottom: -99%;
    opacity: 0.52;
    transform-origin: 51% 84%;
    filter: blur(8px);
    background-image:
        radial-gradient(ellipse 9% 5% at 27% 53%, rgba(2, 6, 23, 0.46) 0%, rgba(2, 6, 23, 0.14) 50%, transparent 72%),
        radial-gradient(ellipse 16% 7% at 18% 55%, rgba(185, 28, 28, 0.42) 0%, rgba(120, 10, 20, 0.19) 36%, transparent 72%),
        radial-gradient(ellipse 13% 6% at 34% 58%, rgba(120, 10, 20, 0.34) 0%, rgba(80, 5, 12, 0.14) 40%, transparent 72%),
        radial-gradient(ellipse 10% 5% at 44% 55%, rgba(220, 38, 38, 0.13) 0%, rgba(185, 28, 28, 0.08) 34%, transparent 68%),
        radial-gradient(ellipse 11% 5% at 51% 60%, rgba(185, 28, 28, 0.17) 0%, rgba(120, 10, 20, 0.07) 40%, transparent 70%);
    animation: save-nein-smoke-wisp 41s ease-in-out -11s infinite alternate;
}

@keyframes save-nein-smoke-back {
    0% {
        transform: translate3d(-8px, 7px, 0) scale(1.01) rotate(-0.65deg);
    }

    50% {
        transform: translate3d(13px, -8px, 0) scale(1.025) rotate(0.3deg);
    }

    100% {
        transform: translate3d(31px, -18px, 0) scale(1.045) rotate(0.95deg);
    }
}

@keyframes save-nein-smoke-wisp {
    0% {
        transform: translate3d(11px, -4px, 0) scale(1.005) rotate(0.65deg);
    }

    50% {
        transform: translate3d(-6px, 7px, 0) scale(1.02) rotate(-0.3deg);
    }

    100% {
        transform: translate3d(-25px, 15px, 0) scale(1.04) rotate(-0.9deg);
    }
}

@media (max-width: 640px) {
    .home-hero-gradient::before {
        opacity: 0.78;
    }

    .home-hero-gradient::after {
        opacity: 0.65;
    }

    .footer-gradient::before {
        opacity: 0.58;
    }

    .footer-gradient::after {
        opacity: 0.44;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-gradient::before,
    .footer-gradient::before {
        animation: none;
        transform: translate3d(13px, -8px, 0) scale(1.025) rotate(0.3deg);
    }

    .home-hero-gradient::after,
    .footer-gradient::after {
        animation: none;
        transform: translate3d(-6px, 7px, 0) scale(1.02) rotate(-0.3deg);
    }
}