:root {
    /* light theme - color variables used by inline SVG gradients */
    --g1-start: #60A5FA;
    --g1-end:  #3B82F6;

    --g2-start: #38BDF8;
    --g2-end:  #06B6D4;

    --g3-start: #7DD3FC;
    --g3-end:  #60A5FA;

    /* page base colors */
    --page-bg: #f8f9fa;
    --nav-bg: #212529;
    --text-color: #111827;
}

/* dark theme overrides */
.theme-dark {
    --g1-start: #1E3A8A; /* deeper indigo */
    --g1-end:  #075985;  /* teal-blue */
    --g2-start: #0369A1;
    --g2-end:  #0EA5A7;
    --g3-start: #0EA5E9;
    --g3-end:  #075985;

    --page-bg: #0b1220;
    --nav-bg: #0b1220;
    --text-color: #e6eef8;
}

/* apply base page background from variables */
body {
    background-color: var(--page-bg);
    color: var(--text-color);
}

/* Ensure the dynamic background sits behind page content */
.dynamic-bg {
    position: fixed;
    inset: 0;
    z-index: 0; /* behind site content; content containers use z-index:1 */
    pointer-events: none;
    overflow: hidden;
}

/* gradient-layer sits under the SVG blobs and uses subtle screen blend */
.dynamic-bg .gradient-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.14;
    filter: blur(42px) saturate(1.05);
    transform: translateZ(0);
    background-repeat: no-repeat;
    background-size: 200% 200%;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(96,165,250,0.95) 0%, rgba(59,130,246,0.6) 20%, rgba(59,130,246,0.08) 45%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(56,189,248,0.9) 0%, rgba(6,182,212,0.6) 22%, rgba(96,165,250,0.06) 48%, transparent 65%);
    transition: opacity 300ms linear;
    animation: gradientShift 240s linear infinite;
}

/* keyframes unchanged */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%, 100% 50%;
        transform: scale(1) translateZ(0);
    }
    50% {
        background-position: 100% 45%, 0% 55%;
        transform: scale(1.02) translateZ(0);
    }
    100% {
        background-position: 0% 50%, 100% 50%;
        transform: scale(1) translateZ(0);
    }
}

/* theme adjustments for gradient-layer colors (using CSS variables in radial stops) */
.theme-dark .dynamic-bg .gradient-layer {
    opacity: 0.18;
    /* darker radial blend for dark theme */
    background-image:
        radial-gradient(circle at 12% 18%, rgba(30,58,138,0.95) 0%, rgba(7,89,85,0.55) 20%, rgba(7,89,85,0.04) 45%, transparent 60%),
        radial-gradient(circle at 78% 72%, rgba(3,105,161,0.9) 0%, rgba(14,165,167,0.45) 22%, rgba(30,58,138,0.04) 48%, transparent 65%);
}

/* SVG fills the viewport */
.bg-svg {
    width: 100%;
    height: 100%;
    display: block;
    transform: translateZ(0);
    will-change: transform, opacity;
    mix-blend-mode: normal;
}

/* Layer groups are the targets for pointer parallax transforms */
.bg-svg .layer {
    transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
    transition: transform 160ms linear;
    will-change: transform;
}

/* Each path inside a layer animates slowly to introduce organic motion */
.bg-svg .layer path {
    transform-origin: center;
    will-change: transform, opacity;
    filter: blur(10px);
}

/* assigned animations */
.bg-svg .layer-1 path { animation: float-slow 28s ease-in-out infinite; }
.bg-svg .layer-2 path { animation: float-medium 40s ease-in-out infinite; }
.bg-svg .layer-3 path { animation: float-fast 56s ease-in-out infinite; }

/* Disable motion when user toggles motion off (class added to body) */
.motion-disabled .bg-svg .layer path,
.motion-disabled .dynamic-bg .gradient-layer {
    animation: none !important;
    transition: none !important;
    opacity: 0.10 !important;
}

/* Reduced-motion media query continues to be respected */
@media (prefers-reduced-motion: reduce) {
    .bg-svg .layer path { animation: none !important; filter: blur(8px); opacity: 0.12 !important; }
    .bg-svg .layer { transition: none !important; transform: none !important; }
    .dynamic-bg .gradient-layer { animation: none !important; opacity: 0.08 !important; transition: none !important; }
}

/* Toggle button styles (small, unobtrusive) */
#themeToggleBtn, #motionToggleBtn {
    min-width: 64px;
    font-size: 0.85rem;
}

/* small responsive tweak */
@media (max-width: 576px) {
    #themeToggleBtn, #motionToggleBtn { font-size: 0.8rem; padding: 0.25rem 0.5rem; }
}