/* Custom Banner Styles for AI Web Hosting Theme - Particle Effect */

/* Dark background for banner */
.main-banner.banner-home,
.main-banner.banner-center,
.banner-home,
.banner-center {
    background: #0A0E27 !important;
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

/* Particle container */
.main-banner.banner-home::before,
.main-banner.banner-center::before,
.banner-home::before,
.banner-center::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Large particles */
        radial-gradient(circle at 20% 30%, rgba(125, 0, 255, 0.4) 0%, transparent 2%),
        radial-gradient(circle at 80% 70%, rgba(0, 168, 255, 0.4) 0%, transparent 2%),
        radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.3) 0%, transparent 3%),
        /* Medium particles */
        radial-gradient(circle at 10% 60%, rgba(125, 0, 255, 0.3) 0%, transparent 1.5%),
        radial-gradient(circle at 90% 20%, rgba(0, 168, 255, 0.3) 0%, transparent 1.5%),
        radial-gradient(circle at 30% 80%, rgba(0, 212, 255, 0.25) 0%, transparent 1.5%),
        radial-gradient(circle at 70% 10%, rgba(125, 0, 255, 0.25) 0%, transparent 1.5%),
        /* Small particles */
        radial-gradient(circle at 15% 15%, rgba(0, 168, 255, 0.2) 0%, transparent 1%),
        radial-gradient(circle at 85% 85%, rgba(125, 0, 255, 0.2) 0%, transparent 1%),
        radial-gradient(circle at 40% 40%, rgba(0, 212, 255, 0.2) 0%, transparent 1%),
        radial-gradient(circle at 60% 60%, rgba(125, 0, 255, 0.2) 0%, transparent 1%),
        radial-gradient(circle at 25% 75%, rgba(0, 168, 255, 0.15) 0%, transparent 0.8%),
        radial-gradient(circle at 75% 25%, rgba(0, 212, 255, 0.15) 0%, transparent 0.8%);
    background-size: 200% 200%, 180% 180%, 220% 220%, 150% 150%, 160% 160%, 170% 170%, 190% 190%, 140% 140%, 130% 130%, 210% 210%, 200% 200%, 180% 180%, 160% 160%;
    animation: particleFloat 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
}

@keyframes particleFloat {
    0%, 100% { 
        background-position: 0% 0%, 100% 100%, 50% 50%, 0% 100%, 100% 0%, 50% 100%, 100% 50%, 0% 0%, 100% 100%, 50% 50%, 0% 100%, 100% 0%, 50% 100%;
    }
    25% { 
        background-position: 20% 10%, 80% 90%, 60% 40%, 10% 90%, 90% 10%, 40% 90%, 90% 40%, 5% 5%, 95% 95%, 55% 45%, 5% 95%, 95% 5%, 45% 95%;
    }
    50% { 
        background-position: 40% 20%, 60% 80%, 70% 30%, 20% 80%, 80% 20%, 30% 80%, 80% 30%, 10% 10%, 90% 90%, 60% 40%, 10% 90%, 90% 10%, 40% 90%;
    }
    75% { 
        background-position: 30% 15%, 70% 85%, 65% 35%, 15% 85%, 85% 15%, 35% 85%, 85% 35%, 8% 8%, 92% 92%, 58% 42%, 8% 92%, 92% 8%, 42% 92%;
    }
}

/* Additional particle layer for depth */
.main-banner.banner-home::after,
.main-banner.banner-center::after,
.banner-home::after,
.banner-center::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Tiny sparkle particles */
        radial-gradient(circle at 5% 5%, rgba(255, 255, 255, 0.6) 0%, transparent 0.5%),
        radial-gradient(circle at 95% 95%, rgba(0, 212, 255, 0.5) 0%, transparent 0.5%),
        radial-gradient(circle at 50% 10%, rgba(125, 0, 255, 0.4) 0%, transparent 0.4%),
        radial-gradient(circle at 10% 50%, rgba(0, 168, 255, 0.4) 0%, transparent 0.4%),
        radial-gradient(circle at 90% 50%, rgba(0, 212, 255, 0.4) 0%, transparent 0.4%),
        radial-gradient(circle at 50% 90%, rgba(125, 0, 255, 0.4) 0%, transparent 0.4%),
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.3) 0%, transparent 0.3%),
        radial-gradient(circle at 75% 75%, rgba(0, 168, 255, 0.3) 0%, transparent 0.3%),
        radial-gradient(circle at 35% 65%, rgba(125, 0, 255, 0.3) 0%, transparent 0.3%),
        radial-gradient(circle at 65% 35%, rgba(0, 212, 255, 0.3) 0%, transparent 0.3%);
    background-size: 300% 300%, 280% 280%, 320% 320%, 250% 250%, 270% 270%, 290% 290%, 310% 310%, 260% 260%, 240% 240%, 330% 330%;
    animation: particleSparkle 15s linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

@keyframes particleSparkle {
    0% { 
        background-position: 0% 0%, 100% 100%, 50% 0%, 0% 50%, 100% 50%, 50% 100%, 25% 25%, 75% 75%, 35% 65%, 65% 35%;
        opacity: 0.6;
    }
    25% { 
        background-position: 25% 25%, 75% 75%, 60% 20%, 20% 60%, 80% 40%, 40% 80%, 30% 30%, 70% 70%, 40% 70%, 70% 40%;
        opacity: 0.8;
    }
    50% { 
        background-position: 50% 50%, 50% 50%, 70% 40%, 40% 70%, 60% 30%, 30% 60%, 50% 50%, 50% 50%, 50% 80%, 80% 50%;
        opacity: 1;
    }
    75% { 
        background-position: 75% 75%, 25% 25%, 80% 60%, 60% 80%, 40% 20%, 20% 40%, 70% 70%, 30% 30%, 60% 90%, 90% 60%;
        opacity: 0.8;
    }
    100% { 
        background-position: 100% 100%, 0% 0%, 90% 80%, 80% 90%, 20% 10%, 10% 20%, 75% 75%, 25% 25%, 70% 100%, 100% 70%;
        opacity: 0.6;
    }
}

/* Ensure banner content is above particles */
.main-banner.banner-home .container,
.main-banner.banner-home .banner-content,
.main-banner.banner-center .container,
.main-banner.banner-center .banner-content,
.banner-home .container,
.banner-home .banner-content,
.banner-center .container,
.banner-center .banner-content {
    position: relative;
    z-index: 2;
}

/* Particle canvas z-index */
.particle-canvas {
    z-index: 0 !important;
}

/* Modern AI-themed SVG illustration colors */
:root {
    /* Primary AI colors - Electric Blue & Cyan */
    --svg-illustration-primary-0: #001F3F !important;
    --svg-illustration-primary-1: #0074D9 !important;
    --svg-illustration-primary-2: #00A8FF !important;
    --svg-illustration-primary-3: #00D4FF !important;
    --svg-illustration-primary-4: #5BC0EB !important;
    
    /* Accent colors - Purple & Teal for AI theme */
    --svg-illustration-yellow-1: #7D00FF !important; /* Purple accent */
    --svg-illustration-yellow-2: #9D4EDD !important; /* Lighter purple */
    --svg-illustration-yellow-3: #B77DFF !important;
    --svg-illustration-yellow-4: #C9A9FF !important;
    --svg-illustration-yellow-5: #E0C9FF !important;
    
    /* Green/Teal for tech/AI theme */
    --svg-illustration-green-1: #00A896 !important;
    --svg-illustration-green-2: #02C39A !important;
    --svg-illustration-green-3: #00E5CC !important;
    --svg-illustration-green-4: #4ECDC4 !important;
    
    /* Modern gray scale for depth */
    --svg-illustration-gray-1: #1A1F3A !important;
    --svg-illustration-gray-2: #2D3558 !important;
    --svg-illustration-gray-3: #4A5A7A !important;
    --svg-illustration-gray-4: #6B7A9C !important;
    --svg-illustration-gray-5: #8B9ABE !important;
    --svg-illustration-gray-6: #A8B5D0 !important;
    --svg-illustration-gray-7: #C5D0E2 !important;
    --svg-illustration-gray-8: #E0C9FF !important;
    --svg-illustration-gray-w: #FFFFFF !important;
    
    /* Banner shape colors - matching the gradient */
    --svg-banner-shape-left: #7D00FF !important;
    --svg-banner-shape-right: #00A8FF !important;
    --svg-banner-primary-shape-left: #7D00FF !important;
    --svg-banner-primary-shape-right: #00A8FF !important;
    
    /* Color mapping for default theme */
    --svg-illustration-color-0: #001F3F !important;
    --svg-illustration-color-1: #0074D9 !important;
    --svg-illustration-color-2: #00A8FF !important;
    --svg-illustration-color-3: #00D4FF !important;
    --svg-illustration-color-4: #5BC0EB !important;
    --svg-illustration-color-5: #8B9ABE !important;
    --svg-illustration-color-6: #A8B5D0 !important;
    --svg-illustration-color-7: #FFFFFF !important;
}

/* Override for modern theme variant */
.lagom .main-banner {
    --svg-illustration-primary-0: #001F3F !important;
    --svg-illustration-primary-1: #0074D9 !important;
    --svg-illustration-primary-2: #00A8FF !important;
    --svg-illustration-primary-3: #00D4FF !important;
    --svg-illustration-primary-4: #5BC0EB !important;
}

/* Ensure SVG illustrations use the new colors */
.banner-svg {
    opacity: 0.95;
}

/* Banner title styling for better visibility */
.banner-home .banner-title,
.banner-center .banner-title,
.main-banner .banner-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Domain search input styling */
.banner-home .domain-search-input,
.banner-center .domain-search-input {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Add subtle glow effect to search field */
.banner-home .search-field,
.banner-center .search-field {
    position: relative;
}

.banner-home .search-field::after,
.banner-center .search-field::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(125, 0, 255, 0.1), rgba(0, 168, 255, 0.1));
    pointer-events: none;
    z-index: -1;
}

/* Ensure SVG background illustration uses new colors */
.banner-background,
.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.banner-svg {
    width: 100%;
    height: 100%;
    opacity: 0.9;
}