/*
  This animation works by moving the position of multiple radial gradients
  at the same time. Each "background-position" in the keyframes corresponds
  to a "background-image" defined below, making them move at different rates.
*/
@keyframes moveBlobs {
    0% {
        background-position: 0% 50%, 50% 100%, 100% 50%;
    }
    25% {
        background-position: 0% 0%, 80% 80%, 50% 100%;
    }
    50% {
        background-position: 50% 0%, 100% 50%, 0% 50%;
    }
    75% {
        background-position: 100% 100%, 20% 20%, 0% 0%;
    }
    100% {
        background-position: 0% 50%, 50% 100%, 100% 50%;
    }
}

/* --- Dark Theme (Luxury) - Yellow/Orange "Lava" Palette --- */
[data-theme="luxury"] body {
    background-color: hsl(30, 20%, 8%);
    background-image:
        radial-gradient(circle at 10% 20%, hsl(30, 80%, 30%) 0px, transparent 50%),
        radial-gradient(circle at 80% 50%, hsl(40, 90%, 50%) 0px, transparent 50%),
        radial-gradient(circle at 40% 90%, hsl(50, 100%, 60%, 0.5) 0px, transparent 60%);

    background-size: 200% 200%;
    animation: moveBlobs 25s ease infinite;
}

/* --- Light Theme (Bumblebee) - Yellow/Orange "Sun" Palette --- */
[data-theme="bumblebee"] body {
    background-color: hsl(50, 100%, 95%);
    background-image:
        radial-gradient(circle at 0% 0%, hsl(35, 100%, 80%) 0px, transparent 50%),
        radial-gradient(circle at 50% 100%, hsl(50, 100%, 75%) 0px, transparent 50%),
        radial-gradient(circle at 100% 20%, hsl(30, 90%, 70%) 0px, transparent 50%);

    background-size: 200% 200%;
    animation: moveBlobs 25s ease infinite;
}

/* Blinking cursor effect for the dynamic slogan */
.blinking-cursor {
    font-weight: 300;
    color: inherit;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { color: transparent; }
    50% { color: inherit; }
}