/* =====================================================
   UA Web Studio - Premium Background Effects
   "Midnight Elegance" Theme
   ===================================================== */

/* =====================================================
   Global Premium Background Base - Midnight Elegance
   ===================================================== */
body {
    background:
        /* Electric Indigo accent gradients - minimal */
        radial-gradient(ellipse at 10% 20%, rgba(94, 90, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 80%, rgba(123, 120, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(94, 90, 255, 0.03) 0%, transparent 60%),
        /* Midnight Elegance base - #0B0B0B */
        linear-gradient(180deg, #0B0B0B 0%, #0D0D0E 50%, #0B0B0B 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* =====================================================
   Animated Aurora Background
   ===================================================== */
.aurora-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    overflow: hidden;
    pointer-events: none;
}

.aurora-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(94, 90, 255, 0.1) 60deg,
            transparent 120deg,
            rgba(94, 90, 255, 0.08) 180deg,
            transparent 240deg,
            rgba(74, 71, 204, 0.1) 300deg,
            transparent 360deg);
    animation: auroraRotate 60s linear infinite;
}

.aurora-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 100% 50% at 50% 0%, rgba(94, 90, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 80% 40% at 80% 100%, rgba(94, 90, 255, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 30% at 20% 80%, rgba(94, 90, 255, 0.1) 0%, transparent 50%);
    animation: auroraPulse 15s ease-in-out infinite alternate;
}

@keyframes auroraRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes auroraPulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.5;
    }
}

/* =====================================================
   Mesh Gradient Orbs (Floating Blob Effect)
   ===================================================== */
.mesh-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -9;
    overflow: hidden;
    pointer-events: none;
}

.mesh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    mix-blend-mode: screen;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.mesh-blob-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(94, 90, 255, 0.4) 0%, rgba(94, 90, 255, 0) 70%);
    top: -10%;
    left: -10%;
    animation: blobFloat1 30s ease-in-out infinite;
}

.mesh-blob-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(94, 90, 255, 0.35) 0%, rgba(94, 90, 255, 0) 70%);
    top: 60%;
    right: -5%;
    animation: blobFloat2 35s ease-in-out infinite;
}

.mesh-blob-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(94, 90, 255, 0.3) 0%, rgba(94, 90, 255, 0) 70%);
    bottom: -5%;
    left: 30%;
    animation: blobFloat3 25s ease-in-out infinite;
}

.mesh-blob-4 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(94, 90, 255, 0.25) 0%, rgba(94, 90, 255, 0) 70%);
    top: 30%;
    left: 50%;
    animation: blobFloat4 40s ease-in-out infinite;
}

.mesh-blob-5 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(94, 90, 255, 0.2) 0%, rgba(94, 90, 255, 0) 70%);
    top: 10%;
    right: 20%;
    animation: blobFloat5 32s ease-in-out infinite;
}

@keyframes blobFloat1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(100px, 50px) scale(1.1);
    }

    50% {
        transform: translate(50px, 100px) scale(0.9);
    }

    75% {
        transform: translate(-50px, 50px) scale(1.05);
    }
}

@keyframes blobFloat2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(-80px, -40px) scale(1.15);
    }

    50% {
        transform: translate(-40px, 80px) scale(0.85);
    }

    75% {
        transform: translate(60px, -60px) scale(1.1);
    }
}

@keyframes blobFloat3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(70px, -70px) scale(1.2);
    }

    66% {
        transform: translate(-100px, 30px) scale(0.9);
    }
}

@keyframes blobFloat4 {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    25% {
        transform: translate(-60px, 80px) scale(1.1) rotate(90deg);
    }

    50% {
        transform: translate(80px, -40px) scale(0.95) rotate(180deg);
    }

    75% {
        transform: translate(-40px, -60px) scale(1.05) rotate(270deg);
    }
}

@keyframes blobFloat5 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    20% {
        transform: translate(50px, 70px) scale(1.08);
    }

    40% {
        transform: translate(-70px, 50px) scale(0.92);
    }

    60% {
        transform: translate(-50px, -80px) scale(1.12);
    }

    80% {
        transform: translate(80px, -40px) scale(0.88);
    }
}

/* =====================================================
   Geometric Pattern Background
   ===================================================== */
.geo-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -8;
    pointer-events: none;
    opacity: 0.03;
    background-image:
        linear-gradient(rgba(94, 90, 255, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 90, 255, 0.5) 1px, transparent 1px),
        linear-gradient(rgba(94, 90, 255, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 90, 255, 0.3) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* =====================================================
   Floating Particles Layer
   ===================================================== */
.floating-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -7;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(94, 90, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(94, 90, 255, 0.4);
}

/* =====================================================
   Glowing Lines / Light Beams
   ===================================================== */
.light-beams {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -6;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.15;
}

.beam {
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(94, 90, 255, 0.8) 20%,
            rgba(94, 90, 255, 1) 50%,
            rgba(94, 90, 255, 0.8) 80%,
            transparent 100%);
    filter: blur(2px);
}

.beam-1 {
    left: 10%;
    animation: beamMove1 20s ease-in-out infinite;
}

.beam-2 {
    left: 30%;
    animation: beamMove2 25s ease-in-out infinite;
    animation-delay: -5s;
}

.beam-3 {
    left: 50%;
    animation: beamMove3 22s ease-in-out infinite;
    animation-delay: -10s;
}

.beam-4 {
    left: 70%;
    animation: beamMove1 28s ease-in-out infinite;
    animation-delay: -15s;
}

.beam-5 {
    left: 90%;
    animation: beamMove2 24s ease-in-out infinite;
    animation-delay: -3s;
}

@keyframes beamMove1 {

    0%,
    100% {
        transform: translateX(0) scaleY(0.3);
        opacity: 0.1;
    }

    50% {
        transform: translateX(50px) scaleY(1);
        opacity: 0.3;
    }
}

@keyframes beamMove2 {

    0%,
    100% {
        transform: translateX(0) scaleY(0.5);
        opacity: 0.15;
    }

    50% {
        transform: translateX(-30px) scaleY(0.8);
        opacity: 0.25;
    }
}

@keyframes beamMove3 {

    0%,
    100% {
        transform: translateX(-20px) scaleY(0.4);
        opacity: 0.1;
    }

    50% {
        transform: translateX(40px) scaleY(1);
        opacity: 0.35;
    }
}

/* =====================================================
   Starfield Effect
   ===================================================== */
.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -11;
    pointer-events: none;
}

.star-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 160px 120px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 200px 60px, rgba(94, 90, 255, 0.5), transparent),
        radial-gradient(2px 2px at 250px 150px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 300px 30px, rgba(255, 255, 255, 0.3), transparent);
    background-size: 350px 200px;
    animation: starTwinkle 8s ease-in-out infinite alternate;
}

.star-layer-2 {
    background-image:
        radial-gradient(1px 1px at 50px 100px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(2px 2px at 100px 20px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 150px 130px, rgba(94, 90, 255, 0.4), transparent),
        radial-gradient(1px 1px at 220px 90px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 280px 50px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 320px 170px, rgba(94, 90, 255, 0.5), transparent);
    background-size: 400px 250px;
    animation: starTwinkle 10s ease-in-out infinite alternate-reverse;
}

@keyframes starTwinkle {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0.3;
    }
}

/* =====================================================
   Gradient Wave Background
   ===================================================== */
.gradient-wave {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    z-index: -5;
    pointer-events: none;
    opacity: 0.4;
    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(94, 90, 255, 0.05) 30%,
            rgba(94, 90, 255, 0.08) 60%,
            rgba(74, 71, 204, 0.1) 100%);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23fff' d='M0,160L48,170.7C96,181,192,203,288,197.3C384,192,480,160,576,165.3C672,171,768,213,864,229.3C960,245,1056,235,1152,208C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23fff' d='M0,160L48,170.7C96,181,192,203,288,197.3C384,192,480,160,576,165.3C672,171,768,213,864,229.3C960,245,1056,235,1152,208C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* =====================================================
   Section-Specific Background Enhancements
   ===================================================== */

/* Hero section - Most dramatic */
.hero {
    background:
        radial-gradient(ellipse 80% 50% at 50% 20%, rgba(94, 90, 255, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(94, 90, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 20% 70%, rgba(94, 90, 255, 0.1) 0%, transparent 50%),
        transparent !important;
}

/* About section */
.about-section {
    position: relative;
    background:
        radial-gradient(ellipse at 0% 50%, rgba(94, 90, 255, 0.12) 0%, transparent 50%),
        linear-gradient(135deg, rgba(10, 10, 18, 0.9) 0%, rgba(5, 5, 10, 0.95) 100%) !important;
}

.about-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at 100% 50%, rgba(94, 90, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* Services section */
.services-section {
    background:
        radial-gradient(ellipse at 100% 50%, rgba(94, 90, 255, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, rgba(5, 5, 10, 0.95) 0%, rgba(10, 10, 18, 0.9) 100%) !important;
}

/* Social section */
.social-section {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(94, 90, 255, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 70%, rgba(94, 90, 255, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, rgba(10, 10, 18, 0.95) 0%, rgba(5, 5, 10, 1) 100%) !important;
}

/* Testimonials section */
.testimonials-section {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(94, 90, 255, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, rgba(10, 10, 18, 1) 0%, rgba(5, 5, 10, 1) 100%) !important;
}

/* Pricing section */
.pricing-section {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(94, 90, 255, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 80%, rgba(94, 90, 255, 0.08) 0%, transparent 40%),
        transparent !important;
}

/* Page header */
.page-header {
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(94, 90, 255, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 100%, rgba(94, 90, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(94, 90, 255, 0.08) 0%, transparent 50%),
        transparent !important;
}

/* CTA section */
.cta-section {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(94, 90, 255, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(94, 90, 255, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 20%, rgba(94, 90, 255, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, rgba(5, 5, 10, 1) 0%, rgba(10, 10, 15, 1) 100%) !important;
}

/* Footer */
.footer {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(94, 90, 255, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, rgba(5, 5, 10, 1) 0%, rgba(0, 0, 0, 1) 100%) !important;
}

/* =====================================================
   Ambient Light Effect
   ===================================================== */
.ambient-light {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -4;
    pointer-events: none;
    overflow: hidden;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.15;
}

.ambient-orb-1 {
    width: 800px;
    height: 800px;
    background: #5E5AFF;
    top: -20%;
    left: -10%;
    animation: ambientFloat1 40s ease-in-out infinite;
}

.ambient-orb-2 {
    width: 600px;
    height: 600px;
    background: #5E5AFF;
    bottom: -15%;
    right: -10%;
    animation: ambientFloat2 35s ease-in-out infinite;
}

.ambient-orb-3 {
    width: 500px;
    height: 500px;
    background: #7B78FF;
    top: 40%;
    left: 40%;
    animation: ambientFloat3 45s ease-in-out infinite;
}

@keyframes ambientFloat1 {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.1;
    }

    50% {
        transform: translate(100px, 50px);
        opacity: 0.2;
    }
}

@keyframes ambientFloat2 {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.12;
    }

    50% {
        transform: translate(-80px, -60px);
        opacity: 0.18;
    }
}

@keyframes ambientFloat3 {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.08;
    }

    33% {
        transform: translate(60px, -80px);
        opacity: 0.15;
    }

    66% {
        transform: translate(-70px, 50px);
        opacity: 0.1;
    }
}

/* =====================================================
   Noise Texture Overlay Enhancement
   ===================================================== */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* =====================================================
   Vignette Effect
   ===================================================== */
.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
}

/* =====================================================
   Premium Glow Spots
   ===================================================== */
.glow-spot {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    mix-blend-mode: screen;
}

.glow-spot-1 {
    width: 300px;
    height: 300px;
    background: rgba(94, 90, 255, 0.3);
    top: 10%;
    left: 5%;
    z-index: -5;
    animation: glowPulse1 8s ease-in-out infinite;
}

.glow-spot-2 {
    width: 250px;
    height: 250px;
    background: rgba(94, 90, 255, 0.25);
    top: 60%;
    right: 10%;
    z-index: -5;
    animation: glowPulse2 10s ease-in-out infinite;
}

.glow-spot-3 {
    width: 200px;
    height: 200px;
    background: rgba(94, 90, 255, 0.35);
    bottom: 20%;
    left: 30%;
    z-index: -5;
    animation: glowPulse3 12s ease-in-out infinite;
}

@keyframes glowPulse1 {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

@keyframes glowPulse2 {

    0%,
    100% {
        opacity: 0.25;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.15);
    }
}

@keyframes glowPulse3 {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

/* =====================================================
   Accessibility - Respect reduced motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {

    .aurora-bg::before,
    .aurora-bg::after,
    .mesh-blob,
    .beam,
    .star-layer,
    .ambient-orb,
    .glow-spot {
        animation: none !important;
    }
}