/* Hero Shapes Animation */
.shape-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -200px;
    animation: float 20s ease-in-out infinite;
}

.shape-2 {
    width: 300px;
    height: 300px;
    bottom: 100px;
    left: -150px;
    animation: float 25s ease-in-out infinite reverse;
}

.shape-3 {
    width: 200px;
    height: 200px;
    bottom: 200px;
    right: 20%;
    animation: float 30s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

/* Floating Cards Animation */
@keyframes floatCard {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(1deg); }
}

.card-1 {
    animation: floatCard 6s ease-in-out infinite;
}

.card-2 {
    animation: floatCard 6s ease-in-out infinite 2s;
}

.card-3 {
    animation: floatCard 6s ease-in-out infinite 4s;
}

/* Phone Mockup Animation */
@keyframes phoneFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

.phone-mockup {
    animation: phoneFloat 6s ease-in-out infinite;
}

/* Notification Slide Out */
@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}