/* -----------------------------
   Animation Keyframes
   ----------------------------- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUpScale {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* -----------------------------
   Initial Animations
   ----------------------------- */
.animate-element {
    opacity: 0;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

.animate-element[data-animation="fade-in"] {
    animation-name: fadeIn;
}

.animate-element[data-animation="fade-in-up"] {
    animation-name: fadeInUp;
}

/* Animation delay classes */
.animate-element[data-delay="300"] {
    animation-delay: 0.3s;
}

.animate-element[data-delay="500"] {
    animation-delay: 0.5s;
}

.animate-element[data-delay="700"] {
    animation-delay: 0.7s;
}

/* -----------------------------
   Scroll-based Animations
   ----------------------------- */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.visible[data-animation="fade-in"] {
    opacity: 1;
}

.animate-on-scroll.visible[data-animation="fade-in-up"] {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll.visible[data-animation="fade-in-right"] {
    opacity: 1;
    transform: translateX(0);
}

.animate-on-scroll.visible[data-animation="fade-in-left"] {
    opacity: 1;
    transform: translateX(0);
}

.animate-on-scroll.visible[data-animation="fade-in-up-scale"] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Initial transform states */
.animate-on-scroll[data-animation="fade-in-up"] {
    transform: translateY(20px);
}

.animate-on-scroll[data-animation="fade-in-right"] {
    transform: translateX(-20px);
}

.animate-on-scroll[data-animation="fade-in-left"] {
    transform: translateX(20px);
}

.animate-on-scroll[data-animation="fade-in-up-scale"] {
    transform: translateY(20px) scale(0.95);
}

/* -----------------------------
   Utility Classes
   ----------------------------- */
/* Text gradient */
.text-gradient {
    background: linear-gradient(to right, #00FF85, #00FFEA);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hide scrollbars */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Transition delay */
.transition-delay-300 {
    transition-delay: 0.3s;
}

/* -----------------------------
   Featured Items
   ----------------------------- */
.featured-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-store-button {
    max-width: 200px;
}

/* -----------------------------
   Horizontal Scrolling
   ----------------------------- */
#scrollContainer {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}