/**
 * Wapflow OS - Fluid Particle Background Stylesheet
 * Inspired by Google Antigravity & Modern Sovereign SaaS Visual Design
 * -----------------------------------------------------------------------------
 */

/* 1. Hero Fluid Section Wrapper */
.wos-hero-fluid-wrapper {
    position: relative;
    background-color: #ffffff !important;
    background-image: 
        radial-gradient(circle at 12% 18%, rgba(6, 182, 212, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 88% 22%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 92%, rgba(236, 72, 153, 0.03) 0%, transparent 45%);
    overflow: hidden;
    min-height: 600px;
}

/* 2. Ambient Soft Glow Layer */
.wos-fluid-ambient-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: 
        radial-gradient(ellipse at 6% 35%, rgba(6, 182, 212, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 94% 40%, rgba(139, 92, 246, 0.07) 0%, transparent 55%),
        radial-gradient(circle at 82% 85%, rgba(37, 99, 235, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 18% 85%, rgba(236, 72, 153, 0.03) 0%, transparent 45%);
    transition: opacity 0.6s ease;
}

/* 3. HTML5 Particle Canvas */
.wapflow-fluid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: block;
}

/* 4. Content Layer Above Canvas */
.wos-hero-content-layer {
    position: relative;
    z-index: 2;
}

/* Soft contrast protection backdrop for central typography */
.wos-text-clarity-backdrop {
    position: relative;
    z-index: 2;
}

/* 5. Mobile & Responsive Refinements */
@media (max-width: 991px) {
    .wos-hero-fluid-wrapper {
        min-height: auto;
    }
}

/* 6. Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    .wos-fluid-ambient-glow {
        transition: none !important;
    }
    .wapflow-fluid-canvas {
        opacity: 0.65;
    }
}

/* ==========================================================================
   SOLUTIONS PAGE — CURSOR-INTERACTIVE WATER RIPPLE BACKGROUND EFFECT
   Dedicated single background layer behind Solutions heading & introductory space.
   Completely removed from all solution cards, card surfaces, and card borders.
   ========================================================================== */

/* Solutions Heading & Introductory Background Region */
.wos-solutions-hero-region {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 4.5rem 0 3.25rem;
    background-color: #ffffff;
    background-image: 
        radial-gradient(ellipse 70% 60% at 50% 25%, rgba(56, 189, 248, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 16% 40%, rgba(6, 182, 212, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 84% 40%, rgba(139, 92, 246, 0.045) 0%, transparent 60%);
    cursor: default;
}

/* Ambient Soft Light Overlay */
.wos-solutions-ambient-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: 
        radial-gradient(circle at 50% 30%, rgba(56, 189, 248, 0.035) 0%, transparent 60%),
        radial-gradient(circle at 15% 70%, rgba(6, 182, 212, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 85% 70%, rgba(99, 102, 241, 0.03) 0%, transparent 50%);
}

/* HTML5 Interactive Water Ripple Canvas */
.wos-solutions-water-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: block;
}

/* Solutions Heading Content Layer (Above Canvas) */
.wos-solutions-hero-content {
    position: relative;
    z-index: 2;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
    .wos-solutions-water-canvas {
        opacity: 0.35;
    }
}