/* New animation styles for the logo */
@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Top gradient animation */
@keyframes gradientEnter {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 0.8;
    }
}

/* Emoji animation */
@keyframes wave {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(20deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(10deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* The Contact button */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes expandGradient {
    from {
        background-size: 0% 0%;
    }

    to {
        background-size: 100% 100%;
    }
}

/* Rotating circles animation */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

.animate-spin-slow {
    animation: spin-slow 30s linear infinite;
}

.animate-spin-slower {
    animation: spin-reverse 35s linear infinite;
}

.animate-spin-slowest {
    animation: spin-slow 40s linear infinite;
}

/* Scroll dot animation */
@keyframes scroll {
    0% {
        transform: translateY(-4px);
        opacity: 1;
    }

    100% {
        transform: translateY(4px);
        opacity: 0;
    }            
}

.scroll-dot {
    animation: scroll 1.5s ease-in-out infinite;
}

/* App Scroll section */
@keyframes infiniteScroll {
    from {
        transform: translateX(0);
    }
    to {
        /* transform: translateX(-50%); */
        transform: translateX(calc(-50%));
    }
}


/* Footer: Add subtle animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.07;
    }
}

/* Hourglass rotation animation */
@keyframes hourglassRotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }   
    100% {
        transform: rotate(360deg);
    }
}