.bamba-vault-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 255, 136, 0.12), transparent 34%),
        radial-gradient(circle at 85% 35%, rgba(255, 198, 92, 0.08), transparent 24%),
        linear-gradient(180deg, #050605 0%, #090909 55%, #030303 100%);
}

.vault-noise {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px);
    background-size: 4px 4px;
}

.vault-ring {
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(0, 255, 136, 0.10);
    box-shadow:
        inset 0 0 40px rgba(0, 255, 136, 0.04),
        0 0 60px rgba(0, 255, 136, 0.04);
    animation: vaultRotate 45s linear infinite;
}

.vault-ring::before,
.vault-ring::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: inherit;
    border: 1px dashed rgba(255, 198, 92, 0.10);
}

.vault-ring::after {
    inset: 28%;
    border-style: solid;
    border-color: rgba(0, 255, 136, 0.08);
}

.vault-ring-1 {
    width: 620px;
    height: 620px;
    left: -220px;
    top: 80px;
}

.vault-ring-2 {
    width: 760px;
    height: 760px;
    right: -260px;
    bottom: -220px;
    animation-direction: reverse;
    animation-duration: 60s;
}

.vault-lines {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background:
        linear-gradient(115deg, transparent 0%, transparent 42%, rgba(0,255,136,0.18) 43%, transparent 44%, transparent 100%),
        linear-gradient(65deg, transparent 0%, transparent 55%, rgba(255,198,92,0.12) 56%, transparent 57%, transparent 100%);
    animation: vaultLinesMove 18s ease-in-out infinite alternate;
}

.vault-coin {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, #fff6c9, #00ff88 35%, #083d1b 72%);
    box-shadow: 0 0 18px rgba(0, 255, 136, 0.35);
    opacity: 0.45;
    animation: coinFloat 9s ease-in-out infinite;
}

.coin-1 { top: 22%; left: 18%; }
.coin-2 { top: 62%; left: 8%; animation-delay: 2s; }
.coin-3 { top: 18%; right: 14%; animation-delay: 4s; }
.coin-4 { bottom: 18%; right: 28%; animation-delay: 6s; }

@keyframes vaultRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes vaultLinesMove {
    from { transform: translateX(-30px); opacity: 0.10; }
    to { transform: translateX(30px); opacity: 0.24; }
}

@keyframes coinFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.35;
    }
    50% {
        transform: translateY(-34px) scale(1.25);
        opacity: 0.75;
    }
}