﻿/* Ship Showcase - animation keyframes (replaces framer-motion) */

/* Radar rings: scale + opacity pulse, matches original 6s ease-in-out loop */
.radar-ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 2px solid #ffffff;
}

.radar-ring-1 {
    animation: radarPulse1 6s ease-in-out infinite;
}

.radar-ring-2 {
    inset: 100px;
    animation: radarPulse2 6s ease-in-out infinite;
    animation-delay: 0.5s;
}

.radar-ring-3 {
    inset: 200px;
    animation: radarPulse3 6s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes radarPulse1 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.3;
    }
}

@keyframes radarPulse2 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.2;
    }
}

@keyframes radarPulse3 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.15;
    }
}

/* Satellite tracking blips: scale + expanding/fading box-shadow ring, matches original 2s loop */
.blip {
    animation: blipPing 2s ease-in-out infinite;
}

.blip-delayed {
    animation-delay: 0.7s;
}

@keyframes blipPing {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7);
    }

    50% {
        transform: scale(1.8);
        box-shadow: 0 0 0 10px rgba(14, 165, 233, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
    }
}

/* Scroll reveal: replaces framer-motion's initial / whileInView / viewport-once behavior */
.reveal {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-fade-down {
    transform: translateY(-20px);
}

.reveal-fade {
    transform: translateY(0);
}

.reveal-up {
    transform: translateY(20px);
}

.reveal-scale {
    transform: scale(0.9);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
