/* Custom Keyframe Animations to replace Framer Motion */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
    opacity: 0;
    /* Start hidden */
}

.animate-fade-in-down-delay {
    animation: fadeInDown 0.8s ease-out 0.1s forwards;
    opacity: 0;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease-out 0.2s forwards;
    opacity: 0;
}

.animate-fade-in-delay {
    animation: fadeIn 1s ease-out 0.4s forwards;
    opacity: 0;
}

/* Radar Scan Animation */
@keyframes radar-pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(168, 85, 247, 0.4);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(168, 85, 247, 0);
    }
}

.scanning-active {
    animation: radar-pulse 1.5s infinite;
    position: relative;
    overflow: hidden;
}

.scanning-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.2), transparent);
    animation: scan-swipe 1.5s linear infinite;
}

@keyframes scan-swipe {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* History Chips */
.history-chip {
    transition: all 0.2s ease;
}

.history-chip:hover {
    transform: translateY(-2px);
    background-color: rgba(30, 41, 59, 0.8);
    border-color: rgba(168, 85, 247, 0.5);
}