/**
 * Gray Flow Field Animation Styles
 */


/* Ensure the container covers the entire screen */

#mesh-gradient-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    /* Allow clicking through the animation */
    background-color: #121212;
    /* Dark gray background */
}


/* Style the canvas */

#mesh-gradient-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}


/* Ensure the background works with page content */

body {
    background-color: #121212 !important;
    /* Match dark gray background */
    position: relative;
    /* Create stacking context */
    color: #e0e0e0;
    /* Light gray text for better contrast */
    cursor: pointer;
    /* Indicate that clicking changes colors */
}


/* Make sure content appears above the animation */

#page,
.site-header,
.site-footer,
.elementor-section,
.elementor-column,
.elementor-widget {
    position: relative;
    /* Ensure elements create stacking contexts */
    z-index: 1;
    /* Keep content above background */
}


/* For light text on dark background */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p {
    color: #e0e0e0;
    /* Light gray text for better contrast */
    text-shadow: none;
    /* Remove blue glow */
}


/* Set links to gray tones */

a {
    color: #a0a0a0 !important;
    /* Medium gray links */
    transition: color 0.3s ease;
}

a:hover {
    color: #ffffff !important;
    /* White on hover for better contrast */
}


/* Mobile optimizations */

@media (max-width: 767px) {
    #mesh-gradient-container canvas {
        filter: blur(80px);
        /* More blur on mobile for better performance */
    }
}


/* Reduce animation performance impact for users who prefer reduced motion */

@media (prefers-reduced-motion: reduce) {
    #mesh-gradient-container canvas {
        display: none;
        /* Hide animation for users who prefer reduced motion */
    }
}