/* Animation Library */

/* Initial state for floating elements */
.floating-element {
    transition: opacity 0.8s ease-out;
    backface-visibility: hidden;
    perspective: 1000px;
    transform-style: preserve-3d;
    opacity: 0;
}

/* Fade in when page loads */
.floating-element.visible {
    opacity: 1;
}

/* Different initial opacity for variety */
.element-1.visible { opacity: 0.8; }
.element-2.visible { opacity: 0.7; }
.element-3.visible { opacity: 0.6; }
.element-4.visible { opacity: 0.75; }
.element-5.visible { opacity: 0.85; }
.element-6.visible { opacity: 0.7; }
.element-7.visible { opacity: 0.65; }
.element-8.visible { opacity: 0.8; }

/* Prevent jumping on scroll */
.hero-section {
    position: relative;
    z-index: 1;
}

.hero-animation {
    pointer-events: none; /* Prevent interaction with floating elements */
}

/* Individual floating element animations with different timing */
.floating-element.element-1 {
    animation: float-1 7s ease-in-out infinite;
    animation-delay: 0s;
    animation-fill-mode: backwards;
}

.floating-element.element-2 {
    animation: float-2 9s ease-in-out infinite;
    animation-delay: 0.7s;
    animation-fill-mode: backwards;
}

.floating-element.element-3 {
    animation: float-3 11s ease-in-out infinite;
    animation-delay: 1.3s;
    animation-fill-mode: backwards;
}

.floating-element.element-4 {
    animation: float-4 8s ease-in-out infinite;
    animation-delay: 2.1s;
    animation-fill-mode: backwards;
}

.floating-element.element-5 {
    animation: float-5 10s ease-in-out infinite;
    animation-delay: 0.4s;
    animation-fill-mode: backwards;
}

.floating-element.element-6 {
    animation: float-6 12s ease-in-out infinite;
    animation-delay: 1.8s;
    animation-fill-mode: backwards;
}

.floating-element.element-7 {
    animation: float-7 9.5s ease-in-out infinite;
    animation-delay: 2.5s;
    animation-fill-mode: backwards;
}

.floating-element.element-8 {
    animation: float-8 8.5s ease-in-out infinite;
    animation-delay: 0.9s;
    animation-fill-mode: backwards;
}

/* Custom animations for each element - all different */
@keyframes float-1 {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    20% {
        transform: translate3d(15px, -20px, 0) rotate(72deg) scale(1.1);
    }
    40% {
        transform: translate3d(-10px, -30px, 0) rotate(144deg) scale(0.95);
    }
    60% {
        transform: translate3d(-20px, -15px, 0) rotate(216deg) scale(1.05);
    }
    80% {
        transform: translate3d(10px, -5px, 0) rotate(288deg) scale(0.9);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(360deg) scale(1);
    }
}

@keyframes float-2 {
    0% {
        transform: translate3d(0, 0, 0) rotate(45deg) scale(0.9);
    }
    25% {
        transform: translate3d(-25px, -15px, 0) rotate(-30deg) scale(1);
    }
    50% {
        transform: translate3d(-15px, -35px, 0) rotate(-180deg) scale(1.1);
    }
    75% {
        transform: translate3d(20px, -20px, 0) rotate(-270deg) scale(0.95);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(-315deg) scale(0.9);
    }
}

@keyframes float-3 {
    0% {
        transform: translate3d(5px, -5px, 0) rotate(20deg) scale(1.05);
    }
    15% {
        transform: translate3d(30px, -10px, 0) rotate(90deg) scale(1);
    }
    30% {
        transform: translate3d(20px, -40px, 0) rotate(180deg) scale(0.9);
    }
    45% {
        transform: translate3d(-15px, -35px, 0) rotate(270deg) scale(1.1);
    }
    60% {
        transform: translate3d(-25px, -20px, 0) rotate(360deg) scale(1);
    }
    75% {
        transform: translate3d(-10px, -10px, 0) rotate(450deg) scale(0.95);
    }
    100% {
        transform: translate3d(5px, -5px, 0) rotate(380deg) scale(1.05);
    }
}

@keyframes float-4 {
    0% {
        transform: translate3d(-10px, 0, 0) rotate(-45deg) scale(0.95);
    }
    30% {
        transform: translate3d(-30px, -25px, 0) rotate(-135deg) scale(1.05);
    }
    60% {
        transform: translate3d(10px, -15px, 0) rotate(-225deg) scale(0.9);
    }
    90% {
        transform: translate3d(5px, -5px, 0) rotate(-315deg) scale(1);
    }
    100% {
        transform: translate3d(-10px, 0, 0) rotate(-405deg) scale(0.95);
    }
}

@keyframes float-5 {
    0% {
        transform: translate3d(0, -10px, 0) rotate(60deg) scale(1);
    }
    20% {
        transform: translate3d(-20px, -25px, 0) rotate(120deg) scale(0.9);
    }
    40% {
        transform: translate3d(-15px, -40px, 0) rotate(180deg) scale(1.1);
    }
    60% {
        transform: translate3d(15px, -30px, 0) rotate(240deg) scale(1);
    }
    80% {
        transform: translate3d(25px, -15px, 0) rotate(300deg) scale(0.95);
    }
    100% {
        transform: translate3d(0, -10px, 0) rotate(420deg) scale(1);
    }
}

@keyframes float-6 {
    0% {
        transform: translate3d(10px, -5px, 0) rotate(-30deg) scale(1.1);
    }
    17% {
        transform: translate3d(-5px, -20px, 0) rotate(30deg) scale(1);
    }
    34% {
        transform: translate3d(-25px, -35px, 0) rotate(90deg) scale(0.95);
    }
    51% {
        transform: translate3d(-10px, -45px, 0) rotate(150deg) scale(1.05);
    }
    68% {
        transform: translate3d(20px, -30px, 0) rotate(210deg) scale(0.9);
    }
    85% {
        transform: translate3d(30px, -15px, 0) rotate(270deg) scale(1);
    }
    100% {
        transform: translate3d(10px, -5px, 0) rotate(330deg) scale(1.1);
    }
}

@keyframes float-7 {
    0% {
        transform: translate3d(-15px, -8px, 0) rotate(15deg) scale(0.95);
    }
    22% {
        transform: translate3d(10px, -30px, 0) rotate(-60deg) scale(1.05);
    }
    44% {
        transform: translate3d(25px, -20px, 0) rotate(-150deg) scale(0.9);
    }
    66% {
        transform: translate3d(0, -35px, 0) rotate(-240deg) scale(1.1);
    }
    88% {
        transform: translate3d(-20px, -15px, 0) rotate(-330deg) scale(1);
    }
    100% {
        transform: translate3d(-15px, -8px, 0) rotate(-345deg) scale(0.95);
    }
}

@keyframes float-8 {
    0% {
        transform: translate3d(5px, 0, 0) rotate(90deg) scale(1.05);
    }
    28% {
        transform: translate3d(-15px, -18px, 0) rotate(180deg) scale(0.95);
    }
    56% {
        transform: translate3d(-5px, -38px, 0) rotate(270deg) scale(1);
    }
    84% {
        transform: translate3d(15px, -22px, 0) rotate(360deg) scale(0.9);
    }
    100% {
        transform: translate3d(5px, 0, 0) rotate(450deg) scale(1.05);
    }
}

/* Disable parallax on mobile for better performance */
@media (max-width: 768px) {
    .floating-element {
        animation-duration: 12s !important;
    }
}

/* Smooth fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Prevent animation conflicts */
.floating-element.parallax-active {
    animation-play-state: paused;
}