.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: #0f1f2e;
}

.hero-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/static/img/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 5%;
    filter: blur(10px) brightness(0.72);
    transform: scale(1.08);
    opacity: 0.8;
    z-index: 0;
}

.hero-background-image {
    position: absolute;
    inset: 0;
    background-image: url('/static/img/background.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center 5%;
    transform: translate3d(0, 0, 0);
    animation: heroBackgroundPan 20s ease-in-out infinite alternate;
    will-change: transform;
    z-index: 1;
}

.hero-background-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
    z-index: 2;
}

.hero-background-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(42px);
    opacity: 0.2;
    background: var(--gradient-primary);
    animation: heroGlowFloat 8s ease-in-out infinite;
    z-index: 3;
}

.hero-background-glow.glow-a {
    top: -120px;
    left: -120px;
}

.hero-background-glow.glow-b {
    right: -120px;
    bottom: -120px;
    animation-delay: 1.8s;
}

@keyframes heroBackgroundPan {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-0.15%, 0.1%, 0);
    }
}

@media (max-width: 768px) {
    .hero-background-image {
        background-size: contain;
        background-position: center 5%;
    }
}

@keyframes heroGlowFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -18px, 0);
    }
}