/* 
    Enhanced Home Page Gradient & Pattern System
    Designed for a premium, creative, and "high-intelligence" aesthetic.
    Combines interactive gradients, geometric patterns, and subtle depth.
*/

:root {
    --bg-deep: #020617;
    --accent-blue: #6366f1;
    --accent-glow: rgba(99, 102, 241, 0.2);
    --pattern-opacity: 0.03;
}

.home-gradient-bg {
    position: relative;
    background-color: var(--bg-deep) !important;

    /* Layer 1: Premium Ethereal Light Leaks */
    background-image:
        radial-gradient(circle at var(--mouse-x, 25%) var(--mouse-y, 30%), rgba(99, 102, 241, 0.15) 0%, transparent 45%),
        radial-gradient(circle at calc(100% - var(--mouse-x, 75%)) calc(100% - var(--mouse-y, 60%)), rgba(168, 85, 247, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.5) 0%, var(--bg-deep) 100%) !important;

    background-attachment: fixed;
    transition: background-image 0.4s ease-out;
    z-index: 1;
    overflow: hidden;
}

/* Layer 2: Geometric Data Pattern (Dots & Grid) */
.home-gradient-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        /* Data points */
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        /* Horizontal grid */
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    /* Vertical grid */
    background-size: 40px 40px, 120px 120px, 120px 120px;
    background-position: center center;
    pointer-events: none;
    z-index: -1;
}

/* Layer 3: Creative "Circuit/Constellation" Pattern */
.home-gradient-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66 3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-46-43c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm20-46c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 80%);
    pointer-events: none;
    z-index: -1;
    animation: pulse 8s infinite alternate ease-in-out;
}

@keyframes pulse {
    from {
        opacity: 0.3;
        transform: scale(1);
    }

    to {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

@keyframes floatParticle {
    0% {
        transform: translateY(0) translateX(0);
    }

    33% {
        transform: translateY(-50px) translateX(20px);
    }

    66% {
        transform: translateY(20px) translateX(-40px);
    }

    100% {
        transform: translateY(0) translateX(0);
    }
}

/* Glassmorphism effects for content containers within these sections */
.home-gradient-bg .service-box-eight,
.home-gradient-bg .tv-project-item,
.home-gradient-bg .industries-box {
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.home-gradient-bg .service-box-eight:hover,
.home-gradient-bg .tv-project-item:hover,
.home-gradient-bg .industries-box:hover {
    background: rgba(99, 102, 241, 0.05) !important;
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.1);
}

/* Hide the existing background images */
.home-gradient-bg .bg.image,
.home-gradient-bg>img.bg.image,
.home-gradient-bg .mbm-overlay {
    display: none !important;
}

/* Section-specific tweaks */
.marquee-section.home-gradient-bg .marquee-inner {
    background: transparent !important;
}

.tv-about-section.home-gradient-bg .content-box {
    background: rgba(16, 83, 243, 0.1) !important;
    backdrop-filter: blur(15px);
    border-left: 4px solid var(--accent-blue);
}

/* ========================================
   Home Page Section Gap Minimization
   Reduces the excessive vertical spacing
   between each section on the landing page.
   ======================================== */

/* Hero section — tighten top margin on the inner wrapper */
.tv-hero-section.style-8 .hero-inner {
    margin-top: 20px !important;
}

/* About, Project, Integrations, Industries & Marquee sections */
.tv-about-section.style-7.space,
.tv-project-section.style-5.space,
.tv-integration-section.space,
.tv-industries-section.style-2.space,
.marquee-section.style-3 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* Tablet (max 1199px) */
@media (max-width: 1199px) {
    .tv-about-section.style-7.space,
    .tv-project-section.style-5.space,
    .tv-integration-section.space,
    .tv-industries-section.style-2.space,
    .marquee-section.style-3 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

/* Mobile (max 991px) */
@media (max-width: 991px) {
    .tv-about-section.style-7.space,
    .tv-project-section.style-5.space,
    .tv-integration-section.space,
    .tv-industries-section.style-2.space,
    .marquee-section.style-3 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* Small mobile (max 575px) */
@media (max-width: 575px) {
    .tv-about-section.style-7.space,
    .tv-project-section.style-5.space,
    .tv-integration-section.space,
    .tv-industries-section.style-2.space,
    .marquee-section.style-3 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}