/* Background with animated Low-Poly pattern */
body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background: #0b0b0c;
    margin: 0;
    padding: 32px;
    display: grid;
    place-items: center;
}

/* Animated Low-Poly Background */
body::before {
    content: "";
    position: fixed;
    inset: -10vh -10vw;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'><rect width='1200' height='800' fill='%230b0b0c'/><polygon points='0,0 300,0 150,200' fill='%23121213'/><polygon points='300,0 600,0 450,200' fill='%23181819'/><polygon points='600,0 900,0 750,200' fill='%231f1f20'/><polygon points='900,0 1200,0 1050,200' fill='%23262627'/><polygon points='0,0 150,200 0,400' fill='%23151516'/><polygon points='150,200 300,0 300,400' fill='%231b1b1c'/><polygon points='150,200 300,400 0,400' fill='%23212122'/><polygon points='300,0 450,200 300,400' fill='%23171718'/><polygon points='450,200 600,0 600,400' fill='%231d1d1e'/><polygon points='450,200 600,400 300,400' fill='%23232324'/><polygon points='600,0 750,200 600,400' fill='%23141415'/><polygon points='750,200 900,0 900,400' fill='%231b1b1c'/><polygon points='750,200 900,400 600,400' fill='%23222223'/><polygon points='900,0 1050,200 900,400' fill='%23161617'/><polygon points='1050,200 1200,0 1200,400' fill='%231d1d1e'/><polygon points='1050,200 1200,400 900,400' fill='%23282829'/><polygon points='0,400 150,200 300,400' fill='%23141415'/><polygon points='0,400 300,400 150,600' fill='%231b1b1c'/><polygon points='300,400 450,200 600,400' fill='%23212122'/><polygon points='300,400 600,400 450,600' fill='%23171718'/><polygon points='600,400 750,200 900,400' fill='%23262627'/><polygon points='600,400 900,400 750,600' fill='%231a1a1b'/><polygon points='900,400 1050,200 1200,400' fill='%23202021'/><polygon points='900,400 1200,400 1050,600' fill='%232b2b2c'/><polygon points='0,400 150,600 0,800' fill='%23121213'/><polygon points='150,600 300,400 300,800' fill='%2319191a'/><polygon points='150,600 300,800 0,800' fill='%23202021'/><polygon points='300,400 450,600 300,800' fill='%23151516'/><polygon points='450,600 600,400 600,800' fill='%231d1d1e'/><polygon points='450,600 600,800 300,800' fill='%23232324'/><polygon points='600,400 750,600 600,800' fill='%23141415'/><polygon points='750,600 900,400 900,800' fill='%231b1b1c'/><polygon points='750,600 900,800 600,800' fill='%23222223'/><polygon points='900,400 1050,600 900,800' fill='%23161617'/><polygon points='1050,600 1200,400 1200,800' fill='%231d1d1e'/><polygon points='1050,600 1200,800 900,800' fill='%23282829'/></svg>");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center;
    animation: bg-drift 40s ease-in-out infinite alternate;
}

/* Subtle grain overlay */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.04), transparent 60%), 
                      radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.03), transparent 60%), 
                      radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.02), transparent 60%);
    mix-blend-mode: overlay;
}

@keyframes bg-drift {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0);
    }
    100% {
        transform: translate3d(2rem, -2rem, 0) scale(1.07) rotate(2deg);
    }
}

/* Accessibility: Reduce animation */
@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
        transform: none;
    }
}