/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

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

.animate {
    opacity: 0;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

.animate.fad                        e-in {
    animation-name: fade-in;
}

.animate.fade-in-up {
    animation-name: fade-in-up;
}

.animate.fade-in-up.delay-1 {
    animation-delay: 0.2s;
}

.animate.fade-in-up.delay-2 {
    animation-delay: 0.4s;
}

.animate.fade-in-up.delay-3 {
    animation-delay: 0.6s;
}

.animate.slide-in-left {
    animation-name: slide-in-left;
}

.animate.slide-in-right {
    animation-name: slide-in-right;
}

.animate.scale-in {
    animation-name: scale-in;
    animation-delay: 0.5s;
}

.animate.bounce-in {
    animation-name: bounce-in;
}

.phone-mockup {
    animation: bounce-in 1.5s ease-out 0.8s both, float 5s ease-in-out infinite 2.5s;
}

.logo-wrapper {
    animation: fade-in 0.8s ease-out 0.2s both;
}

.hero-title {
    animation: fade-in-up 1s ease-out 0.3s both;
}

.hero-description {
    animation: fade-in-up 1s ease-out 0.5s both;
}

.beta-badge {
    animation: fade-in-up 1s ease-out 1.5s both;
}

.store-buttons {
    animation: fade-in-up 1s ease-out 0.7s both;
}

.button {
    animation: scale-in 0.8s ease-out 0.8s both;
}

.features-grid > * {
    animation: fade-in-up 0.8s ease-out both;
}

.features-grid > *:nth-child(1) {
    animation-delay: 0.2s;
}

.features-grid > *:nth-child(2) {
    animation-delay: 0.4s;
}

.features-grid > *:nth-child(3) {
    animation-delay: 0.6s;
}

.footer-nav {
    animation: fade-in 0.8s ease-out both;
}

.copyright {
    animation: fade-in 0.8s ease-out 0.2s both;
}