/* =============================================================================
   PREMIUM HOMEPAGE BACKGROUND STYLES
   
   INSTRUCTIONS:
   1. Add this CSS to: WordPress Dashboard → Appearance → Customize → Additional CSS
   2. In Elementor, select your container/section
   3. Go to Advanced → CSS Classes
   4. Add class: homepage-container
   
   This will apply the premium dark background with animations to the entire container
============================================================================= */

/* Main Container Background */
.homepage-container {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f1123 0%, #1a1d3a 25%, #252847 50%, #1a1d3a 75%, #0f1123 100%);
    overflow: hidden;
    padding: 100px 0 !important;
}

/* Gradient Orbs - Animated Background Elements */
.homepage-container::before,
.homepage-container::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

.homepage-container::before {
    width: 700px;
    height: 700px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
    top: -250px;
    left: -250px;
    animation: floatOrb1 25s infinite ease-in-out;
}

.homepage-container::after {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 50%, #fb923c 100%);
    bottom: -200px;
    right: -200px;
    animation: floatOrb2 25s infinite ease-in-out 8s;
}

/* Third Orb (using custom data attribute) */
.homepage-container[data-orb="true"]::before {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 50%, #10b981 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: floatOrb3 25s infinite ease-in-out 16s;
}

/* Grid Overlay */
.homepage-container .elementor-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 30s linear infinite;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

/* Particle Effects */
.homepage-container .elementor-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(139, 92, 246, 0.4), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(236, 72, 153, 0.3), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200% 200%;
    animation: particlesFloat 20s ease-in-out infinite;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

/* Make sure content appears above background effects */
.homepage-container .elementor-container > .elementor-column > .elementor-widget-wrap {
    position: relative;
    z-index: 1;
}

/* Animations */
@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25% { transform: translate(80px, -80px) scale(1.1) rotate(90deg); }
    50% { transform: translate(-50px, 80px) scale(0.9) rotate(180deg); }
    75% { transform: translate(-80px, -50px) scale(1.05) rotate(270deg); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25% { transform: translate(-80px, 80px) scale(1.1) rotate(-90deg); }
    50% { transform: translate(50px, -80px) scale(0.9) rotate(-180deg); }
    75% { transform: translate(80px, 50px) scale(1.05) rotate(-270deg); }
}

@keyframes floatOrb3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    25% { transform: translate(-40%, -60%) scale(1.1) rotate(90deg); }
    50% { transform: translate(-60%, -40%) scale(0.9) rotate(180deg); }
    75% { transform: translate(-55%, -55%) scale(1.05) rotate(270deg); }
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

@keyframes particlesFloat {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* Responsive Adjustments */
@media (max-width: 968px) {
    .homepage-container {
        padding: 80px 0 !important;
        min-height: auto;
    }

    .homepage-container::before,
    .homepage-container::after {
        width: 400px;
        height: 400px;
    }
}

@media (max-width: 640px) {
    .homepage-container {
        padding: 60px 0 !important;
    }

    .homepage-container::before,
    .homepage-container::after {
        width: 300px;
        height: 300px;
        filter: blur(100px);
    }
}

/* =============================================================================
   ALTERNATIVE: LIGHTER VERSION (Less animations for better performance)
   
   If the animations are too heavy, replace .homepage-container with 
   .homepage-container-light and use this simpler version:
============================================================================= */

.homepage-container-light {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f1123 0%, #1a1d3a 25%, #252847 50%, #1a1d3a 75%, #0f1123 100%);
    overflow: hidden;
    padding: 100px 0 !important;
}

.homepage-container-light::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

/* =============================================================================
   PREMIUM GLASS EFFECT UTILITIES
   
   Apply these classes to any Elementor widget for glass effects:
============================================================================= */

/* Standard Glass Card */
.glass-effect {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Glass Card with Hover Effect */
.glass-effect-hover {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.4s ease !important;
}

.glass-effect-hover:hover {
    transform: translateY(-6px) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.3) !important;
}

/* Premium Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Light Text for Dark Backgrounds */
.light-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.light-text-secondary {
    color: rgba(255, 255, 255, 0.6) !important;
}



/* Hide Heading and page title */
 .page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header), body:not([class*="elementor-page-"]) .site-main {
    max-width: 800px;
    display: none !important;
  }