/*
 * app/static/css/home.css
 * Home page: dynamic, modern background layer (CSS-first, JS only for pointer parallax).
 */

:root {
    --home-bg-x: 50%;
    --home-bg-y: 35%;
}

body.page-home {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100dvh;
}

.page-home .container {
    position: relative;
    z-index: 1;
}

.page-home .dynamic-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            620px circle at var(--home-bg-x) var(--home-bg-y),
            rgba(67, 97, 238, 0.18),
            transparent 60%
        ),
        radial-gradient(
            760px circle at calc(100% - var(--home-bg-x)) calc(100% - var(--home-bg-y)),
            rgba(58, 12, 163, 0.14),
            transparent 62%
        ),
        radial-gradient(
            520px circle at 18% 78%,
            rgba(16, 185, 129, 0.10),
            transparent 60%
        ),
        linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    filter: saturate(1.05);
}

.page-home .dynamic-bg::before {
    content: '';
    position: absolute;
    inset: -18%;
    background: conic-gradient(
        from 220deg at 50% 50%,
        rgba(67, 97, 238, 0.10),
        rgba(58, 12, 163, 0.08),
        rgba(67, 97, 238, 0.10)
    );
    opacity: 0.7;
    filter: blur(42px);
    transform: translate3d(0, 0, 0);
    animation: home-bg-drift 18s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes home-bg-drift {
    0% {
        transform: translate3d(-1.5%, -1%, 0) rotate(-2deg) scale(1.02);
    }
    100% {
        transform: translate3d(1.5%, 1%, 0) rotate(2deg) scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-home .dynamic-bg::before {
        animation: none;
    }
}