/* ═══════════════════════════════════════════════
   CYBERSPEED — Animations
   Keyframes and micro-interactions
   ═══════════════════════════════════════════════ */

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

@keyframes pulse-text {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.7;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

@keyframes glow-breathe {

    0%,
    100% {
        filter: drop-shadow(0 0 20px rgba(var(--neon-cyan-rgb), 0.15));
    }

    50% {
        filter: drop-shadow(0 0 40px rgba(var(--neon-cyan-rgb), 0.3));
    }
}

@keyframes neon-flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        text-shadow:
            0 0 7px rgba(var(--neon-cyan-rgb), 0.6),
            0 0 10px rgba(var(--neon-cyan-rgb), 0.4),
            0 0 21px rgba(var(--neon-cyan-rgb), 0.2);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
    }
}

@keyframes spin-sweep {
    from {
        transform: rotate(0deg);
    }

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

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes border-trace {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ── Gauge Breathe ── */
.gauge-svg {
    animation: glow-breathe 4s ease-in-out infinite;
}

/* ── Stat card staggered entry ── */
.stat-card {
    animation: slide-up 0.5s ease backwards;
}

.stat-card:nth-child(1) {
    animation-delay: 0.1s;
}

.stat-card:nth-child(2) {
    animation-delay: 0.15s;
}

.stat-card:nth-child(3) {
    animation-delay: 0.2s;
}

.stat-card:nth-child(4) {
    animation-delay: 0.25s;
}

.stat-card:nth-child(5) {
    animation-delay: 0.3s;
}

.stat-card:nth-child(6) {
    animation-delay: 0.35s;
}

/* ── Recording indicator pulse ── */
.trip-btn-stop .trip-btn-icon {
    animation: pulse-dot 1s ease infinite;
    color: var(--neon-red);
}