/* Floating Objects Container */
.floating-objects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* Bubble Animations */
.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: 0.7;
    animation: floatUp 8s infinite linear;
}

.bubble-1 {
    width: 60px;
    height: 60px;
    background: var(--bubble-color-1);
    left: 10%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.bubble-2 {
    width: 40px;
    height: 40px;
    background: var(--bubble-color-2);
    left: 70%;
    animation-delay: 2s;
    animation-duration: 10s;
}

.bubble-3 {
    width: 80px;
    height: 80px;
    background: var(--bubble-color-3);
    left: 85%;
    animation-delay: 4s;
    animation-duration: 14s;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
        transform: translateY(90vh) scale(1);
    }
    90% {
        opacity: 0.7;
        transform: translateY(-10vh) scale(1);
    }
    100% {
        transform: translateY(-20vh) scale(0);
        opacity: 0;
    }
}

/* Wave Particles */
.wave-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--wave-color-1);
    border-radius: 50%;
    opacity: 0.8;
}

.particle-1 {
    top: 20%;
    left: 15%;
    animation: waveFloat 6s ease-in-out infinite;
    animation-delay: 0s;
}

.particle-2 {
    top: 60%;
    left: 80%;
    animation: waveFloat 8s ease-in-out infinite;
    animation-delay: 2s;
    background: var(--wave-color-2);
}

.particle-3 {
    top: 40%;
    left: 50%;
    animation: waveFloat 7s ease-in-out infinite;
    animation-delay: 4s;
}

@keyframes waveFloat {
    0%, 100% {
        transform: translateX(0) translateY(0) scale(1);
    }
    25% {
        transform: translateX(30px) translateY(-20px) scale(1.2);
    }
    50% {
        transform: translateX(60px) translateY(10px) scale(0.8);
    }
    75% {
        transform: translateX(30px) translateY(-15px) scale(1.1);
    }
}

/* Gradient Orbs */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    animation: orbFloat 10s ease-in-out infinite;
}

.orb-1 {
    width: 200px;
    height: 200px;
    background: var(--orb-gradient-1);
    top: 15%;
    right: 10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 150px;
    height: 150px;
    background: var(--orb-gradient-2);
    bottom: 20%;
    left: 5%;
    animation-delay: 3s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    33% {
        transform: translate(20px, -30px) scale(1.1);
        opacity: 0.8;
    }
    66% {
        transform: translate(-15px, 20px) scale(0.9);
        opacity: 0.7;
    }
}

/* Gradient Text Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-text {
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite;
}

/* Ripple Effect for Interactive Elements */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple:hover::before {
    width: 300px;
    height: 300px;
}

/* Floating Animation for Feature Cards */
.feature-card {
    animation: gentleFloat 6s ease-in-out infinite;
}

.feature-card:nth-child(1) {
    animation-delay: 0s;
}

.feature-card:nth-child(2) {
    animation-delay: 2s;
}

.feature-card:nth-child(3) {
    animation-delay: 4s;
}

@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Pulse Animation for Buttons */
.btn-primary {
    animation: subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(0, 119, 190, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0, 119, 190, 0.5);
    }
}

/* Dark mode pulse adjustment */
[data-theme="dark"] .btn-primary {
    animation: subtlePulseDark 3s ease-in-out infinite;
}

@keyframes subtlePulseDark {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(0, 206, 209, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0, 206, 209, 0.6);
    }
}

/* Loading Animation for Theme Toggle */
.theme-toggle {
    position: relative;
}

.theme-toggle::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50px;
    background: conic-gradient(from 0deg, transparent, var(--accent-color), transparent);
    opacity: 0;
    animation: rotate 2s linear infinite;
    z-index: -1;
}

.theme-toggle:hover::after {
    opacity: 0.3;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Scroll-triggered animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Stagger animation delays for multiple elements */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* Responsive animation adjustments */
@media (max-width: 768px) {
    .bubble-1, .bubble-2, .bubble-3 {
        animation-duration: 8s;
    }
    
    .orb-1, .orb-2 {
        width: 100px;
        height: 100px;
        animation-duration: 8s;
    }
    
    .wave-particle {
        animation-duration: 5s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bubble,
    .wave-particle,
    .gradient-orb,
    .feature-card,
    .btn-primary,
    .gradient-text {
        animation: none;
    }
    
    .theme-toggle::after {
        animation: none;
    }
}

/* Performance optimizations */
.floating-objects * {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}