.bg--img {
    background: url("./assets/main_cover7.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



.bg--center {
    background: var(--color-obsidian) radial-gradient(circle at 50% 50%, rgba(var(--card-rgb-accent), 0.5), transparent 80%);
}

.bg--wave {
    background: var(--color-obsidian) linear-gradient(to bottom, rgba(var(--card-rgb-accent), 0.4), transparent 90%);
}

.bg--mesh {
    background:
        radial-gradient(at 10% 20%, rgba(var(--card-rgb-accent), 0.4) 0px, transparent 50%),
        radial-gradient(at 90% 80%, rgba(var(--card-rgb-accent), 0.3) 0px, transparent 50%);
}

.bg--split {
    background: rgba(var(--card-rgb-accent), 0.1);
}

.bg--split::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(var(--card-rgb-accent), 0.6), transparent 60%);
}



.bg--flare2 {
    background: radial-gradient(ellipse at -20% 50%, rgba(247, 37, 133, 0.7), transparent 70%);
}

.bg--flare2-solid {
    background: var(--color-obsidian); /* Фон остается темным */
}

/* .bg--flare2-solid::after {
    content: "";
    width: 10rem;
    height: 30rem;
    position: absolute;
    background-color: aqua;
    border-radius: 63% 37% 13% 87% / 39% 46% 54% 61% ;
    bottom: 2rem;
    left: 1rem
} */

.bg--double-flare::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(var(--card-rgb-accent), 0.8);
    border-radius: 50%;
    top: 10%;
    right: -50px;
}

.bg--double-flare::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    background: #4cc9f0; /* Дополнительный цвет для контраста */
    border-radius: 50%;
    bottom: 20%;
    left: 10%;
}

.bg--aurora {
    background: linear-gradient(45deg, rgba(var(--card-rgb-accent), 0.5) 0%, transparent 40%, rgba(var(--card-rgb-accent), 0.4) 100%);
}

.bg--aurora2 {
    background: linear-gradient(45deg, blue 0%, transparent 40%, blue 100%);
}

.bg--cosmic {
    background: linear-gradient(45deg, #000, rgba(var(--card-rgb-accent), 0.4), #111);
}

.bg--edge {
    background: radial-gradient(circle at 10% 50%, rgba(var(--card-rgb-accent), 0.7), transparent 50%), var(--color-obsidian);
}

.bg--fog {
    background: linear-gradient(to bottom, rgba(var(--card-rgb-accent), 0.2), var(--color-obsidian));
}

.bg--triple {
    background:
        radial-gradient(at 80% 10%, rgba(var(--card-rgb-accent), 0.4) 0px, transparent 40%),
        radial-gradient(at 20% 80%, rgba(var(--card-rgb-accent), 0.3) 0px, transparent 40%),
        var(--color-obsidian);
}

.bg--slice {
    background: linear-gradient(135deg, var(--color-obsidian) 40%, rgba(var(--card-rgb-accent), 0.5) 50%, var(--color-obsidian) 60%);
}