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

:root {
    --font-primary: 'Outfit', sans-serif;
}

body {
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f0f9ff;
    /* Light sky blue base */
}

.dark body {
    background-color: #020617;
    /* Very dark slate base */
}

/* 
   Advanced Fluid Background 
   Using pseudo-elements to create moving orbs of color
*/
.fluid-bg {
    position: relative;
    overflow: hidden;
}

.fluid-bg::before,
.fluid-bg::after {
    content: '';
    position: absolute;
    filter: blur(80px);
    /* Soften the edges heavily */
    z-index: -1;
    opacity: 0.6;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Light Mode Orbs */
.fluid-bg::before {
    background: radial-gradient(circle, #22d3ee 0%, rgba(34, 211, 238, 0) 70%);
    width: 60vw;
    height: 60vh;
    top: -10%;
    left: -10%;
    animation: drift 20s infinite;
}

.fluid-bg::after {
    background: radial-gradient(circle, #3b82f6 0%, rgba(59, 130, 246, 0) 70%);
    width: 70vw;
    height: 70vh;
    bottom: -10%;
    right: -10%;
    animation: drift-reverse 25s infinite;
}

/* Dark Mode Overrides - Deep Space / Aurora feel */
.dark .fluid-bg::before {
    background: radial-gradient(circle, #0e7490 0%, rgba(14, 116, 144, 0) 70%);
    /* Cyan-700 */
    opacity: 0.25;
}

.dark .fluid-bg::after {
    background: radial-gradient(circle, #1d4ed8 0%, rgba(29, 78, 216, 0) 70%);
    /* Blue-700 */
    opacity: 0.25;
}

/* Additional floating element for complexity */
.bg-extra {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vw;
    height: 50vh;
    background: radial-gradient(circle, #10b981 0%, rgba(16, 185, 129, 0) 70%);
    /* Emerald */
    filter: blur(100px);
    z-index: -1;
    opacity: 0.2;
    /* Very subtle */
    animation: pulse-scale 15s infinite;
}

.dark .bg-extra {
    background: radial-gradient(circle, #0f766e 0%, rgba(15, 118, 110, 0) 70%);
    /* Teal-700 */
    opacity: 0.15;
}


@keyframes drift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(10%, 10%) rotate(10deg);
    }

    66% {
        transform: translate(-5%, 5%) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes drift-reverse {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-10%, -10%) scale(1.1);
    }

    66% {
        transform: translate(5%, -5%) scale(0.9);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes pulse-scale {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* Typography Enhancements */
.hero-text {
    /* Slight grain or texture via mix-blend could be cool, but keeping it clean for now */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.dark .hero-text {
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}