/* copied from public/assets/css/background-effects.css */
.app-background::before,
.app-background::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.app-background::before {
    /* softer, less saturated glow for top center */
    background: radial-gradient(circle at top center, rgb(var(--primary-rgb) / 0.08) 0%, transparent 70%);
    filter: blur(28px) saturate(0.95);
}

.app-background::after {
    background: radial-gradient(circle at 80% 20%, rgb(var(--primary-rgb) / 0.06) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgb(var(--primary-rgb) / 0.04) 0%, transparent 50%);
    animation: backgroundShift 15s ease-in-out infinite alternate;
    filter: blur(30px);
}

@keyframes backgroundShift {
    0% { transform: scale(1) translate(0); }
    50% { transform: scale(1.05) translate(-2%, 2%); }
    100% { transform: scale(1) translate(2%, -2%); }
}

.app-background-pattern { position: fixed; inset: 0; z-index: -2; opacity: 0.3; mask-image: radial-gradient(circle at center, black, transparent); background-image: linear-gradient(rgb(var(--primary-rgb) / 0.1) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--primary-rgb) / 0.1) 1px, transparent 1px); background-size: 30px 30px; background-position: center; transform: perspective(1000px) rotateX(60deg) translateY(-50%) scale(2); }