/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Scroll Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Hover Effects */
.bike-card {
    animation: fadeIn 0.6s ease-out;
}

.feature-card {
    animation: fadeIn 0.6s ease-out;
}

.btn-primary {
    animation: pulse 2s infinite;
}

/* Loading Animation */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #00ff88;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 2rem auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Gradient Border */
.gradient-border {
    position: relative;
    border: double 3px transparent;
    border-radius: 20px;
    background-image: linear-gradient(#1a1a1a, #1a1a1a), 
                      linear-gradient(45deg, #00ff88, #00ccff);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Text Animation */
.typing-text {
    overflow: hidden;
    border-right: 3px solid #00ff88;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #00ff88 }
}