@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
    --bg-deep: #1a1c30;
    --text-white: #ffffff;
    --text-gray: #aab2c0;
    --col-red: #d0475e;
    --col-dark-red: #b22330;
    --col-teal: #497673;
    --col-sage: #849c9b;
    --col-pink: #c879a4;
    --col-terracotta: #c87a56;
    --col-blue: #384e76;
    --col-magenta: #cb4277;
    --font-tech: "Space Grotesk", "Segoe UI", sans-serif;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-white);
    font-family: var(--font-tech);
}

.ambient-glow,
.ambient-canvas {
    pointer-events: none;
}

.ambient-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -2;
    opacity: 0.4;
}

.ambient-glow--one {
    top: -15%;
    left: -15%;
    width: 60vw;
    height: 60vw;
    background: var(--col-blue);
    animation: ambientMovePulse 10s infinite alternate, ambientColorCycleCool 24s infinite linear;
}

.ambient-glow--two {
    right: -15%;
    bottom: -15%;
    width: 70vw;
    height: 70vw;
    background: var(--col-red);
    animation: ambientMovePulse 12s infinite alternate-reverse, ambientColorCycleWarm 18s infinite linear;
}

.ambient-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

@keyframes ambientMovePulse {
    0% { transform: scale(1) translate(0, 0); opacity: 0.3; }
    100% { transform: scale(1.1) translate(20px, 20px); opacity: 0.5; }
}

@keyframes ambientColorCycleCool {
    0% { background: var(--col-blue); }
    33% { background: var(--col-teal); }
    66% { background: var(--col-sage); }
    100% { background: var(--col-blue); }
}

@keyframes ambientColorCycleWarm {
    0% { background: var(--col-red); }
    25% { background: var(--col-magenta); }
    50% { background: var(--col-terracotta); }
    75% { background: var(--col-pink); }
    100% { background: var(--col-red); }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-glow {
        animation: none;
    }
}