/* Floating Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.floating-screens .screen {
    transition: all 0.5s ease;
}

.floating-screens .video-call {
    animation: float 6s ease-in-out infinite;
}

.floating-screens .youtube-sync {
    animation: float 6s ease-in-out infinite 2s;
}

.floating-screens .drawing-pad {
    animation: float 6s ease-in-out infinite 4s;
}

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Pulse Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 126, 185, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 12px rgba(255, 126, 185, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 126, 185, 0);
    }
}

.pulse {
    animation: pulse 2.5s infinite;
}

/* Gradient Flow */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-flow {
    background-size: 200% 200%;
    animation: gradientFlow 8s ease infinite;
}

/* Feature Card Hover */
.feature-card {
    transform-origin: center bottom;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);
}

/* Step Animation */
.step-content {
    opacity: 0;
    transition: all 0.6s ease;
}

.step.in-view .step-content {
    opacity: 1;
    transform: translateY(0);
}

/* Particle Interaction */
.particles-js-canvas-el {
    transition: all 0.5s ease;
}