/* WOW Effects and Advanced Animations */

/* Animated Background */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(125deg, #0a0f1c 0%, #162544 25%, #1a3654 50%, #2a4d70 75%, #3a6690 100%);
}

/* Gradient Orbs */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    animation: float-orb 20s ease-in-out infinite;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at 30% 30%, rgba(232, 93, 117, 0.8) 0%, rgba(232, 93, 117, 0.4) 40%, transparent 70%);
    top: -200px;
    left: -200px;
    animation-duration: 25s;
}

.orb-2 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle at 50% 50%, rgba(123, 180, 217, 0.6) 0%, rgba(123, 180, 217, 0.3) 40%, transparent 70%);
    bottom: -300px;
    right: -300px;
    animation-duration: 30s;
    animation-delay: -10s;
}

.orb-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle at 70% 70%, rgba(43, 95, 138, 0.7) 0%, rgba(43, 95, 138, 0.3) 40%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 35s;
    animation-delay: -15s;
}

@keyframes float-orb {
    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(-100px, -100px) scale(1.05);
    }
}

/* Floating Particles */
.floating-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.floating-particles::before,
.floating-particles::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 
        20px 20px rgba(255, 255, 255, 0.5),
        40px 40px rgba(255, 255, 255, 0.5),
        60px 60px rgba(255, 255, 255, 0.5),
        80px 80px rgba(255, 255, 255, 0.5),
        100px 100px rgba(255, 255, 255, 0.5),
        120px 120px rgba(255, 255, 255, 0.5),
        140px 140px rgba(255, 255, 255, 0.5);
    animation: particles 15s linear infinite;
}

.floating-particles::after {
    animation-delay: -7.5s;
}

@keyframes particles {
    from {
        transform: translateY(0) translateX(0);
    }
    to {
        transform: translateY(-2000px) translateX(500px);
    }
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0f1c 0%, #1a3654 100%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.loading-screen.hide {
    opacity: 0;
    pointer-events: none;
}

.loading-logo {
    display: flex;
    gap: 20px;
}

.loading-hexagon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #7BB4D9 0%, #E85D75 100%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    animation: loading-pulse 1.5s ease-in-out infinite;
}

.loading-hexagon:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-hexagon:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loading-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
}

/* Hero Title Animation */
.hero-title .letter {
    display: inline-block;
    animation: letter-float 3s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.1s);
    text-shadow: 
        0 0 20px rgba(123, 180, 217, 0.5),
        0 0 40px rgba(123, 180, 217, 0.3),
        0 0 60px rgba(123, 180, 217, 0.2);
}

@keyframes letter-float {
    0%, 100% {
        transform: translateY(0) rotateX(0deg);
    }
    50% {
        transform: translateY(-10px) rotateX(10deg);
    }
}

/* Subtitle Animation */
.subtitle-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: word-appear 0.8s ease forwards;
}

.subtitle-word:nth-child(1) {
    animation-delay: 1s;
}

.subtitle-word:nth-child(2) {
    animation-delay: 1.2s;
}

.subtitle-word:nth-child(3) {
    animation-delay: 1.4s;
}

@keyframes word-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced CTA Button */
.cta-button {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.button-text {
    position: relative;
    z-index: 2;
}

.button-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(123, 180, 217, 0.8) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    filter: blur(20px);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cta-button:hover .button-glow {
    opacity: 1;
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* 3D Hexagon Effects */
.hex-group {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.hex {
    transition: all 0.5s ease;
    transform-style: preserve-3d;
    position: relative;
}

.hex::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: inherit;
    filter: blur(20px);
    opacity: 0.5;
    z-index: -1;
    transition: all 0.5s ease;
}

.hex:hover::before {
    opacity: 0.8;
    filter: blur(30px);
}

.hex-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(232, 93, 117, 0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(40px);
    animation: glow-rotate 10s linear infinite;
}

@keyframes glow-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Enhanced Service Cards */
.service-card {
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(123, 180, 217, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.service-card:hover::after {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-15px) rotateX(-5deg) scale(1.02);
    box-shadow: 
        0 30px 60px rgba(43, 95, 138, 0.3),
        0 0 100px rgba(123, 180, 217, 0.1);
}

/* Neon Effects for Icons */
.service-icon svg {
    filter: drop-shadow(0 0 10px rgba(123, 180, 217, 0.5));
    transition: filter 0.3s ease;
}

.service-card:hover .service-icon svg {
    filter: 
        drop-shadow(0 0 20px rgba(123, 180, 217, 0.8))
        drop-shadow(0 0 40px rgba(232, 93, 117, 0.4));
}

/* Approach Items 3D */
.approach-item {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.approach-item:hover {
    transform: translateY(-5px);
    background: rgba(123, 180, 217, 0.05);
    box-shadow: 0 10px 30px rgba(43, 95, 138, 0.1);
}

.approach-number {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 20px currentColor);
}

/* Contact Form Effects */
.contact-form input:focus,
.contact-form textarea:focus {
    transform: translateY(-2px);
    box-shadow: 
        0 10px 30px rgba(123, 180, 217, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Parallax Effects */
.hero {
    perspective: 1000px;
}

.hero-content {
    transform: translateZ(0);
}

.hero-illustration {
    transform: translateZ(50px);
}

/* Scroll Animations */
[data-aos] {
    transition-property: transform, opacity;
}

[data-aos].aos-animate {
    transform: translateZ(0);
}

/* Custom AOS Animations */
@keyframes float-up {
    from {
        opacity: 0;
        transform: translateY(50px) rotateX(10deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

/* Glass Navigation on Scroll */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: saturate(200%) blur(30px);
    box-shadow: 
        0 10px 40px rgba(43, 95, 138, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Responsive WOW Effects */
@media (max-width: 768px) {
    .gradient-orb {
        filter: blur(40px);
    }
    
    .orb-1 {
        width: 400px;
        height: 400px;
    }
    
    .orb-2 {
        width: 500px;
        height: 500px;
    }
    
    .orb-3 {
        width: 300px;
        height: 300px;
    }
    
    .hero-title .letter {
        animation: none;
        text-shadow: 0 0 20px rgba(123, 180, 217, 0.3);
    }
}