/* CSS Animated Background - GPU-friendly, blue / white / gray blend */

body:has(.app-background) {
    background: #e8eef5;
    background-image: none;
}

.app-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(135deg, #e2e8f0 0%, #d4dce8 50%, #e8eef5 100%);
}

.app-background::before,
.app-background::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
}

/* Layer 1: Blue, white, and gray radial blobs + conic sweep */
.app-background::before {
    background:
        radial-gradient(ellipse 55% 55% at 15% 25%, #a8c8e8 0%, rgba(168, 200, 232, 0.3) 50%, transparent 75%),
        radial-gradient(ellipse 50% 50% at 85% 75%, #c8d8e8 0%, rgba(200, 216, 232, 0.4) 50%, transparent 70%),
        radial-gradient(ellipse 65% 65% at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.5) 40%, transparent 70%),
        radial-gradient(ellipse 45% 45% at 70% 30%, #b8c5d4 0%, rgba(184, 197, 212, 0.5) 55%, transparent 75%),
        conic-gradient(from 90deg at 50% 50%, rgba(180, 200, 220, 0.6) 0deg, rgba(255, 255, 255, 0.5) 90deg, rgba(160, 185, 210, 0.55) 180deg, rgba(210, 222, 235, 0.5) 270deg);
    filter: blur(35px);
    opacity: 0.85;
    mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 40%, black 80%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 40%, black 80%, transparent 100%);
    animation: app-bg-float 20s ease-in-out infinite;
}

/* Layer 2: Gray and blue accents */
.app-background::after {
    background:
        radial-gradient(ellipse 50% 50% at 25% 70%, #d0dce8 0%, transparent 65%),
        radial-gradient(ellipse 45% 45% at 80% 20%, #9cb4d4 0%, rgba(156, 180, 212, 0.4) 50%, transparent 70%);
    filter: blur(40px);
    opacity: 0.75;
    mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 40%, black 80%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 40%, black 80%, transparent 100%);
    animation: app-bg-float 20s ease-in-out infinite 3s;
}

@keyframes app-bg-float {
    0%, 100% {
        transform: rotate(-2deg) scale(1);
    }
    50% {
        transform: rotate(2deg) scale(1.02);
    }
}

/* Geometric diagonal bands - layered shapes (on top of gradient layers) */
.app-bg-band {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
}

.app-bg-band--1 {
    background: rgba(200, 215, 235, 0.5);
    clip-path: polygon(-5% 0%, 50% 0%, 55% 100%, 0% 100%);
    transform: translateZ(0);
}

.app-bg-band--1::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 1px,
        rgba(255, 255, 255, 0.03) 2px,
        transparent 3px
    );
    background-size: 4px 100%;
}

.app-bg-band--2 {
    background: rgba(255, 255, 255, 0.4);
    clip-path: polygon(35% 0%, 85% 0%, 90% 100%, 40% 100%);
    transform: translateZ(0);
}

.app-bg-band--3 {
    background: rgba(180, 200, 225, 0.45);
    clip-path: polygon(55% 15%, 100% 20%, 97% 45%, 52% 40%);
    transform: translateZ(0);
}

.app-bg-band--accent {
    background: transparent;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0px,
        transparent 120px,
        rgba(30, 58, 95, 0.4) 120px,
        rgba(30, 58, 95, 0.4) 125px
    );
}

@media (prefers-reduced-motion: reduce) {
    .app-background::before,
    .app-background::after {
        animation: none;
    }
}