html {
    scroll-behavior: smooth;
    overflow-x: hidden
}

body {
    overflow-x: hidden;
    width: 100%;
    position: relative
}

.animate-fade-in {
    animation: fadeIn .3s ease-out forwards
}

.animate-scale-in {
    animation: scaleIn .3s ease-out forwards
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(.95);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    10% {
        opacity: 1;
        transform: translateY(0)
    }

    90% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-10px)
    }
}

.animate-slide-up-fade {
    animation: slideUpFade 3.5s cubic-bezier(.4, 0, .2, 1) infinite
}

@keyframes float-icon {

    0%,
    to {
        transform: translateY(0) rotate(-2deg)
    }

    50% {
        transform: translateY(-2px) rotate(2deg)
    }
}

.animate-float-icon {
    animation: float-icon 3s ease-in-out infinite
}

@keyframes breathe-text {

    0%,
    to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.02)
    }
}

.animate-breathe {
    animation: breathe-text 2s ease-in-out infinite
}

@keyframes shimmer {
    0% {
        transform: translate(-100%) skew(12deg)
    }

    to {
        transform: translate(100%) skew(12deg)
    }
}

@keyframes float-logo {

    0%,
    to {
        transform: translateY(0) scale(1) rotate(0)
    }

    50% {
        transform: translateY(-8px) scale(1.03) rotate(1deg)
    }
}

.animate-float-logo {
    animation: float-logo 4s ease-in-out infinite
}

@keyframes scroll-bg {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 360px 360px
    }
}

.animate-scroll-bg {
    animation: scroll-bg 25s linear infinite
}

@keyframes pulse-glow {

    0%,
    to {
        opacity: .5;
        transform: scale(1)
    }

    50% {
        opacity: .8;
        transform: scale(1.05)
    }
}

@keyframes float-item {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes progress-stripes {
    0% {
        background-position: 1rem 0
    }

    to {
        background-position: 0 0
    }
}

@keyframes tapHand {

    0%,
    to {
        transform: translateY(0) rotate(-15deg)
    }

    50% {
        transform: translateY(8px) rotate(-15deg) scale(.95)
    }
}

.animate-tap-hand {
    animation: tapHand 1s ease-in-out infinite
}

@keyframes shake {

    0%,
    to {
        transform: translate(0)
    }

    20% {
        transform: translate(-8px)
    }

    40% {
        transform: translate(8px)
    }

    60% {
        transform: translate(-5px)
    }

    80% {
        transform: translate(5px)
    }
}

.animate-shake {
    animation: shake .5s ease-in-out
}

@keyframes floatParticle {

    0%,
    to {
        transform: translateY(0) scale(1);
        opacity: .8
    }

    50% {
        transform: translateY(-15px) scale(1.3);
        opacity: 1
    }
}