/* ---------- Config (easy to tweak) ---------- */
:root {
    --sl-green: #d8f6cf;
    --sl-white: #ffffff;
    --sl-blue: #d8eefe;
    --bg-speed: 25s; /* slower for blob morphing */
    --bg-ease: cubic-bezier(.22,.8,.36,.98);
    --overlay-opacity: 0.06;
}

/* ---------- Basic body reset ---------- */
html, body {
    height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--sl-blue);
    /* Blob-based layered background */
    background-image:
    /* subtle noise-like vignette */
    radial-gradient(1200px 600px at 10% 10%, rgba(0,0,0,var(--overlay-opacity)), transparent 12%),
    /* animated colored blobs (morphing shapes) */
    radial-gradient(circle at 20% 30%, var(--sl-green) 20%, transparent 40%), radial-gradient(circle at 70% 40%, var(--sl-white) 25%, transparent 50%), radial-gradient(circle at 40% 70%, var(--sl-blue) 30%, transparent 55%);
    background-size: cover, 200% 200%, 200% 200%, 200% 200%;
    background-position: center, 0% 0%, 50% 50%, 100% 100%;
    background-repeat: no-repeat;
    transition: background-color 600ms var(--bg-ease);
    color: #0b2540;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Blob animation keyframes ---------- */
@keyframes blobMove1 {
    0%, 100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 20% 30%;
    }
}

@keyframes blobMove2 {
    0%, 100% {
        background-position: 50% 50%;
    }

    50% {
        background-position: 40% 60%;
    }
}

@keyframes blobMove3 {
    0%, 100% {
        background-position: 100% 100%;
    }

    50% {
        background-position: 80% 70%;
    }
}

/* ---------- Apply blob animations ---------- */
body.animate-gradient {
    animation: slColorPulse 15s ease-in-out infinite alternate;
    background-size: cover, 200% 200%, 200% 200%, 200% 200%;
    animation-name: slColorPulse, blobMove1, blobMove2, blobMove3;
    animation-duration: 15s, var(--bg-speed), calc(var(--bg-speed) * 1.2), calc(var(--bg-speed) * 1.4);
    animation-timing-function: ease-in-out, var(--bg-ease), var(--bg-ease), var(--bg-ease);
    animation-iteration-count: infinite;
    will-change: background-position, filter;
}

/* ---------- Color pulse for subtle life ---------- */
@keyframes slColorPulse {
    0% {
        filter: saturate(0.96) brightness(1);
    }

    50% {
        filter: saturate(1.08) brightness(1.03);
    }

    100% {
        filter: saturate(0.96) brightness(1);
    }
}

/* ---------- Reduce motion for accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    body.animate-gradient {
        animation: none !important;
        background-position: center, center, center, center;
        background-size: cover, cover, cover, cover;
    }
}