/* ================================
   PREMIUM GRADIENT SYSTEM
   ================================
   
   Design Philosophy:
   -----------------
   This gradient system is designed for a premium AI/BCI startup aesthetic.
   It evokes calm creativity, zen focus, and sophisticated intelligence.
   
   Key Principles:
   1. LAYERED DEPTH - Multiple gradient layers create organic complexity
   2. WARM FOUNDATION - Ivory base feels inviting, not sterile
   3. AURORA EFFECT - Colors blend like northern lights or morning mist
   4. TEXTURE - Subtle noise adds "rough" premium feel, not flat
   5. ASYMMETRY - Off-center blobs feel natural, not manufactured
   
   Color Palette:
   -------------
   Base:      Warm ivory (#FDFBF7) - Not stark white, inviting warmth
   Primary:   Sky Cyan (#7DD3E8) - Trust, intelligence, calm
   Secondary: Amber Rose (#F9C784) - Creativity, warmth, approachability  
   Tertiary:  Soft Lavender (#C8B6FF) - Innovation, calm focus
   Accent:    Sage Mist (#B8E0D2) - Growth, zen, organic feel
   
   The gradient avoids:
   - Instagram-style hot pink/purple (overdone, cheap)
   - Pure white backgrounds (cold, sterile, generic)
   - Symmetric patterns (artificial, boring)
   - Harsh color stops (jarring, amateur)
   
   Inspired by:
   - Morning light through clouds
   - Aurora borealis (subtle, flowing)
   - Watercolor washes
   - Premium neurotech/AI brand aesthetics (Neuralink, Anthropic)
   
   ================================ */

/* CSS Custom Properties for Easy Theming */
:root {
    /* Base Colors */
    --gradient-base: #FDFBF7;
    --gradient-base-alt: #f8f6f1;
    
    /* Gradient Blob Colors - HSL for easy adjustment */
    --blob-cyan: hsla(192, 65%, 68%, 0.55);
    --blob-cyan-soft: hsla(192, 60%, 75%, 0.35);
    --blob-amber: hsla(38, 90%, 75%, 0.45);
    --blob-amber-soft: hsla(35, 85%, 82%, 0.3);
    --blob-lavender: hsla(255, 85%, 85%, 0.4);
    --blob-lavender-soft: hsla(260, 70%, 88%, 0.25);
    --blob-sage: hsla(162, 45%, 78%, 0.35);
    --blob-coral: hsla(12, 95%, 82%, 0.25);
    
    /* Noise texture opacity */
    --noise-opacity: 0.025;
    
    /* Animation timing */
    --gradient-animation-duration: 25s;
}

/* ================================
   MAIN BODY GRADIENT
   ================================ */

body {
    /* Override existing gradient from style.css */
    background-color: var(--gradient-base) !important;
    
    /* 
     * Multi-layer gradient stack (bottom to top):
     * 1. Large diffuse cyan - top left (intelligence, calm)
     * 2. Soft amber - center right (warmth, creativity)
     * 3. Subtle lavender - bottom left (innovation)
     * 4. Sage mist - top right corner (zen, organic)
     * 5. Coral accent - very subtle bottom right
     * 6. Secondary cyan bloom - mid-left for depth
     */
    background-image: 
        /* === SECTION 1: Hero/Top (0-25%) === */
        /* Primary cyan - top left */
        radial-gradient(
            ellipse 70% 20% at -5% 2%,
            var(--blob-cyan) 0%,
            var(--blob-cyan-soft) 30%,
            transparent 65%
        ),
        /* Sage mist - top right */
        radial-gradient(
            ellipse 55% 12% at 85% 5%,
            var(--blob-sage) 0%,
            transparent 60%
        ),
        /* Amber - hero section */
        radial-gradient(
            ellipse 50% 18% at 75% 12%,
            var(--blob-amber) 0%,
            var(--blob-amber-soft) 35%,
            transparent 70%
        ),
        
        /* === SECTION 2: Upper-mid (25-50%) === */
        /* Cyan bloom - left side */
        radial-gradient(
            ellipse 45% 15% at 5% 30%,
            var(--blob-cyan-soft) 0%,
            transparent 70%
        ),
        /* Lavender - right side */
        radial-gradient(
            ellipse 50% 16% at 88% 35%,
            var(--blob-lavender) 0%,
            var(--blob-lavender-soft) 40%,
            transparent 75%
        ),
        /* Amber accent - center */
        radial-gradient(
            ellipse 40% 12% at 25% 42%,
            var(--blob-amber-soft) 0%,
            transparent 65%
        ),
        
        /* === SECTION 3: Middle (50-70%) === */
        /* Sage - left */
        radial-gradient(
            ellipse 48% 14% at 10% 55%,
            var(--blob-sage) 0%,
            transparent 60%
        ),
        /* Coral - right */
        radial-gradient(
            ellipse 45% 13% at 92% 58%,
            var(--blob-coral) 0%,
            transparent 65%
        ),
        /* Cyan soft - center */
        radial-gradient(
            ellipse 55% 15% at 50% 65%,
            var(--blob-cyan-soft) 0%,
            transparent 70%
        ),
        
        /* === SECTION 4: Lower (70-90%) === */
        /* Lavender - left */
        radial-gradient(
            ellipse 55% 16% at 15% 75%,
            var(--blob-lavender) 0%,
            var(--blob-lavender-soft) 40%,
            transparent 75%
        ),
        /* Amber - right */
        radial-gradient(
            ellipse 50% 18% at 80% 78%,
            var(--blob-amber) 0%,
            var(--blob-amber-soft) 35%,
            transparent 70%
        ),
        
        /* === SECTION 5: Bottom (90-100%) === */
        /* Coral warmth - bottom right */
        radial-gradient(
            ellipse 50% 14% at 90% 92%,
            var(--blob-coral) 0%,
            transparent 65%
        ),
        /* Cyan - bottom left */
        radial-gradient(
            ellipse 60% 18% at 8% 95%,
            var(--blob-cyan-soft) 0%,
            transparent 70%
        ) !important;
    
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-size: 100% 100% !important;
    
    /* Smooth rendering */
    -webkit-font-smoothing: antialiased;
}

/* ================================
   NOISE TEXTURE OVERLAY
   ================================
   Adds premium "rough" feel - makes gradients less flat
   Uses CSS-only solution for performance
*/

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    
    /* SVG noise pattern - performance optimized */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    
    opacity: var(--noise-opacity);
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Ensure content is above noise layer */
body > * {
    position: relative;
    z-index: 1;
}

/* ================================
   SKELETON LOADER MATCH
   ================================
   Keep skeleton consistent with gradient base
*/

.skeleton-loader {
    background: var(--gradient-base) !important;
}

/* ================================
   MOBILE OPTIMIZATIONS
   ================================
   Adjusted blob positions for smaller viewports
   Ensures gradient looks balanced on mobile
*/

@media (max-width: 768px) {
    body {
        /* 
         * Use same gradient as desktop but wider - sides get cropped
         * This maintains visual consistency between mobile and desktop
         */
        background-size: 180vw 100% !important;
        background-position: center top !important;
    }
    
    /* Slightly increase noise visibility on mobile */
    body::before {
        opacity: 0.03;
    }
}

/* ================================
   LARGE DESKTOP ENHANCEMENTS
   ================================
   Extra blob for very wide screens
*/

@media (min-width: 1440px) {
    body {
        background-image: 
            /* === SECTION 1: Hero/Top === */
            radial-gradient(
                ellipse 70% 20% at -5% 2%,
                var(--blob-cyan) 0%,
                var(--blob-cyan-soft) 30%,
                transparent 65%
            ),
            radial-gradient(
                ellipse 55% 12% at 85% 5%,
                var(--blob-sage) 0%,
                transparent 60%
            ),
            radial-gradient(
                ellipse 50% 18% at 75% 12%,
                var(--blob-amber) 0%,
                var(--blob-amber-soft) 35%,
                transparent 70%
            ),
            /* Extra: Far right cyan for wide screens */
            radial-gradient(
                ellipse 35% 14% at 100% 18%,
                hsla(192, 55%, 75%, 0.25) 0%,
                transparent 60%
            ),
            
            /* === SECTION 2: Upper-mid === */
            radial-gradient(
                ellipse 45% 15% at 5% 30%,
                var(--blob-cyan-soft) 0%,
                transparent 70%
            ),
            radial-gradient(
                ellipse 50% 16% at 88% 35%,
                var(--blob-lavender) 0%,
                var(--blob-lavender-soft) 40%,
                transparent 75%
            ),
            radial-gradient(
                ellipse 40% 12% at 25% 42%,
                var(--blob-amber-soft) 0%,
                transparent 65%
            ),
            
            /* === SECTION 3: Middle === */
            radial-gradient(
                ellipse 48% 14% at 10% 55%,
                var(--blob-sage) 0%,
                transparent 60%
            ),
            radial-gradient(
                ellipse 45% 13% at 92% 58%,
                var(--blob-coral) 0%,
                transparent 65%
            ),
            radial-gradient(
                ellipse 55% 15% at 50% 65%,
                var(--blob-cyan-soft) 0%,
                transparent 70%
            ),
            
            /* === SECTION 4: Lower === */
            radial-gradient(
                ellipse 55% 16% at 15% 75%,
                var(--blob-lavender) 0%,
                var(--blob-lavender-soft) 40%,
                transparent 75%
            ),
            radial-gradient(
                ellipse 50% 18% at 80% 78%,
                var(--blob-amber) 0%,
                var(--blob-amber-soft) 35%,
                transparent 70%
            ),
            
            /* === SECTION 5: Bottom === */
            radial-gradient(
                ellipse 50% 14% at 90% 92%,
                var(--blob-coral) 0%,
                transparent 65%
            ),
            radial-gradient(
                ellipse 60% 18% at 8% 95%,
                var(--blob-cyan-soft) 0%,
                transparent 70%
            ) !important;
        
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }
}

/* ================================
   REDUCED MOTION PREFERENCE
   ================================
   Respect user preferences
*/

@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
    }
}

/* ================================
   DARK MODE SUPPORT (Optional)
   ================================
   If dark mode is ever needed, uncomment this
*/

/*
@media (prefers-color-scheme: dark) {
    :root {
        --gradient-base: #0f0f12;
        --blob-cyan: hsla(192, 65%, 45%, 0.3);
        --blob-cyan-soft: hsla(192, 60%, 40%, 0.2);
        --blob-amber: hsla(38, 80%, 55%, 0.25);
        --blob-amber-soft: hsla(35, 75%, 50%, 0.15);
        --blob-lavender: hsla(255, 70%, 60%, 0.25);
        --blob-lavender-soft: hsla(260, 60%, 55%, 0.15);
        --blob-sage: hsla(162, 40%, 50%, 0.2);
        --blob-coral: hsla(12, 80%, 60%, 0.15);
        --noise-opacity: 0.04;
    }
}
*/